First, I’d like to thank Chris Oliver for his wonderful Railsconf 2020.2 talk, Advanced ActionText: Attaching any model in rich text. I’d highly recommend you watching that first for context, as I’m going to implement this ActionText table based on his Youtube preview. Towards the end of the video, Chris mentions you could use theContinue reading “Adding Tables to ActionText With Stimulus.js”
Category Archives: Tutorial
Radio Selection Unselect with Stimulus.js
Radio buttons, modeled after physical buttons on old radios, allow for only one element in a list to be selected. The browser automatically unselects the other options. This simple behavior often fits your needs, but I recently found myself wanting to be alerted on an unselect action so that I could change what was displayedContinue reading “Radio Selection Unselect with Stimulus.js”
Yes, Rails does support Progressive Web Apps
My talk from RailsConf 2019 is online! Please enjoy! The HNPWA is available at https://hnpwa.onrails.blog The slides are available at https://speakerdeck.com/johnbeatty/yes-rails-does-support-pwas The Github repositories are here: Links from the talk are: Comments or Questions? Let me know how your experience went below. Want To Learn More? Try out some more of my Stimulus.js Tutorials.
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 & HTMLContinue reading “Using Stimulus to Manage Stripe Elements”
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 afterwardsContinue reading “Stimulus.js Tutorial: Interactive Deletes with Rails UJS”
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 outContinue reading “Stimulus + ActionCable + ActiveJob: Loading Asynchronous API Data”
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”
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”