⚡️ Hotwire dev newsletter - July 2023 edition

Welcome back to the ⚡️ Hotwire dev newsletter!

There is a lot of exciting content this month. Highlights include the Rails World speaker announcement, a bunch of Hotwire tutorials, and some articles on integrating native code into Turbo Native apps.

I’ve also officially started writing my book! It will help Rails developers with zero iOS knowledge build fully functioning Turbo Native apps. I barely have one chapter done but I am pumped to work on this. 💪

If you want a look behind the scenes then subscribe to my weekly newsletter. I’m posting snippets and content sneak peeks as I write.

📰 News

Rails World speakers announcement

29 speakers have been announced for the Rails World conference in October and wow is this an impressive list. 🤩 There’s a lot of familiar faces in the Rails community and a few pleasant surprises. I wonder what the creator of Tailwind, Adam Wathan, will be talking about!

You’ll also notice that my name is on the list. I’m finally presenting a talk on Turbo Native! And I’m honored to have my name next to such distinguished folks. I hope to see you there.

👩‍🎓 Tutorials

What is the difference between Turbo and Stimulus, and what exactly is Hotwire?

by Sid Krishnan

I like kicking off each newsletter with an introductory article. And this week is no exception.

Sid provides an overview of Hotwire and how all the different pieces fit together. There’s also a little code snippet on how one could naively implement Turbo(links). Even after years of working with the framework it’s nice to see it boiled down to just a few lines of code.

Broadcasting Progress from Background Jobs

by David Kimura @kobaltz

Learn how to broadcast a Turbo Stream from a background job to update a visual progress bar. And stick around for the second half where David explores a Stimulus controller to coordinate updates from multiple jobs running at the same time.

Simple Lazy Loading in Rails with Hotwire and Turbo Frames

by Harrison Broadbent @hrrsnbbnt

Loading content asynchronously has become much easier in Rails with the introduction of Turbo Frames. Follow along as Harrison teaches you everything you need to know, including an animated loader powered by Tailwind CSS.

Craft a Custom Context Menu in Rails 7

by Deanin @Deaniocom

Ever wondered how your email client shows something custom when you right-click? This tutorial walks you through how to add one to your Rails app. It wires up a Stimulus controller to render a HTML partial - leaving you the flexibility to style it to match your app. 🖱️

Supercharge your Stimulus controllers with Custom APIs

by Marco Roth @marcoroth_

Ever wished you could access DOM elements by CSS selectors in Stimulus? This tutorial shows you how to do just that - by building your own custom API, right into Stimulus!

The best part is that the technique can be reused to build more of your own customizations. The possibilities are endless.

Liking Posts With Hotwire in Ruby on Rails

by Chris Oliver @excid3

Back in 2014 GoRails published Liking Posts, a video tutorial showing how to update a like count without reloading the entire page. As expected back then, Chris used jQuery and .js.erb template files.

This tutorial rebuilds the same functionality with a modern approach, Turbo Streams. It’s great to recognize just how far the Rails frontend has come with the introduction of Hotwire.

Active Storage Turbo Persistence Across Pages

by Deanin @Deaniocom

Another dive into permanent elements from Dean. Learn how to keep progress of an embedded YouTube video even when clicking between pages. As always, there are a bunch of tiny gotchas to watch out for - with solutions to each in the video.

🐙 Open source projects

The Ultimate Turbo Modal for Rails (UTMR)

by Carl Mercier

A “featureful, yet extremely easy to use” modal implementation built for Turbo-powered Rails apps. There’s a huge feature list in the README but I’m most excited about two things: opening a modal updates the browser’s URL and modals opened in a new tab don’t break.

📱 Turbo Native

Dynamic UIMenu in Turbo Native apps

by Joe Masilotti @joemasilotti

Learn how to markup existing HTML to render native components in a Turbo Native app.

I walk through using a native UIMenu in place of a web-powered hamburger menu. All made possible by a small Stimulus controller to send JavaScript messages over the bridge.

Add browser cache store PR

by Alberto Fernández-Capel

Currently, this (open) PR enables page snapshots to be persisted across different tabs, page reloads and even browser restarts. But I’m most excited because it “is also a stepping stone to implement offline support with Service Workers.”

This could be the first step towards offline Turbo Native apps!

Turbo Native Authentication

by William Kennedy @_williamkennedy

Split across three articles, William tackles native authentication in Turbo Native. He starts off with the Rails backend, following up with iOS and finally Android.

A fair warning that there is a lot going on in this series. But it offers a solid starting point if you are looking to understand more of the native ↔ web interaction that Turbo Native offers.