Skip to content

Blogging On Rails

Everything on Rails!

Don’t accidentally walk away from your Active Storage Uploads with Stimulus.js

I’ve recently been using Active Storage, and it has a really neat feature called Direct Uploads. Active Storage asks your app for a URL for uploading each file, and then proceeds to upload the file directly to your storage service, without having to tax your app server’s processor. But if you’ve selected a lot ofContinue reading “Don’t accidentally walk away from your Active Storage Uploads with Stimulus.js”

Read More

Stimulus.js Tutorial – Don’t Lose Unsaved Form Fields

You may shudder remembering that long form you were once filling out, only to accidentally click a link, or refresh the page. You lost everything, all your unsaved form entries, and then you had to redo your work and fill out the form again. Don’t let your customers fall into the same trap. There areContinue reading “Stimulus.js Tutorial – Don’t Lose Unsaved Form Fields”

Read More

Stimulus.js Tutorial: Implementing Radio Selection In A Form

Let’s say your building a really fancy UI, and you don’t want to use plain old radio buttons in your form. You might have a list of items, and you’d like your customer to select one of them. You also don’t want them to submit the form without selecting an item. Here’s an example ofContinue reading “Stimulus.js Tutorial: Implementing Radio Selection In A Form”

Read More

Let’s Make an Editable Header using Stimulus.js

Stimulus excels at adding sprinkles of interactivity to your web apps. Let’s say you want to make an element on your page editable, like a todo entry, or a title for your blog page. We can use a Stimulus controller that will listen for a double click event, insert an input tag that looks justContinue reading “Let’s Make an Editable Header using Stimulus.js”

Read More

Stimulus + Trix: Convert Emoji Short Codes To Unicode Characters On The Fly

Let’s Add an Emoji Converter to Trix with Stimulus We’ve been exploring using Stimulus to add interactivity to our apps. Let’s use Stimulus to watch for typing changes, and convert an emoji short code into the actual glyph, such as :smiley: to 😀 Getting Started I’ve uploaded my code to Github, so you can followContinue reading “Stimulus + Trix: Convert Emoji Short Codes To Unicode Characters On The Fly”

Read More

Is using Webpack in Rails worth it?

If you’ve been paying attention to the larger development ecosystem, Javascript is the rage. For example, ”GitHub is home to open source projects written in 337 unique programming languages—but especially JavaScript.“ There are many Javascript frontends available, and even the backends are written in Javascript. But if you love Ruby like I do, using moreContinue reading “Is using Webpack in Rails worth it?”

Read More

Stimulus.js Tutorial: Listening to onScroll Events for a Sticky Table Header

In one of my projects, I had a table with a lot of rows of uniform data. I started using a JQuery plugin called Sticky Table Headers. It worked really well, but I’ve been experimenting with moving different components of my code to Stimulus, where it made sense, so I thought I’d try to replicateContinue reading “Stimulus.js Tutorial: Listening to onScroll Events for a Sticky Table Header”

Read More

Stimulus.js Tutorial: How do I filter data in a list or table?

Let’s work off the previous Todo tutorial and add a way to filter those Todos using just Stimulus. We will only need to work on the todos/index.html file, and to add one Javascript controller. This example will highlight how Stimulus enhances your server rendered HTML, without the need to build complicated constellations of Javascript objects.Continue reading “Stimulus.js Tutorial: How do I filter data in a list or table?”

Read More

Stimulus.js Tutorial: How Do I Remotely Update My Model from a checkbox?

An updated version of this post can be found here: https://onrails.blog/2024/03/06/stimulusjs-tutorial-update-model-with-checkbox-using-turbo-morphing/ A previous update was here: https://onrails.blog/2020/11/09/updated-tutorial-how-do-i-update-my-model-from-a-checkbox/ First, I’m going to assume you’ve read the Stimulus handbook, cover to cover, like I have. Let’s say you have a Todo app, with a model Todo that has a string title, and a boolean field, completed. WeContinue reading “Stimulus.js Tutorial: How Do I Remotely Update My Model from a checkbox?”

Read More

Stimulus.js Tutorial: How Do I Drag and Drop Items in a List?

There is an updated version that takes advantage of HOTWire and Turbo 8 Changes here. You’ve heard about Stimulus in the DHH press tour. You’ve read the Stimulus Handbook. How about a more complicated example than what you’ve seen? Here’s a tutorial on using Stimulus to drag and drop items around in a list. Let’sContinue reading “Stimulus.js Tutorial: How Do I Drag and Drop Items in a List?”

Read More