HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Welcome to the course
Lecture: The big ideas covered in this course
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's talk just for a moment about the big ideas that we're going to cover in this course. Kind of a loose table of contents. We're going to build a
0:09
video website. This is a site that collects a bunch of videos that we might like and categorizes them and lets us view them and even add new ones,
0:18
search it and so on. We're not going to write it from scratch because what I want you to do is have a realistic,
0:24
legitimately nice looking website that we can extend with htmx. So we're going to start with this video site built in Flask, and it's already going to
0:33
have the web design, and then we're going to add these features and clean it up with htmx and of course htmx is what this course is all about,
0:41
so we're gonna focus on that. We're gonna cover this idea of view models that help us do data exchange and keep
0:47
our Flask views very, very simple and allow our data validation, and all those things to happen. We're also going to work with an open source package
0:55
that I created, both for Jinja and a separate one for Chameleon,
0:58
the two template languages that are my favorites. That will allow us to work with partial elements of pages. What is very,
1:05
very common, and you got a sense of this in the last video is that we
1:09
need to create small fragments of HTML sometimes and other times we need to create the whole page which may also contain that fragment.
1:17
So we're going to work with this idea of partial templates, maybe that one div where it had the name with a click to edit the name
1:25
and the email. Maybe that is its own template file that sometimes can be rendered
1:29
in the larger page, but other times during these htmx exchanges with the server, we just want to return and render those views.
1:36
So we're gonna work on this idea of partial views and you'll see a really cool library I created to make this easy. And then we're gonna
1:42
add three features to our Flask video site. Infinite scroll, so we can see a feed of popular videos that are coming in to the site. Live search,
1:51
live search has a lot of aspects to it, so if we go and type like I want to search for whatever video on some
1:58
topic, I'm going to type in some words and as I type, I want to see the videos that match that result immediately show up on the page.
2:05
If I type car, I want to see the stuff that has to do with cars as soon as I stop typing. So we're going to add that feature.
2:11
But on top of this we're going to add two more interesting aspects. One is it's going to also change the URL and put those various searches,
2:19
so if I first search for a car and then race, I would have to entries in my browser history, and I could use back and forward to get between them,
2:26
even though they were generated by htmx. And the other one is we're going to do deep linking. So if we somehow create a URL by doing a search,
2:35
we could copy that and then open it up or share it, and we'll come back with the exact same results. So all sorts of cool stuff around live search, and
2:42
finally we're gonna add Click to edit. You saw that in action, we're going to use this,
2:46
to add new videos to our site quick and easy and inline. That's it, so much fun stuff to cover and a lot of things that we're not calling out
2:54
explicitly. But ways to design these Flask sites integrating with htmx that
2:58
are super clean, with almost no duplicated code or HTML templates anywhere, it's gonna be fun.