Week 10 - Turbo Frames Loading Spinners, when to use Rails views, and more!
This week, we explore seamless loading spinners in Rails and new Hotwire updates!
Welcome to Hotwire Weekly!
Welcome to another issue of Hotwire Weekly! Happy reading! 🚀✨
📚 Articles, Tutorials, and Videos
📝 Articles
Hotwire Turbo Frames: Add Seamless Loading Spinners in Rails - Nicolás Galdámez demonstrates how to enhance the user experience in Rails applications by adding loading spinners to Turbo Frames using CSS by leveraging the busy attribute.
Build a Notion-like editor with Rails, part 2 - Rails Designer published a second article and continues the development of a Notion-like editor in Rails by enhancing the user interface with Tailwind CSS and improving functionality using Stimulus. The previous article can be found here.
Rails 8 assets: Break down of how Propshaft and importmap-rails work together - Radan Skorić provides an in-depth analysis of the integration between Propshaft and importmap-rails in modern Rails applications. He outlines the asset pipeline process, detailing how JavaScript files transition from external sources to executable modules within a web application.
Rails views, web components, React. Why make a choice? - Jeremy Wells discusses how Aha! integrates various front-end technologies to enhance their development process. They utilize traditional Rails views for straightforward data display, employ Rails ViewComponents for reusable and testable components within Ruby.
Building a Multi-Page Guided Tour in Ruby on Rails with Driver.js - Vinícius Oyama demonstrates how to implement a multi-page guided tour in a Rails application using Driver.js.
🎥 Videos
Rails GET Requests with Hotwire Gotchas - Brian Casel addresses common challenges when handling GET requests in Rails applications that utilize Turbo. The video also touches on considerations for more complex designs and emphasizes the importance of understanding Turbo's behavior in Rails applications.
GoRails: Realtime Chat Part 1 - Collin Jilbert shared the second part of an updated video series on GoRails where they are building a realtime chat app but using as much Hotwire as they can to do so. The series starts simple to see where things fall down so they are then able to implement improvements over the upcoming lessons in the series.
Presence ain't perfect - Vladimir Dementyev explores patterns & pitfalls of presence tracking in Ruby on Rails applications with Action Cable and AnyCable. It was recorded at the SF Ruby February Meetup and the recording just got published.
🎨 Tailwind and CSS
How to detect classes contained in ruby gems in Tailwind 4 - Matouš Borák discusses the challenges of ensuring that Tailwind CSS v4 detects classes used within Ruby gems, especially when these gems reside outside the main application directory.
Let's talk about where and how to investigate CSS rules - Diego Matias Pousa shares his approach to understanding CSS behavior and browser API functionalities. It touches on Feature Compatibility, Reliable Documentation, and Deep Dives into Specifications.
🎙️ Podcasts
Ruby Rogues: Hotwire Native Updates, Challenges, and Opportunities - Joe Masilotti joined the Ruby Rogues podcast in which they do a dive deep into the world of Hotwire Native.
📖 Books
New beta for "Hotwire Native for Rails Developers" - Joe Masilotti published a new beta version of his Hotwire Native for Rails Developers book and added two new chapters on Deploy to Physical Devices with TestFlight and Play Testing. You can get the book on the Pragmatic Bookshelf.
🎉 Releases
hotwire-native-android v1.1.3 - Hotwire Native for Android.
hotwired/turbo v8.0.13 - The speed of a single-page web application without having to write any JavaScript.
turbo-laravel v2.3.0 - Integrate Turbo in Laraval.
stimulus-laravel v1.2.0 - Integrate Stimulus in Larave.
node-turbo v1.2.4 - Integrate Turbo in Node apps.
anycable v1.6.0-rc.5 - Realtime server for reliable two-way communication to power-up any backend.
anycable-client v1.1.0 - AnyCable / Action Cable JavaScript client.
@anycable/turbo-stream v0.8.1 - AnyCable Client plugin to support Turbo Streams.
cssbundling-rails v1.4.3 - CSS Bundling for Rails.
importmap-laravel v2.4.0 - Use ESM with import maps in Laraval apps.
tailwindcss-ruby v4.0.12 - A self-contained tailwindcss executable, wrapped up in a ruby gem.
phlex v2.1.0 - v2.1.2 - HTML Views in Pure Ruby.
phlex-rails v2.1.0 and v2.1.1 - Phlex for Rails.
turbo-rails v2.0.12 and v2.0.13 - Turbo for Rails.
rails_icons v1.2.0 - Add any icon library to a Rails app.
tailwindcss-rails v4.2.0 - Integrate Tailwind CSS with the asset pipeline in Rails.
Feel free to follow us on Twitter/X, Bluesky, Linkedin, or on Mastodon!
See you next week!