Week 49 - Hotwire Essentials tutorial, Solid Cable in Production, and more!
This edition covers Hotwire Essentials, new tutorials, tools, and the release of Phoenix LiveView 1.0.
Welcome to Hotwire Weekly!
Welcome to another issue of Hotwire Weekly! Happy reading! 🚀✨
📚 Articles, Tutorials, and Videos
Hotwire Essentials is here: Learn Hotwire by building a podcast player - Lindsey Christensen and the thoughtbot team launched an interactive tutorial called "Hotwire Essentials". Hotwire Essentials takes you step-by-step through building a functional podcast player and teaches you how to apply Hotwire patterns to solve real-world problems. Learn Turbo's capabilities, Stimulus controllers, and best practices for server-driven interactivity. The source-code for the app is also available on GitHub.
Why Disconnect in Stimulus Controller - Rails Designer emphasizes the importance of implementing the disconnect lifecycle method in Stimulus controllers to prevent memory leaks and maintain browser performance.
Solid Cable in Production with Kamal - Miles Woodroffe details the process of deploying Solid Cable into a production environment. He emphasizes the importance of configuring multiple databases, particularly integrating SQLite for Solid Cable alongside an existing PostgreSQL primary database.
Hotwire Deep Dive: Mastering Scroll Position with Turbo - Kaleb Lape tackles a common Hotwire challenge: maintaining scroll position during Turbo morphing, especially with nested scrollable elements. Using real examples from the RailsQuest platform, he demonstrates how to manage both window- and element-level scroll preservation, explaining why different contexts need distinct approaches.
Including Rails View Helpers is a concern - Ben Sheldon advises against incorporating modules from app/helpers/ into other parts of a Rails application, such as controllers or models. Directly including these modules elsewhere can lead to issues, as they may depend on view-specific contexts that aren't present outside the view layer. He recommends organizing shared behaviors into concerns.
Advanced Stimulus: Custom Action Options - Rails Designer explores how to enhance Stimulus by creating custom action options. These options, appended to actions (e.g., click->controller#action:prevent), modify event behavior.
Up and Running with Hotwire Native - Custom iOS Keyboard - William Kennedy demonstrates how to enhance a Rails application by integrating a custom iOS keyboard toolbar using Hotwire Native. The tutorial guides you through creating a JavaScript bridge component that communicates with the native iOS app to control text formatting options like headings, bold, and italics within a Trix editor.
How to Design UI Forms in 2024: Your Best Guide - This guide by Mads Soegaard explores best practices for crafting effective UI forms that improve user experience and drive conversions. Key strategies include simplifying form structures, using clear language, providing real-time feedback, and ensuring accessibility. While not Hotwire-specific, these principles are universally valuable and particularly relevant for applications built with Hotwire.
Phoenix LiveView 1.0.0 is here! - Chris McCord announced the release of Phoenix LiveView 1.0.0, marking a significant milestone six years after its initial commit. LiveView enables developers to build dynamic, real-time server-rendered applications without extensive JavaScript in Elixir. While not directly Hotwire-related, LiveView inspired StimulusReflex, which in turn influenced modern Turbo features, making this release a foundational point for frameworks that prioritize simplicity and performance in dynamic web experiences.
🧰 Libraries and Tools
constraint_validations - Integrate ActiveModel::Validations, ActionView, and Browser-provided Constraint Validation API.
formulus - Client-side HTML form validations based on the browser HTML Form Validation API.
dual-range-input - Native dual range input in 80 lines. Blog post
🎉 Releases
hotwire-dev-tools v0.3.2 - Browser Dev Tools for Turbo and Stimulus. Available for Firefox, Chrome, and Safari.
hotwire-native-ios v1.0.1 - A high-level native framework that provides you with all the tools you need to leverage your web app and build great mobile apps.
hotwire-native-android v1.0.2 - A high-level native framework that provides you with all the tools you need to leverage your web app and build great mobile apps.
tailwindcss-ruby v3.4.16 - A self-contained tailwindcss executable, wrapped up in a ruby gem.
tailwindcss-ruby v4.0.0.beta.5 and beta.6 - A self-contained tailwindcss executable, wrapped up in a ruby gem.
hot-glue v0.6.8 - Simple, plug & play Rails scaffold building companion for Turbo-Rails and Hotwire.
Feel free to follow us on Twitter/X, Bluesky, or on Mastodon!
See you next week!