Alistair Davidson / validation-enhancer · GitLab
Here’s another nice progressive web component for your forms, this time for showing error messages.
World Wide Web, Not Wealthy Western Web (Part 2) – Smashing Magazine
The second part of Bruce’s excellent series begins by focusing on the usage of proxy browsers around the world:
Therefore, to make websites work in Opera Mini’s extreme mode, treat JavaScript as an enhancement, and ensure that your core functionality works without it. Of course, it will probably be clunkier without scripts, but if your website works and your competitors’ don’t work for Opera Mini’s quarter of a billion users, you’ll get the business.
But how!? Well, Bruce has the answer:
The best way to ensure that everyone gets your content is to write real, semantic HTML, to style it with CSS and ensure sensible fallbacks for CSS gradients, to use SVG for icons, and to treat JavaScript as an enhancement, ensuring that core functionality works without scripts. Package up your website with a manifest file and associated icons, add a service worker, and you’ll have a progressive web app in conforming browsers and a normal website everywhere else.
I call this amazing new technique “progressive enhancement.”
You heard it here first, folks!
Related links
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.
Don’t judge a book by its cover
Some neat CSS from Tess that’s a great example of progressive enhancement; these book covers look good in all browsers, but they look even better in some.
Dynamic Datalist: Autocomplete from an API :: Aaron Gustafson
Great minds think alike! I have a very similar HTML web component on the front page of The Session called input-autosuggest.
Related posts
Installing web apps
BeforeInstallPromptEvent vs. navigator.install
Streamlining HTML web components
Some handy tips courtesy of Chris Ferdinandi.
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.