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.
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
Custom Asidenotes – Eric’s Archived Thoughts
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.
Software can be finished - Ross Wintle
There’s quite a crossover between resilience and longevity:
- Understand the requirements
- Keep scope small and fixed
- Reduce dependencies
- Produce static output
- Increase Quality Assurance
A Web Component UI library for people who love HTML | Go Make Things
I’m obviously biased, but I like the sound of what Chris is doing to create a library of HTML web components.
Hiding elements that require JavaScript without JavaScript :: dade
This is clever: putting CSS inside a noscript element to hide anything that requires JavaScript.
Related posts
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.
Progressive disclosure defaults
If you’re going to toggle the display of content with CSS, make sure the more complex selector does the hiding, not the showing.