The end of responsive images - Piccalilli
Hallelujah! Support for sizes="auto" is finally landing in Firefox and Safari! Praise be!
Progressively Enhanced Builds - Jim Nielsen’s Blog
Rather than thinking, “how do I combine a bunch of disparate content, templates, and tooling into a functioning website?”, you might think “how do I start at a functioning website with content and then use templates and build tooling to enhance it?”
I think Jim is onto something here. The more dependencies you have in your build process, the likelier it is that over time one of them will become a single point of failure. A progressive enhancement approach to build tools means you’d still be able to launch your site (even if it’s not in its ideal state).
I want to be able to view, edit, and if need be ship a website, even if the build process fails. In essence, if the build does fail I can still take all the source files, put them on a server, and the website remains functional (however crude).
Related links
HTML Video Poster Image: Enable Responsive Images and ALT Text for Poster by allowing a child IMG Element (with an optional Picture Element wrapper) to Control the Video Poster Image · Issue #10378 · whatwg/html
This is such a brilliant idea! Why not allow an img element inside video element in order to provide a responsive, accessible poster image?
Alistair Davidson / validation-enhancer · GitLab
Here’s another nice progressive web component for your forms, this time for showing error messages.
Never Lose Form Progress Again :: Aaron Gustafson
Here’s an excellent progressive web component from Aaron—wrap a custom element around your exising form and your good to go:
At its core,
form-saveris a small web component that wraps a form, keeps an eye on it, stores values inlocalStorage, and restores them when the page loads again. Better yet, it clears out saved data after a successful submission so you’re not accidentally resurrecting stale information the next time someone stops by.
Progressive Web Components | Ariel Salminen
I’m slapping my forehead—progressive web components is a perfect name for what I’ve been calling HTML web components. Why didn’t I think of that?
A Progressive Web Component is a native Custom Element designed in two layers: a base layer of HTML and CSS that renders immediately, without JavaScript, and an enhancement layer of JavaScript that adds reactivity, event handling, and more advanced templating.
Related posts
Testing browser support for `focusgroup`
A bit of feature detection for a proposed new HTML attibute.
Installing web apps
Here’s an HTML web component you can use if you’re participating in the origin trial for the Web Install API.
Reasoning
In which I find a tagline for Web Day Out and a tagline for React.
Streamlining HTML web components
Some handy tips courtesy of Chris Ferdinandi.
Making the new Salter Cane website
A redesign with modern CSS.