Stephen Margheim @fractaledmind.bsky.social · 19/01/2026After 11 long years, I am finally back in a square year. Looking forward to being 36! 260
Stephen Margheim @fractaledmind.bsky.social · 14/01/2026Aaron is one of the best educators I have ever met. I am 100% certain that this will be some of the very best content out there for harnessing AI to build, fast but with quality. I'm pre-purchasing, what about you? 030
Stephen Margheim @fractaledmind.bsky.social · 13/01/2026CSS Anchor Positioning is now baseline. Firefox 147 ships today with full support. Chrome, Edge, Safari — all on board. Position elements relative to other elements. No JavaScript. Here's the 60-second rundown... 1173
Stephen Margheim @fractaledmind.bsky.social · 12/01/2026Building HTML UI forced me to figure out how to write CSS classes that integrate deeply with Tailwind v4. I want 3 things: intellisense, tree shaking, and easy utility overrides. Here’s I make it all work 🧵 140
Stephen Margheim @fractaledmind.bsky.social · 10/01/2026As soon as I saw the Bloom component from Josh Puckett, I knew I had to build it with plain HTML and CSS. This one was tricky, I won't lie, but a lot of fun. May just add this as an affordance to HTML UI, we shall see. 1100
Stephen Margheim @fractaledmind.bsky.social · 09/01/2026These are the core conceptual layers of frontend development today: > tokens - atomic design values > utilities - single purpose presentational classes > components - bundled structure + behavior I believe we are missing a layer — affordances fractaledmind.com/2025/12/01/... 120
Stephen Margheim @fractaledmind.bsky.social · 08/01/2026Same olʼ <dialog>, completely new CSS. HTML UI will have dialog sheets inspired by Silk React components. No JS, no swipe gestures, but still gorgeous sheets with elegant animations. Just a <dialog class="ui-sheet"> away ✨ 1160
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026"Why does this matter?" you ask. Because "fancy" focus styles that use both a `ring` and an `outline` with an offset need a way to make the offset region look transparent, and yo can't simply use `transparent`. You need to know the surface color. play.tailwindcss.com/MTO1Wfq8qK 110
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026I just solved the problem of having button's shadow stack include an offset outline that "magically" adapts to any surface color that the button is on 🤯 ``` @utility bg-* { & .ui-button { --button-surface-color: --value(--color-*, [color]); } } ``` Explanation in 🧵 130
Stephen Margheim @fractaledmind.bsky.social · 05/01/2026Agents excel in a cohesive system—one that is internally consistent, free minimal external dependencies, and token efficient. Using declarative HTML with a CSS library of affordances built on Tailwind is the *ideal* environment for a Claude Code or Codex or the like. 000
Stephen Margheim @fractaledmind.bsky.social · 05/01/2026Which of these buttons do you like more, and why? Each has a subtle 3d effect, but done in three different ways. Shown here at 1x, 2x, and 8x. 600
Stephen Margheim @fractaledmind.bsky.social · 04/01/2026Who's building a design system or component kit using Tailwind, fully leveraging its features? Others must be doing more than just applying styles. I'm creating custom utilities, modifying built-ins, adding layers, and defining properties. If you’re doing the same, let’s connect. 340
Stephen Margheim @fractaledmind.bsky.social · 04/01/2026If you button component styles can't work on input[type=submit] or input[type=reset], where ::before/::after pseudo-elements aren't present, then you have an undercooked component IMO. So, a challenge for HTML UI has been getting the subtle 3d effect I want without pseudos. 110
Stephen Margheim @fractaledmind.bsky.social · 03/01/2026A hot take after seeing yet another fancy tabs design: the classic "tab component" is over-engineered for 90% of use cases. You probably don't need it... 1135
Stephen Margheim @fractaledmind.bsky.social · 02/01/2026I genuinely thought such a component required JS. After a day of tinkering, turns out I was wrong. This is a 100% plain HTML and CSS "card tabs" component built with <details>, container queries, and absolute positioning. 140
Stephen Margheim @fractaledmind.bsky.social · 02/01/2026There are two types of developers: “Least power devs” — What’s the simplest tool that solves my problem today? “Maximum optionality devs” — What tool handles every problem I might have in 5 years? I know which camp I’m in. 110
Stephen Margheim @fractaledmind.bsky.social · 02/01/2026Everyone knows “headless” UI libraries that offer behavior without styles. BYOCSS. But we’re missing the inverse: “bodiless” UI. Styles without behavior. You bring the HTML. Here’s why we need both… 161
Stephen Margheim @fractaledmind.bsky.social · 01/01/2026Component libraries bundle JS behavior, CSS styling, and DOM templating. Most of the time I just want one, not all three. Headless libraries solved "behaviors only, no styles." I can't find any "bodiless" libraries offering styles only, no behaviors. So I'm making HTML UI... 2211
Stephen Margheim @fractaledmind.bsky.social · 01/01/2026Stop using rating libraries. I've created a CSS-only star rating component with half-star support in just 60 lines. No JavaScript. Fully accessible. Smooth hover interactions. Here’s how it works: 🧵 3190
Stephen Margheim @fractaledmind.bsky.social · 31/12/2025Yes, yes it is. Join us. businessclasskit.com/blog/rails-...lakyai.comIs it time for building Rails apps with SQLite?rails, sqlite, litestream. ## Why SQLite? First, why do we might want to run SQLite instead of MySQL and PostreSQL? ### It's lightweight SQLite is a... 180
Stephen Margheim @fractaledmind.bsky.social · 31/12/2025Wild looking back at this year. So much has changed, so much has stayed the same. But one of my absolute favorite years ever. fractaledmind.com/2025/12/31/... 090
Stephen Margheim @fractaledmind.bsky.social · 31/12/2025Stop using <select multiple> for "select many" UI. It's the worst form control in HTML. Luckily, there is a better pattern, and it isn't difficult or weird... 191
Stephen Margheim @fractaledmind.bsky.social · 31/12/2025Amdahl's Law hits hard: Postgres plummets from 13k to 660 TPS with just 10ms latency in serializable transactions. Adding hardware won't help; the network bottleneck remains. SQLite avoids this with its embedded nature, achieving 100k+ TPS on a laptop. 🔥 andersmurphy.com/2025/12/02/... 030
Stephen Margheim @fractaledmind.bsky.social · 30/12/2025Plain HTML and CSS can be beautiful. Stay tuned 👀 6474
Stephen Margheim @fractaledmind.bsky.social · 30/12/2025After building a full CSS tree system, I wanted to push it further with two experiments: 1. Folder-style stacked trees 2. Mixed orientations in the same tree Here's what I learned: 🧵 120
Reposted by Stephen MargheimMarco Roth @marcoroth.dev · 30/12/2025Alongside the Ruby 4.0 release last week, I published charm-ruby over Christmas, bringing @charm.land's excellent terminal UI libraries to Ruby. A full TUI framework, reusable components, styled output, forms, markdown rendering, spinners, charts, and a lot more! Demos below ⬇️ 78427
Stephen Margheim @fractaledmind.bsky.social · 29/12/2025Tournament brackets. Org charts with a CEO in the middle. Decision trees that branch both ways. These need CENTERED trees — children on both sides of the parent. Here's the CSS trick: 🧵 161
Stephen Margheim @fractaledmind.bsky.social · 29/12/2025CSS cascade layers are the most underrated feature of modern CSS. They're why semantic classes work now when they failed before. Here's the 2-minute explanation: 1141
Stephen Margheim @fractaledmind.bsky.social · 28/12/2025CSS trees can flow in any direction. Sure, → left-to-right and ↓ top-to-bottom are most common, but a good tree component needs to support ← right-to-left and ↑ bottom-to-top as well Building on our previous foundations, just one property change for each. Here's how: 🧵 171
Stephen Margheim @fractaledmind.bsky.social · 27/12/2025Yesterday I showed how to build horizontal tree structures with just plain HTML and CSS. Today: vertical trees (org charts, family trees, decision diagrams). And the lovely detail is that it only takes one key change to make it all work: 🧵 242
Stephen Margheim @fractaledmind.bsky.social · 26/12/2025Org charts, file trees, tournament brackets—all with pure CSS. No canvas. No SVG. No JS. Just flexbox and pseudo-elements. Let's break it down, starting with the foundational left-to-right tree, where only a couple dozen lines of CSS can transform this ... into this ... 🧵 2212
Stephen Margheim @fractaledmind.bsky.social · 25/12/2025If you're going to write semantic CSS classes in 2025, don't call them .btn or .card. Use a ui-* prefix: ui-button, ui-input, ui-badge. Here's why naming matters more than you think... 1111
Stephen Margheim @fractaledmind.bsky.social · 24/12/2025Your app/design system needs a .button class before it needs a <Button/> component. We need to be able to compose behaviors and appearance as needed. A <label> might need to look like a button, or <summary>, or <input type=radio> Visual affordances deserve their own primitive. 000
Stephen Margheim @fractaledmind.bsky.social · 23/12/2025👀 Sneak peek of a 100% plain HTML and CSS component I'm building for my next project. I'll give a full behind-the-scenes tour of the project to the first person that comments with the correct essential implementation details driving this "card tabs" component. 110
Stephen Margheim @fractaledmind.bsky.social · 23/12/2025Have an SVG with stylized text? Want to make the stylized text selectable? Add a <text fill=transparent> node with the corresponding text. We can have nice things that are usable too! 161
Stephen Margheim @fractaledmind.bsky.social · 22/12/2025Designer-quality dialogs with zero JavaScript 👀 Borrowed the visual design from Campsite, but built with native <dialog> and pure semantic HTML and CSS. Full walkthru at: fractaledmind.com/2025/12/18/... Check it 0162
Stephen Margheim @fractaledmind.bsky.social · 22/12/2025The web platform has supported keyboard shortcuts for over a decade! Say hello to criminally overlooked `accesskey` attribute. Add it to an interactive element like a button, link, or input so users can fire its default action via keyboard shortcut, no JS required! 1231
Stephen Margheim @fractaledmind.bsky.social · 21/12/2025I spent way too long perfecting animations for my post on crafting stylish <dialog>s. So, I compiled all my mistakes so you can nail it on the first try. Check it out or pass it along to your coding agent 😉 fractaledmind.com/2025/12/19/... 241
Stephen Margheim @fractaledmind.bsky.social · 20/12/2025`popover` & `popovertarget` give you dropdown menus w/ light-dismiss for free. <button popovertarget="menu">Options</button> <nav id="menu" popover> <ul> <li><a href="/settings">Settings</a></li> <li><a href="/profile">Profile</a></li> </ul> </nav> #StylishHTML 1100
Stephen Margheim @fractaledmind.bsky.social · 19/12/2025I'm crafting a novel tool that uses keyboard usability as the ultimate test for page accessibility, while also diving deep into the a11y tree. Excited seeing it take shape! 👀 140
Stephen Margheim @fractaledmind.bsky.social · 19/12/2025Breadcrumb separators belong in CSS, not HTML. Just use the `::after` pseudo-element. nav > ol > li:not(:last-child)::after { content: " / "; color: lightgray; padding: 0 0.5em; } The `:not(:last-child)` ensures no trailing separator after the final item. #StylishHTML 2202
Stephen Margheim @fractaledmind.bsky.social · 18/12/2025Today's <dialog> elements are your newest secret weapon—simple and powerful. In my latest post, I'll guide you through creating sleek, thoughtful UI with this full-featured, native hero. Dive into the future of stylish <dialog> experiences: fractaledmind.com/2025/12/18/... 000
Stephen Margheim @fractaledmind.bsky.social · 18/12/2025I think @trycampsite had some of the most elegant UI on the web, especially for modal dialogs, but it was all React components rendering <div>s inside <div>s. So I stole their design and rebuilt it with semantic HTML and CSS. 😅 fractaledmind.com/2025/12/18/... 070
Stephen Margheim @fractaledmind.bsky.social · 17/12/2025SVG icons have been "solved" myriad ways, but I find them all lacking. Inline SVGs? Bloated DOM. <img> tags? Can't change colors. Icon fonts? Blurry at certain sizes, a11y issues. CSS background-image? Still can't change colors. But, today there's actually a perfect solution... 1165
Stephen Margheim @fractaledmind.bsky.social · 16/12/2025The Tailwind community has become too dogmatic about utility-only. Tailwind is utility-FIRST, not utility-ONLY. And @utility and @apply are criminally underused. And here is why this matters... 151
Stephen Margheim @fractaledmind.bsky.social · 15/12/2025🌶️ #nobuild is a solo developer philosophy masquerading as universal advice. The append-only CSS problem that drove teams to Tailwind? Nobuild doesn't solve it. It ignores it. Let me make the case for #lowbuild instead... 121
Stephen Margheim @fractaledmind.bsky.social · 15/12/2025Tab testing doesn’t find accessibility issues. It finds usability issues that happen to block keyboard users first. Broken focus order, invisible states, unreachable controls—these aren’t “accessibility bugs.” They’re just bugs. Keyboard users hit them before anyone else notices. 000
Stephen Margheim @fractaledmind.bsky.social · 15/12/2025Tab through any site for 30 seconds and you’ll know more about its real accessibility than an hour with a linter. Focus disappears? Problem. Can’t reach the nav? Problem. Trapped in a modal? Problem. It’s a stress test for your whole UI in one keystroke. 051
Stephen Margheim @fractaledmind.bsky.social · 14/12/2025Your accessibility audit says you’re compliant. Your keyboard users can’t complete your signup flow. These aren’t contradictory. We’ve just been measuring the wrong thing. 010
Stephen Margheim @fractaledmind.bsky.social · 14/12/2025Accessibility tools ask “does this image have alt text?” The actual question is “can someone navigate your interface?” One is compliance. The other is usability. We’ve been testing the wrong thing. 030
