Rails’ use of flash messages is a great way to provide context for customer actions. If they delete an object, flashing a notice that the delete action succeeded, or perhaps failed, gives them more context to make the next decision. With HOTWire’s asynchronous nature, you don’t get those notifications in the same way, especially if Continue reading “Interactive HOTWire Notifications with Turbo Streams”
Category Archives: Stimulus JS
Stimulus.js & HOTWire Tutorial: Interactive Deletes
Interactive websites have that feeling of immediacy. Clicked links respond in milliseconds, and there is never a need to wait… Waiting for a remote record to delete, and then the whole page refresh afterwards can feel like an eternity in web’s modernity.
Updating to Stimulus.js 2.0
A new version of Stimulus is out. Here are some things to consider if you decide to update to 2.0. It adds a Values api, CSS classes, and a change to the target attribute syntax. Upgrading Stimulus First, update Stimulus with Yarn. This will update the library itself, and all the dependencies. Look for data-target Continue reading “Updating to Stimulus.js 2.0”
Stimulus Pearls: A Collection of Stimulus.js Tutorials
Build the fastest website with Rails How many web pages actually need a JS framework? Most don’t. They just need sprinkles of interactivity. Stimulus.js provides the modern JavaScript framework to provide interactivity your user’s crave, without needing to relegate you Rails app to a JSON API. New to Stimulus.js? Follow along with step by step Continue reading “Stimulus Pearls: A Collection of Stimulus.js Tutorials”
Updated Tutorial: How Do I Drag and Drop Items in a List?
How do you configure a more complicated Stimulus controller that manages dragging items around in a list? Let’s start with our simple ordered Todo table in html: The todo order comes from a priority associated with each item, so that we’ll be able to keep track of which item needs to be moved. We also Continue reading “Updated Tutorial: How Do I Drag and Drop Items in a List?”
Updated Tutorial: How Do I Update My Model from a checkbox?
Let’s say you have a Todo app, with a model Todo that has a string title, and a boolean field, completed. We are going to use Stimulus to update our model remotely on the server when we check off the todo. And we’re going to use a nifty JavaScript API called fetch() to make it Continue reading “Updated Tutorial: How Do I Update My Model from a checkbox?”
Display your Progressive Web App’s Offline Ability
Your progressive web app works offline, but do your users know that? You can use a Stimulus controller to manage your service worker, show the caching status, and hint to your user that the webpage will work offline.
Testing Tables in ActionText Using System Test
So you’ve built a fascinating, interactive addition to your ActionText page. How do you test that interactivity? You can use System Test, a feature built into Rails to run apps and test them in a web browser. This simulates real usage, especially since the browser supports CSS and Javascript. Since the Rich Text Tables tutorial Continue reading “Testing Tables in ActionText Using System Test”
Adding Tables to ActionText With Stimulus.js
First, I’d like to thank Chris Oliver for his wonderful Railsconf 2020.2 talk, Advanced ActionText: Attaching any model in rich text. I’d highly recommend you watching that first for context, as I’m going to implement this ActionText table based on his Youtube preview. Towards the end of the video, Chris mentions you could use the Continue reading “Adding Tables to ActionText With Stimulus.js”
Radio Selection Unselect with Stimulus.js
Radio buttons, modeled after physical buttons on old radios, allow for only one element in a list to be selected. The browser automatically unselects the other options. This simple behavior often fits your needs, but I recently found myself wanting to be alerted on an unselect action so that I could change what was displayed Continue reading “Radio Selection Unselect with Stimulus.js”