I’m a big fan of Astro’s focus on developer experience (DX) and the onboarding of new developers. While the basic DX is strong, I can easily make a convoluted system that is hard to onboard my own developers to. I don’t want that to happen. If I have multiple developers Read more…
It’s raw. It’s messy. And it refuses to play by the rules. Grunge isn’t just a style—it’s an attitude. From underground zines to modern digital design, grunge has always been a rebellion against perfection. But why does this chaotic, textured look never seem to go away? Let’s break it down Read more…
A friend DMs Lee Meyer a CodePen by Manuel Schaller containing a pure CSS simulation of one of the world’s earliest arcade games, Pong, with both paddles participating automatically, in an endless loop. The demo reminds Lee of an arcade machine in attract mode awaiting a coin, and the iconic Read more…
Comparing visual artifacts can be a powerful, if fickle, approach to automated testing. Playwright makes this seem simple for websites, but the details might take a little finessing. Recent downtime prompted me to scratch an itch that had been plaguing me for a while: The style sheet of a website Read more…
I came across this awesome article navigator by Jhey Tompkins: CodePen Embed Fallback It solved a UX problem I was facing on a project, so I’ve adapted it to the needs of an online course — a “course navigator” if you will — and built upon it. And today I’m Read more…
There’s a bit of a blind spot when working with CSS logical properties concerning shorthands. Miriam explains: Logical properties are a great way to optimize our sites in advance, without any real effort. But what if we want to set multiple properties at once? This is where shorthands like margin and padding become useful. Read more…
In my last article on “Revisiting CSS Multi-Column Layout”, I mentioned that almost twenty years have flown by since I wrote my first book, Transcending CSS. In it, I explained how and why to use what were, at the time, an emerging CSS property. Ten years later, I wrote the Read more…
I’ve seen a handful of recent posts talking about the utility of the :is() relational pseudo-selector. No need to delve into the details other than to say it can help make compound selectors a lot more readable. :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { color: #BADA55; Read more…
The videos from Smashing Magazine’s recent event on accessibility were just posted the other day. I was invited to host the panel discussion with the speakers, including a couple of personal heroes of mine, Stéphanie Walter and Sarah Fossheim. But I was just as stoked to meet Kardo Ayoub who Read more…
In the last article, we created a CSS-only star rating component using the CSS mask and border-image properties, as well as the newly enhanced attr() function. We ended with CSS code that we can easily adjust to create component variations, including a heart rating and volume control. This second article Read more…
