Advanced htmx: Season 2 recap, grouping the 13 advanced attributes
So I've been grouping these attributes into seasons, with the basics going first, just kind of everything you need to get started, in season 1 and seasons don't really matter to me. It's more just a way to organize them. So this season, season 2 has been advanced HTMX, and it's still going through every attribute. There's other episodes, you know, just for fun, but the primary thing with this season, all the regular episodes are the advanced HTML attributes. So everything that we didn't cover for attributes, specifically for attributes in season 1 has been in season 2.
Lazarus:So now now that we've gone through every single one of them, similar to what we did at the end of season 1 is kind of grouping them all together and doing a recap of everything that we've talked about. So the first group that we went over, and this isn't in the order that we went through them, but I'll just say what the 5 groupings are. Browser and history. And these are all, you know, advanced attributes, so none of them need to be necessarily used all the time. But these are advanced things.
Lazarus:Number 1 is browser and history. Number 2 is customizing requests. Number 3 is submitting data. Number 4 is overriding HTMLX. And then number 5 category is just the fun category, the advanced attributes that are just for fun.
Lazarus:And there's only 1 in there. Okay. So the first category, browser and history. So we talked about h x push URL and h x replace URL, and those are up in your URL bar. You can set what the URL should be.
Lazarus:And the reason those are in advance, that sounds kinda simple, but there is a fallout from that. There are consequences. If you set the URL, if you just load a little section of the page, and then you set a new URL for it, an example I gave was, you know, details. If you have an account and you want to get some of the details, you can load those details into a section of the page. And so you could set the URL to be like account slash user slash details, whatever it is.
Lazarus:But what happens when you refresh? Right? Because that URL and that route was just loading a little snippet. So that's where the complication comes in. That's why it's in the in the advanced section.
Lazarus:So we talked about how to handle that with request headers. Laravel actually gives you, and I'm sure some other frameworks do, but we just I just found out recently that Laravel, even in their documentation, gives an example of using h x headers, and and showing how to provide how to provide different bits of your templates and different bits of your views depending on whether it's coming from an h t m x request or whether it's a refresh and it's a whole page request. So you can those headers are sent by HTMX and you can use those to sort of, decide whether you want to show just a snippet or whether you want to reload the whole page. So the push URL and the replace URL, they sort of handle what happens to the URL bar and if a snapshot is created. So push URL just adds another, item to your history stack.
Lazarus:Replace URL replaces your current history stack. So if you hit the back button, you're not gonna go to your previous one, you're gonna go to the page before. So it it replaces whatever your current one is, whereas push just adds one to the stack. So those are the first two we talked about. Then there was HX history ELT, and this is a little tricky one.
Lazarus:When when we when your browser or specifically, HTMLX makes that snapshot of your site and adds it to the browser history, which it needs to do because it's now, you know, dealing with everything in Ajax. So it just makes everything work. It by default takes a snapshot of the body tag, which makes sense, because that's where all your stuff is. Right? So what you can do with HX history e l t, it decides what the history element is.
Lazarus:So if you wanna leave something out, then you put you put h x history elt on everything you wanna keep in your browser snapshot, and then everything you wanna leave out can stay out. And that means even when you're going with the back button and the forward button, you could have sections of your page that are not affected by that. The the classic example and the one that's given in the episode is, you know, an audio a piece of audio playing. You don't wanna If you hit the back button, you can preserve that audio, keep that audio running even using the back buttons, which is pretty cool. And then the next one we did for browser and history category is HX history, and that actually prevents something from being saved in the HTML snapshot.
Lazarus:So all these browser snapshots, if there's something in there that is sensitive in some way, you can do h x history on you can put h x history on that element and that will prevent it from being saved and, it just won't go into that snapshot. So you can sort of decide what might categorize, you know, what might fall into that category, what you wouldn't want in the browser history, to show up when you when you go back or forwards on the page. Maybe something that's just kind of shown once to the user and that's it, and you're not supposed to sort of have access to it anymore. So those are the 4 of the advanced ones that kinda go into the browser and history. Our next category is customizing requests.
Lazarus:So and these are all just my categories. This is nothing official. This is just what I think these from everything from this season falls into. So when you're making requests, you have a lot of defaults that are set, and most of the time you won't really need to do this, but every now and then you need to just figure out how to do something really unusual or make some sort of customization to those requests you're doing. So the first option for that is h x request, which allows you to either set no headers or set a time out on the request.
Lazarus:So this is kind of a built in, you know, it it tags it goes into some built in just a HTTP API stuff that is part of the normal headers on an Ajax request, and it just kinda lets you override some of those. And there's really not a lot of options on the h s HX request. It's just kind of, you know, do you want to do no headers or I think there was another one with, authentication, but I I can't quite remember which one that was. So the next one with customizing requests is h x headers. So the request one is kind of higher level that lets you set, like, the time out and the no headers.
Lazarus:The HX headers one, that lets you set your own custom headers, and you can do this pretty much any header. And there's different reasons why you'd want to do this with a request, you might want to set the type, you know, your back end server might need certain things to either prove who you are or anything like that. Whatever headers you want to set. There's lots of reasons you'd want to do this. Maybe you want to make the request last longer, maybe you want to do different stuff, but whatever your reasons are, those are your own, and this is in the advanced section so there's no need to go into all those.
Lazarus:You can set the custom headers dynamically or with static JSON. So you just do h x headers equals and then you set your request headers. If you wanna do the the dynamic ones then you you pre prefix it with the j s colon or the javascript colon. So that lets you set, your own custom headers. The last one in customizing request is hx sync.
Lazarus:So HX sync allows you to set rules for your multiple HTML requests that are happening at once. And there's a bunch of different options. Why would you want to do this? So some requests might take longer than others. So let's say, I think a good example is like the lookup.
Lazarus:You're typing, maybe you forgot to add a debounce, maybe the debounce is just a little bit slow, so you type a couple letters, you know, you type a l, and it sends a request. It's gonna do the auto complete on your inputs and do a look up for you, but then you type a again. So what happens to that a l request? Maybe the a l a should replace it. So that type of scenario, because what could happen is the a l one maybe takes a long time to go.
Lazarus:Maybe there's 500 results for the a l one, but there's only 2 results for the a l a. So a l a comes back immediately, shows up on your page, and then finally the a l one comes back, and suddenly you've typed a l a, but the a l response is now covering your lookup, and your a l a has been replaced, it's gone. You don't want that. So h x sync lets you decide how your multiple h t m x requests at once are going to be handled. This is useful, you know, it's not just on an individual input, you could do this for a whole form.
Lazarus:So if you have like, one part of the form where once you submit maybe you want to cancel all the other requests that your form is making. So So your form could be doing some other lookup, your form could be doing some validation, but once you submit you just submit. You wanna just close everything else down. So h x sync gives you that control to say how you want to handle multiple requests at once, so you can queue them, you can do other stuff. So that's the customizing requests category.
Lazarus:The next one is submitting data. So some different sort of fancier ways to submit data, in in the advanced HTML attributes here. So the first one is h x validate. And what that allows you to do is normally when you submit something, let's say it's within a form, you can use all the browsers kind of like classic one is required. Like, you may have an email address, it's required.
Lazarus:So you can just and there's other ones too, but required is kind of a good one. So what happens when you click submit? Normally, it just says your browser sort of stops you and says, you know, please fill in this required element. So it just kind of doesn't you don't need to go to the server for this kind of stuff. But when you're using HTMX, you don't have to have a form.
Lazarus:So when you click submit or whatever, and you want it to respect the validation rule, the required, that you have on another input that you're submitting, it doesn't the browser doesn't know which form is being submitted because there isn't a form, it's just you can use h t m x to submit whatever you want, that's the power, that's the flexibility of h t m x, that's a good thing. But, you might want it to respect that required. So a checks validate allows you to treat it basically allows you to use your validation rules, your built in browser validation rules outside of forms. So you don't need to have a form to use your validation rules. It just kind of lets you, you can and you can put that on basically put that on, you know, your root element of whatever would be your form if it was a form, And then everything in there will be will use those validation rules when it's submitted using that h x get or h x post or whatever you're doing.
Lazarus:Okay. So that's the next for submitting data is h x disabled e l t. We talked about that one because it disables a button once you've clicked it. So this is another just kind of convenience of these forms where you don't want to have a situation where you submit something and then it gets clicked again. The user is like impatient or just regardless of whether they're impatient, they might accidentally click twice.
Lazarus:They might not be able to tell that it submitted because maybe you don't have, any sort of indication or loading or, you know, you don't you're not using the HTMLX requests special classes or something like that. Whatever it is, they might click that button several times. So to avoid that, you can just put an h x disabled ELT. And what that does is it takes that element and it disables it. A button, an input, whatever it is, once you've clicked it, once you've submitted something, once you've submitted your h x get or your post or whatever, it's going to disable everything and that's true of the selects, that's true of text areas, you know, whatever you wanna disable.
Lazarus:You can put that on the parent element, it'll just disable everything during the request. So that is very handy to sort of reduce the possibility of these kind of errors that can happen if something is submitted twice. So the next one in the customize in the, submitting data category is h x encoding. And this is kind of just a really basic one. It just unlocks the ability to upload files via Ajax.
Lazarus:So you can set the encoding. The only option really is multi part form data. You've probably done this a bunch of times in regular forms and with sort of a web one point o setup. So this just lets you set the h x encoding for your submission so that you can use the upload files. It actually works really well.
Lazarus:I have a little post I think I did on Twitter. I don't remember where I put this, but, yeah. Basically talking about I I spent hours working on something. Maybe maybe I just put that in the episode, but spent hours working on something and replaced it all with h t m x really quickly, added a loading bar. I have all that code on that episode, the h x encoding episode, so.
Lazarus:So that's the last in the submitting data category. The la the next category is overriding HTMLX. So there are times when the HTMLX defaults don't exactly, you just don't want them. One of those examples would be, you don't want your users to write a comment on your page, and in that comment, write some HTMLX that runs on your site. Right?
Lazarus:I mean, HTMLX is a front end tool. It require it runs in you can go in and inspect element and change stuff and do stuff, So you don't want your users being able to submit some running HTMX code just because your site uses HTMX. So for security reasons, you know, you want to override HTMX running on a certain part, you can use HX disable. And that's good for just kind of any sort of user input field, where you're displaying something just because people are crazy and you never know what they're gonna do. Even your users who are otherwise wonderful, for your app, they're also a little nuts sometimes, or they could be.
Lazarus:It could be a competitor, you know, who signed up for your site and they wanna run some HTMX. So you just use h x disable, and they're not going to be able to run that in there on their site. The next one for overriding h t m x is h x disinherit. And this is most of these attributes, almost all the attributes with h t m x use inheritance. So you can put them on the parent element or way up in the chain, and everything below it is going to have that value by default.
Lazarus:So, you know, I I used a few examples in that episode of h x disinherit, but the one that really caught caused some problems here is is select h x select. So if you put that on like a root element on the a parent element way at the top of the dom and it selects, you know, you just have one little call in there and it select you you click something, it's selecting a little section of the site out of your response and putting that somewhere. Typical thing to do, but h x select is inherited. So now everything below that, all your h x gets, all your h x posts, everything else you're doing is gonna assume that it also has that same h x select on it. So that can cause some unusual unexpected behavior if you're not prepared for it.
Lazarus:It looks like a bug, and you're kind of like, why is this only returning this tiny little section? Maybe you forgot you have that HX select higher up. So to break that inheritance of h x select, you can do h x disinherit equals h x select. Or you can do h x disinherit equals star and do everything, or you can do a comma separated list and just disinherit, you know, particular elements. So it's just another one overriding h t m x, there's a couple defaults.
Lazarus:Most of the time they're great, but if you do need to step in and and make a change to some of the defaults, they they give you some ways to do that. The final category of stuff we've talked about this season for advanced HTMX is just the fun category, and h x select o o b is the only thing in this category. And that's just something it lets you take your response, and it your response from any h x get on the page or whatever, you might have, a bunch of different stuff in it. You might have, things that you want to place all over your page. So like alerts, notifications are kind of a typical ones, but also maybe, updates to certain sections like, oh, there's some new posts so we'll put that up in the top right, or there's, you know, there's all kinds of stuff that you could have a a setup where you just make, like, I want to update the page with new stuff.
Lazarus:And so you have all these sections around your page in different parts. You don't want to replace the whole page necessarily, but you have these little sections and they're mixed, they're all over the place. So this select o o b, o o b is out of band. This lets you place elements from your response wherever you want. So you can take those, the ID has to match, but whatever's in your response you just do select o o b and put those IDs in that you wanna have, you know, replaced wherever you want around the page.
Lazarus:And it will take them select them from your response, pull them out of the response, and then put them where they need to go. So that's just fun. That's just a cool thing. This is also, you know, similar to the, o o b, that we had, you know, as a, in season 1 as one of the basic attributes that was the HX x swap o o b, and that one happens on the server side. So your server decides where things are gonna go.
Lazarus:It's like the, you know, traffic cop or whatever directing everything, but from the server side. Select o o b is a similar thing. It can put these IDs, the values from your response, anywhere you want, but you do it, you decide from your client side where that's gonna go. So select OB and swap OB, they're gonna do a lot of cool things for your site. So that is the end of the attributes, and, you know, specifically, this is was the grouping of the advanced attributes.
Lazarus:But the next thing that we're gonna talk about on this may be a just kind of a new season, may sort of break it out into a new season, are the headers. So there's custom headers that you can do you can use with h t m x, response headers, and request headers to do, you know, some different kind of magical things. So that'll be the next kind of big grouping of stuff. And I I hope you've enjoyed going through every single one of the attributes. Hope it's been useful.
Lazarus:It has been useful for me to talk about them because I each one I talk about, I learn about as well, and get to try out, and it's, it's been fun. So I'll see you next time.
