HVC

So, I am currently working on a project called Dashen-Tour. It's a single page full stack web app and the stack I am using is HVC for the Frontend. For the backend it's Node with Express and SQLite for the database. Haven't heard of HVC ? let me take you up to speed then 😊.
- H -> HTML
- V -> VanillaJS (ES6)
- C -> CSS
I think you are up to speed now.

The reason I chose VanillaJS over all the frameworks is because I wanna know it more. What it has to offer and also I want to explore how frameworks like React, Svelte, Solid and Vue are built from scratch using the same tool I am using -- **just a normal JavaScript**.

I want it to have 0 dependencies except parcel which lets me bundle the JavaScript. As you can see, a blank html canvas to craft your art.

What do I need for a modern web app development ?
- **Router - since this is a single page app I need a router that repaints the html when the page changes.
- **State Management** - there are global states like authentication and authorization and also local state of the pages. I tried to use a redux like approach which I will explain later.
- **CSS linking** - I haven't quite solved this till now. I made the CSS files based on the page so I have a CSS file for a page. Changing the CSS files based on the routing works and I already implemented it but this creates a problem with parcel.
- **DOM diffing algorithm** - updating the DOM based on the changes on the state. This is a huge pain in the ass and I spent a week trying to figure this out on my own.

I have been tackling each of these things one by one. Now, I am working on the last bullet point. It's hella difficult. We should thank React for making this none of our business 😂.

While working in this project I came across these things . . .
- **First just make it work** : I spent so much time worrying about my folder structure, how I structure my code and everything. But first it has to work right? yeah. So, make it work then you will make it a better looking code.
- **Try to implement it yourself** : I spent so much time again😂 trying to find the best DOM diffing algorithm but they haven't satisfied my need. I always believe there is something build by someone that will work but adding peoples code to a project you created from scratch is very tough. So, by starting from the smaller problem try to solve it yourself or search the solutions for these smaller problems. This is better. Which leads me to the third point
- **Divide and Conquer** : What I assumed to be a gigantic bug or problem becomes very trivial once I start approaching it by solving a smaller but similar problem.
- **Try to approach each day differently** : because of the internet blackout and my deep አለማወቅ my days are very different. One day I might know what I am going to do for that day but there is a bug to be fixed and I don't know how to fix it. On the other day I know nothing about what I am doing. Differentiating days and understanding them makes me use my time properly for real.

I will show you how I implemented the router on my next blog. This one was just a reflection for myself about what I am doing.