Posts

Writing Tailwind-compatible Semantic CSS

Building HTML UI forced me to figure out how to write reusable CSS classes that play nice with Tailwind. Along the way, I looked at how other libraries tackle this. Spoiler: most of them get it wrong.

2025 in review

On September 23rd, 2025, in a Berlin hospital room, I became a dad. Emma Elanor Margheim entered the world and promptly rearranged every priority I thought I had.

She’s currently asleep, so let me tell you about the rest of the year.

Dialog Animation Gotchas

I spent way too long getting the animations right for my dialog post. Chrome’s documentation on entry/exit animations made it look simple—define your open state, your starting state, your closed state. Three blocks of CSS. Done.

The entry animation worked immediately. The exit was a disaster. The dialog snapped to full width mid-animation, jumped around, then vanished. The backdrop lingered after close, or disappeared instantly while the dialog was still fading. Nothing synced up.

I want to walk through each problem I hit and how I fixed it, partly as documentation for my future self, partly because I suspect these same issues will bite anyone trying to animate native dialogs.

Stylish <dialog>s

Campsite has some of my favorite UI styling on the web. Naturally, I cracked open their source hoping to learn something. What I found: React components rendering <div>s inside <div>s, with piles of JavaScript doing what <dialog> does for free.

So I borrowed their visual design and rebuilt it with semantic HTML and CSS using affordance classes. I want to walk you through all of the choices I’ve made and how it all comes together.

Confirmation dialogs with zero JavaScript

Turbo’s data-turbo-confirm attribute is convenient for quick confirmation dialogs, but the native confirm() prompt it triggers looks dated and out of place. If you want a styled confirmation dialog that matches your app’s design, the traditional approach recommends a lot of JavaScript—a Stimulus controller to open and close the dialog, event listeners for keyboard handling, and coordination between the trigger and the modal.

But, recent browser updates have changed the game. Invoker Commands landed in Chrome 131 and Safari 18.4, giving us declarative dialog control. Combined with @starting-style for animations, we can now build beautiful, animated confirmation dialogs without writing any JavaScript.

Affordances: The Missing Layer in Frontend Architecture

I was building a form with a file input. Nothing fancy—just a place for users to upload a document. I wanted the trigger to look like the other buttons on the page: the same subtle shadows, the same hover effects, the same spacing. I was using Catalyst, the component kit from Tailwind Labs, so I had a <Button> component with all those styles baked in.

CSS-only Star Rating Component with Half Steps

After some experimentation, research, and AI being stupid, I finally have a simple, clean implementation of a star rating component that uses only radio inputs and labels and allows for half steps. 50 lines of beautiful CSS. Let’s break it down piece by piece.

Always use flex-wrap: wrap on flex containers

I spent a bit of time this morning make some improvements to sqlite.directory, and I found myself needing to make a number of fixes around the mobile responsiveness of the UI. So, I thought I would take a moment to catalog a few common patterns and tips I have found useful when working with responsive design. This first tip was one that I found myself using quite a bit today.

sqlite.directory updates

After the initial launch of sqlite.directory, I have been working on a few updates to the site. Here are some of the updates:

• Show count of apps (59ba725)
• Show favicon of app (d89dfbe)
• Randomize the order of app entries (d703bf9)
• Validate that even the optional Repository URL is a valid URL (15ad911
• Make the application more responsive (07a5a3d, ea01025, e370f9d, daed3ab, 5568fdd, 93c5c43, and 3b8cf5e)
• Update the PWA manifest to improve colors, description, and quick actions (31422f6)

As of writing this (December 11, 2024 at 1:30 PM CET) there are 17 applications listed on the site. I am excited to see the site grow and to see more applications listed on the site. If you have a project that uses SQLite, please consider adding it to the site. You can do so by visiting sqlite.directory and clicking the “Add entry” button. I am looking forward to seeing your project listed on the site!

Select dropdown for polymorphic associations

When building a CRUD-oriented web application with Ruby on Rails, most things are pretty straightforward. Your tables, models, controllers, and views all naturally align, and you can lean on the Rails scaffolds. One gap, however, is dealing with polymorphic associations in your forms. Let’s explore how global IDs can provide us with a simple solution.