Why the super rich are inevitable
The interactive widgets embedded in this article are excellent teaching tools!
Link tags: explanation
32
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!
Nutshell: make expandable explanations
Nicky Case has made an implementation of Ted Nelson’s StretchText that works across different domains.
Understanding Layout Algorithms
Josh is great at explaining tricky concepts and here he’s really set himself a challenge: explaining layout modes in CSS.
A visual introduction to machine learning
I like the split-screen animated format for explaining this topic.
Designing Beautiful Shadows in CSS
This is a great tutorial—I just love the interactive parts that really help make things click.
Web Browser Engineering
It’s heavy on computer science, but this is a fascinating endeavour. It’s a work-in-progress book that not only describes how browsers work, but invites you to code along too. At the end, you get a minimum viable web browser (and more knowledge than you ever wanted about how browsers work).
As a black box, the browser is either magical or frustrating (depending on whether it is working correctly or not!). But that also make a browser a pretty unusual piece of software, with unique challenges, interesting algorithms, and clever optimizations. Browsers are worth studying for the pure pleasure of it.
See how the sausage is made and make your own sausage!
This book explains, building a basic but complete web browser, from networking to JavaScript, in a thousand lines of Python.
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.
Why you should hire a frontend developer - Technology in government
This is a really good description of the role of a front-end developer.
That’s front end, not full stack.
About Feeds | Getting Started guide to web feeds/RSS
Matt made this website to explain RSS to people who are as-ye unfamilar with it.
this vs that - What is the difference between ___ and ___ in the front-end development?
A handy reference for explaining the differences between confusingly similar bits of HTML, CSS, and JavaScript.
What is CSS Specificity? Sarah Chima - Front-End Developer
An excellent and clear explanation of specificity in CSS.
window.location Cheatsheet - DEV Community 👩💻👨💻
Everything you ever wanted to know about window.location in JavaScript, clearly explained.
How I’m teaching the kids coding for the web
I love how Remy explains front-end development to his kids:
The bones are the HTML. Each bone has a name, we call them tags (or elements).
…the skin and the paint on the skin, this is CSS.
Finally, the brain and behaviour, the way the website can be interacted with is using the third layer: JavaScript.
Selectors Explained
I can see this coming in very handy at Codebar—pop any CSS selector in here and get a plain English explanation of what it’s doing.
The CSS Cascade
This is a wonderful interactive explanation of the way CSS hierarchy works—beautiful!
Unraveling The JPEG
A deep, deep, deep dive into the JPEG format. Best of all, it’s got interactive explanations you can tinker with, a la Nicky Case or Bret Victor.
The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks
This article by Cassie is so, so good!
First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!
Best of all, I get to work with the super-smart developer who did all this.
How to get on the #indieweb!
As well as graciously hosting Indie Web Camp Berlin on the weekend at Mozilla’s offices, Yulia has also drawn this super-cute comic.
The Wisdom and/or Madness of Crowds
The latest explainer/game from Nicky Case is an absolutely brilliant interactive piece on small world networks.