Why we teach our students progressive enhancement | Blog Cyd Stumpel
Progressive enhancement is about building something robust, that works everywhere, and then making it better where possible.
A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.
Progressive enhancement is about building something robust, that works everywhere, and then making it better where possible.
An excellent example of an HTML web component from Eric:
Extend HTML to do things automatically!
He layers on the functionality and styling, considering potential gotchas at every stage. This is resilient web design in action.
Put the kettle on. This is a long one!
Matt takes a trip down memory lane and looks at all the frontend tools, technologies, and techniques that have come and gone over the years.
But this isn’t about nostalgia (although it does make you appreciate how far we’ve come). He’s looking at whether anything from the past is worth keeping today.
Studying past best practices and legacy systems is crucial for understanding the evolution of technology and making informed decisions today.
There’s only one technique that makes the cut:
After discussing countless legacy approaches and techniques best left in the past, you’ve finally arrived at a truly timeless and Incredibly important methodology.
This is clever: putting CSS inside a noscript element to hide anything that requires JavaScript.
Practice Progressive Enhancement.
Build first and foremost with forgiving technologies, declarative technologies, and forward and backward compatible coding techniques.
All content should be readable without scripting.
If it’s worth building on the web, it’s worth building it robustly, and building it to last.
In which I find a tagline for Web Day Out and a tagline for React.
Some handy tips courtesy of Chris Ferdinandi.
How I switched to high-resolution maps on The Session without degrading performance.
Having fun with view transitions and scroll-driven animations.
Naming custom elements, naming attributes, the single responsibility principle, and communicating across components.