justin․searls․co

A decoupled approach to relaying events between Stimulus controllers

Part of the allure of Stimulus is that you can attach rich, dynamic behavior to the DOM without building out a long-lived stateful application in the browser.

The pitch is that each controller is an island unto itself, with each adding a particular kind of behavior (e.g. a controller for copying to clipboard, another for displaying upload status, another for drag-and-drop reordering), configured entirely via data attributes. This works really well when user behavior directly initiates all of the behaviors a Stimulus controller needs to implement.

This works markedly less well when a controller's behavior needs to be triggered by another controller.

Spoiler alert: there's more to this…

Well, would you look at that

Looks like I'm partly responsible for Rails 7.2's only…

😎

…Breaking Change 🫳🎤

Just me or have Safari’s developer tools experienced massive performance regressions in 2024? Routinely takes 10+ seconds to open them (or to refresh the page while they are open) for pages that take no time at all in Chromium.

1.2k likes · August 14, 2024 at 1:28 PM UTC

Now that the iPhone is about to have 48MP cameras across the board, Apple should internally capture video in square 4K width and height and share in 9:16 or 16:9, such that bars are never necessary in either landscape or portrait orientations

2.8k likes · August 13, 2024 at 11:41 AM UTC

FedEx bought Kinko’s over 20 years ago and erased the brand in 2008 but people seem to mostly still calls it Kinko’s.

Not here to kinko shame, but seems like they threw away a really strong brand.

995 likes · August 12, 2024 at 6:20 PM UTC
Breaking Change artwork

v18 - Arriving today by 10 PM

Breaking Change

Boy, have I got a great show for you today! I guess. You be the judge.

If you listen to the podcast, please rate it on a scale from Good Charlotte to My Chemical Romance at podcast@searls.co.

The following links are included with your subscription:

Show those show notes…

M4 Mac Mini to Become Apple's Smallest Ever Computer With Complete Redesign

The new ‌Mac mini‌ will be the first major design change to the machine since 2010, making it Apple's smallest ever desktop computer. The new ‌Mac mini‌ will apparently approach the size of an Apple TV, but it may be slightly taller than the current model, which is 1.4 inches high. It will continue to feature an aluminum shell. Individuals working on the new device apparently say that it is "essentially an iPad Pro in a small box."

I can't be the only person thinking "I wonder if I could plug this into a portable USB power bank, throw it in my bag, and then use run Mac Virtual Display on my Vision Pro without needing to carry a laptop… can I?

Spot the N+1

In general, it's great that you can call array and enumerable methods on relations in Active Record, but the way that's implemented (cleverly querying on the relation instead of considering if to_a and doing the operation in memory would be more performant) is maddening at times.

People ask why I specialized in software testing. Answer: I wanted to leave a legacy.

Reasoning: production code gets deleted all the time but y'all are too scared to EVER delete tests.

1.5k likes · August 7, 2024 at 7:06 PM UTC

Something must be done about the skyrocketing cost of college

What one must pass to includes() to include Active Storage attachments

If you're using Active Storage, eager-loading nested associations that contain attachments in order to avoid the "N + 1" query problem can quickly reach the point of absurdity.

Working on the app for Becky's strength-training business, I got curious about how large the array of hashes being sent to the call to includes() is whenever the overall strength-training program is loaded by the server. (This only happens on a few pages, like the program overview page, which genuinely does contain a boatload of information and images).

Each symbol below refers to a reference from one table to another. Every one that descends from :file_attachment is a reference to one of the tables managed by Active Storage for keeping track of cloud-hosted images and videos. Those hashes were extracted from the with_all_variant_records scope that Rails provides.

I mean, look at this:

