Swaps Recap

[00:00:00]
>> So let's look at the HTML and ensure that this is correct. I actually have no idea if this is going to be correct or not. I put this in here because there should have been an error, but I may have actually programmed it correct, I'm thinking I know I programmed it by accident.

[00:00:14]
All right, so let's see. What do we got here? Well, okay, I mean, that is all correct. Our form is all correct. So I think what I was supposed to do is I supposed to forget to do the old HX swap on the outer, and then we'd start having forms embedding themselves within it.

[00:00:29]
It creates no actual problem, it's just inside, I just I don't want potential problems, right? I don't want the occasion for a problem, so I goofed up there and now look at us. Just disappoint. All right, so I actually programmed something correct. I knew it was going to happen, I just knew for a fact I'd do it correctly when I wasn't supposed to do it correctly.

[00:00:52]
All right, there's all our code, lot of code here, lot of stuff. By the way, I threw this in here at the end. Sometimes when I'm testing I'll just throw a little test block in here, I'll highlight it red, put it like a big red block. So I can kind of see where things are going, if I want to just test like when I was just learning I found this to be super useful.

[00:01:10]
So I'd highly recommend that also another kind of super useful thing. If you're just kind of new and you're trying to discover what is going on in HTMX, what available stuff it has I suggest turning on HTMX.logall, and when you execute that, when we add another contact, you'll see that it does a whole bunch of stuff right here.

[00:01:29]
It has, let's go all the way up to the tippy top, we have the trigger, what triggered it. We can listen to that. So we can listen to the trigger that started some HTMX event. We can listen to a confirmed case. We can say validation case on a validation case on this one.

[00:01:44]
We can add in a config request, validate URL before request, before send, then it does all the XHR stuff, and then afterwards we have a before swap event. Notice that we actually used the before swap event. If you go back to right here, that's where we did this whole DOM listener.

[00:02:00]
Before we swap in the content, let's make sure that we can respond to error codes in a way we want to respond to error codes. And so, there is quite a bit of stuff that you can actually respond to. And including every single element that got cleaned up also goes through this before clean up element.

[00:02:13]
So you can actually really go in there, and you can really be quite expressive with what you would like to do. You just don't have to. If you don't want to, that's fine. There's also after swap, after request, after load, after settle, meaning that everything has been replaced on the DOM, there's no more delays, all the throttles or everything are all done.

[00:02:32]
Here you go, we're in a new finish state, so then you can do something else at that point. You can add a set time-out and then close your module. I'm not a big fan of module or modalities, however you want to pronounce it. I think that's like a North coast versus West coast pronunciation issue.

[00:02:46]
North Coast being Montana, greatest state in the union. All right.
>> Question from the chat, is Echo handling the HTML serialization with c.render.
>> Okay, so is Echo handling the HTML serialization with render? So I'm not super familiar with Echo, but effectively what is happening when you do a dot render, it calls your renderer's render function.

[00:03:07]
So remember at the very beginning of the class, we have this function right here, renderer. And so it will call that function with a name, a data, a context, and then where to write that value to. And so that way when we execute the template, it produces a string, but that string instead of just returning you the string of the template, instead it writes that string into the writer.

[00:03:29]
The writer is supposed to be a nice, efficient way so you don't have to have nearly as much memory allocations. Maybe it has a nice large buffer. There might be a way to pre-configure how much underlying starting memory a writer starts with I have no idea, but that would be fantastic so that way you know you could have some nice some delicious efficiencies there.

[00:03:47]
But when you call render notice that we do a pass in a string and we pass in some data, if we go back up to the top, notice that we get a name and we get a piece of data that is if for those that are the go uninitiated interface squirly is effectively any in TypeScript.

[00:04:03]
It's not any, but you can imagine it's any. Easiest way to put it, it just says, hey, it's a type. I don't know, go figure it out yourself. So there you go. So yeah, that's all that happens right there. I don't really understand exactly what happens underneath the hood, but I know most of that happens.

[00:04:22]
You can use any now but okay, so for those that are talking about gov, that any is completely different than a TypeScript? Any, okay. It's not even the same, it's more like a template t than it is in any, that's just ridiculous. Don't be ridiculous. All right, let's get back to HTMX.