Week 45 - Hotwire Live Reload, Alpine.js as an alternative, and more!
This week's Hotwire Weekly covers tips, tools, and tutorials for enhancing Rails with Hotwire and Turbo.
Welcome to Hotwire Weekly!
Welcome to another issue of Hotwire Weekly! Happy reading! 🚀✨
📚 Articles, Tutorials, and Videos
Alpine.js as a Stimulus alternative - Felipe Vogel explores Alpine.js as an alternative to Stimulus for adding JavaScript to server-rendered pages. He highlights that Alpine.js also allows to write JavaScript in separate files, similar to Stimulus, and addresses the "Content Security Policy (CSP) build" to prohibit inline JavaScript.
How to Set Up View Components in a Rails App - Ken Greeff offers a step-by-step guide to implementing ViewComponents in Rails, helping to organize code similar to modern front-end frameworks. It covers setting up a Rails app with Tailwind and esbuild, installing the View Component gem, and demonstrating the benefits of using components for cleaner, more maintainable code.
Rails 8 + Hotwire Live Reload: Stop Refreshing Your Browser - Kaleb Lape's tutorial dives into setting up the hotwire-livereload gem to improve Rails 8 development with automatic page updates. Key highlights include configuring Hotwire Live Reload without Redis, leveraging Rails 8’s SQLite WebSocket system, and demonstrating real-time updates in a live coding session.
The Ultimate Guide to implementing Hotwire and Turbo in a Rails application - Julian Rubisch provides an in-depth exploration of integrating Hotwire and Turbo into Rails applications. The guide covers core concepts such as Turbo Drive, Frames, and Streams, and looks into advanced features like morphing and lazy loading.
Store UI State in localStorage with Stimulus - Rails Designer demonstrates how to persist user interface preferences, such as theme settings, using Stimulus and the browser's localStorage.
Render Components from Turbo Broadcasts - Scott Watermasyks looks into rendering components directly from Turbo broadcasts in Rails. He introduces a solution that involves creating an initializer to extend Turbo Streams, enabling the rendering of components within broadcast actions.
Cmd+Enter to Submit a form with Stimulus - Yaroslav Shmarov demonstrates how to enhance form usability by enabling form submission via Cmd/Ctrl + Enter using Stimulus. He outlines three approaches to implement this functionality.
Up and Running with Hotwire Native iOS 3 - Bridge Components - William Kennedy explores enhancing user experience in Hotwire Native iOS applications by integrating native interactions into HTML views through Bridge components. In this part, he provides a step-by-step guide to implementing a form component that adds a native submit button to a modal form.
Talk Recording: Leveling Up Developer Tooling For The Modern Rails & Hotwire Era - The talk recordings from Rocky Mountain Ruby 2024 are live. Marco Roth presented a talk about Developer Tooling for the modern Rails and Hotwire era and Ron Shinall gave a lightning talk about Turbo Morphing at the 20:20 timestamp.
Video Series: Rich Text Laravel (Trix Editor) - Tony Messias released a series of videos on rich-text-laravel, the Laravel port of Action Text/Trix. Some of the concepts and topics discussed in the videos also apply to how Trix is used in Rails via Action Text. He released a few more videos on the topic on his YouTube Channel about Attachments with MediaLibrary, Custom Typing Experience (Markdown-Inspired) on Trix, and Disable Submits When Pending Attachments.
Remote Ruby: Solid Cable with Nick Pezza - Nick Pezza joins the Remote Ruby podcast to talk about building Solid Cable and how it became a default gem in Rails 8.
🧰 Libraries and Tools
hotsheet - Manage your database with a simple and familiar web interface.
🎉 Releases
rails 8.0.0 - A full-stack web framework for Ruby.
hotwire-dev-tools v0.3.1 - Browser Extension for Turbo and Stimulus.
vite_rails v3.0.19 - Use Vite in Rails and bring joy to your JavaScript experience.
Feel free to follow us on Twitter/X, Bluesky, or on Mastodon!
See you next week!