Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So we're wrapping up the basics, and we've pretty much gone through this is strictly just my opinion, of course. This is not any official thing with HTMX, but we've gone through pretty much all the basic things that h t m x has for your sort of regular toolbox of items. So for this episode, I kind of want to recap everything that we've gone through and more so than that, also kind of group them together in kind of a logical or just some way to kind of organize them in your head so that when you're thinking about the different attributes, you can sort of keep you know, each one of these is a tool, and it's like a wrench, a hammer, a screwdriver, and sort of having some idea that they exist, first of all, is useful, but also kind of what other tools go along with them, what they might be used with. So I think putting them into groups as kind of almost like part of the life cycle of an h t m x, you know, the the request life cycle, the data retrieval, and and all this kind of stuff. So the first group, I would say, are kind of your your protocols, your HTTP protocol, that is h x get, h x post, h x patch, h x put, and h x delete.
Lazarus:And h x get and h x post are probably gonna be your number 1 and number 2. That's just sending. These are all ajax ways to send ajax requests to the server. And I'm actually gonna include ajax indicator in with these even though that's not part of the protocols, but this the HX indicator is an attribute that goes along with these requests in that it's kind of it's following the life cycle of them and letting you show and hide indicators like loading indicators, etcetera. So h x get is just your standard get request.
Lazarus:H x post is when you're, you know, putting something onto the server, you're modifying, you're editing something. Patch, put, and delete. You can sort of use those as needed, whether you decide to use them with their original intent as as, you know, updating data, changing changing something, or deleting something. You know, there's a whole sort of episode on on those, each one of those. And then h x indicator, which is giving you access to these sort of special classes, so that you can show what's happening, what part of the request you're at, kind of indicate to the user that something's happening, something's loading.
Lazarus:So that's the first group, the HTTP protocol group. The second group would be anything that deals with events. So hx trigger, hx on, h x confirm. So h x trigger is your basic way to say, what is it that kicks off? H x trigger equals click, h x trigger, you know, mouse up, mouse over, you can do comma separated, on submit, you could have it on submit.
Lazarus:And the default is gonna change depending on which element. If you've placed this onto a form, the default is gonna be submit. If you've placed this on a button, the default is gonna be trick is gonna be, click. So depending on which element it is, you may not even need to change it, but hx trigger is gonna give you that access to the events and same with hx on. So, you know, you can write custom JavaScript directly into your, you know, you can tap into events with h x on any JavaScript browser event.
Lazarus:You can tap into it and then run custom JavaScript directly there in line if you want to, or call a function that is written somewhere else, you know, up to you. But hx trigger, hx on, and then hx confirm, I sort of put at the same level because this also deals with the events. It's kind of a way before you even submit that get that post that patch. It just does a little check, you know, do you wanna are you sure you wanna do this? It just taps into the browser confirm, JavaScript confirm.
Lazarus:And then if you cancel, then, okay, nothing happens. So I kind of put that along with the events. So that's the 2nd group events. The 3rd group is the variables, the parameters. So what are you gonna send with this request?
Lazarus:And the ones that deal with that, and just to keep in mind, these are all just the ones that we've talked about as the basics. There are more attributes that deal with these, all of them. But as we've gone over from season 1, all the basics, so the variable ones, the ones that concern the variables that you're sending to the server as part of your request, would be hxparams, hxvals, and hx include. So hx include is the one that lets you, put in a CSS selector of any form or input or select, basically, any target that everything inside that that is a a select or an input or or some sort of, you know, HTML, input is going to be included along with your request. So that's h x include.
Lazarus:H x vals lets you just put directly into the, into the line. You you just put JavaScript, like a JSON array of what values you wanna send. And then h x params lets you filter all of those. So let's say you have a huge form and you wanna submit that whole form, but you can use h x params and just pick out you know, you can use, you can say, like, ignore these, you know, say none, or you can you can ignore certain ones. You can say, you know, use use not to ignore, or you can just select the fields that you want to send.
Lazarus:So those 3 all deal with sending variables to your request. After you send the variables to your request, you're gonna get back all the things in group 4, which is the response. So what do you do once you get that response? So this group is hx target, hx swap, hx select, and hx preserve. So hx target is your most basic one.
Lazarus:That tells you where you're going to put the value, where are you gonna put the stuff you got back? What's the target for this HTML? H x and it's a CSS selector, just like a lot of this stuff. H x swap is gonna say how you place that information. So by default, it might be, you know, outer HTML.
Lazarus:It default also can change depending on which one it is, but it's usually the one that makes the most sense, but you can always override it. So you can do swap, if you're doing a list, you have a bunch of items, you can do, you know, before and after the item. There's just a bunch of different options for swap and how you put it. So you have target for where, swap for how, and then you have select, h x select equals, which is another CSS selector. This one's a little different.
Lazarus:It lets you look at the HTML that has come back in the response and use a CSS selector to pick out which HTML you want from that to be considered and to be used. So you can take a large response and just get the parts of it you want using HX select. And then HX preserve lets you take a piece of the your target. So you have your target html that you're going to place everything. HX preserve lets you keep some of that off limits, so you can just say do not replace this, you know, you set, an ID and it has this has to be an ID, so you have to put it on the ID, and when that new information comes in, the new HTML that would ordinarily replace it, if that ID has hx preserve on it, it's going to be ignored.
Lazarus:So you can keep stuff persistent. So if there's some part of your div, some part of your data that you want to keep persistent, good examples of this would be like a running audio or a running video, something that is, you know, you just don't want to replace because it's got some maybe it has some JavaScript thing on it that's like a countdown timer or something, and you don't want to swap out that HTML and restart it or whatever. So h x preserve is sort of the last of the, the basics for the response. And then the final group, which, we've only there's really only one in here that we used in the basics would be the browser. So h t m x gives you a lot of options to do some stuff with the browser, like pushing to the URL bar, and we haven't talked about any of that stuff yet, but h x boost, we did talk about, which is kind of a way to turn all your regular links into ajax calls, and kind of give your site a really a boost.
Lazarus:Yeah. A really snappy way to make a an ajax request and replace everything without so it kind of gives the SPA feel, but all you're doing it's just using all the regular links, and what it does is it turns it into an h x request, goes to the goes to the server, gets all the HTML, and then replaces the whole body, just swaps it out. So you can use hxboost, you know, on any link, any regular link on your site, and it will sort of turn it into that s p a feel. So those are the kind of 5 groups. The first one, HTTP protocol stuff.
Lazarus:The second one, events. The third one, the variables that you send, the fourth one, the response, and then the last one, the browser. So if you sort of think of those groups as as the overarching thing, we've talked about all the basics that fit into those groups. This here this is your basic toolbox of htmx attributes, but there are a lot more. Next season, we're going to explore some of the more advanced complex attributes, or the edge cases.
Lazarus:You know, there's stuff in there to deal with web sockets. I mean, there's stuff that we've we've talked a little bit about the out of band, the swap out of band, which, you know, actually, I didn't really mention that as part of these groups, but you could probably put that in there with a response group, same as as swap. But that is kind of a way to really expand the there's sort of a a simplicity of, okay, you just go to the server, you get some data, and you put it into a place. You use something like hx swap o o b out of band, you can go to the server, get some data, and place it everywhere on the page. You can just decide on the server side where this stuff is going to go.
Lazarus:So we included that I included that into the basics because I just think it's so cool. It's like a a core part of your tools when you're using h t m x. But for season 2, we're gonna go through and go through all the other attributes, and there's some some very interesting kind of edge cases stuff out there, and we'll try to think of examples for all of them, and basically just go through some of the practical uses for everything, and basically just learn how to build more cool stuff using HTMX.