Week 04 - Hotwire Native Environment Switching, Stimulus Autocomplete, and more!
This week’s Hotwire Weekly dives into new articles, tutorials, and tools for enhancing Hotwire development!
Welcome to Hotwire Weekly!
Welcome to this week's edition of Hotwire Weekly! It's been a productive week in the Hotwire community, with plenty of new articles, tutorials, and updates to explore. Dive in and enjoy! 🚀✨
📚 Articles, Tutorials, and Videos
📱 Hotwire Native
Hotwire Native - Switch Environments without having to rebuild the app - Leon Vogt published a first blog post on Hotwire Native and talks about an approach to dynamically switch between different environments (e.g., staging, production) in Hotwire Native applications without rebuilding the app. For both iOS and Android.
Render Devise Forms Natively With This one Neat Hotwire Native Trick - Jess Waites wrote a blog post about tricking your Hotwire Native mobile app into rendering Rails Devise forms in native modals instead of the standard web view.
DevTools for Hotwire Native - Leon Vogt shared ideas and a first-look at a prototype for Hotwire Native DevTools.
New beta for "Hotwire Native for Rails Developers" - Joe Masilotti published a new beta version of his Hotwire Native for Rails Developers book. This update includes the first chapter on iOS Bridge components.
📚 Articles
Stimulus Autocomplete with Combobox Navigation - Jeremy Smith shares his experience transitioning from jQuery UI Autocomplete to a modern solution using Stimulus and GitHub's Combobox Navigation library.
Turbo Frames and the Extra DOM Node – How to Handle It? - Maciek Korsan discusses how Turbo Frames introduce additional DOM elements, potentially disrupting layouts and talks about how to deal with that.
From Sticky to Pinned: A Stimulus Controller Approach - Victor Cobos explores detecting when CSS position: sticky elements become "stuck" during scrolling. He introduces a Stimulus controller that leverages the IntersectionObserver API to monitor these transitions
Accessibility essentials every front-end developer should know - Martijn Hols highlights fundamental accessibility practices, such as semantic HTML, proper form labels, keyboard navigation, and appropriate ARIA usage, to make web applications more inclusive. While not strictly Hotwire-related, these principles are important for ensuring that Hotwire-powered apps provide a great experience for all users.
📺 Videos
Drifting Ruby: Refreshing Turbo Frames - Dave Kimura demonstrates how to reload specific Turbo Frames in Rails applications without a full page refresh. He explores various techniques, including using Turbo Streams and Stimulus controllers, to selectively update parts of a page.
Uncommon TailwindCSS — How to Get Over the Adoption Hump - Brian Casel uploaded a video in which he addresses the common challenges developers face when adopting Tailwind CSS. He explores resistance to Tailwind's approach, highlights its advantages, and shares pro tips and best practices for mastering the framework.
Video Series: "Stop Using React. Hotwire Introduction" - AI on Rails started a new video series called "Stop Using React. Hotwire Introduction" on YouTube and published two parts so far: Part I: Turbo Frames and Part II: Turbo Streams.
🎓 Courses
Webinar Reminder: From React To Hotwire - Maciek Korsan from Arkency is hosting a webinar next week (January 30, 2025, at 5 pm CET/11 am EST). The session will explore transitioning from React to Hotwire in Rails applications, addressing challenges, simplifying frontends with Turbo Frames and Stimulus, and translating React patterns to Hotwire. It will be live-streamed on YouTube.
Course: Learn Hotwire - Master fullstack development with Hotwire - Chris Oliver and William Kennedy teamed up to "build the most complete Hotwire course for Rails developers". As Turbo, Stimulus, and Hotwire Native are in a great spot, they try to cover as much as possible into one course. Sign up to get notified on their website now.
Couse: Hotwire Native Android with Jumpstart Pro - In a similar vein, Donn Felker shared that he finished recording a Jumpstart Android Pro course. It's going to contain about 24 lessons and 3.5h worth of video content.
🎙️ Talks
Being Happy with Frontend Development Again with Turbo (Hotwire) and Stimulus - Jerome Paul held a meetup talk at Melbourne Ruby in their November 2024 Meetup and the recording just got published on YouTube.
The Fundamentals of Turbo by Ben Randolph from Experience Builder - Ben Randolph held a meetup talk at the Boulder Ruby at their December 2024 Meetup and the recording just got published.
🧰 Libraries and Tools
railsboot UI - Rails View Components for Bootstrap.
maquina_components - Modern UI components for Ruby on Rails, powered by TailwindCSS and Stimulus
🎉 Releases
hotwire-spark v0.1.13 - A live reloading system that updates just what's needed to offer a smooth experience.
shakapacker v8.1.0 - Use webpack to manage app-like JavaScript modules in Rails
class_variants v1.1.0 - Easily configure styles and apply them as classes.
tailwindcss-rails v3.3.0, v3.3.1, and v4.0.0.rc1 - Integrate Tailwind CSS with the asset pipeline in Rails.
tailwindcss-ruby 4.0.0 - A self-contained tailwindcss executable, wrapped up in a ruby gem
css-zero v1.0.0 - An opinionated CSS starter kit for your "nobuild" application
Feel free to follow us on Twitter/X, Bluesky, or on Mastodon!
See you next week!