Using Stimulus to Manage Stripe Elements

If you use Stripe to accept payments, you’ve likely had to insert the little Javascript snippet needed to wire up their library with your page. With a little refactoring, it works really well with a Stimulus controller. This setup simplifies your whole development process, and keeps your Javascript neatly stored together. Stripe’s JS & HTML […]

Convert your jQuery snippet to a Stimulus controller

Getting started with Stimulus can be as easy as converting a small jQuery snippet into a Stimulus controller. Here are three conventions that will make the conversion really quick. This assumes you’ve setup Stimulus already. ’turbolinks:load’ to connect() Any setup that the jQuery snippet does when the page is loaded can be moved to the […]

Stimulus.js Tutorial: Interactive Deletes with Rails UJS

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 can feel like an eternity in web’s modernity. But, A little Stimulus works well with Rails’ Unobtrusive Javascript to make items […]

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 […]

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 […]

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 […]

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 […]