Moving from HTML to HTMX

[00:00:00]
>> So we're unchanged from HTML which is what we're doing right now and we're gonna change into HTMX, okay? So we're gonna do three things. We're gonna add an endpoint POST / count that increments the value that's gonna be appearing on the index page. We're gonna remove the incrementing from the GET / route and we're gonna add a button to the html that goes and makes things happen.

[00:00:23]
All right, sounds good? By the way, this will be a great point if you use Copilot, you can kinda cheat some of the things right here but if you don't, that's fine. So first thing I'm gonna do is I'm gonna add a POST endpoint should be pretty straightforward.

[00:00:39]
So I'm gonna do that, POST count and this will do the counting and then I'll return out the template. The get, we no longer increment on a get, only on a post to count so pretty simple server change not a lot just went on there. And then we're gonna go over to our templates and we need to add a little something.

[00:01:00]
So, I am gonna add a button and that's gonna do something called hx-post so this means I'm gonna make a post request with this button and it's gonna be for / count and there we go. [SOUND] So now we have a button on the page called count. I have told it to post to count.

[00:01:25]
Don't worry, we're gonna explain all this in detail this is just kinda like the high level introduction. We're gonna post it to count and we should see just what happens. So I pretty much did everything that needs to happen except for we also need HTMX in our website.

[00:01:39]
HTMX is a small JavaScript library. So I'll go like this I'm gonna tell Copilot please get me htmx cdn. This is one of the fun parts about Copilot and bam, it works. But if you don't have Copilot go to htmx.org, go to the docs, search up the word script, enter through a few times and right there.

[00:01:59]
It's about the fourth one in via the CDN link. We're just gonna use the CDN link it's easy, it's straightforward to use we don't need a build process. Awesome, we have that. We now have the HTMX script and we have the HTMX post going on. All right, so a lot of you are probably confused again, that's okay.

[00:02:18]
I want you to try to start drawing boxes in your head at this point. So if we've done everything correctly, when I refresh this, we get a count button. You should also see that. Let's press count, it's probably not what you wanted to see. This is probably not the results you were hoping for.

[00:02:36]
It kinda sucks that's just not, this is not good at all, is this?
>> I can't get my air to run,
>> can't get air to run? If you can't get air to run, you can literally you could, this would be super annoying, but you can you can just go run cmd/main.go.

[00:02:52]
And that will run the server, it's just that when you make a change, you're just gonna have to run it yourself, which is, it's just annoying more than anything else. Air was just supposed to be a convenience so you don't forget to refresh your server. And then you'll be debugging the lies this thing and then you'll go, yeah I forgot to update it just like the classic Wi Fi watching us is just such a good developer experience.

[00:03:15]
I cannot tell you how many hours of my life has been devoted to I forgot to restart the server. At least I would honestly say at least one solid year of my life has been devoted to that just singular bug. All right, fantastic so hopefully everyone is on board.

[00:03:33]
So we did these code updates. Yep, everyone should be able to see these updates pretty straightforward. I did more count right there and now what happened? I don't think anyone likes the results. I think it's probably time that I introduce HTMX in maybe a more structured way because this probably isn't what everyone was going for.

[00:03:52]
This double button, somehow my button had a baby here and everything feels confused