Week 40 - Why Your Turbo Form Submission Fails, Hotwire Native content, and more!
Excited for Rocky Mountain Ruby 2024 and hot new resources for Rails and Hotwire development! 🚀
Welcome to Hotwire Weekly!
Welcome to another issue of Hotwire Weekly! Next week, Rocky Mountain Ruby 2024 takes place in Boulder, Colorado, Oct 7-8, featuring some Hotwire and Hotwire-adjacent talks:
- How to make your application accessible (and keep it that way!) - Joel Hawksley
- Evolution of Real-Time and AnyCable Pro - Irina Nazarova
- Leveling Up Developer Tooling For The Modern Rails & Hotwire Era - Marco Roth
I hope to see you there! Happy reading! 🚀✨
📚 Articles, Tutorials, and Videos
ActiveStorage Direct Upload with Stimulus - This article by Rails Designer explains how to implement direct uploads with ActiveStorage using Stimulus. It shows how to set up a Stimulus controller to handle the upload process directly to cloud storage (e.g., S3) without passing through your app server.
Why Your Form Submission Fails: Hotwire, Cloudflare, and Missing Validation Messages - This JetThoughts article discusses issues with form submissions using Hotwire and Cloudflare, specifically missing validation messages due to Cloudflare stripping 422 response bodies. They resolved it by changing the server to return a 200 status code with error messages in the body, ensuring that validation messages reach the client.
Hotwire Native: Getting Started. Build mobile apps with Rails - Yaro Shmarov posted a video guide on getting started with Hotwire Native, a successor to Turbo Native that combines Turbo Native, Strada, and Turbo Navigator. It offers an efficient way to build hybrid mobile apps using your Rails web app as the foundation, wrapped in a native shell for iOS and Android.
Hotwire Native iOS - Tabs and design customisation - Yaro Shmarov's article explains how to customize Hotwire Native apps for iOS, focusing on adding a tab bar and customizing the design. It covers setting up different tabs for navigation, configuring their appearance, and modifying header styles to better match the app's theme.
Zero JS Magic - Transform Your #Rails App in 10 Minutes - This video by Kaleb Lape dives into enhancing a Rails to-do list app by implementing in-place editing with Turbo Frames, eliminating the need for JavaScript. It covers refactoring views, introducing Turbo Frames, and resolving layout issues while learning about Tailwind CSS, ERB, and the nuances of Turbo Frames.
Custom Elements Reacting to Changes - Dave Copeland explains how to use MutationObserver to enable custom elements to react to changes in the DOM, such as additions or modifications to child elements. He addresses challenges like infinite loops during updates and demonstrates using methods to pause and resume observation to avoid issues.
htmx View Transitions - The article by Brooke Kuhlmann discusses using View Transitions to animate slides with CSS, HTML, htmx, JavaScript, and optionally Ruby. It covers keyframes, media queries, and JavaScript hooks to create smooth animations similar to native mobile apps. Though not using Turbo, similar principles could be adapted in the Hotwire ecosystem for enhanced transitions and user experience.
Simple Table-of-Contents Highlighting Stimulus Controller - Jon Sully's article demonstrates how to add a simple table-of-contents highlighting feature using a Stimulus controller. The controller listens for scroll events and dynamically applies a bold style to the corresponding link as the user scrolls through the page.
🧰 Libraries and Tools
actioncable-next - Next-gen Action Cable implementation.
graphql-anycable - A drop-in replacement for GraphQL ActionCable subscriptions. Works with AnyCable.
🎉 Releases
importmap-rails v2.0.2 - Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
wsdirector-cli v1.1.0 - Command line tool for testing WebSocket servers using scenarios.
view_component v3.16.0 - A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
tailwindcss-rails v2.7.7 - Tailwind CSS for Rails.
tailwindcss-rails v3.0.0.rc1 - Tailwind CSS for Rails.
propshaft v1.1.0 - The new default asset pipeline for Rails 8.
actioncable-next v0.1.0 and v0.1.1 - Next-gen version of Action Cable.
Feel free to follow us on Twitter/X or on Mastodon!
See you next week!