Persistence of Pixels and Post-Apocalyptic Beavers
Hey friends,
Why do gutters make bad storytellers?
They always leave you hanging.
(We had the gutters replaced on our house last week...)
Thinking Too Hard 🤔
While working on a site build last week, I was struck by the persistence of the pixel as a unit of measurement in web design.
Ever since we got high-resolution displays, a 'pixel' hasn't meant what it used to. It's no longer the smallest physical unit of a screen to display independent color, but another abstract unit. However, long ago, we were told that pixels were bad because they don't scale with a user's chosen base font size (true) — so we should always use rems, which USUALLY equals 16 pixels. Great.
Except all the web design tooling has remained in pixels. I cannot count the number of times I divide by 16 in a day.
My coworker, Max Fenton recently convinced me there was another way. Rather than constantly mathing, let the computer do the conversions with the pxtorem PostCSS plugin. So if Figma says 40px, put 40px, and the computer will output that as 2.5rems. It's a small thing, but being able to place values without pausing to convert them saves a lot of time on a UI build—all the accessibility with none of the math.
This only works, though, if you leave the base font size alone. Once you go full-root fluid you're 100% in relative land, but that's a topic for another day.
If you're interested in more of the details of units in sizing, Josh Comeau (as usual) has some more advice on the subject.
Interesting Web Bits
- Matthias Endler tells us that sometimes reinventing the wheel is beneficial. I like the closing quote: "Reinvent for insight. Reuse for impact."
- A dive into a particle life simulator written in WebGPU.
- Our team has been looking into Flitter as a motion tool. Easy import from Figma and the ability to export as Lottie files means we might actually be able to USE it.
- Una Kravets explores what's new in web UI.
- Hattip to Joshua Pease on this one:
sizes="auto"is happening. More info on what that means.
Other Stuff
- 1 min workouts for people who sit all day. I feel uncomfortably seen here... 😳
- An exploration into what it would take to live on $432 a month in America.
- When man destroys the earth, beavers will rise. This is a fun colony-builder simulation that's still in Early Access. I've been having fun planting trees and surviving the drought phases. 🦫🚧
- Am I planning to design 3D game levels? Probably not. Will I still read this random free book about it?. Absolutely.