HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 3: Infinite scroll
Lecture: Reorganizing the feed HTML for infinite scroll
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Welcome to chapter 7. That means a new bit of source control, a new part of our code.
0:07
So here you can see ch7_infinite_scroll and we're doing the final one. Again, we have the starter and the final just like always.
0:14
So what we're gonna do is we're gonna open up this project and let's just run
0:17
it really quick. We'll go over here and click on these little dots, and it's gonna take a while for it to run.
0:25
And then eventually I'm gonna see all the videos, there's no infinite scroll here, there's just all the videos.
0:32
So what we want to do is make it so it's quicker. It'll just show a couple of the videos. And then as we scroll, then,
0:39
as we sort of expose this part of the page, it's gonna go back with htmx, go to the server and say give me the next three videos, then the next three
0:47
or however many we decide to put in a block of you might think of as a page. It really is just this one long list. Now to do this,
0:55
we need to organize our HTML a little bit. This is the entire page of what we just saw here.
1:02
So we've got Video Collector: Recent Videos and then it has the title, the picture and a link. If we click it, it will go over and play this
1:10
video, and then we just loop over that and that's the whole thing.
1:17
So here's the header, here's looping over all the videos and each individual video, here's
1:22
a video block. So we've got the title at the top, and we have a hyperlink to play it locally. And then here's the image.
1:32
We can clean this up a little bit. Remember we already have a couple of things like for example, this image here, we have this partial of video images.
1:40
So instead of this, let's clean that up. I'll just say {{render_partial('shared/partials/_video_image.html')}}
1:54
And then let's look and see what this wants. Something called video. So we're gonna say video=v like that. Alright, so again, this gets,
2:04
it's better re-use of our HTML. It's not technically necessary yet. But let's just get this all cleaned up and get
2:09
the HTML as nice as we can so that we'll have everything working. Let's go and refresh this page.
2:16
It should look exactly the same unless we broke something, nope, nothing's changed. Okay,
2:21
that's good. We also have this element here which you could think of as a block of videos and then here we have that whole list.
2:33
So what we can do is we can put this section here into a partial because
2:39
what's going to happen is we're going to render some, we're going to provide here,
2:43
the first bit of videos, the first batch of videos, and then we're going to add a trigger down here with htmx.
2:51
And then we're going to need to run this again for the next batch and again for the next batch and again for the next batch.
2:56
When you see that kind of pattern in htmx. It means partial. So let's go over here, all the same pattern of having a
3:05
partials folder and let's just call this video_list or something like that. And again, it's just gonna be this right here,
3:20
so move it over and then what we need to do is we're just gonna again render_partial and remember over here,
3:33
it needs this videos, so we're going to just say videos=videos and we also have
3:39
the videos already here as that's what, what we got going into this one. Alright, so again, this should look the same,
3:46
We rerun it, and we refresh it, and we wait the time that it takes. It should be unchanged. Perfect.
3:54
Everything is exactly the same. But now we have the possibility of providing a smaller set of videos here, Later on rendering this section,
4:04
which we can make a little nicer rendering this again and again, as you scroll to the bottom of the page, as the rule, trigger scrolls into view,
4:12
it looks like everything is set up and ready to go for adding infinite scroll with htmx