Revealing Text With CSS letter-spacing
Some text effects are relatively hard to pull in CSS, the main reason being we are unable…
Technical Writing in the AI Age
This isn’t coming out of nowhere: More and more people I deeply respect and have learned a…
Cross-Document View Transitions: Scaling Across Hundreds of Elements
In Part 1, we covered the gotchas that bite you first: the deprecated meta tag that silently…
Jetpack Search now understands your WooCommerce catalog
Jetpack Search 7.0 adds product-aware filters to WooCommerce stores. Traditional keyword searches match queries to text, potentially…
Jetpack Search now understands your WooCommerce catalog
Jetpack Search 7.0 adds product-aware filters to WooCommerce stores. Traditional keyword searches match queries to text, potentially…
Stack Overflow: When We Stop Asking
Let’s play a quick game: I’ll show a graph and try to guess what it’s about. Source: Data…
Cross-Document View Transitions: The Gotchas Nobody Mentions
I wasted an entire Saturday on this. Not a lazy Saturday either, but one of those rare,…
What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More
If 3D voxel scenes (that you can style), flying focus animations, or new CSS syntaxes sound like…
Computing and Displaying Discounted Prices in CSS
CSS math isn’t just about how things look! It can also be used to work out useful…
rotateX()
The CSS rotateX() function rotates an element around the x-axis in a three-dimensional space. Specifically, it vertically flips the…
rotateY()
The CSS rotateY() function rotates an element around its vertical y-axis. Specifically, it horizontally flips an element from left…
Using CSS corner-shape For Folded Corners
I came across Kitty Giraudel’s folded corners technique. It leverages CSS clip-path, and I thought that that…
A Scrollytelling Gift for Mum on Mother’s Day 2026
My mum loved logic because she was born at a time when nothing made sense. She was…
Making Zigzag CSS Layouts With a Grid + Transform Trick
Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want…
Fixed-Height Cards: More Fragile Than They Look
Fixed-height cards often feel like a safe choice. A designer hands you a mockup where every card…
What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More
Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices,…
The Importance of Native Randomness in CSS
Recently, I published a story about the new random functions that have landed in CSS and how…
contrast()
The CSS contrast() filter function increases or decreases the contrast of an element, either making colors pop out more…
Let’s Use the Nonexistent ::nth-letter Selector Now
“I think I’m done with reality.” — The Seventh Circle by Architects We’ve all, at some point,…
Recreating Apple’s Vision Pro Animation in CSS
Apple’s product animations, particularly the scrolly teardowns (technical term), have always been inspiring. But these bleeding-edge animations…
Enhancing Astro With a Markdown Component
There are two ways to enhance Markdown in an Astro project: Through MDX Through a Markdown Component…
Markdown + Astro = ❤️
Markdown is a great invention that lets us write less markup. It also handles typographical matters like…
Selecting a Date Range in CSS
A date range selector lets users pick a time frame between a start and end date, which…
Alternatives to the !important Keyword
Every now and then, I stumble onto an old project of mine, or worse, someone else’s, and…