After 11 long years, I am finally back in a square year. Looking forward to being 36!
Aaron 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?
Aaron Francis@aaronfrancis.com · 7mo agoThey say AI is the end for developers. They say the job market is gone. They say learning to code is pointless. I don’t buy it. I think we're just getting started.
CSS 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...
Building 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 🧵
As 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.
These 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/...
Same 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 ✨
"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
Stephen Margheim@fractaledmind.bsky.social · 7mo agoI 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 🧵
I 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 🧵
Agents 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.
Which 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.
Who'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.
If 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.
A 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...
I 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.
There 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.
Everyone 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…
Component 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...
Stop 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: 🧵
Wild 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/...
Stop 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...
Amdahl'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/...
Plain HTML and CSS can be beautiful. Stay tuned 👀
After 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: 🧵
Alongside 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 ⬇️
Tournament 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: 🧵
CSS 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:
CSS 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: 🧵
Yesterday 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: 🧵