[{:overview_video=>
   {:file_attachment=>
     {:blob=>
       {:variant_records=>{:image_attachment=>:blob}, :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}},
 {:overview_thumbnail=>
   {:file_attachment=>
     {:blob=>
       {:variant_records=>{:image_attachment=>:blob}, :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}},
 {:warmup_movement=>
   {:movement_video=>
     {:file_attachment=>
       {:blob=>
         {:variant_records=>{:image_attachment=>:blob}, :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}},
    :movement_preview=>
     {:file_attachment=>
       {:blob=>
         {:variant_records=>{:image_attachment=>:blob}, :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}}},
 {:workouts=>
   {:blocks=>
     {:mobility_movement=>
       [{:primary_equipment=>
          {:equipment_image=>
            {:file_attachment=>
              {:blob=>
                {:variant_records=>{:image_attachment=>:blob},
                 :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}},
         :secondary_equipment=>
          {:equipment_image=>
            {:file_attachment=>
              {:blob=>
                {:variant_records=>{:image_attachment=>:blob},
                 :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}},
         :tertiary_equipment=>
          {:equipment_image=>
            {:file_attachment=>
              {:blob=>
                {:variant_records=>{:image_attachment=>:blob},
                 :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}},
         :movement_video=>
          {:file_attachment=>
            {:blob=>
              {:variant_records=>{:image_attachment=>:blob},
               :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}},
         :movement_preview=>
          {:file_attachment=>
            {:blob=>
              {:variant_records=>{:image_attachment=>:blob},
               :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}}],
      :exercises=>
       {:exercise_options=>
         {:movement=>
           [{:primary_equipment=>
              {:equipment_image=>
                {:file_attachment=>
                  {:blob=>
                    {:variant_records=>{:image_attachment=>:blob},
                     :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}},
             :secondary_equipment=>
              {:equipment_image=>
                {:file_attachment=>
                  {:blob=>
                    {:variant_records=>{:image_attachment=>:blob},
                     :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}},
             :tertiary_equipment=>
              {:equipment_image=>
                {:file_attachment=>
                  {:blob=>
                    {:variant_records=>{:image_attachment=>:blob},
                     :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}},
             :movement_video=>
              {:file_attachment=>
                {:blob=>
                  {:variant_records=>{:image_attachment=>:blob},
                   :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}},
             :movement_preview=>
              {:file_attachment=>
                {:blob=>
                  {:variant_records=>{:image_attachment=>:blob},
                   :preview_image_attachment=>{:blob=>{:variant_records=>{:image_attachment=>:blob}}}}}}}]}}}}}]

By my count, that's 167 relationships! Of course, in practice it's not quite this bad since the vast majority are repeated, and as a result this winds up executing "only" 50 queries or so. But that's… a lot!

Turns out, there's more to it…

Broadcasting real-time database changes on a budget

While building Becky's (yet unreleased) app for her strength training business, I've been taking liberal advantage of the Hotwire combo of Turbo and Stimulus to facilitate dynamic frontend behavior without resorting to writing separate server-side and client-side apps. You can technically use these without Rails, but let's be honest: few people do.

Here are a few capabilities this broader suite of libraries give you, in case you're not familiar:

  • Rails Request.js offers a minimal API for sending conventional HTTP requests from JavaScript with the headers Rails expects like X-CSRF-Token handled for you
  • Turbo streams can send just a snippet of HTML over the wire (a fetch/XHR or an Action Cable socket) to re-render part of a page, and support was recently added for Custom Actions that sorta let you send anything you want over the wire
  • The turbo-rails gem adds some very handy glue code to broadcast model updates in your database and render Turbo streams to subscribers via an Action Cable socket connection
  • Stimulus values are synced with the DOM as data attributes on the owning controller's element, and Object serialization is supported (as one might guess) via JSON serialization. Stimulus controllers, by design, don't do much but they do watch the DOM for changes to their values' data attributes

Is your head spinning yet? Good.

You'll never guess what happens next…

In order to protect user privacy, Apple Vision Pro does not trigger hover state on UI controls other than native visionOS applications. As a result, successfully clicking links and buttons requires the user to take a Tap of Faith that they're looking at them just right.

As a result, my click failure rate is like 30%. This is so dumb. Let me turn off gaze privacy.

1.2k likes · August 1, 2024 at 2:50 PM UTC
1
4
5
6
7
8
37