Salvaging linkrot with the Wayback Machine (opens in a new window or tab)
While making some updates to the site, I did a 404 scan of my link blog and the results were… less than awesome. So I decided to work some Eleventy magic to recover from them.
All Links
Complex conditional width using flex-basis with clamp (opens in a new window or tab)
The primitive Sidebar layout is a kind of quantum layout whereby the sidebar only exists as a sidebar where there is available space.
Color accessibility: tools and resources to help you design inclusive products (opens in a new window or tab)
Resources, tips and tools I regularly use to build and check the color accessibility of my products in one single place for future reference.
Nested navigation in Eleventy (opens in a new window or tab)
I wanted to be able to handle the nav menu without needing to update it manually each time I add a new page.
outline is your friend (opens in a new window or tab)
Be careful when customizing focus styles, don’t forget to test in forced color modes, and always remember that outline is your friend.
Not All Zeros are Equal (opens in a new window or tab)
There’s a well-established ‘best practice’ that CSS authors should remove units from any 0 value. There are a few common situations where it will break your code.
How to avoid layout shifts caused by web fonts (opens in a new window or tab)
One of the biggest causes of layout shifts for my clients is late-loading web fonts, let's look at how to optimize them!
Solving “The Dangler” Conundrum with Container Queries and :has() (opens in a new window or tab)
Danglers be gone!
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes (opens in a new window or tab)
Deep dive into the mechanics of image rendering and when to use each approach.
Can we enterprise CSS grid? (opens in a new window or tab)
Integrating CSS grid into an existing application, especially a large one, is not a trivial affair.
Style with Stateful, Semantic Selectors (opens in a new window or tab)
In web development, we frequently need to style elements to visually indicate some state they're in.
The case for null in design systems (opens in a new window or tab)
Humans tend to have an aversion to empty spaces. Our discomfort tends to push us to fill a void, which isn’t always the best solution.
Min-Max-Value Interpolation (opens in a new window or tab)
A tool that calculates the CSS clamp formula to interpolate between two values in a given viewport range.
Use transparent borders and outlines to assist with high contrast mode (opens in a new window or tab)
This is a quick win, for everyone: the visual design is left almost untouched and it’s accessible.
Make Your Own Little (Easy-to-Update) CDN (opens in a new window or tab)
By, uh, using other people’s CDNs. And put files in it that you want CDNized URLs to.
Contextual Spacing For Intrinsic Web Design (opens in a new window or tab)
The user's browsing environment is not predictable. Let's learn how to coexist with that unpredictability by using adaptive, contextual spacing techniques.
All the user-facing states (opens in a new window or tab)
User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which something can be manipulated.
Building a combined CSS-aspect-ratio-grid (opens in a new window or tab)
I had to build a layout that consists of several rows. In each row are two images with a fixed aspect ratio. The two images should have the same height and fill the entire row.
CSS Parent Selector (opens in a new window or tab)
Have you ever thought about a CSS selector where you check if a specific element exists within a parent?
Ham biscuit on (opens in a new window or tab)
On context and consistency (and some absurdity!).