HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Welcome to the course
Lecture: The big ideas covered in this course

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