X Stats
Login Sign Up
@fractaledmind

Stephen Margheim

@fractaledmind

699 Tweets
1,303 Following
4,462 Followers

Modern CSS • Web Platform APIs • Rails + SQLite

Tweets Topics Chat

Filter by views

All 699 < 2.5k 568 2.5k - 5k 72 5k+ 59
Date ↓ Tweet ❤️ 🔄 💬 👁 📝
Jan 03 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... 29 1 4 10.8k 155 .
Jan 02 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. https://t.co/qoL1pXCegg 68 1 5 7.6k 251 .
Jan 02 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… 25 2 6 6.6k 200 .
Jan 01 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... https://t.co/tfmrbd1Avj 566 24 17 71.1k 301 .
Jan 01 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: 🧵 https://t.co/IpihwCN6IE 283 10 11 30.1k 223 .
Dec 31 Since they are checkboxes, you can style them however you like: - Chips/tags - Cards - Toggle switches - Whatever fits your design Try doing that with `<select multiple>`. 8 0 1 5.2k 179 .
Dec 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... https://t.co/GN6Sg9vYgd 381 11 14 64k 188 .
Dec 30 Plain HTML and CSS can be beautiful. Stay tuned 👀 https://t.co/85p6xEK5K0 670 26 24 39.6k 74 .
Dec 30 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: 🧵 36 1 2 7.5k 184 .
Dec 30 This is a valuable point and I appreciate Adam nuancing my language. I too often use the term "semantic class" to loosely describe "not one of Tailwind's utility classes", but this is lazy and incorrect. The critical distinction is between presentational classes and semantic classes, does it tell us what the screen will look like or name an abstract entity. One of my strongly held beliefs is that there is now a common vocabulary of names for the core components of web applications that what may have previously been semantic names now carry presentational meaning. A "button" names a visual effect, a composition of utilities. It is just a higher-order utility. We need not shy away from such classes. 11 0 3 7.5k 708 .
Dec 29 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: 178 8 6 35.3k 162 .
Dec 28 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: 🧵 https://t.co/30WPyMixSm 61 4 1 5.9k 295 .
Dec 27 When you simply need to have a link look like a button, pretty pretty please do this instead 🙏 https://t.co/BKUYvjONPB 292 7 4 27k 118 .
Dec 27 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: 🧵 https://t.co/NvA6SFiJ8P 176 7 3 21.4k 265 .
Dec 27 Polymorphic components are a code smell that there is a missing layer in our stack. We need to revive well named classes, but with the wisdom gained from the utility-first movement: https://t.co/WcpwBA0Nm3 195 18 8 39.1k 205 .
Dec 26 Org 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 ... 🧵 https://t.co/mLsIqH08aE 201 20 5 15.5k 298 .
Dec 25 If 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... 85 1 14 17.6k 186 .
Dec 24 Your 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. 101 3 12 15k 303 .
Dec 22 Designer-quality dialogs with zero JavaScript 👀 Borrowed the visual design from @trycampsite, but built with native <dialog> and pure semantic HTML and CSS. Full walkthru at: https://t.co/54apoduCpi Check it https://t.co/OVdSrLK8zw 125 8 4 5.4k 239 .
Dec 22 The 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! https://t.co/mM6mA4ZY33 292 19 8 16.5k 290 .
Dec 20 `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 https://t.co/8GMeU4o41u 220 15 6 11.6k 388 .
Dec 19 Breadcrumb 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 https://t.co/BNdez46uac 608 38 13 22.9k 307 .
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 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 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 14 I cloned @laravelphp's Cloud breadcrumbs as a simple 137 5 9 10.7k 283 .
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 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 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 .
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 10 Yes! SQLite is *completely* different than PG or MySQL. With a client/server db, you want a small number of large queries to reduce network overhead. With an embedded db, you want a large number of small queries to maximize indexes and in-memory data. 2.7k 194 33 207.4k 251 .
Sep 04 My favorite upcoming feature coming to the Rails ecosystem is ActiveRecord::Tenanted, which is an exciting new gem coming from @flavorjones soon. Everyone gets a database! https://t.co/kqd4SB2iYt 173 17 13 54.3k 196 .
Jun 26 If you are a dev-centric company and you have clear positioning, profit-oriented pricing, and a proven product, you should be more aggressively pursuing mind-share thru a large collection of small "ad spends". * 6 months of 30 second ads on every @MostlyTechPod. * Sponsor a speaker at a conference with your target audience (even if they don't work at your company 😱). * GitHub sponsorship of a popular, or rising, project in your domain where you add your logo and 6 word pitch to the README * Pay for snacks at 6 small conferences in your space and have the organizers give your 30 second pitch on stage I bet you could do all of these for less than 20k and gain so much positive will, so much mind share, so much name recognition. Way better bang for your buck, IMO, than X ads or Reddit ads. 7 2 1 5.9k 801 .
Apr 18 Ruby is powerfully suited to be a central language in the age of AI, as layed out by @yukihiro_matz in his closing keynote at #RubyKaigi2025 https://t.co/Ac0WDsPYgz 55 10 1 5.7k 164 .
Mar 29 This afternoon I explored building a JSON viewer in vanilla HTML+CSS that was both beautiful and accessible. Not 100% complete, but I've proven out the foundations. Built with <details>, ::before and ::after, and role=tree Link to Tailwind playground in next tweet 👇️ https://t.co/zSwAwZTBDs 60 1 4 7.2k 298 .
Feb 21 One of my favorite aspects of preparing the High Leverage Rails course was breaking down how many of Active Record's methods actually work at the SQL level. Here is a snippet from the "Upserting data" video breaking down the upsert method https://t.co/c2Pln3kx3R 92 3 3 9.1k 262 .
Feb 19 🚀 High Leverage Rails is available now! Simplify your stack and scale from zero to IPO with Rails + SQLite. I made this video course in partnership with Try Hard Studios to teach you everything you need (and nothing you don't) to build then ship quality apps with less hassle. https://t.co/GM1S1UMvBW 150 31 7 10.8k 300 .
Jan 24 If you didn't see yesterday, I'm partnering with @aarondfrancis and @steve_tenuto to produce an in-depth video course on building with Rails + SQLite. "High Leverage Rails" is coming in February and I couldn't be more excited! https://t.co/S6eHAgStjG 112 7 3 19.1k 250 .
Dec 24 👀 this beautiful Ruby. This Expression class converts structured Ruby to SQL strings. These ~80 lines cover 80+% of the expression syntax available in SQLite. You compose basic Ruby objects into structured hashes to describe your expression, like `{ 2 => { BETWEEN: [1, 3] }` https://t.co/MwOwFgR0lT 64 2 6 6.9k 302 .
Dec 10 Wrote a new blog post today on the simplest, most elegant way I know of to encode a polymorphic association in a form. The secret is to lean on Global IDs. Link in next tweet https://t.co/xAeRbp1StA 75 9 8 8k 198 .
Dec 08 Rails continues to expand its lead as the single best platform for building web applications backed by SQLite! You can now load extensions directly from the database.yml file. This now means you have quick and easy access to the full range of SQLite extensions 🧵 73 8 2 5.6k 263 .
Nov 19 If you thought JSON columns in your PG tables were cool, just imagine the power of SQLite columns in your tables 🤯🤯 This new PG extension lets you stores the raw bytes of a SQLite db in a column then use the SQLite engine to work with it. https://t.co/OuUx7gpUUw 368 51 25 37.8k 265 .
Oct 31 Yesterday @joeldrapper and I were pairing and came up with this lovely test that ensures you have no controllers with public methods that do not have a corresponding route defined. https://t.co/heZNjc22Kc 116 5 10 6.4k 204 .
Oct 18 SQLite needs fine-tuning, but with Rails 8, the Rails framework now does *all* of the configuration and usage tuning for you, invisibly. This is the culmination of over a year of effort from myself and the community at large, and I could not be more proud or excited! https://t.co/ZjgLWSLbzj 131 9 2 10.3k 291 .
Oct 16 Or, if you prefer, I have my slides and speaker notes stitched together as a blog post as well: https://t.co/Fi26z2Lmc5 26 1 0 39.5k 119 .
Oct 16 Rails is reaching new heights as the One Person Framework, supercharged by the power and simplicity of SQLite. If you’ve ever been curious about why and how Rails 8 and SQLite work so magically together, my #RailsWorld talk is now up. Check it out! https://t.co/lGcZ5xhCvo 133 8 6 14.1k 273 .
Oct 06 Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 7 1 0 7.2k 113 .
Oct 06 In an upcoming release, SQLite will have a new CLI utility providing built-in replication via rsync. While I still love Litestream, this opens up new possibilities for backup/replication strategies without an additional dependency https://t.co/Xs3McePbiM 721 80 9 157.7k 255 .
Sep 26 DHH shouts out @pezza_n for his work on Solid Cable in his #RailsWorld keynote! Look at those perf numbers. https://t.co/SG1HWr2Bp6 180 9 4 23.6k 131 .
Aug 16 The second major PR to help ensure that Rails 8 is the world's best web framework for building powerful yet operationally simple apps with SQLite just landed! This feature will ensure that response latency stays reasonably flat, even under heavy concurrent load. 72 4 10 5.5k 262 .
Aug 11 What are the best Rails app templates out there? Those that have a resilient experience when applied to existing Rails app in particular would be nice. And source code available please. I’m doing a deep dive 32 2 10 6.7k 207 .
Aug 09 I've been working on a new gem for building CLI/TUI forms. It is my attempt to build something functional and beautiful, but with simplicity at its base. After a deep dive into the problem space, I've found a high-leverage way forward that I'm excited about. 🧵 42 2 5 7.1k 261 .
Aug 08 This was such an enjoyable conversation. We talked about my journey into programming, old college rivalries, the aesthetics of simplicity, and—of course—some nitty gritty details around Ruby and SQLite. @aarondfrancis was a gracious and curious host. Such a pleasure! 59 8 4 6.8k 267 .
Jul 27 New #SQLiteOnRails feature just landed in @rails main! As of now, Rails will ensure to use IMMEDIATE transactions for SQLite transactions. This solves a major pain point for Rails apps where busy exceptions are often thrown due to DEFERRED transactions being the default. 80 8 3 6.9k 272 .
Jul 27 I really enjoyed getting to share my journey as a @rails contributor. I love the Ruby and Rails community, and I’m happy to be a part of it. #RubyConfAfrica2024 is a wonderful example of the liveliness and energy in our community! 42 9 0 8.9k 230 .