Earlier this year, I helped a colleague setting up a solution, I'd worked on two years ago.
It was a "standard" webpack-setup, but the build failed, and she asked for my help.
I couldn't build the solution either. Many of the webpack-plugins had changed completely, and needed new configuration-code.
npm audit fix also made sure some insecure dependencies were updated, which created further build-errors.
It took four hours to make the solution "buildable" again. I don't know how long it took her to do the simple CSS-fix, she had to do, but probably less than four hours!
This year, for all my own, small "hobby-projects", I ditched "the modern build" and went for something classic, but — in a sense — more modern approach:
I split my JavaScript into multiple "micro" modules: a bunch of very small mjs-files. I created two folders: one with "common"-functions, and one with "global consts". Example: "isTouch" or "scrollPosition" — small pieces, I use across multiple projects)
I used CSS Custom Properties for everything, and found out, that in most cases the final output was significantly smaller than .scss-files, and "live-updatable" from JavaScript (using
.setProperty()).
As an example, look at these range sliders:
All the properties are defined as CSS Custom Properties, so in order to completely change the look and feel of a slider, I just update a few variables.
The HTML was either rendered inline or from template literals in JavaScript.
I setup the free version of Cloudflare for DNS (and caching). Here, I enabled HTTPS, HTTP2/3 as well as minification!
That's right, minified JavaScript, CSS and HTML without a build-tool! But Cloudflare has many more tools up its sleeve: You can set up workers handling cache on a granular level, or setup secure headers, if you want an A+ in security at securityheaders.com.
Bonus: If I open any of these projects a couple of years from now, they will just work! No need to fix webpack or npm-issues.
And the result?
Super-fast sites with these beautiful, green "100%" circles in Lighthouse, as you see in the cover-image for this article. The image is from a huge test-page with thousands of DOM-nodes.
I'm fully aware this will never work on a huge project with multiple developers, but I think it's important to know, that the web is still just HTML, CSS and JavaScript — and how important it is to know these really well.
Yes, there will be buzzwords and trends like MACH architecture, JamStack etc., but websites are still just HTML, CSS and JavaScript beneath it all!
Thanks for reading!
Top comments (0)