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”

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”

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?”

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?”