The point of this post is to show how nicely container queries can play with web components, but I want to also point out how nice the design of the web component is here: instead of just using an empty custom element, Max uses progressive enhancement to elevate the markup within the custom element.
The more I consume content in reading apps, the more I am reminded of the importance and the power of progressive enhancement as a strategy to create resilient and malleable experiences that work for everyone, regardless of how they choose to consume our content.
Top stuff from Sara here!
We have a tendency to always make an assumption about how our readers are reading our content—probably in the browser, with our fancy styles applied to it. But if we make a habit out of thinking about the Web in layers and CSS as an enhancement on top of the content layer, then we can start optimizing and enhancing our users’ reading experiences regardless of their context.
Thinking about the different ways in which users access the Web only shines light on the importance of a progressively enhanced approach to building for the Web. The more we think about the Web in layers and try to improve the experience of one layer before moving to the next, the more resilient experiences we can create. That’s what the essence of progressive enhancement is about.
Using progressive enhancement means your users will be able to do what they need to do if any part of the stack fails.
What a terrific short guide to sensible web development!
- Start with HTML
- Using interactive elements
- Adding the extras
- Building more complex services
- Testing your service
- Case studies and related guides
I enjoyed this conversation with Sophia (our chat starts around the 11 minute mark) prompted by Resilient Web Design.
Here’s the video of the talk I gave at the Web Stories conference back in February.
Getting a tattoo. brb
Six years old. Still very astute. Still very true.
I agree with this approach.
What’s important is that you test it with real users… and stop using hover menus.
This is a really interesting take on the intersection between accessibility and progressive enhancement (which I always felt was there, but this expresses it well):
Accessibility aims to optimize an experience across a spectrum of user capabilities. Progressive enhancement aims to optimize an experience across a spectrum of user agent capabilities.
Indeed, if you broaden the definition of “user agent” to include a user’s physiology, I think the concepts become nearly identical.
I love the story that Terence relates here. It reminds me of all the fantastic work that Anna did documenting game console browsers.
Heydon’s newest short video is right up my alley.
I like this proposal for a declarative Ajax pattern. It’s relatively straightforward to polyfill, although backward-compatibility is an issue because of existing browser behaviour with the
If you make an improvement, it’s not going to be to the industry as a whole — it’ll be specific. And actually improvements have always been specific; it’s just that the industries have since multiplied and narrowed. Inventors once made drops into a puddle, but the puddle then expanded into an ocean. It doesn’t make the drops any less innovative.
This is great! The folks at Basecamp are releasing the front-end frameworks they use to build Hey. There’s Turbo—the successor to Turbolinks:
It offers a simpler alternative to the prevailing client-side frameworks which put all the logic in the front-end and confine the server side of your app to being little more than a JSON API.
With Turbo, you let the server deliver HTML directly, which means all the logic for checking permissions, interacting directly with your domain model, and everything else that goes into programming an application can happen more or less exclusively within your favorite programming language. You’re no longer mirroring logic on both sides of a JSON divide. All the logic lives on the server, and the browser deals just with the final HTML.
Yes, this is basically Hijax (which is itself simply a name for progressive enhancement applied to Ajax) and I’m totally fine with that. I don’t care what it’s called when the end result is faster, more resilient websites.
Compare and contrast the simplicity of the Hotwire/Turbo approach to the knots that React is tying itself up in to try to get the same performance benefits.
This is a truly wonderful web page! It’s an explanation from first principles of how cameras and lenses work.
Then you realise that every post ever published on this personal site is equally in-depth and uses the same content-first progressive enhancement approach.
This video of Chris’s presentation is well worth watching:
The web in 2020 is a bloated and over-engineered mess! Many modern web development “best practices” are making the web worse. This thought-provoking talk shares ideas on how to fix the problem as it explores an alternate set of best practices.
Van11y (for Vanilla-Accessibility) is a collection of accessible scripts for rich interfaces elements, built using progressive enhancement and customisable.
This in an intriguing promise (there’s no code yet):
A PWA typically requires writing a service worker, an app manifest and a ton of custom code. Progressier flattens the learning curve. Just add it to your html template — you’re done.