Week 15 - CodeMirror with ImportMaps, Resize Observer with Stimulus, and more!
This edition covers RubyKaigi talks, articles on Rails 8, and early access to the Learn Hotwire course!
Welcome to Hotwire Weekly!
Welcome to another, slightly shorter, issue of Hotwire Weekly! Happy reading! 🚀✨
RubyKaigi 2025 takes place in Matsuyama, Japan next week and there are a few Hotwire-adjecent talks:
- Empowering Developers with HTML-Aware ERB Tooling - Marco Roth
- Running JavaScript within Ruby - Kengo Hamasaki
- Running ruby.wasm on Pure Ruby Wasm Runtime - Uchio KONDO
📚 Articles, Tutorials, and Videos
Rails 8 Assets: Adding a bundled package alongside vanilla setup - Radan Skorić demonstrates how to integrate complex npm packages requiring bundling, like Tom Select, into a Rails 8 application using the default Propshaft + importmap-rails setup. The article also covers handling associated CSS, suggesting the use of cssbundling-rails or symlinking precompiled CSS files into the asset pipeline
How to use CodeMirror with ImportMaps - Chris Oliver revisits integrating CodeMirror with Rails, this time using Importmaps instead of Webpacker. The video walks through pinning CodeMirror modules, setting up a Stimulus controller, and wiring it to a hidden input for saving code edits.
Resize Observer API with Stimulus - Exequiel Rozas demonstrates how to use the Resize Observer API with Stimulus to dynamically respond to element size changes in Rails apps. Practical examples include responsive UI patterns like adaptive charts, equal-height pricing tables, and waveform resizing, all managed with minimal overhead and clean Stimulus integration.
Build Rails Apps FAST Using Components - In a new video Brian Casel showcases Instrumental Components — a UI scaffolding system for Rails. With just a few commands, he spins up a full SaaS app including signup, authentication, team management, admin dashboard, and collapsible layouts.
Hiding elements that require JavaScript without JavaScript - Dade proposes a simple method to hide JavaScript-dependent elements when JavaScript is disabled, using a .d-js-required class combined with a <noscript> style block. This avoids the need for complex JavaScript or CSS setups and ensures a cleaner, more accessible, and Hotwire-friendly experience.
Learn Hotwire Course: Now in early access - Chris Oliver published the early access version of Learn Hotwire course. It's $50 off until the end of April. Make sure you get yourself a copy of the most complete Hotwire Learning Resource to date.
🎉 Releases
inertia-rails v3.8.0 - The Rails adapter for Inertia.js.
hotwire-native-bridge v1.2.1 - Web library for building Bridge Components in Hotwire Native apps.
proscenium v0.19.0.beta8 and beta9 - Modern client-side development for Rails.
Feel free to follow us on Twitter/X, Bluesky, Linkedin, or on Mastodon!
See you next week!