-
Stylish
<dialog>sCampsite 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.
Continue reading … -
Confirmation dialogs with zero JavaScript
Turbo’s
data-turbo-confirmattribute is convenient for quick confirmation dialogs, but the nativeconfirm()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
Continue reading …@starting-stylefor animations, we can now build beautiful, animated confirmation dialogs without writing any JavaScript.