1 Thing A Week 1 Thing
A Week

Progressive Enhancement FTW!

Week 230.0 — 21st March '22

I've long been a champion of Progressive Enhancement as an approach for anything on the web, so no surprise that I was a huge fan of this tweet from Chris Heilmann:

Around a decade ago, it seemed like this approach was slowly fading away. The heavy lifting was moving towards the browser as we saw a clearer divide appear between the front-end and the back-end.

I personally blame whoever took JavaScript and thought it would make a good back-end. NodeJS is an awful solution in my mind. In some ways it accelerated the need for more scalable architecture for all sorts of languages but the whole NPM approach has never sat right with me.

A recent example that sits in my mind is being asked to look at a junior developer's project only to find that I had been sent 140MB for a single page web app that was little more than a glorified address book.

One hundred and forty. This was all down to dependencies that were inherited from following tutorials and instructions so it continues to make me wonder exactly what managing of packages is going on in the world of NPM?

What is progressive enhancement?

Back to the topic in hand, the article that Chris linked to has this to say:

Progressive enhancement means that you add functionality to the things you build in layers.

Pretty precise, although I come from a time where it was not uncommon for JavaScript to be disabled in the browser so my own definition would be:

Progressive enhancement means that you add richer and more dynamic functionality when as required if the browser can handle it.

I don't see why this should have changed at all in the past 10 years. Forget the second half of my sentiment. It doesn't matter if your browser has JavaScript available or not, what matters is speed. If you can render most of the page and serve that to your users and then hydrate your page with richer functionality, then the experience will feel faster. You also remove the unknown of what resources are available to the user.

From that same Go Make Things post:

Myth: PE is only for people who disable JS on purpose, and you shouldn’t do that.
JavaScript fails about 1 percent of the time. Most of those failures are not people deliberately turning it off (though there are valid reasons to do so). File errors cause JS failures. CDNs go down. Ad blockers flag a file incorrectly. Overzealous corporate firewalls block your file.

Forget sending chunks and chunks and chunks of JavaScript, just send the page in as complete a state as possible. CDN down? No problem, when a link is clicked you will just request a page from the server that will try to hydrate on page load.

For anything I build myself, I do what I can to take a Progressive Enhancement approach but it feels like a novelty on the web today. React and Vue seem to be dominant in the way we deliver single-page apps now.

If you choose to go all-in on a JavaScript framework, then do what you can to minimise it's footprint. The web already has an obesity crisis and there's no excuse for anyone to be making it worse.

In some ways, these frameworks have pushed the boundaries and forced JavaScript to evolve a lot faster than it was able to before. It's also nice to see that Progressive Enhancement is being talked about as the right approach rather than as if it's some out-of-date technique.

Sometimes feels like Tailwind, Bootstrap and other frameworks have are a similar 'threat' to CSS. I really enjoy building interfaces and most of all I enjoy writing pure CSS. It's not that it's hard to do or understand, there's just a lot of nuance and once you get your head around it's another area in which you can really reduce your footprint by only doing what you need to do.

Update

As if to highlight my distrust in NPM, take a look at what happened with the npm-ipc package recently for those that are identified as being based in Russia.

More from 1 Thing A Week
« Apple unveils M1 Ultra I thought I knew HTML pretty well, but I still have a lot to learn Raising money for MIND at magLabs »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 230.4 – Thursday
    1. CNC Machined V8 Aluminum Engine Block Pen Holder   $129+ Grant Takara on kickstarter.com
    2. Why there's no one inside this Spider-Man suite Vox on youtube.com
  2. 230.5 – Friday
    1. If life were like web design Webflow on youtube.com

Jump to notable items for Week #229, Week #231 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit