Hiding elements that require JavaScript without JavaScript :: dade
This is clever: putting CSS inside a noscript element to hide anything that requires JavaScript.
Web developers: remarkably untalented and careless? – Baldur Bjarnason
I’d like to suggest that everybody in web dev point their dysfunctional novelty seeking (of which I suffer as well) in the direction of HTML and CSS. See how much can be done without JavaScript. It’s a lot! Then look at writing more lightweight JavaScript that’s layered on top of the HTML as enhancements. Because it’s an enhancement and not required for functionality, you can cut the line higher and use newer tech without worry.
See how refreshing that feels.
Related links
A pragmatic browser support strategy | Go Make Things
- Basic functionality should work on any device that can access the web.
- Extras and flourishes are treated as progressive enhancements for modern devices.
- The UI can look different and even clunky on older devices and browsers, as long as it doesn’t break rule #1.
mirisuzanne/track-list: Enhance a list of audio tracks with playlist controls
This is very nice HTML web component by Miriam, progressively enhancing an ordered list of audio elements.
Moving on from React, a Year Later
Many interactions are not possible without JavaScript, but that doesn’t mean we should look to write more than we have to. The server doing something useful is a requirement for building an interesting business. The client doing something is often a nice-to-have.
There’s also this:
It’s really fast
One of the arguments for a SPA is that it provides a more reactive customer experience. I think that’s mostly debunked at this point, due to the performance creep and complexity that comes in with a more complicated client-server relationship.
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.
Related posts
Making the new Salter Cane website
A redesign with modern CSS.
Progressively enhancing maps
How I switched to high-resolution maps on The Session without degrading performance.
Making the website for Research By The Sea
Having fun with view transitions and scroll-driven animations.
Browser support
Here’s Clearleft’s approach to browser support. You can use it too (it’s CC-licensed).
Applying the four principles of accessibility
Here’s how I interpret the top-level guidance in the Web Content Accessibility Guidelines.