Build the fastest website with Rails How many web pages actually need a JS framework? Most don’t. They just need sprinkles of interactivity. Stimulus.js provides the modern JavaScript framework to provide interactivity your user’s crave, without needing to relegate you Rails app to a JSON API. New to Stimulus.js? Follow along with step by stepContinue reading “Stimulus Pearls: A Collection of Stimulus.js Tutorials”
Category Archives: Stimulus JS
Updated Tutorial: How Do I Drag and Drop Items in a List?
How do you configure a more complicated Stimulus controller that manages dragging items around in a list? Let’s start with our simple ordered Todo table in html: The todo order comes from a priority associated with each item, so that we’ll be able to keep track of which item needs to be moved. We alsoContinue reading “Updated Tutorial: How Do I Drag and Drop Items in a List?”
Updated Tutorial: How Do I Update My Model from a checkbox?
Let’s say you have a Todo app, with a model Todo that has a string title, and a boolean field, completed. We are going to use Stimulus to update our model remotely on the server when we check off the todo. And we’re going to use a nifty JavaScript API called fetch() to make itContinue reading “Updated Tutorial: How Do I Update My Model from a checkbox?”
Display your Progressive Web App’s Offline Ability
Your progressive web app works offline, but do your users know that? You can use a Stimulus controller to manage your service worker, show the caching status, and hint to your user that the webpage will work offline.
Testing Tables in ActionText Using System Test
So you’ve built a fascinating, interactive addition to your ActionText page. How do you test that interactivity? You can use System Test, a feature built into Rails to run apps and test them in a web browser. This simulates real usage, especially since the browser supports CSS and Javascript. Since the Rich Text Tables tutorialContinue reading “Testing Tables in ActionText Using System Test”
Adding Tables to ActionText With Stimulus.js
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”
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.
HNPWA With Rails + Stimulus.js
Sometimes you want a development side project that will push you. A project that is non trivial, and provides lots of opportunities to build a complicated, data hungry application. Here is an example of such a project that rivals any complicated website in performance, and interactivity, built entirely in Ruby on Rails and Stimulus.js
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”