Reclaiming Time

If all goes well, I have about 2,000 weeks left to live, roughly speaking. That’s 336,000 hours, which is both very many hours and a vanishingly small number of hours left to be alive. Last year — better late than never — I started to think more deeply about the time I have available, and what I do with that time. Not to achieve any grand plans, but to use the time I have remaining thoughtfully and intentionally.

I started by checking my iPhone’s Screen Time. It showed I was spending an average of three hours on my phone every day, but I realized I had no clear memory of those hours. How was I spending three hours per day staring at my phone? Was it scrolling through emails, Twitter, or logging into LinkedIn for unknowable reasons? Endless HackerNews pages and failed attempts to read The New York Times without a subscription? Those idle moments before, during, and after work, plus whole weekends, vanished into the abyss.

A soothing drawing of an individual engrossed in their smartphone, blissfully unaware of the vast, endless abyss that opens up just behind them

Read the rest Five-minute read


Building a modal form with Turbo Stream GET requests and custom stream actions

Turbo 7.2 brought major changes to what you can accomplish with Turbo Streams. To demonstrate those changes, today we are going to build a Turbo Stream-powered modal form without a single Turbo Frame. We will also create our own custom Turbo Stream action that emits a custom event on the browser.

The key technique we will use in this article is an update to the standard method of using Turbo to open and populate modals. Prior to Turbo 7.2, Turbo would not allow GET requests to respond directly with Turbo Streams. Smart folks devised a workaround to this limitation which involved using empty Turbo Frames to sneak in Turbo Stream actions. That workaround still works fine, but it is no longer necessary.

As part of our modal implementation, we will also have a chance to build a custom Turbo Stream action. Custom actions are an entirely new feature added in Turbo 7.2, and we will cover enough to get you started with this new tool in Turbo.

When we are finished our application work like this:

A screen recording of a user on a web page clicking a button to open a modal dialog window on the page. They fill in the sole text input on the form and submit the form. The modal dialog closes and the page beneath is updated with the record the user just created.

To follow along with this article, you will need to be comfortable with Ruby on Rails and you should have some experience using Stimulus. We will move quickly through the Turbo content, so previous exposure to using Turbo Streams will be helpful but is not required. As usual, you can review the complete code for this tutorial on Github.

Let’s get started!

Read the rest 25-minute read


Everyone GET in here! Infinite scroll with Rails, Turbo Streams, and Stimulus

If you have worked with Turbo Streams, you have probably run into a frustrating limitation. From the beginning, Turbo Streams were designed exclusively for handling form submissions, and that was the way it worked. If you wanted to respond to a GET request with a Turbo Stream, you couldn’t, without a clunky workaround.

Until now.

In Turbo 7.2, you can respond to GET requests with Turbo Streams. No more empty Turbo Frame hacks.

To demonstrate, we are going to build a simple Rails application that supports infinite scrolling through a paginated resource using Pagy, Turbo Streams, and a tiny Stimulus controller.

When we are finished, our application will work like this, and we won’t use a single Turbo Frame:

A screen recording of a user scrolling down a web page. As they scroll, new records are appended to the list of records automatically.

Before we begin, you should be comfortable working with Rails and have at least a passing familiarity with Turbo. If you have never used Turbo before, this article will not be the best starting place. This article is an update to an article I published earlier this year. Reviewing the previous article will help you understand why GET Turbo Streams are such an exciting change.

As usual, you can find the completed code for this tutorial on Github.

Let’s get started!

Read the rest 16-minute read