Tags: explainer

Anchor position tool

This is a great little helper in understanding anchor positioning in CSS.

Chrome-only for now.

The hardest working font in Manhattan – Aresluna

This is absolutely wonderful!

There’s deep dives and then there’s Marcin’s deeeeeeep dives. Sit back and enjoy this wholesome detective work, all beautifully presented with lovely interactive elements.

This is what the web is for!

Why is everything binary? (Webbed Briefs)

Heydon’s latest video is particularly good:

All of my videos are black and white, but especially this one.

What Is React.js? (Webbed Briefs)

Its proponents can be weird, it takes itself far too seriously, and its documentation is interminable. These are some ways that some people have described Christianity. This video is about React.js.

AI Safety for Fleshy Humans: a whirlwind tour

This is a terrificly entertaining level-headed in-depth explanation of AI safety. By the end of this year, all three parts will be published; right now the first part is ready for you to read and enjoy.

This 3-part series is your one-stop-shop to understand the core ideas of AI & AI Safety — explained in a friendly, accessible, and slightly opinionated way!

( Related phrases: AI Risk, AI X-Risk, AI Alignment, AI Ethics, AI Not-Kill-Everyone-ism. There is no consensus on what these phrases do & don’t mean, so I’m just using “AI Safety” as a catch-all.)

An Interactive Guide to CSS Container Queries

Another terrific interactive tutorial from Ahmad, this time on container queries.

CSS :has() Interactive Guide

This isn’t just a great explanation of :has(), it’s an excellent way of understanding selectors in general. I love how the examples are interactive!

Okay, Color Spaces — ericportis.com

Everyone is quite rightly linking to this great interactive explainer on colour. It does a great job of describing complex concepts in a clear accessible way.

Designing better target sizes

This is a wonderfully in-depth interactive explainer on touch target sizes, with plenty of examples.

scottjehl/PE: declarative data binding for HTML

This is an interesting idea from Scott—a templating language that doesn’t just replace variables with values, but keeps the original variable names in there too.

Not sure how I feel about using data- attributes for this though; as far as I know, they’re intended to be site-specific, not for cross-site solutions like this.

The origins of the steam engine

The fascinating pre-history of steam power, illustrated with interactive widgets.

Invokers (Explainer) | Open UI

This is a really interesting proposal, and I have thoughts.

An Interactive Guide to CSS Grid

This is a terrific interactive explainer!

Generative AI: What You Need To Know

Generative AI: What You Need To Know is a free resource that will help you develop an AI-bullshit detector.

You can read all the cards on one page, print them out, or print to PDF.

Audio Session API Explainer

Jen pointed me to this proposal, which should help smooth over some of the inconsistencies I documented in iOS when it comes to the Web Audio API.

I’ve preemptively add this bit of feature detection to The Session:

if ('audioSession' in navigator) { navigator.audioSession.type = "playback"; }

Why the super rich are inevitable

The interactive widgets embedded in this article are excellent teaching tools!

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.

The Future of CSS: Cascade Layers (CSS @layer) – Bram.us

This is a really in-depth explanation from Bramus of the upcoming @layer rules in CSS, from the brilliant minds of Miriam, fantasai and Tab.

Basically, you’ll be able to scope styles, and you get to define the context for that scoping. So all those CSS-in-JS folks who don’t appreciate the cascade will have a mechanism to get encapsulated styles.

I can see this being very handy for big complex codebases with lots of people on the team.

Designing Beautiful Shadows in CSS

This is a great tutorial—I just love the interactive parts that really help make things click.