Why the super rich are inevitable
The interactive widgets embedded in this article are excellent teaching tools!
Link tags: active
50
An Interactive Guide to Flexbox in CSS
This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!
Color and Contrast.com
A lovely website (or web book?) dedicated entirely to colour contrast, complete with interactive illustrative widgets.
A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.
Pizza Exchange Rate | FlowingData
This is a story about pizza and geometry.
The interactive widget here really demonstrates the difference between showing and telling.
How normal am I?
A fascinating interactive journey through biometrics using your face.
Patterns | APG | WAI | W3C
This is a terrific resource! A pattern library of interactive components: tabs, switches, dialogs, carousels …all the usual suspects.
Each component has an example implementation along with advice and a checklist for ensuring its accessible.
It’s so great to have these all gathered together in one place!
A visual introduction to machine learning
I like the split-screen animated format for explaining this topic.
petite-vue - npm
An interesting alternative to using the full Vue library, courtesy of Vue’s creator:
petite-vueis an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for “sprinkling” small amount of interactions on an existing HTML page rendered by a server framework.
Simple things are complicated: making a show password option - Technology in government
This is a great deep dive into a single component, a password toggle in this case. It shows how assumptions are challenged and different circumstances are considered in order to make it truly resilient.
Nature 150 Interactive
A beautiful interactive visualisation of every paper published in Nature.
CSS transitions and hover animations, an interactive guide
This is a really nice introduction to CSS transitions with interactive demos you can tinker with.
Cameras and Lenses – Bartosz Ciechanowski
This is a truly wonderful web page! It’s an explanation from first principles of how cameras and lenses work.
At its most basic, it uses words which you can read in any browser. It also uses images so if your browser supports images, you get that enhancement. And it uses interactive JavaScript widgets so that you get that layer of richness if your browser supports the technology.
Then you realise that every post ever published on this personal site is equally in-depth and uses the same content-first progressive enhancement approach.
Quantum to Cosmos
Well, this is rather wonderful! It’s like an interactive version of the Eames’s Powers Of Ten.
CSS Vocabulary
This is a nifty visual interactive explainer for the language of CSS—could be very handy for Codebar students.
Grid Cheatsheet
A useful resource for CSS grid. It’s basically the spec annoted with interactive examples.
Where did the focus go? | Amber’s Website
Amber documents a very handy bit of DOM scripting when it comes to debugging focus management: document.activeElement.
Reef
This micro libarary does DOM diffing in native JavaScript:
Reef is an anti-framework.
It does a lot less than the big guys like React and Vue. It doesn’t have a Virtual DOM. It doesn’t require you to learn a custom templating syntax. It doesn’t provide a bunch of custom methods.
Reef does just one thing: render UI.
The Map of Mathematics | Quanta Magazine
An absolutely gorgeous piece of hypermedia!
Data visualisations and interactive widgets enliven this maze of mathematics. Dig deep—you may just uncover the secret passages that join these concepts together.
Complexity Explained
Emergence and complex systems, explained with interactive diagrams.
The Atlas of Moons
Take an interactive tour of our solar system’s many moons.