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

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

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

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

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: https://github.com/johnbeatty/worlds-fastest-pwa https://github.com/johnbeatty/hnpwa-app Links from the talk are: Hacker News Progressive Web App: https://hnpwa.com MicroSoft’s PWA Builder: https://www.pwabuilder.com Mozilla’s PWA recipes: https://serviceworke.rs https://johnbeatty.github.io/worlds-fastest-pwa/ https://github.com/tastejs/hacker-news-pwas https://github.com/HackerNews/API Comments or Questions? Let me […]

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