Skip to content

Blogging On Rails

Everything on Rails!

Stimulus.js Tutorial: Interactive Deletes with Rails UJS

This tutorial has an update using Turbo Streams and Stimulus. You can read it here: 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 Continue reading “Stimulus.js Tutorial: Interactive Deletes with Rails UJS”

Read More

Stimulus + ActionCable + ActiveJob: Loading Asynchronous API Data

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 out Continue reading “Stimulus + ActionCable + ActiveJob: Loading Asynchronous API Data”

Read More

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 visited Continue reading “Leaving Breadcrumbs in your Progressive Web App with Stimulus.js”

Read More

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 them Continue reading “Loading and Templating JSON Responses in Stimulus.js”

Read More

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 to Continue reading “Subscribing to many channels in ActionCable”

Read More

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 uses Continue reading “Build a Markdown Editor in Stimulus.js like in Vue.js”

Read More

Where do I store my state in Stimulus.js?

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 generated HTML to manage our state and progressively Continue reading “Where do I store my state in Stimulus.js?”

Read More

Copyright © 2022 John Beatty. All rights reserved.