Pagination and infinite scrolling with Rails and the Hotwire stack

• turbo-pagination

  0 3 0.0 Ruby

  You can find the complete code for this tutorial on Github, and you can try out a “production” version of the application on Heroku.

• tailwindcss-rails

  3 1,137 6.9 Ruby

  

  Because we are using Tailwind via the tailwindcss-rails gem, the scaffold generator applies some basic Tailwind styling to generated views, so we have nice looking Widget pages right out of the box.

• InfluxDB

  www.influxdata.com

  sponsored

  Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

  

• Pagy

  3 3,951 5.5 Ruby

  🏆 The Best Pagination Ruby Gem 🥇

  In our application, we will use Pagy to implement pagination. Let’s install Pagy now, following along with the Pagy quick start guide.

• request.js

  3 291 2.6 JavaScript

  

  One way to work around this is described in Dale’s article. In it, a Stimulus controller and request.js are used to insert a Turbo Stream header into GET requests, getting Turbo to see the request as a Turbo Stream request despite not originating from a form submission.

• stimulus-use

  4 1,057 8.4 JavaScript

  A collection of composable behaviors for your Stimulus Controllers

  

  To make using the IntersectionObserver API easier, we will add the wonderful stimulus-use package to our application. This is not a requirement, but it does simplify the code a bit.

• hotwire-example-template

  0 674 2.8 Ruby

  A collection of branches that transmit HTML over the wire.

  

  The autoclick controller we are using here was lightly adapted from Sean Doyle’s autoclick controller in his own implementation of infinite scrolling with Turbo.

• turbo

  45 4,648 9.4 TypeScript

  The speed of a single-page web application without having to write any JavaScript (by hotwired)

  

  Sean’s implementation of infinite scrolling presents yet another approach to working around the limits of Turbo Frames and is worth reviewing in full, if you are interested in more advanced Turbo use cases. In Sean’s work, the key thing to note is his use of the code from this Turbo draft PR which adds additional “actions” to Turbo Frames.

• SonarLint

  www.sonarlint.org

  sponsored

  Clean code begins in your IDE with SonarLint. Up your coding game and discover issues early. SonarLint is a free plugin that helps you find & fix bugs and security issues from the moment you start writing code. Install from your favorite IDE marketplace today.

  

Suggest a related project