This is a thoughtful proposal for a browser feature from Bram. Very convincing!
Monday, May 30th, 2022
Saturday, December 11th, 2021
More writing on web.dev
Last month I wrote about writing on web.dev. At that time, the first five parts of a fourteen-part course on responsive design had been published. I’m pleased to say that the next five parts are now available. They are:
It wasn’t planned, but these five modules feel like they belong together. The first five modules were concerned with layout tools—media queries, flexbox, grid, and even container queries. The latest five modules are about the individual elements of design—type, colour, and images. But those elements are examined through the lens of responsiveness; responsive typography with
clamp, responsive colour with
prefers-color-scheme, and responsive images with
The final five modules should be available later this month. In the mean time, I hope you like the first ten modules.
Wednesday, May 12th, 2021
There’s a good discussion here (kicked off by Jen) about providing different
theme-color values in a web app manifest to match
prefers-color-scheme in media queries.
Wednesday, March 17th, 2021
Robin makes a good point here about using dark mode thinking as a way to uncover any assumptions you might have unwittingly baked into your design:
Given its recent popularity, you might believe dark mode is a fad. But from a design perspective, dark mode is exceptionally useful. That’s because a big part of design is about building relationships between colors. And so implementing dark mode essentially forced everyone on the team to think long, hard, and consistently about our front-end design components. In short, dark mode helped our design system not only look good, but make sense.
So even if you don’t actually implement dark mode, acting as though it’s there will give you a solid base to build in.
I did something similar with the back end of Huffduffer and The Session—from day one, I built them as though the interface would be available in multiple languages. I never implemented multi-language support, but just the awareness of it saved me from baking in any shortcuts or assumptions, and enforced a good model/view/controller separation.
For most front-end codebases, the design of your color system shows you where your radioactive styles are. It shows you how things are tied together, and what depends on what.
Tuesday, March 16th, 2021
Saturday, April 25th, 2020
This is such a clever use of variable fonts!
We can use a lighter font weight to make the text easier to read whenever dark mode is active.
Thursday, March 26th, 2020
It was a few years before I realized that worry stones had a name, that they were borrowed from cultures other and older than mine. Heck, it’s been more than a few years since I’ve even held one. But in the last few weeks, before and after launching the redesign, I’ve kept working away at this website, much as I’d distractedly run my fingers over a smooth, flat stone.
Friday, May 24th, 2019
Here’s a clever shortcut to creating a dark mode by using
Saturday, December 29th, 2018
Another good reason to use the
currentColor value in SVGs.