The RailsNotes Newsletter 🟥 ISSUE #4

🟥 ISSUE #4 (Lazy Loading, Boring Rails, Hotwire, and Turbo Frame autoscrolling)

Author

Harrison Broadbent
July 28, 2023

“an isometric projection of a half-built planet in space made from rubies slowly loading into existence, with glowing stars in the background, painting in the style of abstract art, moody lighting”

— SPONSOR —

The Short Ruby Newsletter is a weekly newsletter covering top articles, news, tweets, posts and more from the Ruby/Ruby on Rails communities.

If you’re reading this newsletter, you’ll probably like Short Ruby too, so what are you waiting for? Read it here.

Welcome to The RailsNotes Newsletter — Issue #4!

Thank you to all 180 of you for subscribing! 🎉🥳

This week has been a very productive week for RailsNotes! 🥳 I managed to publish two new articles (and start a third), plus I revamped a lot of the main RailsNotes site (and have heaps more changes planned).

Exciting stuff! If you have any suggestions or adjustments you’d like to make to the main site, just reply to this email and I’ll see it.

I also want to thank ShortRuby for being this newsletter’s first sponsor ❤️ Lucian (who writes ShortRuby) featured RailsNotes in his newsletter when I was starting out a few months ago. I’m really excited to be partnering up together today.

Onto the newsletter!

Featured Article —

These guys will let us know when our turbo_frame_tag has finished loading its content… right guys? …….guys? 🦊🦊

I’ve always been interested in “the Rails way” of building frontends — using Hotwire, Stimulus and Turbo to replace libraries like React and Vue. This article encapsulates everything I love about Hotwire and Turbo (and “the Rails way” in general).

Lazy loading in Rails has grabbed my attention for a while now. Why? Because Hotwire and Turbo make lazy loading so easy!

In this article, I show you how to implement a simple lazy loader with only 12 lines of code! We basically just hook up a couple of turbo_frame_tags to each other and adjust our controllers a bit!

I even managed to squeeze in a nifty method of adding empty loading states to your Turbo Frames with TailwindCSS, so your users aren’t just staring at a blank screen while they wait.

More articles from around the web —

  • Lazy-loading content with Turbo Frames and skeleton loader — I’ve read every single one of Matt Swanson’s articles. Every single article is great 🔥 — Matt and the Boring Rails blog are what inspired me to start RailsNotes in the first place! The lazy loading article was his first article that I read, and I’ve always wanted to go back and write my own take. Well, now I have! I think both articles complement each other, and I recommend you read both.

  • A Brief Introduction to Hotwire (akshaykhot.com) — Hotwire (and Turbo and Stimulus) are all still pretty ✨ fresh ✨ in the Rails world, so you might not know a whole lot about them. I’ve got something to fix that — Akshay has written a great little Hotwire introduction, covering how everything fits together. It’s a great starting point if you’re interested in diving deeper into Hotwire.

  • Decompose with Turbo Frames (turbo.hotwired.dev) — This is the official Turbo Frames handbook, so as you’d expect, it’s loaded with lots of great examples and interesting discussions. It’s actually part 3 of 7 (!!!) of the official Turbo/Hotwire guides, all of which are worth a read.

A handy tip — autoscrolling to a loaded turbo_frame_tag

Did you know that you can automatically scroll to a turbo_frame_tag after it’s finished loading? I didn’t, since it’s hidden deep in the official Turbo documentation.

It’s really easy — just add autoscroll: :true to your turbo_frame_tag (and make sure it’s set up to eager load, otherwise loading won’t even start, let alone finish)

Just like this — 

# scroll this element into view when loaded

<%= turbo_frame_tag :name, 
      src: path, 
      loading: :eager, 
      autoscroll: :true
    do %>

L