On Rails
15 FOLLOWERS
The blog is dedicated to sharing everything about Rails.
On Rails
3M ago
There is a lot of talk about modals in Rails, and this tutorial shows you how with some Stimulus sprinkles, you can have very interactive modals.
https://youtu.be/VKJ_1qoPTsE
The code for the demo can be found on Github: https://github.com/OnRailsBlog/interactive_modal
Please leave this field emptyMake Interactivity Default
Make your web app interactive now with easy to implement and simple to add HOTWire integrations.
Enter your email and get a free sample of my HOTWire Tutorials ebook.
Email Address *
We won’t send you spam. Unsubscribe at any time.
Check your inbox o ..read more
On Rails
4M ago
Headless UI 2.0 just came out from TailwindLabs. I often find myself using their components in my projects, and I wanted to show you my process for converting their React components to use Stimulus, since I haven’t been using React in any of my projects.
Switching on Interactivity
The component I wanted to use was the Switch. It’s styled after the native iOS switch toggle, where you turn an option on or off. Tapping anywhere on the button will transition the inner circle from one side to the other. The version of this switch uses CSS animations, and all our controller would need to do is upda ..read more
On Rails
5M ago
We can progressively enhance the filtering search. In the previous tutorial, we saw how easy it is to use Turbo 8’s morphing and a very simple Stimulus controller to trigger the request back to the server. We can dig deeper into the events and get a very satisfying animation of Todos disappearing when they’re filtered out, and reappearing when they are back in the list.
Listening for Morphing
Our Stimulus controller is going to get some new methods. It will hook into the Turbo event stream. The first change is to add the replace option to the Turbo visit in the controller. This will effective ..read more
On Rails
5M ago
When we have a long list of Todos, sometimes we want to filter them by name. We can easily do this using Turbo’s morphing and a Stimulus controller to update the page from the server.
One previous way to get this interactivity was to use a Stimulus controller that filtered the HTML. This still works, and might be a strategy depending on your situation. This technique will send the request to the server, and leverage the Database to perform the filtering. This might work better if you have pagination, or don’t want to load hundreds or thousands of records onto a page to perform filtering.
Filt ..read more
On Rails
5M ago
With the addition of the new Todo form appearing at the bottom of the Todos, and the delete action removing a Todo, we have a very functional app. It would be nice if those additions and removals had a little animation to emphasize what’s happening on the page. If there was a long list, we might miss the deletion, especially if a network request caused a delay in the removal of the Todo. We can hook into Turbo streams, and run some animations on these actions to make them appear and disappear.
Not animated vs. animatedAdding a Custom Turbo Action
Turbo allows for the addition of custom action ..read more
On Rails
6M ago
We’re used to storing all of our data in the database, and letting Active Record pull it out, Action View to format it, and Action Controller to manage the request and response. But when we want quick client side interactivity, sometimes we need some extra data annotations on the HTML side that we can use without needing to communicate with the server. Most of this data is used by Stimulus, but Turbo has a few tags that can be useful.
<head> State
Other Javascript frameworks, like Vue.js, React, and Angular, typically generate HTML on the client side, in Javascript. We can use the fact w ..read more
On Rails
6M ago
With the new morphing features in Turbo 8, you now need to decide on when to use Turbo streams or Turbo frames instead of full page refreshing. Thankfully, all three techniques work together. Let’s take the Todo app that we’ve been working on, and see where using Streams or Frames makes sense.
https://youtu.be/y08mnpYrDmA
Turbo Streams for a new Todo form
The current new Todo interaction is a new page when clicking the New Todo button on the top of the page. If we add the data-turbo-stream attribute, the GET request now appears to the server as a TURBO_STREAM request. The response, new.turbo_ ..read more
On Rails
6M ago
Drag and drop functions are a fun interaction, but they may not be the best interface in every situation. Buttons are a great affordance, and we can hook them up into our existing drag and drop code without any issue. Then we’ll look into animating the movement on the page so that it still feels interactive.
Demo of the movement when clicking the up and down buttonsAdding Buttons
On the right side of each Todo row, let’s add an up and down arrow button. These will get their own actions, moveUp and moveDown on the Stimulus controller that will be refactored into moving the Todo up and down, an ..read more
On Rails
6M ago
Many of the changes in Turbo 8 are incredibly promising for improving the perception of speed and interactivity on our web apps.
A lot of my Stimulus Tutorials need an update since they were first written, so follow along to update existing tutorials and rethink them with the newest tools available. Today we obsolete the tutorials Grabbing ActionCable with Stimulus.js and Subscribing to many channels in ActionCable.
Moving on from the Stimulus controllers
The initial tutorials required creating a Stimulus controller and calling the ActionCable code to setup the web socket connection. Now, Tu ..read more
On Rails
6M ago
If you’ve been following the changes in Turbo 8, it looks incredibly promising for improving the perception of speed and interactivity on our web apps.
A lot of the Stimulus Tutorials could use an update since they were first written, so I thought it would be good to over existing tutorials and rethink them with the newest tools available. Join me as we rebuild the Stimulus Tutorial “How do I Drag and Drop Items in a list
Quick demo of Drag and Drop functionalitySetting Priority
We’ll build off the previous example and add a priority order. This will be used sort the Todos.
$ rails g migrati ..read more