Yesterday, I wrote about how web development can literally kill people. At the end of the article, I wrote…
Build things that work, even when parts of it break.
A reader wrote in to ask how you actually do that, so that’s what we’re going to talk about today.
Let’s dig in!
Years ago, I saw a talk from Jeremy Keith at Artifact Conf where he talked about building fault tolerance into the web.
Jeremy discussed the importance of building things in layers, with the minimum viable functionality built on the most reliable part of the stack possible. Then, you layer in additional functionality as its supported.
If the most advanced stuff fails, the basic version still works.
In web development, we call this progressive enhancement.
Start with HTML
A few weeks ago, I mentioned that my best advice to new developers is to start with HTML.
Let’s look at some examples.
- Accordions. You can create a simple show/hide disclosure component using the
summaryelements, and enhance it into an accordion with a few lines of vanilla JS.
- Fallback/Loading Content. If you’re pulling data in from an API, you can provide alternative content while you’re waiting for it to load. For example, if you get and display a list of repos from a GitHub account, you can start with a link to the account, and replace it once (or if) the API data loads.
scroll-behaviorproperty lets you animate scrolling to anchor links.
Progressive enhancement is for everyone
Progressive enhancement doesn’t have to be more work.
Often, it’s as simple as choosing a more approach set of HTML elements or a more resilient approach than what you would do instead. It’s actually less work a shocking large amount of the time!
It’s not just for older browsers.
New browsers have issues, too. Even in evergreen browsers, new features are not evenly or universally implemented.
It’s not a fringe things.
Big companies use progressive enhancement—most notably, GitHub.
Build things that work, even when parts of them break.