HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 3: Infinite scroll
Lecture: Intro to infinite scrolling
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
In the previous lesson I showed you how to build search as you type using HTMX.
0:07
In this lesson you'll be adding infinite scrolling capabilities to the feed page.
0:13
If you haven't heard the term before, I guarantee you've seen the feature.
0:17
Infinite scroll is the idea that as you scroll down in a web page, more content is added at the bottom.
0:23
In the olden days there was always a ""more"" button, but sites realized making you push
0:28
button meant you were making a decision which increased the chance that your attention span
0:32
would drift. Infinitely filling the feed means your eyeballs stay in place. Most social media
0:38
sites use infinite scroll, and if you use DuckDuckGo as your search engine, it's an option
0:44
you can turn on under the settings value just below the search bar. Once it's on, instead of
0:49
showing you the bottom of the page, it shows you a page number and loads the next chunk.
0:55
Recall, the feed page in Video Collector contains every video in your collection. If you have a lot of videos, this could take a long time to load.
1:03
The goal in this lesson is to change the page over so it uses infinite scrolling.
1:08
There's an old engineering joke that 2 + 2 = 5 for sufficiently large values of 2.
1:15
In this case, it's the other way around. It will be infinite scroll for a sufficiently
1:20
small value of infinity - the total number of videos in your collection.
1:24
The HTML for the feed exists already, so there's no step of creating the HTML on its own this
1:32
time. All I have to do is make the HTML modifications. The first thing I'll need to do is add the
1:39
new trigger to the bottom of the feed page that fetches the results. Then I need to modify
1:44
the feed view to be able to handle partials. The end result can be found in lesson 6_infinite.