A beautiful interactive visualisation of every paper published in Nature.
This is a really nice introduction to CSS transitions with interactive demos you can tinker with.
This is a truly wonderful web page! It’s an explanation from first principles of how cameras and lenses work.
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.
This is a nifty visual interactive explainer for the language of CSS—could be very handy for Codebar students.
A useful resource for CSS grid. It’s basically the spec annoted with interactive examples.
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.
Emergence and complex systems, explained with interactive diagrams.
Take an interactive tour of our solar system’s many moons.
A cornucopia of interactive visualisations. You control the horizontal. You control the vertical. Networks, flocking, emergence, diffusion …it’s all here.
This is an utterly fascinating interactive description of network effects, complete with Nicky Case style games. Play around with the parameters and suddenly you can see things “going viral”:
We can see similar things taking place in the landscape for ideas and inventions. Often the world isn’t ready for an idea, in which case it may be invented again and again without catching on. At the other extreme, the world may be fully primed for an invention (lots of latent demand), and so as soon as it’s born, it’s adopted by everyone. In-between are ideas that are invented in multiple places and spread locally, but not enough so that any individual version of the idea takes over the whole network all at once. In this latter category we find e.g. agriculture and writing, which were independently invented ~10 and ~3 times respectively.
Play around somewhere and you start to see why cities are where ideas have sex:
What I learned from the simulation above is that there are ideas and cultural practices that can take root and spread in a city that simply can’t spread out in the countryside. (Mathematically can’t.) These are the very same ideas and the very same kinds of people. It’s not that rural folks are e.g. “small-minded”; when exposed to one of these ideas, they’re exactly as likely to adopt it as someone in the city. Rather, it’s that the idea itself can’t go viral in the countryside because there aren’t as many connections along which it can spread.
This really is a wonderful web page! (and it’s licensed under a Creative Commons Zero licence)
We tend to think that if something’s a good idea, it will eventually reach everyone, and if something’s a bad idea, it will fizzle out. And while that’s certainly true at the extremes, in between are a bunch of ideas and practices that can only go viral in certain networks. I find this fascinating.
Maybe server-side-rendered HTML would actually be faster. Consider limiting the use of client-side frameworks to pages that absolutely require them.
Marcin built this lovely little in-browser tool to demonstrate how segmented type displays work at different sizes.
The latest explainer/game from Nicky Case is an absolutely brilliant interactive piece on small world networks.
Hot nuclear blasts in your area.
(like Eric’s HYDEsim)
Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.
Guidelines to consider before adding swooshy parallax effects:
- Respect the Physics
- Remember that We Call Them “Readers”
- Ask for Consent
Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?
The fascinating history of interactive fiction from adventure game to hypertext.
The split between parsers and hyperlinks reminds me of different approaches to chatbots: free text entry vs. constrained input.