The one-liner for max-width, centering, and margins.

To horizontally center an element and limit it’s width, this is easily the most common approach: That could still touch the edges of a parent container though, so if need to enforce some spacing, we’d probably do that on a parent. There is no real problem with that, but we can smash it all into […]

Using the Custom Highlight API

You can get your hands on ranges of text in JavaScript, then apply a named

Get the number of auto-fit/auto-fill columns in CSS

Little Reminder About Custom Properties with Invalid Values

This is like one of those weirdly difficult quizzes about CSS. If you’ve got a <p> element sitting there in a totally normal basic HTML layout, then this CSS: What color does the <p> render as? It’s blue. You might think it’s green, as the value blah is an invalid color. If the CSS had… […]

Infinite Marquee Animation using Modern CSS

A row of logos that animate forever perfectly and don't have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!

Just a Semicolon

A silly debate that rages just as hard as “tabs vs spaces” is “semicolons or not” in JavaScript. Generally, the answer is “use an automatic formatting tool so you don’t have to think about it”. But if you happen to be on the “no semicolons” side, it’s interesting to note that it can cause confusing […]

Should we NEVER use non-logical properties?

Best bet: just always use them. More nuanced take: there is a few situations where using the physical property is still releavant.

Liquid Glass on the Web

It's a complicated look! There may or may not be blurring, light refracts in tricky ways, the highlights are quite bright, and you've got to be very careful about text contrast accessibility.

Fonts for Wireframing

When you’re doing a design prototype, it’s common to use the actual fonts the design will use, but use “lorem ipsum” text. The idea being to not distract anyone with real words when they are supposed to be looking at the design. Or you just don’t have any real text to work with at that […]

The Figcaption Problem

When an image isn't

The Big OOPs: Anatomy of a Thirty-Five-Year Mistake

Very interesting (2 hour!) conference talk from Casey Muratori that is quite a deep historical dive into Object-Oriented Programming. Some of it went over my head, but it was still a fun watch. It’s great to think about where we draw boundaries in software development, and in this case, looking at the difference between drawing […]

Introducing Zustand (State Management)

Zustand is a minimal, but fun and effective state management library which just may improve your render performance.

new Date(“wtf”)

Adaptive Alerts (a CSS scroll-state Use Case)

A single button, but it has two different behaviors in JavaScript depending on how far you’ve scrolled in an element (as determined by CSS!)

Stacked Transforms

A look at what happens when you add a whole list of transforms to an element, and how that interacts with `animation-composition`.

How JavaScript’s at() method makes array indexing easier

A little reminder from Matt Smith that getting the last item in an Array is easier now:

Deploy a Site with a Build Process & a Custom Domain Name

The last part of this series is taking our site that we've got in GitHub and addng an Astro build process to it, then mapping a domain we own to the Netlify-hosted site.