HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Course conclusion and review
Lecture: HTMX attributes

Login or purchase this course to watch this video and the rest of the course contents.
0:00 You use HTMX by adding attributes to your HTML tags. The first attribute you learned about was hxget. This specifies the URL to fetch new content from.
0:15 The received response is used to modify the existing page. Which part of the page changes and how is determined by other HTMX attributes.
0:27 When you use hxget on an input tag, the associated URL is called with a query parameter containing the value of the input box.
0:36 You used this feature to implement the search-as-you-type mechanism. hxswap is one of the attributes used to specify how to replace content.
0:47 A value of innerHTML causes the contents inside the tag to be swapped, while outerHTML swaps
0:55 out the entire tag. You can also add the Swap modifier to this attribute to specify a delay
1:02 in action. This can be handy if you're timing the appearance of the change with other CSS transitions or animations.
1:12 Instead of swapping content on the current tag, you can target content anywhere in the
1:16 document using HXTarget. The value of HXTarget is typically a CSS selector specifying the
1:23 tag to be replaced by the fetched response. The HXTrigger attribute specifies when HXGet
1:32 gets invoked. A value of KeyUp invokes the fetch when a key is pressed and released.
1:39 You can modify KeyUp when the trigger is on an input tag with the Changed modifier.
1:44 This limits the invocation to cases where the key press also changes the value of the input.
1:52 You can also add a delay modifier to specify how long after a press htmx should wait before invoking
1:59 the fetch. This is useful to limit the number of times the server is called. If the user is
2:05 typing something quickly, you can wait until after they're finished. You can further limit a trigger
2:11 by adding conditions in square brackets. The conditions are based on the event being triggered.
2:18 The example here restricts triggers only to those keyup events where the value of the input is
2:23 longer than one character. You used this restriction to prevent searching on a single letter in the
2:29 Search Issue Type feature. In addition to supporting JavaScript events, HTML provides some of its own.
2:36 The revealed event happens when the associated tag is made visible in the browser's viewport.
2:44 This can be used to cause an action when a user scrolls something into the frame.
2:48 You used this to implement infinite scroll in the Video Collector project.
2:53 Adding hx_push_url=true as an attribute causes htmx to update the browser's URL when a fetch is invoked. This enables deep linking on your site,
3:07 and allows the user to hit the back button to go back to a previous fetch. HTMX does its best to interact with other frameworks in a friendly fashion.
3:17 Events that HTMX processes are passed through to the tag so other frameworks can see them.
3:23 In this course, you combined Bootstrap's ability to display pop-up modal dialogues with HTMX to dynamically specify their content.

Talk Python's Mastodon Michael Kennedy's Mastodon