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 […]
Using CSS in Rails 6
I’ve been finally moving some of my Rails applications from Rails 5.2 to Rails 6 and I always seem to get caught up on the webpacker CSS locations. It’s not uncommon to spend a lot of time figuring out where the CSS went, and why it’s not being served. Pre-webpacker, there were two sprockets directives […]
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 […]
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 & 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 […]
The Cost of Prototyping
“Once out of the realm of little programs, such as the ones you wrote in school, the economics of software take on a strange reversal in which the cheapest programs to own are the ones that are the most expensive to write, and the most expensive programs are the cheapest to write.” – Alan Cooper […]
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 […]
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 […]