Week 36 - Lazy-load Turbo Frames early, Turbo Laravel Morphing Support, and more!
This edition highlights EuRuKo 2024 talks and features fresh content on Hotwire and Rails!
Welcome to Hotwire Weekly!
Welcome to another issue of Hotwire Weekly! Next week, EuRuKo 2024 kicks off in Sarajevo, September 11-13, featuring several Hotwire and Hotwire-adjacent talks:
- Keynote: Evolution of real-time and AnyCable Pro - Irina Nazarova
- Leveling Up Developer Tooling For The Modern Rails & Hotwire Era - Marco Roth
- Rails 8 Frontend: 10 commandments and 7 deadly sins in 2025 - Yaroslav Shmarov
- What you can do with Ruby on WebAssembly - Yuta Saito
- Building Beautiful Views in Ruby with Phlex - Joel Drapper
- Assembling the Future: crafting the missing pieces of the Ruby on Wasm puzzle - Svyatoslav Kryukov
- Keynote: Livebook: where Web, AI, and Concurrency meet - José Valim
Enjoy the content and hope to see you at EuRuKo! 🚀✨
📚 Articles, Tutorials, and Videos
Load a Lazy Loaded Turbo Frame Before it Scrolls Into View - Radan Skorić demonstrates how to preload lazy-loaded Turbo Frames using a Stimulus controller and the IntersectionObserver API. By tweaking the rootMargin, frames load just before they enter the viewport, improving perceived performance and user experience.
Dependent Fields with Hotwire - David Kimura from DriftingRuby demonstrates how to handle dependent fields in forms using Hotwire, enhancing dynamic interactions without full page reloads.
Turbo Larvel - Turbo Streams with Morph - Tony Messias shows how to use Morphing with Laravel. This new feature enables seamless DOM updates by morphing elements instead of replacing them, allowing smoother transitions for dynamic content. This brings the Turbo morphing concept to the turbo-larvel library.
Building Nested Forms in Rails with Stimulus - Rails Designer explains how to build dynamic nested forms using Stimulus and Rails, removing the need for additional JavaScript dependencies, offering an alternative approach to last weeks Turbo version.
Refactor Stimulus Controllers to Use Change Callbacks -
In this article, Rails Designer covers how to refactor Stimulus controllers to leverage change callbacks, optimizing your controllers for reactivity and cleaner code.
Building a Dashboard with View Components in Rails - Ken Greeff demonstrates how to use View Components to build a reusable, component-based dashboard in a Rails app, with a focus on structuring front-end code for maintainability.
i-html, an inline-html import element - Keith Cirkel introduces i-html, a lightweight alternative to Turbo Frames for importing and injecting HTML directly into the DOM. It allows dynamic updates via the src attribute, supporting lazy loading and form targeting, making it a simple solution for inline content without needing full Turbo Frame functionality.
The Duet Date Picker - Tony Messias demonstrates how to integrate the Duet Date Picker with Turbo Laravel using Importmap Laravel. He explains how to wrap it in a custom element, offering enhanced functionality like custom date formatting and keyboard accessibility.
The Rails and Hotwire Codex is updated for Rails 7.2 - Ayush Newatia published a new version of his "The Rails and Hotwire Codex" book. It's now updated for Rails 7.2. Check out the book on the website if you haven't already.
Hello Hotwire - Free Course - Full Version - Andy Leverenz shared the free version of his Hello Hotwire course on YouTube. Hello Hotwire is a comprehensive resource for learning Hotwire with Rails. Go buy the full version, which includes the premium build-alongs and other perks on HelloHotwire.com.
🎉 Releases
turbo-laravel v2.1.0 - Turbo for Laravel.
turbo_power v0.7.0 - Custom Turbo Stream Actions power-pack for Turbo Streams.
debounced v1.0.2 - Debounced versions of standard DOM events.
@rails/request.js v0.0.10 and v0.0.11 - Rails-aware Fetch API wrapper.
requestjs-rails v0.0.12 - Request.js for Rails.
vite_ruby v3.8.1 and v3.8.2 - Use Vite in Ruby and bring joy to your JavaScript experience.
Feel free to follow us on Twitter/X or on Mastodon!
See you next week!