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 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 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 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 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 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 06 RT @excid3: Rails World 2026 will be in Austin! https://t.co/zMjzJBUby0 0 6 0 0 71 .
Sep 04 Rails 8.1.beta1 ships with this PR adding min_connections to database configuration. This will benefit SQLite on Rails apps a ton, preventing write throughput saturating the connection pool and holding back reads. https://t.co/I5z2hYiYPg 35 0 1 1.7k 238 .
Sep 04 @flavorjones Enjoyed this post? Subscribe to @fractaledmind for my mix of frontend, backend, SQL, Rails, and random content. 3 0 0 1k 126 .
Sep 04 RT @flavorjones: Now open sourced! https://t.co/tKoHGIFabH 0 16 0 0 59 .
Sep 04 In Amsterdam just in time to drop off my bags and make it to checkin. One more train ride to go. #RailsWorld 9 0 0 993 108 .
Sep 04 Starting my journey to #RailsWorld well before the sun rises 🥱 22 0 1 1.4k 62 .
Aug 27 RT @mattsolt: Been rewriting background job workflows with @fractaledmind's acidic_job gem & its been incredible. Love how it forces me to… 0 2 0 2 143 .
Aug 16 I have just opened two of the most exciting PRs for Chaotic Job. Soon, you will be able to write tests and simulations for the two most common sources of bugs in background jobs: (1) retries and now (2) races https://t.co/oj2MKkqCwq 15 1 1 1.3k 233 .
Aug 13 RT @tonyennis: This was one of my slides at Big Sky Dev Con. The amount of progress in the last 2 years is mind boggling - I know there's b… 0 4 0 0 140 .
Aug 10 Of course, happy to hop on a call sometime to talk you thru the implementation (it’s not very complicated given that Ruby has a mechanism to add a callback around any execution event). But this has been a great entry point for me into this exciting field of testing 2 0 0 642 265 .
Aug 10 .@aarondfrancis Just listened to the newest Database School with @glcst. If you want to explore “minimalist simulation testing” from the point of view of web apps, and not systems dev, check out https://t.co/oj2MKkq4GS It simulates failures at every execution point of a bg job 6 0 1 1.1k 278 .
Aug 09 I need some great RSS feeds to provide me with some quality longer form reading material. Hit me with all of your recommendations! 4 0 1 957 130 .
Aug 08 If you define interface classes that own your interactions with external systems, you can ensure that all interactions are consistently observable, centralize access to make pattern matching likely, and compose patterns together into more efficient, higher-order access patterns. 3 0 0 500 279 .
Aug 08 Using a gem for an API, calling shell commands directly, etc. 1. likely creates blindspots in your observability stack, 2. hides your access patterns, 3. keeps an essential detail of your system (how you interact with the outside world and its state) opaque and scattered 5 0 1 520 272 .
Aug 08 🌶️ take: All IO interfaces should be owned/proxied by in-app classes. So, you should have something like an S3Client class, an FFMPEGClient class, a GoogleOAuthClient class, a QueueRedisClient class, a CacheRedisClient class, etc. in your application 19 1 2 1.7k 252 .
Aug 08 We're live! Watch my little studio intro and let me know how it sounds, how it looks. Still plenty to do and improve, but I've already had my first handful of calls in here and they went great. https://t.co/wE2Xvb5FZ3 34 0 11 2.1k 218 .
Aug 06 Getting all of the sound foam up was my second battle, but some wide head nails and stronger glue eventually did the job. Doing my first calls today in the new office/studio! Camera mount and mic arm should arrive tomorrow to unlock video recording! https://t.co/Af1Pl0mEmj 33 0 4 1.6k 273 .
Aug 05 Getting the walls up was only half the battle. Next major squirmish was figuring out why the fans wouldn’t run consistently. After some exploring and experimenting, learned there was a timer controller that was behaving oddly. Put my amateur electrician hat on and removed it. https://t.co/1BaFt2w8yr 10 0 0 931 300 .
Aug 01 Here it is with the tape off and the glue set. Next up base boards (as seen on the ground) and interior. https://t.co/NtvAiG8CD6 42 0 3 1.5k 128 .
Jul 30 Insulated! Tomorrow we put the exterior acoustic wood panels up. Then interior finishing touches. It is coming together!! https://t.co/Bvo1DiPnrT 38 0 8 1.9k 145 .
Jul 30 Fans and light installed! https://t.co/IhnOyuRMoX 11 0 0 1k 49 .
Jul 30 Door is installed! Wiring up the inflow and outflow fans now, then insulation and paneling. Final finishing touches at the end. Slow and steady https://t.co/zbB8rkwmb1 22 1 2 1.2k 167 .
Jul 30 Half at thru day two and getting the inner dry wall hung. A bit of wiring, insulation, then the outer panels will finish the walls. Also gotta frame the door. Great progress tho! https://t.co/4UZ489L56c 18 1 3 1.4k 202 .
Jul 28 This corner is now cleared out and we begin framing the outer walls tomorrow. What was a little work corner yesterday will be a sound insulated tiny studio later this week https://t.co/9rEvai0joT 20 0 1 1.3k 195 .
Jul 28 As @aarondfrancis says, you can just build things. The “build a small studio in the corner of the apartment” project begins now. https://t.co/wVrn11jQVw 40 0 2 1.8k 152 .
Jul 25 For example, I can have CSS generically bind an anchor and its anchored element for a [commandfor] anchor. Semantic HTML is all that's needed, no duplicative `anchor-name` (I know, I know implicit anchors are coming too, but this is just a good example). 3 0 1 577 254 .
Jul 25 We should all probably be using double-dashed idents for our HTML `id`s. Once the advanced `attr()` function is baseline across browsers, this will allow us to dynamically use our `id`s as custom idents in CSS. 4 0 1 1.1k 210 .
Jul 12 This PR will add `min_connections` as a db configuration option. SQLite apps with bursts of heavy write traffic can remove the bottleneck of writes saturating the connection pool and holding back reads, since at the db level reads can always occur. https://t.co/I5z2hYiYPg 30 0 0 1.6k 273 .
Jul 09 RT @postrbconf: Cheers.rb🍻at the last #railsconf @fractaledmind @inazarova @maciejmensfeld @rhiannon_io @TonsOfFun111 @neha_nakrani912 @kcd… 0 4 0 0 140 .
Jul 08 After various delays across various modes of transport I have finally made it to my room for #RailsConf2025. Now for a few hours of sleep 😴 9 0 1 1.3k 139 .
Jul 07 At the gate to board my trans-Atlantic flight from Berlin to Philly for #RailsConf2025 14 0 2 1.4k 86 .
Jul 02 I've been using a new text-only affordance for actions (links and buttons): "Verb →" means a navigation "Verb ↓" means downloading content "← Back" means navigating to previous page "Verb ↑" means opening a dialog "Verb ✓" means submit form I love it and users love it! 24 1 0 1.4k 271 .
Jun 28 What is the best <50k midsize SUV in your opinion? And reminder, I live in Berlin, so has to be available here. Also, living in Berlin, I don’t need a car multiple times a day every day, which is why I only want to spend up to 50k. Hit me with your recs 3 0 6 2.1k 258 .
Jun 27 Oh, and well-scoped pages with well-considered HTML leveraging basic HTTP actually plays _super well_ with AI coding assistants. I know everyone says that AI seems primed for React, but it is also great with core web technologies when used appropriately. 7 0 0 1.1k 254 .
Jun 27 Worth adding that properly leveraging the power of HTTP and HTML will likely require "undoing" some of the development patterns you have learned from JS frameworks. Similarly for UX patterns. As a tweak on a @KentBeck classic: "Make the feature easy, then make the easy feature." 11 1 1 1.2k 280 .
Jun 27 I am so passionate about the power and flexibility of classic HTTP 1.1, well-considered HTML, and clean CSS. Learn the fundamental tools of the web, lean on them, and you will be amazed what all is possible. 6 1 0 456 207 .
Jun 27 We all know that you can implement a tabs UI with standard anchor links, right? Aaannndd, this architecture allows you to add new tabs and additional tab content without one day running into a brick wall with loads of request timeouts. And the UI can look *exactly* the same. 6 0 3 1.1k 275 .
Jun 27 .@lucianghinda Maybe we should do a joint "Just Enough Job Testing" workshop. I love what you are doing and think it could be valuable to dig into the unique aspects and difficulties of testing async systems (e.g. bg jobs). Reply w/ ✋if you would attend this 3 1 1 882 259 .
Jun 27 There are some lovely replies to this. If you are a company in the Rails ecosystem, I bet there are a handful of gems essential to your application(s) that have maintainers with GitHub Sponsors. Show them some love! 0 0 0 676 215 .
Jun 27 The virtuous cycle of writing tests for Acidic Job patterns using Chaotic Job has been so much fun. Chaotic Job shows me slight unresilient details in my job, and Acidic Jobs patterns show me feature I need to add or improve in Chaotic Job. Both gems have improved much this month 4 0 0 755 280 .
Jun 27 The modern western city, with its slavish commitment to a car-centric lifestyle, allows car manufacturers to continue to be lazy. I want more better cars at more affordable rates. And I also want better cities that cater to real livability, walkable and safe. 2 1 1 862 259 .
Jun 27 Don’t just take my word for it, @rosapolis knows Chaotic Job “has a lot of potential for everyone” as a testing tool for your most important jobs. Introduce a chaos monkey into your job tests to ensure your essential jobs are truly resilient. https://t.co/oj2MKkqCwq https://t.co/dQiJTdSumS 28 0 1 1.4k 291 .
Jun 26 Awesome shout-out in @RubyWeekly for one of my least-known, but best gems. Chaotic Job will literally 10x the quality and utility of your tests for background jobs. I positively love it, and I know for a fact that you will too. Check it out: https://t.co/oj2MKkqCwq https://t.co/Hqv9S17Auu 29 3 1 1.6k 290 .
Jun 26 A sprite sheet of SVGs plus a tweaked helper that simply generates a `<svg use />` string is my favorite approach. You can load one file and cache it, avoid computation on the server to parse all the SVG strings, but still have inline SVGs with utility classes composed. 10 0 0 878 276 .
Jun 26 Do most tooling companies not see brand advertising as valuable? Do they not see these activities as brand advertising? Something else. Help me think thru what is the case here. cc: @aarondfrancis @inazarova 2 0 2 778 208 .
Jun 26 It seems @jessethanley gets what “brand advertising” takes in the tooling space, with good ads on podcasts and YT vids. So does @AppSignal who sponsor tons of Ruby confs. But this still seems like the large minority. And I genuinely want to understand why. 2 0 1 596 257 .
Jun 26 Genuine question: why don’t more dev tooling companies engage in “brand advertising” by sponsoring a large number of small conferences, have one or two solid speakers at conferences regularly, and either ads on a YT creators channel or with a channel themselves? 8 0 3 1.7k 262 .
Jun 22 RT @LSUbaseball: THE TIGERS ARE NATIONAL CHAMPIONS https://t.co/0sk6iV8gRc 0 5.7k 0 0 74 .
Jun 22 Let’s geaux Tigers! #MCWS So happy to see the second World Series win in three years for our LSU Tigers. 0 0 0 796 104 .
Jun 20 There are 5 key elements: 1. DOM order for radios from highest to lowest 2. Visual order for radios from lowest to highest 3. custom star segment SVG images as encoded `url`s 4. `mask` over `background` to allow color effects 5. pseudo-element gap coverage for smooth hovers 0 0 0 403 275 .
Jun 20 https://t.co/yrdBpLIZiP 0 0 1 389 23 .
Jun 20 After some experimentation, research, and AI being stupid, I finally have a simple, clean implementation of a star rating component that uses only radio inputs and labels. Full walkthrough in my newest blog post 👇️ https://t.co/LKcAyItpf5 14 0 1 975 238 .
Showing 101-200 of 568 tweets