HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Installing htmx

Login or purchase this course to watch this video and the rest of the course contents.
0:00 It's time to start using htmx to add our first feature, which is Click to Edit, click to add in our case to add a new
0:08 video. So how do we get started with it? Well, it says "htmx is small" and then a link over here, and it will
0:16 say here's a min version, and we could just go view raw and possibly we could just link straight to that thing, which would be fine.
0:24 That would work great. I'm not a big fan of using CDNs from different places for different parts of our JavaScript.
0:31 Too often I found a year or so later they've decided they're not going to host that anymore, and it's just gone.
0:37 It just stops working in ways that are really unclear to me> So what I did is I downloaded that, and I put it over in our static files,
0:45 in the js section right there. We've got both the non minified and the modified version, and we'll go and just use
0:54 the minified version. And in order to use this, there's not like a CLI, there's not webpack, there's not all this stuff going on,
1:02 check this out. This should be refreshing. Here's our style sheets at the top, and at the bottom.
1:07 We can have some JavaScript. How do we get this in here? We'll just like any other JavaScript, we say <script src="static/js/htmx.min.js"></script>
1:21 Done, we've now installed htmx, and we're ready to have it go, let's just verify everything is working over here.
1:32 I'll just do a inspect element, console, make sure there's no errors. Looks like our Source Map is not there for
1:41 Bootstrap, but you know what, Who cares? That doesn't matter. Our htmx is absolutely working. Here we go, you can even see it in action,
1:51 htmx right there. But what else do we have to do in terms of JavaScript to make this work in order to like wire up events.
1:58 Remember if this was jQuery from way back when we would have to do like a $document on ready. If this was Vue,
2:06 we'd have to create a Vue App and then wire the pieces together. Well, the cool thing about htmx is, it's running, it's done its thing.
2:14 All we have to do is put attributes in certain places and the magic is going to happen. We've completely set up and gotten
2:20 htmx working with just this super simple one line of code right there, done.

Talk Python's Mastodon Michael Kennedy's Mastodon