A Friendly Introduction to SVG • Josh W. Comeau
A fantastic explanation of the building blocks of SVG, illustrated—as always—with Josh’s interactive examples.
Link tags: plain
38
Anchor position tool
This is a great little helper in understanding anchor positioning in CSS.
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.
Hixie’s Natural Log: When complaints are a good sign
This is a very smart way to handle feedback about a product.
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.
s19e01: Do Reply; Use plain language, and tell the truth
Very good writing advice from Dan:
Use plain language. Tell the truth.
Related:
The reason why LLM text for me is bad is that it’s insipid, which is not a plain language word to use, but the secret is to use words like that tactically and sparingly to great effect.
They don’t write plainly because most of the text they’ve been trained on isn’t plain and clear. I’d argue that most of the text that’s ever existed isn’t plain and clear anyway.
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!
HTML Emails: A Rant - Jim Nielsen’s Blog
The day we started to allow email clients to be full-blown web browsers (but without the protections of browsers) was the day we lost — time, security, privacy, and effectiveness. Now we spend all our time fighting with the materials of an email (i.e. color and layout) rather than refining its substance (i.e. story and language).