Build An Audio AI App Transcripts
Chapter: Feature 1: Transcripts
Lecture: HTMX Primer
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now, before we get into the weeds and the details of writing all this code, I wanna give you just a quick HTMX primer. Now, if you already know HTMX,
0:10
feel free to just skip to the next video or this is short anyway, but I'm gonna just show you really quickly what this is and how it works.
0:17
It's an amazing technology. It's an alternative to front-end frameworks like React and Vue. And it says, instead of running everything in JavaScript
0:25
on the front-end, what if we just made the front-end more dynamic by working with the server more closely?
0:31
So you write your interesting behaviors in Python and you just click that together on the front-end with HTMX. Let me show you an example.
0:39
So down here we have, let's just do a click to edit, say. So here is all of the client-side HTML that you need to know. We've got a label, not a form.
0:54
Notice there's no form here. There's just static data in a label with values joeblue@joeblue.com. And then it has, instead of an href, it has an hxget.
1:06
And when you click this button, what it does is it uses the server at that URL to figure out what happens when I click that.
1:14
And what it does in this case is it's gonna say, return a form that we can edit. Let's see this in action down here. Here's our static stuff, right?
1:25
Try to double-click it, typing, no changes. But if I hit edit, notice it's downloaded that form without a page refresh.
1:33
It just, in that little fragment, sets it. I'll just put this as michaelk@mk@mk.com. And if we hit submit, it's back.
1:44
Now it's back to the static version. And you can actually see down below, we show this, it'll show you what's happened.
1:51
So first it shows this static form as we just saw. And when I clicked edit, it took that data and on the server it said, you know what?
1:59
The edit version is gonna be a form that has a label, some text area, another label, another text area. It has the values that were,
2:10
there's the static data to start. And it says, we're gonna do a put back to that URL. And we're gonna have the target be this whole form
2:19
and swap it if there's a change. What do we do in the change? You can't see it on the screen, but if you click that button, it'll do this thing.
2:27
It makes this change and it returns back the new updated static version. So this is HTMX. There's a ton of different examples down here.
2:37
Another one that's fun is active search. We're gonna see that going in a little bit. So down here, I can just type, we need Michael, the M.
2:47
I can see we've got Owen, so I could type O. There's two Owens, keep typing. Now it narrows down just to Owen.
2:54
We're gonna do that for our search as well using HTMX, super, super cool. So there's really not much to learn at all about this.
3:02
We do have a course on it. It is amazing if you take it to its extreme, but what we're gonna use in this course
3:07
is a really, really small sliver of this to make our code super nice, allow us to add this dynamic behavior.
3:14
For example, when we kick off a transcript, we can start that, monitor the progress without just reloading the page all the time. Really, really nice.
3:22
We won't need any JavaScript, which is also okay with me.