Week 42 - Changing CSS on Scroll, Dynamic Form Fields, Web Push, and more!
This week’s Hotwire Weekly dives into dynamic Rails features, from infinite scroll to web notifications!
Welcome to Hotwire Weekly!
Welcome to another issue of Hotwire Weekly! Thank you for the feedback in the 1-year anniversay edition last week! I'm trying to incorporate the feedback into the next editions! Thank you!
Happy reading! 🚀✨
📚 Articles, Tutorials, and Videos
Changing CSS as You Scroll with Stimulus - Rails Designer's article explains how to change CSS based on scroll events using a Stimulus controller. The guide demonstrates how to add or remove CSS classes dynamically as specific elements interact with one another during scrolling.
Announcing JavaScript for Rails Developers - The article on Rails Designer introduces the "JavaScript for Rails" book, a guide tailored for Rails developers to better understand JavaScript fundamentals and how to integrate it with Rails. The book covers essential topics like ES6, Hotwire, Turbo, and Stimulus, providing practical examples for enhancing your Rails apps with JavaScript.
Rails + DaisyUI = MVP Magic (Here's Why) - In this episode, Kaleb Lape teams up with Justin Zimmerman to explore the power of DaisyUI in Rails. They discuss how DaisyUI combines the best of Bootstrap and Tailwind, simplifying code while maintaining flexibility. The video highlights how DaisyUI can boost efficiency, particularly in MVP development, while also discussing its practical applications for real-world projects.
Turbo Charge Your Rails 8 App: Infinite Scroll Tutorial - In this video, Kaleb Lape demonstrates how to implement infinite scrolling in Rails 8 using Turbo Frames, Turbo Streams, and the Pagy gem. You'll learn to optimize performance for handling thousands of records, transforming sluggish page loads into lightning-fast, seamless scrolling.
How to Create Dynamic Form Fields in Rails with Auto-Updates Stimulus - Vimícius Alves Oyama's video and blog post explains how to create dynamic form fields in Rails using Stimulus and Turbo. The guide walks through setting up dependent fields, where selecting one option (like a country) dynamically updates related fields (like states).
Sending Web Push Notifications from Rails - The article on Joy of Rails by Ross Kaffenberger explains how to implement Web Push Notifications in a Ruby on Rails app using Service Workers and the Web Push API. It walks through the setup, including creating a manifest, registering a Service Worker, and using the web-push gem for sending notifications. The post also covers the VAPID protocol for secure push notifications and provides practical code examples to integrate the feature seamlessly into Rails apps.
Morphing With Turbo Streams - The article on Mintbit explores how to use Turbo Streams’ new method: :morph option to apply incremental updates to the DOM, preserving elements' states like form inputs or scroll positions.
PWA in real life. The Rails World 2024 experience with Campfire and Agenda app - The video by Yaroslav Shmarov on SupeRails discusses the real-world use of Progressive Web Apps (PWAs) at Rails World 2024, where attendees experienced two PWAs: the Agenda app by Telos Labs and a Campfire instance. It showcases how these apps enhanced the event experience, offering lessons for developers interested in building event-based or business PWAs.
Meetup Recording: Hotwire Turbo in Rails: Drive, Frames and Streams - Helmer Davila held a talk at the Montreal.rb meetup in May 2024 and the recording is now available on YouTube. The talk is titled: "Hotwire Turbo in Rails: Drive, Frames and Streams".
Conference Recording: Showing Progress of Background Jobs with Hotwire Turbo - Michał Łęcicki held a talk a Ruby Unconf 2024 and the recording is now available on YouTube.
🧰 Libraries and Tools
railsui-stimulus - An ever-growing collection of Stimulus.js components built with Tailwind CSS.
@rails/request.js - Simple Rails-aware fetch() wrapper.
🎉 Releases
turbo v8.0.11 - The speed of a single-page web application without having to write any JavaScript.
turbo-rails v2.0.11 - Turbo for Rails.
rails v8.0.0.rc1 - Rails is a Model-View-Controller (MVC) web-application framework.
view_component v3.18.0 - A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
tailwindcss-rails v3.0.0 - Tailwind CSS for Rails.
rich-text-laravel v3.2.0 - Integrates the Trix Editor with Laravel.
anycable-go v1.5.5 - AnyCable Go for Rails.
Feel free to follow us on Twitter/X or on Mastodon!
See you next week!