Lazy Loading Lots of Comments HOTWire Tutorial #5

As we continue in building out the HOTWire Hacker News Progressive Web App, it’s time to look at loading the comments. This is an interesting data problem, because each item has comments, and each comment has comments, and you can go recursively until you run out. The original HNWPA pushed all the comment loading into […]

Paginating Top Items – HOTWire HNPWA #3

If you look at the number of TopItems coming back from the API, you’ll see it’s much more than 30. How do you display all these items? Pagination! ActiveRecord has an offset method that tells the database where to start in the records it returns. If you don’t specify an offset, the database starts counting […]

Turbo Streaming Top Items – HOTWire HNPWA #2

Turbo Streaming is going to work best with ActiveRecord Models. The Hacker News model uses Item models, which can be stories, comments, jobs, polls, or poll options. In the first implementation, the Item was modeled to be as generic as the API dispensed. This time, stories and jobs will continue to be modeled as Item […]

Stimulus Pearls: A Collection of Stimulus.js Tutorials

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

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

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