Week 06 - Avoid Turbo Morphing Pitfalls, New Markdown Editor, and more!
Avoid common pitfalls with Turbo morphing, new markdown editor for Rails, and more Hotwire updates.
Welcome to Hotwire Weekly!
Welcome to another issue of Hotwire Weekly! Happy reading! ๐โจ
๐ย Articles, Tutorials, and Videos
๐ Articles
How to avoid problems with Turbo morphing - Radan Skoriฤ iscusses common pitfalls when using Turbo 8's morphing feature, such as losing initialized DOM elements or resetting UI states. He outlines key strategies to mitigate these issues.
Marksmith - a GitHub-style markdown editor for Ruby on Rails - Adrian Marin introduces Marksmith, a lightweight Markdown editor designed specifically for Rails applications. Marksmith provides an intuitive WYSIWYG editing experience while maintaining the flexibility of Markdown. It supports Active Storage out of the box and might be a good alternative before House MD officially releases.
Build a Notion-like editor with Rails - Rails Designer provides a comprehensive guide on creating a block-based editor similar to Notion using Rails. The tutorial covers essential aspects such as data modeling, setting up associations, and implementing basic editing capabilities.
Broadcasting User Specific Turbo Content - Andrew Vogel and Matt Polito explore on the Hashrocket Blog how to broadcast real-time Turbo Streams in Rails applications while ensuring that updates respect user-specific context. They explore two approaches on how to achieve it.
Improve your user experience with Turbo Frames - Maciek Korsan discusses how to enhance user experience in Rails applications by isolating slow-loading components using Turbo Frames.
DriftingRuby: Outlets and Permanent Tags - David Kimura dives into advanced Stimulus features to enhance interactivity in Rails applications. He explains how to use outlets to reference other controllers and permanent tags to maintain elements across Turbo-driven navigation.
How a Ruby Upgrade Broke MS Edge Support in a Rails App - Daniela Baron discusses an issue where upgrading Ruby led to Microsoft Edge users being redirected to an unsupported browser page. She details the debugging process, identifying where the problem came from, and how she resolved it.
Enhancing Esbuild Error Handling in a Rails App - Victor Cobos addresses the challenge on the DotRuby blog of unnoticed build errors when using esbuild with Rails. He proposes a solution that captures esbuild errors and displays them directly in the browser during development.
๐บ Videos/Courses
Rails Langchain Integration Walkthrough - Backgound Job & Hotwire - Timothy Rock has released both a blog post and a video demonstrating how to implement a background job in Rails using the langchainrb_rails gem, combined with a Hotwire-powered chat interface.
Stop Using React! Hotwire Introduction Part III: A Better Solution - In the third part of this series, AI on Rails continues exploring Hotwire. This episode builds on previous concepts to create a more refined implementation of the vehicles application, demonstrating how Hotwire can simplify development compared to traditional SPA frameworks.
Rails 8 Tutorial: Instant CSS & Stimulus Updates with Hotwire Spark (Zero Config!) - Kaleb Lape talks about Hotwire Spark in a new video and how to set it up in a Rails application.
Multi-line Classes - Uncommon TailwindCSS - Brian Casel explores an alternative approach to structuring TailwindCSS classes, deviating from the official recommendation in favor of improved readability and maintainability. He demonstrates his multi-line class strategy, discusses its advantages, and shares real-world implementation examples.
Hotwire Native Android with Jumpstart Pro Android - Donn Felker shared new videos in his Hotwire Native Android with Jumpstart Pro Android video course on YouTube.
๐ Web
Chrome 133 now ships and enables support for Node.prototype.moveBefore by default - The latest Chrome stable release now supports Node.prototype.moveBefore(), which improves how morphing libraries (such as Idiomorph, used in Turbo) could handle DOM mutations in the future. This new API let's you move elements around a DOM tree, without resetting the element's state, which should help with CSS-animated elements, currently playing audio/video tags, and repositioning iframe tags without requiring reinitialization.
๐ Releases
anycable-rails v1.6.0.rc.1 - AnyCable for Ruby on Rails applications.
actioncable-next v0.2.0) - Next-gen version of Action Cable.
tailwindcss-ruby v4.0.4 and v4.0.5 - A self-contained tailwindcss executable, wrapped up in a ruby gem
css-zero v1.0.6 - An opinionated CSS starter kit for your "nobuild" application
nitro_kit v0.3.0 - A good-to-go UI kit for Ruby on Rails.
Feel free to follow us on Twitter/X, Bluesky, or on Mastodon!
See you next week!