Interactivity. Every web app needs it. And Rails comes with a number of tools, which, together, generate that feeling of a fast, responsive app, with mostly server rendered HTML and a little Javascript sprinkled on top. ActiveJob fetches data from a remote JSON api in the background. ActionCable routes data from the background job outContinue reading “Stimulus + ActionCable + ActiveJob: Loading Asynchronous API Data”
Category Archives: Stimulus JS
Leaving Breadcrumbs in your Progressive Web App with Stimulus.js
One of the features of a Progressive Web App is the lack of browser chrome on a mobile device. iOS and Android hide little things like the address bar and the browser history buttons. It’s up to the PWA itself to provide the navigation to previous pages. Breadcrumbs are one technique of displaying previously visitedContinue reading “Leaving Breadcrumbs in your Progressive Web App with Stimulus.js”
Loading and Templating JSON Responses in Stimulus.js
Just because Stimulus.js is designed to work with HTML over the wire doesn’t mean it can’t use JSON APIs when the need arises. In fact, it can perform just like Vue.js in pulling JSON from an API and placing the results on your page. Here is a tutorial that loads commit messages from Github, and renders themContinue reading “Loading and Templating JSON Responses in Stimulus.js”
Subscribing to many channels in ActionCable
There are many times when logically it makes sense for a page to receive updates about many different items. Sometimes those items are similar, so many ActionCable channels can each listen for one item, or a single channel listen for many different items. Here is an example of using one ActionCable channel to subscribe toContinue reading “Subscribing to many channels in ActionCable”
Grabbing ActionCable with Stimulus.js
Use Stimulus.js to manage ActionCable connections in your interactive web app.
Build a Markdown Editor in Stimulus.js like in Vue.js
I’ve been looking into different Javascript frontends to see if they made my development life easier. I’ve been looking specifically to see if they improve on some Stimulus sprinkles and server rendered HTML. One interesting example was converting a text area from markdown to html. It uses marked to perform the conversion, and it usesContinue reading “Build a Markdown Editor in Stimulus.js like in Vue.js”
Where do I store my state in Stimulus.js?
An updated version can be found here. Stimulus.js allows for a myriad of ways to store state about our webapp. One thing to always keep in mind is that Stimulus.js wants to enhance existing HTML instead of control all of the page’s DOM, so we will need to think of ways that leverage server generatedContinue reading “Where do I store my state in Stimulus.js?”
Stimulus.js Tutorial – Multiple Selects that Filter Enterprise Data Models
If you have a lot of records that fall into many different buckets, it can be hard to filter all of that complex data record. Thankfully, we can string together a couple select fields to filter based on multiple, disparate categories. This might be like something you’d see on a car shopping website, where youContinue reading “Stimulus.js Tutorial – Multiple Selects that Filter Enterprise Data Models”
Stimulus.js Tutorial – Using multi select to pare down a large set of data
Now that we have a lot of books in our library system, it would be great if we could quickly filter the books based on their category. HTML supplies a nifty builtin tag, called multi select, that will let us display a couple options. Our librarians can then select one category, or a couple ofContinue reading “Stimulus.js Tutorial – Using multi select to pare down a large set of data”
Let’s create a Trix Editor plugin using Stimulus.js
I’ve been working on an app that uses Trix to edit a very complicated book text. Someone asked if I could add the ability to choose different sizes of text while they are editing the book. After digging around online, I came across this example from Javan, one of Trix’s creators: https://codepen.io/javan/pen/EPqzZo. This was exactlyContinue reading “Let’s create a Trix Editor plugin using Stimulus.js”