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.


Talk Python's Mastodon Michael Kennedy's Mastodon