Why you probably can't finish a frontend project

#webdev #frontend #learning #beginners

In a paper written by Donald Knuth, there is a famous quote that says:

"Programmers waste enormous amounts of time thinking about, or > worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%"

This is something that I have fallen victim to too many times when I am writing frontend, for some reason javascript frontend tooling has gotten too complex and people that are newer to frontend are most likely will be confused. Where do they start?

Let's say for example that you are a person who wants to learn web development, cool. You watch a 1-hour video on HTML, learn the basics of HTML, and create a text-based webpage and maybe even some forms and some built-in interactive elements (Modern HTML has some interactive elements that once needed a component library to create, the best example is the dialog component).

Then you learn all about CSS, you also watch a 1-hour video of it. After watching it, you realized that you can make your webpage prettier! You're impressed about it and decided to add colors to your text and use your favorite font that you use in your graphic design app, it's impressive and you never thought that you can make something, now you are hyped that you can make the next Facebook, the next Google, Twitter, etc.

But you realized something...

The webpage that you created is missing actual functionality, what you just created is a simple but colorful text with some interaction in it, but nothing is happening. You're not uploading anything, you're not adding text dynamically. It's missing dynamic data!

So you find out how it works, investigate it then you found out every interaction that occurs in modern web applications is all written in JavaScript!

You look up a YouTube course about JavaScript, then you're surprised that the difference in the length between a full tutorial, and a deep dive of a JavaScript tutorial contains about more than 1-hour, and if there is an exact 1-hour tutorial about JavaScript, it wouldn't suffice on how much it could cover the language because there is so much to learn first.

You think to yourself:

"This is boring, and I haven't even created something cool yet!"

Then you learn all about frontend frameworks.

So you now chose a frontend framework to learn and build your application, but you didn't learn much about HTML, CSS and JavaScript or enough to competently know what is being added by your frontend framework and what is vanilla JavaScript.

You go ahead and build, and add more packages that glue together your application, then you benchmark it using lighthouse then lo and behold.

Your lighthouse scores are all red.

Why did this happen? I thought [Frontend Framework of Choice] will make my app run fast?