Do That After This – Terence Eden’s Blog
Good advice for documentation—always document steps in the order that they’ll be taken. Seems obvious, but it really matters at the sentence level.
Link tags: guide
161
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!
Designing better target sizes
This is a wonderfully in-depth interactive explainer on touch target sizes, with plenty of examples.
An Interactive Guide to CSS Grid
This is a terrific interactive explainer!
Getting started with CSS container queries | MDN Blog
Michelle has written a detailed practical guide to container queries here.
Link colors and the rule of tincture
When you think of heraldry what comes to mind is probably knights in shining armor, damsels in distress, jousting, that sort of thing. Medieval stuff. But I prefer to think of it as one of the earliest design systems.
This totally checks out.
Community Guidelines for Kottke.org
I like Jason’s guidelines—very in keeping with The Session’s house rules.
And I really like his motivation for trying out comments:
The timing feels right. Twitter has imploded and social sites/services like Threads, Bluesky, and Mastodon are jockeying to replace it (for various definitions of “replace”). People are re-thinking what they want out of social media on the internet and I believe there’s an opportunity for sites like kottke.org to provide a different and perhaps even better experience for sharing and discussing information. Shit, maybe I’m wrong but it’s definitely worth a try.
Yes! More experiments like this please! Experiments that aren’t just “let’s clone Twitter”.
WPDS - Accessibility | Resources
I didn’t know the Washington Post had a design system or that the system has this good section on accessibility.
Readability Guidelines
Imagine a collaboratively developed, universal content style guide, based on usability evidence.
Learn Privacy
Stuart has written this fantastic concise practical guide to privacy for developers and designers. A must-read!
Privacy in the product design lifecycle | ICO
A very handy guide to considering privacy at all stages of digital product design:
This guidance is written for technology professionals such as product and UX designers, software engineers, QA testers, and product managers.
Learn HTML
This is a great step-by-step guide to HTML by Estelle.
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!
A Complete Guide To Accessible Front-End Components — Smashing Magazine
Vitaly has rounded up a whole load of accessibility posts. I think I’ve linked to most of them at some point, but it’s great to have them all gathered together in one place.
A walkthrough of our design system and how we got here | Kyan
It all started at Patterns Day…
(Note: you’ll probably need to use Reader mode to avoid taxing your eyes reading this—the colour contrast …doesn’t.)
Global and Component Style Settings with CSS Variables — Sara Soueidan
Sara shares how she programmes with custom properties in CSS. It sounds like her sensible approach aligns quite nicely with Andy’s CUBE CSS methodology.
Oh, and she’s using Fractal to organise her components:
I’ve been using Fractal for a couple of years now. I chose it over other pattern library tools because it fit my needs perfectly — I wanted a tool that was unopinionated and flexible enough to allow me to set up and structure my project the way I wanted to. Fractal fit the description perfectly because it is agnostic as to the way I develop or the tools I use.
A Guide to the Responsive Images Syntax in HTML | CSS-Tricks
Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of srcset and sizes.
Extinguished Countries
Guidebooks to countries that no longer exist.
The first book will be on the Republic of Venice. There’ll be maps, infographics, and I suspect there’ll be an appearance by Aldus Manutius.
Our first guidebook tells the story of the Republic of Venice, la Serenissima, a 1000-year old state that disappeared in 1797.