Progressive enhancement brings everyone in - The History of the Web
This is a great history of the idea of progressive enhancement:
It is an idea that has been lasting and enduring for two decades, and will continue.
Progressive Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted
I really like Alex’s framing of best-of-breed progressively enhanced websites as “progressive apps” (although Bruce has some other ideas about the naming).
It’s a shame that the add-to-homescreen part isn’t standardised yet though.
Related links
If Not React, Then What? - Infrequently Noted
Put the kettle on; it’s another epic data-driven screed from Alex. The footnotes on this would be a regular post on any other blog (and yes, even the footnotes have footnotes).
This is a spot-on description of the difference between back-end development and front-end development:
Code that runs on the server can be fully costed. Performance and availability of server-side systems are under the control of the provisioning organisation, and latency can be actively managed by developers and DevOps engineers.
Code that runs on the client, by contrast, is running on The Devil’s Computer. Nothing about the experienced latency, client resources, or even available APIs are under the developer’s control.
Client-side web development is perhaps best conceived of as influence-oriented programming. Once code has left the datacenter, all a web developer can do is send thoughts and prayers.
As a result, an unreasonably effective strategy is to send less code. In practice, this means favouring HTML and CSS over JavaScript, as they degrade gracefully and feature higher compression ratios. Declarative forms generate more functional UI per byte sent. These improvements in resilience and reductions in costs are beneficial in compounding ways over a site’s lifetime.
You can use Web Components without the shadow DOM
So what are the advantages of the Custom Elements API if you’re not going to use the Shadow DOM alongside it?
- Obvious Markup
- Instantiation is More Consistent
- They’re Progressive Enhancement Friendly
JavaScript dos and donts @ Mu-An Chiou
Straightforward smart sensible advice that you can apply to any feature on a website.
Building a robust frontend using progressive enhancement - Service Manual - GOV.UK
Oh, how I wish that every team building for the web would use this sensible approach!
Related posts
Applying the four principles of accessibility
Here’s how I interpret the top-level guidance in the Web Content Accessibility Guidelines.
My approach to HTML web components
Naming custom elements, naming attributes, the single responsibility principle, and communicating across components.
Pickin’ dates
HTML web components for augmenting date inputs.
Hanging punctuation in CSS
A little fix for Safari.
Progressive disclosure defaults
If you’re going to toggle the display of content with CSS, make sure the more complex selector does the hiding, not the showing.