We asked web builders that we admire the same question: What is one thing you learned about building websites this year?
Here’s what they told us.
We would like to thank our ❥ sponsor Automattic for making this site possible. They make many great software products that we use, like Jetpack, WooCommerce, and WordPress.com.
In 2020, I rediscovered the enjoyment of building a website with plain ol’ HTML, CSS, and JavaScript — no transpilin’, no compilin’, no build tools other than my hands on the keyboard.
Seeing as my personal brand could be summed up “so late to the game that the stadium has been demolished,” I decided to start a podcast in 2020. It’s the podcast of my agency, Clearleft, and it has been given the soaringly imaginative title of The Clearleft Podcast. I’m really pleased with how the first season turned out. I’m also really pleased with the website I put together for it.
The website isn’t very big, though it will grow with time. I had a think about what the build process for the site should be and after literally seconds of debate, I settled on a build process of none. Zero. Nada.
This turned out to be enormously liberating. It felt very hands-on to write the actual HTML and CSS that will be delivered to end users, without any mediation. I felt like I was getting my hands into the soil of the site.
CSS has evolved so much in recent years—with features like calc() and custom properties—that you don’t have to use preprocessors like Sass. And vanilla JavaScript is powerful, fully-featured, and works across browsers without any compiling.
Don’t get me wrong—I totally understand why complicated pipelines are necessary for complicated websites. If you’re part of a large team, you probably need to have processes in place so that everyone can contribute to the codebase in a consistent way. The more complex that codebase is, the more technology you need to help you automate your work and catch errors before they go live.
But that setup isn’t appropriate for every website. And all those tools and processes that are supposed to save time sometimes end up wasting time further down the road. Ever had to revisit a project after, say, six or twelve months? Maybe you just want to make one little change to the CSS. But you can’t because a dependency is broken. So you try to update it. But it relies on a different version of Node. Before you know it, you’re Bryan Cranston changing a light bulb. You should be tweaking one line of CSS but instead, you’re battling entropy.
Whenever I’m tackling a problem in front-end development, I like to apply the principle of least power: choose the least powerful language suitable for a given purpose. A classic example would be using a simple HTML button element instead of trying to recreate all the native functionality of a button using a div with lashings of ARIA and JavaScript. This year, I realized that this same principle applies to build tools too.
Instead of reaching for all-singing all-dancing toolchain by default, I’m going to start with a boring baseline. If and when that becomes too painful or unwieldy, then I’ll throw in a task manager. But every time I add a dependency, I’ll be limiting the lifespan of the project.
My new year’s resolution for 2021 will be to go on a diet. No more weighty node_modules folders; just crispy and delicious HTML, CSS, and JavaScript.
The most flexible build tool around for JavaScript is webpack, and Frontend Masters has a complete learning course on it from webpack core team member Sean Larkin.
Amen.
One problem is that so many cool things (like libraries, components, etc.) nowadays use and, therefore, drag along with them all these galaxies of dependencies which you might be forced at least to read about and understand a bit. Like… ‘Oh, that’s a nice, little, lightweight, starter code base for my site! I think I wanna use it. Maaan… that’s SASS… All I wanted was CSS…’
I feel the same!
That said – I’ve regained my joy of front-end coding when I discovered svelte.
Sounds like Hugo is the solution. A single binary provides enough power to replace entire tech stacks and servers.
HTML+CSS+JS with Markdown or HTML for content source. My personal mod to this is to use TailwindCSS and AlpineJS for style and JS goodness. Also, I just referred to the Bryan Cranston scene this morning about 2 hours before seeing your article, someone is listening.
CSS and vanilla Javascript can get you so much of the way in one-person projects it’s beautiful. Onwards into the buildstep free future! . . . Except maybe the lure of Svelte will keep me installing node modules for a while longer
Amen.
One more thing: Avoiding long dependency chains isn’t just good for staying out of dependency hell, it’s also a godsend for users with slow connections. On slow WiFi, many pages with “modern” build pipelines take 10+ seconds to load.
If you hate bloated sites, you’ll probably like this page https://idlewords.com/talks/website_obesity.htm
Yes. A billion times: yes, please. So called modern web development absolutely ruined my job for me. So much has been foisted on me by industry groupthink, but many of those tools I willing adopted because at first I felt the features were worth it. A few years later, I realized I didn’t create user experiences anymore. I just fought with tools and dependency integrations. I would give almost anything to go back.
I so feel this right now. I’ve been struggling for weeks on a new frontend methodology to replace the old angularjs I’ve been using. All the react, vue, typescript, compiling, transpiling, troubleshooting code I didn’t actually write has me so frustrated. Back to basics with pure html, css, and tiny JS libraries I can directly link to via cdn for a bit of fancy stuff seems to be what I’ve been looking for.
Sounds like heaven.
I’m a front-end web dev.
Given that the final outcome of our work is HTML, CSS and JavaScript, what on Earth am I doing battling with Docker and Azure?!
Feel good to hear that
How do you maintain elements suchs as navigation bars? So you won’t havr to manually modify these for each page individually?
Thanks.
That’s great for a single page website. Once you have two pages you are repeating yourself and having to make changes to multiple files now for the same update. A process for at least handling partial templates is required for most websites.
And the same goes for server side scripting.
I wonder if this is really the experience that folks are having these days? Sure, I’ve been burned more than once, assuming a project from a few years ago would be easy to update, but now with pretty much zero or very little config for webpack/rollup, is that still really a problem?
@Jeremy Keith exactly
Finally, I have found some more dinosaurs out here. We have a team of 8 people who are always coming up with newer and better ideas and libraries. In the beginning I everything is fun, but after a period of time, all the dependencies en updates are killing my joy in the work. These tools tend to take more time then they save me sometimes. I’m glad every once in a while a small project can be done with some good old HTML, CSS, JS (and some PHP).
So true!
I totally agree!
I even took the time during covid quarantines to write 2 open source projects that rely only on proxies, thus leaving the JS code completely vanilla.
The docs are a work in progress, but you can already use it, for example for 2 way binding, without changing your current project’s native code.
In the future you are not bounded to my libraries and u can ditch them at any point without breaking your code.
https://www.noaml.in/projects
You may write comments in Markdown thanks to Jetpack Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (“`) with double new lines before and after. All comments are held for moderation. Be helpful and kind and yours will be published no problem.
The related posts above were algorithmically generated and displayed here without any load on my server at all, thanks to Jetpack.
CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That’s a good thing! I’ve used WordPress since day one all the way up to v17, a decision I’m very happy with. I also leverage Jetpack for extra functionality and Local for local development.
*May or may not contain any actual “CSS” or “Tricks”.
CodePen is a place to experiment, debug, and show off your HTML, CSS, and JavaScript creations.
CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the business, with a local development tool to match.
ShopTalk is a podcast all about front-end web design and development.
