HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Inserting the Click to edit link

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Ignoring the new attributes for a second, what you have here is an HTML link.
0:08 If you haven't seen Font Awesome before, it's an icon toolkit and it uses the italics tag as a hook for inserting pretty pictures.
0:17 This will show as a circled plus sign, along with the ""Add New Video"" words in the link. Now to the new stuff - the hx attributes.
0:29 this link doesn't have an href. In this case, the hxget is taking its place. All the htmx
0:37 attributes begin with an hx suffix, and as you might guess, the get says to fetch the contents
0:43 from a URL. As I'm a good little programmer, albeit a lazy one, instead of hardcoding the URL,
0:51 it's using a django_url tag. This tag is pointing to a view I haven't written yet,
0:57 which is responsible for sending the form contents you just watched me move
1:01 into the new partial file. hs_get says where to go get the new content from. While hs_swap says what to do with the content.
1:17 The first argument to hx_swap tells it what to do. In this case, outer HTML means to replace
1:25 the outer tag. That's the link. By contrast, another supported choice is inner HTML, which
1:32 would replace the contents inside of the link, leaving the link itself intact, if that's what
1:38 you preferred. The HXSwap attribute also supports modifiers. The badly named swap modifier tells
1:47 htmx to put a little delay in before actually swapping out the contents. Other tags actually
1:53 support a modifier named ""delay"", it's unclear to me why they didn't name this one ""that"".
1:59 Anyhow, I'm not actually doing anything with this delay, but it can be useful if you want to use
2:05 CSS transition effects and need to time how they work. Take a moment and bask in the glory of just
2:12 how clean this is. Without HTML, you'd have to have the link and the form, and the form would would have to be hidden from the start.
2:21 You'd need to worry about when your JavaScript fired, register it properly after the page was loaded, and you'd have a bunch of JavaScript
2:29 handling the transition in a place elsewhere in the file or in another file altogether. With HTMX, the context of what is about to happen
2:39 is right there on the tag. There isn't anything hiding elsewhere in the HTML and the page only contains those things it needs right now.
2:48 Think about a complicated single page application with loads of dialog boxes.
2:53 With HTMX, none of those have to be loaded until after the user does something that requests them.
2:59 This is just so tidy. At risk of sounding all fanboy, I think I'm in love.
3:05 One last thing to do in the HTML, which is to actually load the HTMX toolkit.
3:11 I'm going to do that in the base file, so it can be used on any of our pages.

Talk Python's Mastodon Michael Kennedy's Mastodon