Week 13 - Hotwire Native Bridge Components, Hotwire Cheatsheet, and more!
This week’s Hotwire Weekly covers tools, tutorials, and tips for enhancing Rails with Hotwire!
Welcome to Hotwire Weekly!
Welcome to another issue of Hotwire Weekly! Happy reading! 🚀✨
📚 Articles, Tutorials, and Videos
📝 Articles
Hotwire for Ruby on Rails Developers - Igor Kasyanchuk published a Hotwire Cheat Sheet for Rails Developers.
Touch Events (swipe) using Stimulus - Rails Designer explores implementing touch interactions, like carousels and swipeable cards, using Stimulus controllers.
A library of bridge components for Hotwire Native apps - Joe Masilotti introduces a Bridge Component Library for Hotwire Native applications, offering a collection of reusable components.
Rails 8 Assets: Combining importmaps - Radan Skorić explains how to merge importmaps in a Rails 8 application, particularly when integrating Rails engines. He demonstrates creating a custom Importmap::Map instance and using the draw method to evaluate multiple importmap.rb files.
How link_to + Turbo Prefetching Speeds Up Navigation - RubyCademy discusses how Turbo 8 enhances Rails applications by prefetching pages when users hover over links, resulting in a perceived speed boost.
Catch JS Errors with Playwright - Josua Schmid discusses transitioning from Selenium to Playwright for system tests in Ruby applications. He highlights the challenge of capturing JavaScript console errors in Playwright, which differs from Selenium's approach.
AutoNumeric.js: Currency Input Field for Rails - Yaroslav Shmarov showcases a method for implementing currency input fields in Rails applications using AutoNumeric.js and Stimulus.
🎥 Videos
Sorting Images with Sortable.js and Stimulus in Rails - Ken Greeff published a video in which he implements a drag and drop sort with Sortable.js, ViewComponent and Stimulus in Rails.
GoRails: Realtime Chat Part 4 - A Simpler Build with Broadcasts Refreshes - Collin Jilbert shared the fourth part of an updated video series on GoRails where they are building a realtime chat app by using as much Hotwire as they can. The series starts simple to see where things fall down so they are then able to implement improvements over the upcoming lessons in the series.
Virtual Scrolling with Rails and Hotwire - Oli Woods walks through challenges with rendering Shopify products that exceed 100+ variants. The performance bottlenecks were caused by too many DOM elements with event listeners, even in an otherwise lean Hotwire/Stimulus setup. After exploring virtual scrolling, Oli proposes a simpler solution using Turbo Frames.
🎙️ Podcasts
Remote Ruby: The Learn Hotwire Course, GitHub Sign-off for CI and Yarn versions - Andrew Mason and Chris Oliver discuss the development of the 'Learn Hotwire' course. They also dive into topics such as team licenses, early access availability, CI workflows, GitHub sign-off processes and more.
🎨 CSS
The <select> element can now be customized with CSS - Adam Argyle on the Chrome for Developers blog announced that the <select> element in HTML can now be fully customized using the CSS property appearance: base-select. This enhancement allows developers to include rich HTML content, such as images or SVGs, within <option> elements
🧰 Libraries and Tools
kaze - Opinionated minimal Rails authentication scaffolding with Hotwire, React, or Vue + Tailwind.
🎉 Releases
bridge-components v0.1.0 and v0.2.0 - A collection of bridge components for Hotwire Native apps.
vite_ruby v3.9.2 - Use Vite in Ruby and bring joy to your JavaScript experience.
view_component v3.22.0 - A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
tailwindcss-ruby v4.0.16 and v4.0.17 - The Tailwind CSS exectuable packed up in a Ruby gem.
Feel free to follow us on Twitter/X, Bluesky, Linkedin, or on Mastodon!
See you next week!