X Stats

Login Sign Up
@fractaledmind

Stephen Margheim

@fractaledmind

699 Tweets
1,303 Following
4,462 Followers

Modern CSS • Web Platform APIs • Rails + SQLite

Date ↓ Tweet ❤️ 🔄 💬 👁 📝
Dec 18 @PixelJanitor @ryannystrom @brian_lovin this is the first of my love letters to Campsite’s components and the modern web. Thank you so much for open sourcing your lovely lovely work. 3 0 1 710 182 .
Dec 18 RT @rails: Secret mission: To present this year's Rails Luminary award to @marcoroth_ in person, Rails Core member @fxn traveled to the Rai… 0 18 0 0 140 .
Dec 18 I 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. 😅 https://t.co/54apoduCpi https://t.co/ecyq7LQYxh 151 5 8 19.5k 289 .
Dec 17 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 6 0 0 6k 113 .
Dec 17 RT @rails: Congratulations @marcoroth_! The Rails Core team has announced Marco as the 2025 Rails Luminary. The Luminary award exists to ce… 0 29 0 0 140 .
Dec 17 The scorecard when it comes to whether the approach is [1] cacheable, [2] colorable, [3] keeps the DOM small, and [4] doesn't require external requests: Inline SVG ❌ ✅ ❌ ✅ IMG tag ✅ ❌ ✅ ❌ Icon fonts ✅ ✅ ✅ ❌ mask-image ✅ ✅ ✅ ✅ 37 0 1 7.4k 257 .
Dec 17 And the browser support? ~95% global coverage. Full support in Chrome 120+, Safari 15.4+, Firefox 53+, Edge 120+. This isn't experimental CSS. It's ready now. 9 0 1 8k 160 .
Dec 17 SVG 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... 1k 60 40 211.4k 286 .
Dec 17 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 2 0 1 651 113 .
Dec 16 I've written a blog post on the concept of "affordance utilities" here, if you want to read more: https://t.co/WcpwBA0Nm3 17 2 3 1.3k 121 .
Dec 16 Stop feeling guilty about @​apply. Start building affordance utilities for your UI primitives. Keep the contract. Lose the dogma. 7 0 1 1.3k 131 .
Dec 16 The 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 7 13 19.4k 196 .
Dec 15 The #lowbuild principle: Minimal dependencies. Maximum leverage. One build tool that solves a real problem, with escape hatches that scale to your needs. #nobuild is ideological. #lowbuild is pragmatic. 4 0 1 472 205 .
Dec 15 "But utility-only is limiting!" Yes. That's why Tailwind lets you write custom @utility classes that get tree-shaken just like the built-ins. Semantic affordance classes AND dead-code elimination. It's not 2015 anymore. https://t.co/WcpwBA0Nm3 1 0 1 465 245 .
Dec 15 🌶️ #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... 18 0 1 2.5k 223 .
Dec 15 Tab 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. 0 1 0 608 281 .
Dec 15 Did a collap with @_swanson and got a retweet from one of my favorite Rubyists and follows, @kwuchu! Here's to hoping he likes the article 🤞 https://t.co/K82IREisPd 7 0 1 1.8k 164 .
Dec 15 I love the serendipity of things. @_swanson and I both saw the Fizzy PR last week and had the same thoughts, just at the same time I was working my way through a series on how to build stylish confirmation dialogs with modern browser features. Great collab and love the outcome! 15 0 0 2.7k 278 .
Dec 15 RT @_swanson: Last week on the TL, I saw: - PR in Fizzy to upgrade the `data-turbo-confirm` dialog - Browser native dialog opening, light-d… 0 7 0 0 140 .
Dec 15 Tab 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. 3 1 0 548 256 .
Dec 15 @laravelphp Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 0 0 0 382 125 .
Dec 14 Your 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. 3 0 0 660 171 .
Dec 14 Accessibility 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. 2 0 1 869 198 .
Dec 14 I cloned @laravelphp's Cloud breadcrumbs as a simple 137 5 9 10.7k 283 .
Dec 13 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 3 0 0 536 113 .
Dec 13 Try this: Tab through your homepage without touching your mouse. Can you tell what’s focused? Can you reach the main CTA? Can you get back out of the menu? That 30-second test tells you more than your lighthouse score ever will. 29 0 2 3.9k 230 .
Dec 13 The fastest accessibility audit: Tab through your site. Where does focus land? Can you see it? Can you reach everything? Can you escape that modal? Your linter can’t answer these. They’re also the only questions that matter. 6 0 0 915 226 .
Dec 13 Note: I am *not* building an NPM package or a CLI. I *am* building a browser extension. But, accessibility is usability, and we _should_ test it that way! 1 0 0 653 156 .
Dec 13 RT @fractaledmind: The prompt: Can you "see" webpages if I give you links? Here are three of my favorite landing pages that use the TUI ae… 0 1 0 0 140 .
Dec 13 This is the page it built based on that simple prompt. Be sure to check out the full page in the link in the quoted tweet https://t.co/UYcfrsnkOv 2 0 0 1.5k 145 .
Dec 13 The prompt: Can you "see" webpages if I give you links? Here are three of my favorite landing pages that use the TUI aesthetic: * https://t.co/7cvvcltEKv * https://t.co/wweROwFuGF * https://t.co/exDqTmKNiV In case you can't hear are screenshots attached. I want you to redesign the HTML I've attached to get something that both feels unique and familiar with these. The result: https://t.co/VAOD3LLnbl 8 1 2 6.3k 404 .
Dec 13 I used Gemini yesterday for some design work, and I have to say, it was astounding. Does it produce _exactly_ what I want in one-shot? Absolutely not. But I got me into editing mode and past the blank canvas immediately, and its suggestions and aesthetic were remarkable. 6 0 1 6k 271 .
Dec 13 And: ``` dialog::backdrop { background-color: rgb(0 0 0 / 0.5); transition: background-color 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete; @starting-style { background-color: rgb(0 0 0 / 0); } } ``` https://t.co/pJL3CbGEeq 2 0 0 433 292 .
Dec 13 CSS snippet: ``` dialog { opacity: 1; scale: 1; transition: opacity 0.2s ease-out, scale 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete; @starting-style { opacity: 0; scale: 0.95; } } ``` https://t.co/RFtt7O5Mq3 2 0 1 519 290 .
Dec 13 To master exit transitions for <dialog>s, turn to `transition-behavior: allow-discrete`. Most CSS transitions are smooth, but `display` toggles abruptly. `allow-discrete` ensures elements stay visible briefly for smoother exits before `display: none`. https://t.co/RQ7p1cW3BH 419 43 4 15.7k 281 .
Dec 12 RT @Una: Safari 26.2 (a selection): - command invokers - field-sizing: content - sibling-index() & sibling-count() - anchor improvements l… 0 31 0 0 144 .
Dec 12 Plus there is a whole lot more, and lots of features I'll be writing more about and demoing soon. Upgrade and checkout all of the goodness! 0 0 0 258 139 .
Dec 12 Safari 26.2 is here and full of features I've been writing about lately, like • `command` and `commandfor` invoker attributes • `field-sizing: content` for auto-expanding <textarea>s • improvements to Anchor Positioning • `scrollbar-color` styling https://t.co/OWExHhZOip 10 1 1 1.1k 278 .
Dec 12 You can animate the backdrop too 😉 ``` dialog::backdrop { background-color: rgb(0 0 0 / 0.5); transition: background-color 0.2s ease-out; @starting-style { background-color: rgb(0 0 0 / 0); } } ``` https://t.co/asLTXZn3x5 1 0 0 284 234 .
Dec 12 Learn more at MDN: https://t.co/ygVj0SUSwv 0 0 1 307 42 .
Dec 12 Want smooth fade-in animations when your `<dialog>` opens? The `@starting-style` CSS rule defines the initial state when an element first appears—no JavaScript needed. 23 1 1 1.1k 173 .
Dec 11 You can subscribe at this landing page I whipped on with the help of @kit. I have so much more cool stuff planned to write about, record videos about, and build. If you love the web, SQLite, HTML, CSS, and/or Ruby, I genuinely think you should join. https://t.co/6wVEE5RLWL 2 0 0 258 274 .
Dec 11 After years and years and years, I *finally* have added a newsletter sign up to my blog! If you love building beautiful and high-leverage things on and for the web, I think we would get along swell. So come join my journey as I chase my own sense of perfection. https://t.co/1hCFQp2jWE 7 0 3 520 286 .
Dec 11 PS. As always, if you want to learn how to make beautiful <dialog>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 2 0 0 197 202 .
Dec 11 I absolutely love the new Invoker Commands API and what it does for the power of declarative HTML. Learn more at MDN: https://t.co/PTQVxTlgAE https://t.co/I1Ysb67W05 2 0 1 218 166 .
Dec 11 In addition to closing <dialog>s, the `command` and `commandfor` attributes are wonderful for opening dialogs. You can open dialogs in either a modal (`show-modal`) or non-modal (`show`) state. #StylishHTML https://t.co/bGUcPYdnST 25 1 3 1.8k 237 .
Dec 10 PS. If you want to learn how to make beautiful <dialog>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 1 0 0 263 191 .
Dec 10 Learn more about `closedby` on MDN: https://t.co/wCqlOkQoox https://t.co/GoHnesulwe 1 0 1 291 83 .
Dec 10 Another tip on closing <dialog>s involves the new `closedby` attribute. Putting `closedby="any"` on a <dialog> adds light-dismiss functionality to the dialog, meaning users can close the dialog with the Esc keyboard shortcut. #StylishHTML https://t.co/x79RArpSJ4 30 4 4 2.5k 275 .
Dec 09 PS. If you want to learn how to make beautiful <dialog>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 2 0 2 394 191 .
Dec 09 I love the power in the <dialog> element these days. Just look at this lovely HTML 👀 https://t.co/R1meI1Szag 1 0 1 401 114 .
Dec 09 Continuing with closing <dialog>s, in addition to `formmethod="dialog"` you can also implement a dialog close button in the header with an invoker `command="close"`. Perfect way to close a dialog without a <form>. https://t.co/NDTwsUwQfc 78 6 5 4.3k 250 .
Dec 09 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 1 0 0 425 113 .
Dec 09 One of my absolute favorite follows and a GOAT of frontend education just made my evening. I so respect @jh3yy's commitment to stylish work that nonetheless leverages the power of the platform. Stay tuned for more building blocks we can all use to build simple but sexy UIs. https://t.co/XtzoioHP0p 8 0 1 2.1k 300 .
Dec 08 PS. If you want to learn how to make beautiful <dialog>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 6 0 0 443 191 .
Dec 08 Just be sure to set `formnovalidate` as well to ensure you can always cancel regardless of form state. Learn more at MDN: https://t.co/vsWzv5511g https://t.co/5xDwbcssan 2 0 1 517 170 .
Dec 08 s with forms have a simple HTML-only way to implement "Cancel" buttons. In addition to POST and GET,
s inside of s can make use of the DIALOG `method`. This allows the submit button to close the dialog without submitting the form to the backend. #StylishHTML
139 7 2 10.4k 281 .
Dec 07 PS. If you want to learn how to make beautiful <textarea>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 0 0 0 298 193 .
Dec 07 Full CSS snippet: ``` textarea { field-sizing: content; min-block-size: attr(rows rlh); } ``` https://t.co/WJZXkR8Gdl 0 0 1 321 121 .
Dec 07 Coming in the next version of Safari, and already in Chrome and Edge, you can now create <textarea>s that auto-grow with the `field-sizing: content` rule. #StylishHTML https://t.co/Quvjd6eLxo 19 2 2 1.1k 198 .
Dec 06 PS. If you want to learn how to make beautiful listboxes like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 3 0 0 256 185 .
Dec 06 Learn more at MDN: https://t.co/LjubOrC9jq Full CSS snippet: ``` ::picker(select) { scrollbar-color: lightgray transparent; scrollbar-width: thin; } ``` https://t.co/rmuQdC08Te 1 0 1 289 181 .
Dec 06 Have a small scroll container where you want to de-emphasize the scrollbar, like in a popover? Say hello to `scrollbar-color` and `scrollbar-width` #StylishHTML https://t.co/pfF8tytMiT 6 0 1 800 185 .
Dec 05 PS. If you want to learn how to make beautiful popovers like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 2 0 0 205 184 .
Dec 05 Requires double-dashed IDs in your HTML: ``` <button popovertarget="--dropdown-example"></button> <div id="--dropdown-example" popover></div> ``` https://t.co/v0dNdtH6l6 0 0 1 220 193 .
Dec 05 Double-dashed IDs and the enhanced `attr()` CSS function allow us to bind popovertargets with their popovers without having to create distinct anchor-names. Learn more at MDN: https://t.co/YJAvo3Xphe and https://t.co/ZjmyO8VBiq #StylishHTML https://t.co/AALJg4KD5q 8 1 3 1.1k 266 .
Dec 04 PS. If you want to learn how to make beautiful <dialog>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 1 0 0 200 191 .
Dec 04 Full CSS snippet: ``` body:has(dialog:modal) { overflow: hidden; } ``` https://t.co/UFslbf9srX 0 0 1 286 96 .
Dec 04 Prevent scrolling when a modal <dialog> is open with pure CSS using the `:modal` CSS pseudo-class. Mix with `body:has` and you're good to go! Learn more at MDN: https://t.co/QSNmTzDWZc #StylishHTML https://t.co/aqPWHDIbsq 2 0 1 504 229 .
Dec 03 PS. If you want to learn how to make beautiful breadcrumb <nav>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏 3 0 0 321 199 .
Dec 03 Full CSS snippet: ``` body { scrollbar-gutter: stable; &:has(:popover-open) { overflow: hidden; } } ``` https://t.co/GCLl0DQvPs 3 0 2 410 142 .
Dec 03 Want to avoid layout shift when you remove scrolling on popover or dialog opening? Simple, use the new `scrollbar-gutter: stable` CSS rule on your scroll container (likely <body>). Learn more at MDN: https://t.co/e25F2dCyoS #StylishHTML https://t.co/TCv4fJ9saY 16 0 2 909 269 .
Dec 03 RT @Una: About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!! 0 18 0 0 67 .
Dec 01 RT @fractaledmind: I love Rauno's style and taste, so I remixed his design as a simple <select> using the new customizable select styling f… 0 2 0 0 146 .
Nov 30 PS. Creating the effect of the picker wrapping and surrounding the select took some creative problem-solving, but I’m quite happy with the result. Key limitation is that you can’t animate the picker beautifully with this approach. 0 0 0 770 230 .
Nov 30 I love Rauno's style and taste, so I remixed his design as a simple <select> using the new customizable select styling features coming to Baseline: https://t.co/jYad3T1cq6 https://t.co/n0HTpi7Cks 3 2 0 1.9k 202 .
Nov 13 This is such a lovely and elegant idea for leveraging the simplicity and power of SQLite for portability and observability, but bringing higher level abstractions on top aimed at particular problems. I think this could be very valuable for @tursodatabase 2 0 0 1.3k 254 .
Oct 24 And we continue writing that love letter with the new Empirical gem, which leverages the power of pre-processing Ruby at boot time to bring a terse and elegant DX for defining methods with runtime typing constraints. https://t.co/iGyEjlPtje 0 0 0 497 241 .
Oct 24 Once you then embrace that you can create your own objects that respond to === and encode custom rules of “set inclusion”, you have everything you need to a rich and robust runtime type system. The Literal gem is Joel and I’s love letter to === https://t.co/Bpicd1RcVa 2 1 1 565 269 .
Oct 24 This post from Honeybadger is about runtime types, it just doesn’t know it! It does a good job of demonstrating the simplicity and power of Ruby’s === interface, and a runtime type is simply “an object that responds to ===.” https://t.co/E4csN2cYSt 4 0 1 1k 249 .
Oct 23 This is also the tool that allowed @_m27e to spin up his own typed method approach in just 1 day. Massive props to @palkan_tula and team for such an awesome tool. “Compile-time” macros for Ruby open up such a wild range of possibilities! 3 0 0 338 237 .
Oct 23 This tool is the foundation of Joel and I’s recent work on Empirical (https://t.co/iGyEjlPtje) which enhances Ruby with strict instance variable reads, typed method signatures, and a rich runtime type system. 2 0 1 456 208 .
Oct 23 If you haven’t yet come across the Ruby Next project from @palkan_tula and @evilmartians, do yourself a favor and check it out. Especially the require-hooks gem (https://t.co/5ZfswOys2n), which allows you to define custom “around” callbacks for when a source file is required. 19 3 2 2.2k 276 .
Oct 23 Types are best seen as a tool for making your system more clear and correct. Improved DX is a nice by-product, but it isn’t primary. 1 0 0 367 132 .
Oct 23 If the only or primary reason you like types in your source code is to have a richer, fancier text editing experience with more dropdowns that have more items in them, you are cosplaying being a developer. 11 1 3 1.3k 205 .
Oct 23 Joel and I have made fantastic progress on our Ruby enhancements gem that brings rich runtime type assertions into your Ruby projects and Rails apps. Joel recorded a short demo of how to add type constraints to method definitions: https://t.co/bw1HyL7TF1 30 0 2 3.3k 254 .
Oct 22 I’m preparing a talk, and I’d love to get a clearer picture of the wider community’s conception of what a “type” is. What definition would you give? What is the primary purpose of defining and using types? What constitutes a “type system”? I want to hear from you. 8 0 7 1.6k 265 .
Oct 21 👇THIS. I have a post in draft I need to finish on how lovely “component utilities” are. A `btn` class is not just fine, it is *great*. And @tailwindcss’s tooling and a bit of CSS knowledge (`:where`) make it easy to make such components perfectly aligned with a utility approach 4 0 0 832 278 .
Oct 21 Joel and I have recently focused on our runtime typing approach for Ruby. Last week, we finally cracked the nut on adding types to method signatures in a way that feels beautiful and native to Ruby. Joel walks thru our thought process and aesthetics: https://t.co/95wKIcdV4c 31 2 8 3.1k 274 .
Oct 21 RT @bradgessler: Here's the official launch article for the Phlex on Rails video course. I'm hoping it inspires Rails web developers to bu… 0 4 0 0 140 .
Oct 20 https://t.co/e85ag1n2st 1 0 0 346 23 .
Oct 20 This is why I advocate for runtime assertions. It’s impossible to test every possible scenario ahead of time, but you can test every actual scenario just in time. 0 0 1 354 162 .
Oct 20 2 kinds of 🐞: Bug of Omission: The system refuses to proceed. It raises, crashes, or otherwise stops doing anything. Bug of Commission: The system does the wrong thing. It silently deletes records, returns incorrect results, or processes invalid inputs. 4 0 1 642 255 .
Oct 09 Love this! Here are my tops https://t.co/ETWRKFIZ1s 3 0 0 1.2k 51 .
Oct 09 Everyone should provide their top 10 features for Firefox to focus on: https://t.co/WEiMVS6iiH 1 0 0 804 94 .
Oct 08 There is mich wisdom in this post: https://t.co/Bpu2ALTCmf The web platform is such a marvel; it deserves developers building *with* it and not *against* it. I, for one, am going to try and do my part sharing more on how to leverage the platform to create beautiful experiences. 8 2 0 973 279 .
Oct 03 RT @wrocloverb: As we gear up for @wrocloverb 2026, let’s look back at one of the highlights from this year 🎥 @fractaledmind presented a v… 0 2 0 0 140 .
Sep 23 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 0 0 0 547 113 .
Sep 23 Today has been a pretty amazing day… Say hello to Emma Elanor Margheim and wish her a happy birthday! https://t.co/FPZDuN47AV 175 0 33 5.1k 126 .
Sep 17 I love what @calebporzio is doing w/ Flux UI, and the new pillboxes component is 😍. I enjoy trying to build components without an ounce of JS anywhere to be found. Mine requires keyboard nav with TAB, but is otherwise basically identical: https://t.co/nmUzGIK6i6 #StylishHTML https://t.co/ISfnuMMHCW 13 1 1 2.9k 300 .
Showing 101-200 of 699 tweets