Week 44 - Comparing Hotwire with HTMX, Nested Models in One Form, and more!
This week's Hotwire Weekly covers new tutorials, tools, and insights into Hotwire, Turbo, Stimulus, and more!
Welcome to Hotwire Weekly!
Welcome to another issue of Hotwire Weekly! There is a lot to unpack this week, Happy reading! 🚀✨
P.S. You can now find us on Bluesky too! 🦋
📚 Articles, Tutorials, and Videos
How To Use Importmaps With Rails - This GoRails episode by Chris Oliver introduces the basics of using Importmaps in Rails, a feature allowing developers to manage JavaScript modules without relying on bundlers.
Create Nested Models with One Form - Nested Attributes Explained - Vini Oyama explores in his blog post and video how to handle complex nested models in Rails using nested attributes within a single form. He provides a step-by-step guide on setting up models, controllers, and views to manage multi-level nested forms effectively.
Safely Passing Ruby Variables to JavaScript in ERB - Daniel Doubrovkine explains safe ways to pass Ruby variables to JavaScript in ERB. He highlights common pitfalls with direct variable embedding, like issues with special characters and line breaks, and offers solutions using html_escape and JSON encoding to ensure data integrity.
Hotwire and HTMX - Same Principles, Different Approaches - Radan Skorić looks into the similarities and differences between Hotwire and HTMX, two frameworks aimed at simplifying modern web application development by enhancing HTML and CSS with minimal JavaScript. Both frameworks prioritize server-side rendering and treat HTML as the core of application state.
Basic Autocomplete Without JavaScript using Datalist - Rails Designer explores implementing basic autocomplete functionality without relying on JavaScript, utilizing HTML's native datalist element.
Drifting Ruby Episode #480: Turbo Frame Targets - Dave Kimura posted a new episode on DriftingRuby and discusses Turbo Frame Targets. The episode provides practical examples, including nested Turbo Frames and handling form errors within frames, and more.
Up and Running with Hotwire Native iOS - Native Screen - In Part 2 of his Hotwire Native iOS series, William Kennedy walks through adding native screens to Hotwire Native iOS apps. He demonstrates configuring path routing, creating a custom UIViewController, and handling navigation with a navigator delegate.
Safari iOS 18: Preventing default user-agent view transitions with Turbo - Safari 18 added support for the View Transition API. On iOS, back/forward swipe animations cause double animations when using Turbo's view transitions, due to the default user-agent animations. Jerry Cheung demonstrates a solution to prevent Turbo's custom animations from overlapping with Safari's defaults.
Panic at the SPA! - Daniel Hall wrote a blog post in which he critiques Single-Page Applications (SPAs) for their complexity, performance issues, and reliance on JavaScript tooling, suggesting that traditional multi-page applications may offer more reliable solutions.
Turbo Mount now supports Svelte 5 - Svyatoslav Kryukov announced that Turbo Mount now has support for the recently released Svelte 5. Turbo Mount is a library that let's you use use React, Vue, Svelte, and other components with Hotwire. The best of both worlds.
Video Series: Rich Text Laravel (Trix Editor for Laravel) - 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 videos on the Installation, HTML Sanitization, Styling the Toolbar, and Simple Attachments.
Hotwire Club: Stimulus - Video Progress Tracker with LocalStorage - Julian Rubisch published a new challange for The Hotwire Club about tracking video progress using localStorage in Stimulus.
🧰 Libraries and Tools
Liminal - A fresh take on old-school forums - built using Hotwire technology by our friend Jeremy Smith.
vite_ruby - Vite.js in Ruby, bringing joy to your JavaScript experience.
🎉 Releases
hotwire-dev-tools v0.3.0 - Browser Extension for Turbo and Stimulus.
turbo-mount v0.4.0 - Use React, Vue, Svelte, and other components with Hotwire.
view_component v3.20.0 - A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
tailwindcss-ruby v4.0.0.alpha.31 - A self-contained tailwindcss executable, wrapped up in a ruby gem.
proscenium v0.17.0 - An engine for powering your Rails frontend.
rich-text-laravel v3.2.1 - Integrates the Trix Editor with Laravel. Inspired by the Action Text.
Feel free to follow us on Twitter/X, Bluesky, or on Mastodon!
See you next week!