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.
Keeping it simple: coding a carousel by Christian Heilmann
I like this nice straightforward approach. Instead of jumping into the complexities of the final interactive component, Chris starts with the basics and layers on the complexity one step at a time, thereby creating a more robust solution.
If I had one small change to suggest, maybe aria-label might work better than offscreen text for the controls …as documented by Heydon.
Related links
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.
You can use Web Components without the shadow DOM
So what are the advantages of the Custom Elements API if you’re not going to use the Shadow DOM alongside it?
- Obvious Markup
- Instantiation is More Consistent
- They’re Progressive Enhancement Friendly
Request for developer feedback: customizable select | Blog | Chrome for Developers
I’m very glad to see that work has moved away from a separate selectmenu element to instead enhancing the existing select element—I could never see an upgrade path for selectmenu, but now there are plenty of opportunities for progressive enhancement.
HTML Web Components Can Have a Little Shadow DOM, As A Treat | Scott Jehl, Web Designer/Developer
This is an interesting thought from Scott: using Shadow DOM in HTML web components but only as a way of providing sort-of user-agent styles:
providing some default, low-specificity styles for our slotted light-dom HTML elements while allowing them to be easily overridden.
Related posts
Browser support
Here’s Clearleft’s approach to browser support. You can use it too (it’s CC-licensed).
Speculation rules
A performance boost in Chrome.
Baseline progressive enhancement
If a browser feature can be used as a progressive enhancement, you don’t have to wait for all browsers to support it.
Progressive disclosure with HTML
The `details` element is like the TL;DR of markup.
Overloading buttons
Can you have too much semantics?