Stuff I write about

When coding gets cheap, engineering gets harder

Teams plateau after the first gains from AI coding tools. Moving beyond it means engineering the system around the agent, not reaching for a better model.

The mythical magical button

How to create a minimal stylesheet with modern CSS that allows you to create a whole new range of buttons with just a single custom property.

Slightly enhanced sticky revealing footer

Andy Bell showed a nice little UI effect with his “sticky revealing footer”. But on some pages the experience was mediocre, so a quest began to improve it.

A modern picture showcase using CSS

Grid template areas combined with other modern CSS make for powerful adaptable layouts. I use them here to build a picture showcase for many configurations.

I cannot wait for the CSS @function

In my quest to apply as much cool CSS tricks as possible, I encountered an issue that navigated me towards a new and exciting CSSWG draft.

The importance of shipping source code as a library maintainer

When library maintainers ship there source code can help application builders in debugging critical and weird issues.

MacOS-like dock effect with a “previous-sibling combinator”

A guide on using the “previous-sibling combinator” trick to recreate the magnifier effect of the MacOS dock.

Using recursive CSS to change styles based on depth

Can CSS be used recursively to change styles based on the depth of an element in a container? Well it can, but it is a little tricky.

Combining :has and :only-child to change tab containers

For a styling implementation detail, I set the challenge to come up with a CSS-only solution, instead of implementing the logic in a front-end framework.

Combining :placeholder-shown and :has

My wife told me about the :placeholder-shown selector. I had never heard of it before, but it sparked my curiosity about what it could do combined with :has.

Interdependencies and code stability

As engineers we tend to over-engineer, making our code as reusable and DRY as possible. But in that quest, we often create unstable code.

I was wrong about service workers

I was wrong about service workers. I wrongly assumed certain use cases for them. But I was missing out on them.

Going back to CSS-only after years of SCSS

When migrating my website to Eleventy, it ditched SCSS and went old school. I went removed a complexity layer to see if CSS-only is a viable option these days.

Old man yelling at a cloud

Front-end development really became a pop culture around big company frameworks. It has become an investor-focused industry.

Engineering, UX design and the value stream

Understanding how to make better technology, framework, and library decisions in front-end development

State machines and state management

State management is one of the most complicated, and opinionated topics in modern and JavaScript-focused front-end development. Let's make it easier.

Different approaches to fluid typography and layouts

Fluid web page design can be more user-friendly, because it adjusts to the user's set up. There are several approaches to achieving this.

Hiding side content in responsive design

A trick to hide content in specific responsive layout patterns without the need for media queries. But with a few gotchas.

Use the child-element count in CSS

A little CSS trick to get a count of child elements on your parent selector.

A nth-child CSS trick

A little CSS trick that allows you to use nth-child values in the CSS calc() function.

Creating a stacked bar chart using only CSS

How to make an interactive stacked bar chart using only CSS and HTML

Updating my graph layout algorithm

Updating my graph layout algorithm based on new requirements and requests from the community

The case for state machines in client-side applications

Features that seem simple can become unmaintainable due to unforeseen state management issues. State machines help avoid this.

An ode to the CSS owl selector

One off the most beautiful CSS selectors is the Lobotomized Owl Selector of Heydon Pickering

Scalable CSS architecture

My CSS architecture had become too complex, but utility-first frameworks were not for me either. I needed a mix. Then came CUBE CSS and it all clicked.

SWR-like data fetching in Svelte

I am a big fan of the [SWR](https://swr.vercel.app/) package of Vercel. Let's see how to implement something similar in Svelte.

Authentication token management

Complex client-side applications require sophisticated solutions around authentication management and background refreshing.

Horizontal centering in CSS

Horizontal centering is an ancient problem in CSS. CSS Grid lets us enhance the pattern, but it introduces other issues. Let's find a better solution.

Creating an auto-layout algorithm for graphs

Laying out a visual graph, like a state machine, so that it stays human-readable is one of the most fun challenges I have encountered. Here is how I did it.

Binding CSS and JavaScript with HTML data-attributes

HTML data-attributes bind CSS and JavaScript more closely. Use them to cut the JavaScript needed for styling and move that responsibility back to CSS.

Modern CSS grid solutions to common layout problems

Responsive layouts are one of the more complicated problems in CSS. With the addition of CSS grids, we are now able to solve complex problems.

Demystifying the component architecture

Our little UI components do more for us than we give them credits for. Their internals are more complex than we know.