Let’s Learn HTMX!

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. Welcome to another episode of Learn with Jason. And for the first time ever, welcome live in studio, Jack Herrington.

JACK: Hey!

JASON: I'm super-pumped for many reasons. First and foremost, I'm happy to have you on the show.

JACK: I'm happy to be here. And in your studio, I did a little bit on.

JASON: When we had the idea to do an episode on HTMX. And I realized we were friends and I never asked you to be on the show. Which I don't know what's wrong with me.

JACK: I feel left out.

JASON: But on top of that, I'm thrilled to set up in the studio, have the two of us here live.

JACK: And talk about cool stuff.

JASON: And there's something special being in the same space.

JACK: It is.

JASON: It is very fun to connect with people remotely. But even that hundred milliseconds of lag in the Zoom call, it just slows things down in a way that, I don't know, the energy is always great in-person.

JACK: The COVID tests a couple weeks ago, I think we're good.

JASON: We have been testing heavily. Man, it's been brutal out here lately. My wife and I have gone through, jeez, like five or six tests each in the last five weeks.

JACK: Really?

JASON: Every time we see somebody, like a few days later, it's like, somebody is like, well, my friend said they had COVID. Maybe test.

JACK: Any time that tests.

JASON: All right. Just becoming the leave the house ritual.

JACK: I guess I don't see as many people. You guys are social butterflies.

JASON: That's true. We do spend a lot of time out and about. So, what's up, everybody? Welcome, Jack. I feel like I probably anybody who knows me knows you. But just in case for folks who aren't familiar you and your work, do you want to give a bit of a background?

JACK: Sure, I'm Joe Herrington. YouTube as Blue Collar Coder. YouTube and I got that name. Check out the YouTube channel. I do a lot on web Dev, Next.js, React, of course. And I have been doing this game so long that I do enjoy looking at new stuff a lot. That's how I get into stuff like HTMX. And it's weird, right? Because I mean, I think about like Next.js in the terms of like high-end, enterprise-type stuff. And now I'm into the kind of lower end stuff. And the kind of like, oh, we're just gonna go and crank out -- you know? It depends. If that's your thing. That's the need. Go for it.

JASON: Yeah. And I think, you know --

JACK: Different tools for different things.

JASON: And I feel like that's maybe the thing that has become the most important to me as I've gotten just I guess more mature in my career, like more experience. Is that, I don't know, I feel like the tools are exactly that, they're tools, right?

JACK: Right.

JASON: And I feel like I spent a lot of time early in my career if people didn't believe that people thought my tool was the best tool.

JACK: Java for life! Really? Really? That lasted for a while. I guess there's that. I'm not getting React tattooed on me. I don't have any tattoos in the first place.

JASON: What's funny to me is the idea if you treat tool like tools, you can get so much done, you can be so versatile. If you treat tools like identities, then the analogy that I've used is, it's sort of like if you hired a contractor to paint your house, right? And they showed up to your house and you show them, well, this is where I want to paint and they unload a box of hammers. Well, aren't you gonna use a paint brash. And they say, naw, I'm a hammer guy. Look at benchmarks, hammers are clearly superior.

JACK: Exactly.

JASON: Okay...

JACK: I wouldn't come up with that analogy, but I think it's actually very, very fitting. I expected you to go for like colors. Like I'm a blue guy and you want a pink house. Not happening!

JASON: To me, that's how ridiculous it sounds, we need to build a website. We need it to be Kubernetes. And it's like, but why? It's gonna live for four days. It's an event website.

JACK: It can be static.

JASON: We could literally build this in GeoCities. It's okay.

JACK: Probably should. It's actually pretty cool.

JASON: But Wix is great these days. Code isn't the point. The point is that we make something people can use.

JACK: Yeah. And I think -- oh, so, I would say, my side of it, I'm playing this game, obviously I'm old, right? So, I'm not gonna deny it.

JASON: Obviously I'm old. Somebody clip that, please.

JACK: I have been doing this since I was 13 years old. On a TRS-80. I don't know who would know if such a thing exists.

JASON: Chat, if you know what that is, tell us.

JACK: So, like,, the web is like something I hit mid-career, you know? Like I was doing like HyperTalk and hyper -- like Hypercar. We're going to talk about that pretty soon on the HTMX thing and so, I can't -- I could not be here were it not for the fact that you just keep on changing technologies and learning new stuff all the time.

JASON: Right.

JACK: I always look at technology as that's a cool twist on this. I never say, I have seen that before. That immediately ages you and then people are like, oh, yeah. You can't take it seriously.

JASON: I think too, the thing that's interesting about all this to me is the argument tends to be some variation on, well, we're just going in circles, right?

JACK: Yeah.

JASON: And it can look that way.

JACK: It's a circle --

JASON: It's an upward spiral.

JACK: It's an upward spiral, it keeps getting better.

JASON: You have too far a good perspective on this, the reason we change is the surrounding technologies change.

JACK: Yeah.

JASON: There's this concept I love, the adjacent possible, you couldn't in the 1600s invent jet propulsion. There were so many previous inventions that needed to happen before you could go to jet propulsion. When we did server rendering back in the late '90s, it's because that's what we could do. When we hit client rendering, we hit what jQuery started solving. And then back to server rendering. That is what the technology let us do.

JACK: Which we will do soon.

JASON: And look at the messiness of PHP and MVC --

JACK: We want more dynamic behavior on the client, we want to be running JavaScript. And now you have an issue where your server is in PHP. It's rendering your components one way in PHP and then you get your JavaScript and they're rendering the same components and now you got to keep those two in sync. That's a pain in the butt. That's how it leads to React and isomorphism. And now we're at the place, people are like, oh, my god, I've got this mega bundle on the server and the client.

JASON: I'm serving a marketing page. Why is this 700 kilobytes.

JACK: And maybe on the server, Go, Rust, JavaScript, anything, Astro.

JASON: In the most flawless segue of all time, let's talk about HTMX.

JACK: There you go. 10 minutes into it. HTMX.

JASON: So, HTMX is -- I thought when I first saw it, a meme account.

JACK: It is. It definitely a meme -- the meme game is strong.

JASON: It took me longer than I care to admit to realize that HTMX had technology behind it. I thought it was just somebody shit-posting. That's really what I thought.

JACK: Okay.

JASON: Then I started seeing people were talking about it less -- less jokey. They were saying like this is really cool. It does a cool thing. And I never -- I just haven't had time. I haven't looked at it. For folks who are like me, have no idea what this is, what is the high level on HTMX?

JACK: Okay. So, it's a one-price library. And you just drop on your page and it gives you -- it pretty much adds on the AJAX functionality in a way that feels like it's integrated with HTML via HTML attributes.

JASON: Okay.

JACK: Adding on now attributes, namespace HX that will allow you to do things like very easily make REST requests. Not -- sorry. HTTP requests. That return HTML in a style very akin to jQuery from back in the day. So, we're pushing things back on to the server. And then they got a whole book. It's a thicker book than you can imagine, it's a serious book.

JASON: HTMX does?

JACK: Yeah.

JASON: Isn't this technology like 6 weeks old?

JACK: I don't know. They're very good writers, very fast writers.

JASON: Jeez. That's prolific.

JACK: It is. It's kind of a philosophy of like trying to put everything back into -- go back to the roots of HTML and hypermedia, right?

JASON: Okay.

JACK: That's where it all comes from. Like the idea that you get this document back. And it's got all the links and everything else you need. And, you know, from a semantic perspective we can gather some value out of it. And the document is essentially like, I guess, self-contained.

JASON: Okay.

JACK: If you think about like what is the JSON endpoint giving you? Giving you raw data. How do you want that formatted? What can any kind of agent get from the JSON output of something? Right? Unless it understands the structure. What HTMX is pushing towards, hey, go make sure everything that the server is sending back is something that an intelligent agent -- something that understands hypermedia could understand.

JASON: Gotcha. Cool.

JACK: That's the highfalutin view. And the attributes and gives REST really easily. And the amount of JavaScript that you put on the page is set. It's like, there's -- I don't know -- 1724K for HTMX the library. And once you get that on the page, you're done. Like that's all the JavaScript you'll need.

JASON: Okay.

JACK: Not gonna need bundlers or anything else. That's it.

JASON: This is not bundled -- like this isn't something that you put into your like -- so, it's not working like React where it's a framework in the sense of --

JACK: No, no, no.

JASON: Client-side compiled --

JACK: Way pop your mind out that have.

JASON: What's the right mental model here? You're saying when I'm writing HTML, I'm adding attributes. To the component world, that brings me to what I have seen in Angular or Vue, you have the NG if statements or the V-click statements and stuff like that.

JACK: Yep. Don't need any of that. Because you're going go and ask the server for the HTML that's going change whatever, you know, you're gonna say, okay. I mean, we should probably do this. Because it will be a little easier to do than to talk about. You're gonna but the some attribute on a button. Okay. When you hit this button, you're gonna go and make a get request to this endpoint -- or this route -- and you're gonna get back some HTML and you're gonna put that in this blob, in this div over here.

JASON: Okay. Why don't we actually just take the opportunity here. Let's dive in. And so, before we do that, let me do a quick shoutout. We have Netlify and Vets Who Code doing sponsorship for our live captioning. We've got Amanda here with us from White Coat Captioning. Thank you so much, Amanda. And that is available -- you can see the captioning link on the bottom of the screen. Haven't figured out how to pipe captions directly into Streamyard yet. Streamyard, if you see this, please help me.

JACK: Live tech report.

JASON: But thank you so much to Netlify and Vets Who Code for making this possible. It is very meaningful. We are hanging out today with Joe Herrington. Let me drop a quick link into the chat for anybody who wants to check out -- that's absolutely not the right thing. Oops. Whatever. Don't click that link. You don't need that link.

JACK: Ten people will show up.

JASON: You can come in if you want, you're gonna be in backstage. It's gonna be super-weird. That's Jack's. And then we're gonna be looking at HTMX today. So, here is HTMX. Look at this -- look at this joker. What's up, DOM? Nice!

JASON: There it is!

JACK: Nice. You put --

JASON: How dare you crash my show.

You put it -- and like --

JASON: Wait, he's got your headphones here. I can't hear you. Get out of my show.

JACK: Love you too, babe. Like my broken wrist. Okay.

JASON: We are doing HTMX today. And you also told me we are gonna try to put HTMX into Astro.

JACK: Yes. I actually think that, you know, if you -- I think there was some folks or Twitter, use Astro. Absolutely we're gonna use Astro. If you're gonna stick with JavaScript, the combo of Astro and HTMX is fantastic. And they added partials in 3.4 I think almost specifically for this which is very, very helpful. So, yeah, let's fire up an Astro app.

JASON: Let's do it.

JACK: Five, I think, they're just releasing 4 now. But it seems like 4 is mostly just a Vite upgrade.

JASON: Somebody told me how to fix this error, I guess I have to uninstall and reinstall it. Go here and here. And then I'm going to npm create Astro.

JACK: Yep. Latest, I think.

JASON: Yep. @latest.

JACK: Look at you. I usually just go to the site and just copy/paste that.

JASON: At this point, I have done enough of it, I'm like, I remember how this works.

JACK: All right.

JASON: So, let's learn HTMX.

JACK: No, we don't want to --

JASON: Empty?

JACK: No, empty. Not that we can see it, but it's going to ask if we want dependencies.

JASON: Dependencies.

JACK: And TypeScript.

JASON: And let me move this over so everybody can see it.

JACK: And TypeScript.

JASON: We do want to write TypeScript.

JACK: Relax. With the type --

JASON: You want it relaxed?

JACK: I want it relaxed.

JASON: We're going laid back today.

JACK: In this case, relaxed.

JASON: Hide this banner so we can see what's going on over here. Can we stick to HTMX? We can stick to HTMX. We have to have a way to serve it.

JACK: A page to put it on. You could go with Go or Rust. PHP is an example. You have to have something. It's not going to exist on its own code there. Bring that up, nice.

JASON: And close this one -- oh, Dino, you've got to chill.

JACK: Hey, guys, chill, exactly.

JASON: Here we go. We are in.

JACK: So, yeah. Let's use the Astro -- the HTMX integration. That's gonna be the easiest way to get it on the page.

JASON: Like this?

JACK: No, I think it's npm -- you're using npm or --

JASON: I use npm.

JACK: That's cool. Astro-HTMX.

JASON: HTMX.

JACK: And then HTMX.org. Oops, sorry, and then also HTMX.org.

JASON: HTMX dot -- you can put a dot in a package name?

JACK: Apparently so.

JASON: Who knew?

JACK: Who knew? That guy. Meme guy knew. That's who knew. Okay. And then we need to -- we need to tweak the configuration for Astro. Astro config MJS now.

JASON: Okay.

JACK: And then we need to bring in that Astro HTMX.

JASON: Okay. And is that let's see.

JACK: There you go. Import HTMX from --

JASON: HTMX from Astro.

JACK: This is actually documented. We could look at the documentation.

JASON: Why would I look at documentation when I've got you.

JACK: And under integrations tag.

JASON: Oh, under integrations. We need an array, these are gonna be an array -- not a --

JACK: Yes.

JASON: Okay. And we'll just throw this into here.

JACK: That's it. Sweet.

JASON: Okay.

JACK: I've got HTMX. Okay. Cool. Bring up our browser. You're gonna do Arc.

JASON: Okay. And then we'll go... localhost 4321.

JACK: Takeoff! Cool. Let's do something really, really easy. Let's go in and make another source page. Call like, I don't know. What do we want to do? Some sort of songs.astro?

JASON: Okay. Songs.astro.

JACK: And literally put some content in there, div, Hello World, whatever.

JASON: Okay.

JACK: Nice. H1 high, there you go. Awesome, perfect, great. Now let's go back to page. Okay. Perfect.

JASON: Okay.

JACK: Now let's go back to the page, though. And we'll now load that via HTMX. What's gonna replace that Astro with maybe a button.

JASON: Replace this Astro with a button?

JACK: Yeah.

JASON: Okay.

JACK: Cool. And I don't know whatever. Load songs, whatever. Get songs.

JASON: Oh, I see what we're doing. Okay. I was not following what you were doing. I'm with you now.

JACK: All right. So, let's make a div we're gonna put that into. Make a div with an ID that's empty.

JASON: Okay. Div id, content.

JACK: Perfect. Now open the button. We're gonna do hx-get. That's a get request. And then do slash songs. And then we're gonna do hx-target. And give it a hash and then content. I mean, it's CSS-ish.

JASON: Got it, got it.

JACK: Hit save. Now let's go back to the page. Load songs. Hello World.

JASON: Oh... interesting. Okay. Okay.

JACK: Okay. Now --

JASON: Why are you mad?

JACK: Who is mad?

JASON: Cannot find named body. It's right here.

JACK: Why are you mad? Don't be mad. That seems perfectly legit to me.

JASON: It seems like you forgot what you are. You're fine. My VSCode gets a lot of abuse as I install something new every week.

JACK: I know. I used to do a lot of restart the TS engine. Now I'm straight up reloading window. It seems to save the terminal sessions which is great.

JASON: Oh, interesting. You can reload the window?

JACK: Yeah, just do command shift P and then type "Reload window."

JASON: What?

JACK: What?

JASON: You have got to be kidding me. Except for this --

JACK: Jerk -- at least you know like now you can check to make sure when you disable that thing it's disabled.

JASON: Okay.

JACK: Awesome. Let's go into network inspector. We're gonna see a lot of cruft on the -- hit load songs again. Okay. Cool. And we'll go to songs and look at the return response. Yeah. So, it's getting a lot of cruft, right? It's getting the Vite stuff and all that sort of stuff. What we want food is have it really pure, just the div and Hello World.

JASON: Okay.

JACK: Go and add on the partial to songs at Astro. Do the triple dash so we open up code, right? And do export const partial equals true. Yeah. And that came in with 3.4. Load songs now. And you go, go to songs, it should be nice and clean. Ta-da!

JASON: Oh!

JACK: There you go.

JASON: So, this is the first time I'm using with the partial support. And that's --

JACK: Yeah.

JASON: In true Astro form, I like that it gets out of the way. Would you like to use this as a partial? Cool.

JACK: When I do my first video on this, I had to actually go in and make middleware that would grab the CSS and the JS and whatever. Because I had Tailwind and it was a lot of stuff.

JASON: It looks like Steven Young --

JACK: Can I get, you know -- yeah, exactly.

JASON: What's up, Steven?

JACK: Hey, Fred, can we get partials? And hitting up Twitter and all this stuff. And finally, 3.4 came up. Yes, yes!

JASON: Just imagine Fred like --

JACK: No, I'm sorry. I can't be characterized.

JASON: I think Fred would characterize Fred that way.

JACK: Ten ideas, what about just partial? You could just do dot partial. Like whatever.

JASON: Yeah.

JACK: I like this. This is clean.

JASON: This is nice and clean. This is great. And I like the fact that this, you know --

JACK: But I'm diggin' it.

JASON: This feels useful, right?

JACK: Yeah.

JASON: I think the thing that's interesting to me is that it sort of feels like components.

JACK: Yeah?

JASON: It sort of has the like hydration feel of Astro where you're like, I need a button and the button needs to do something, but I don't want the rest of the page to have to be a React app to have this one little thing be a React app. So, it has that same good feel of this is the only interactive thing so it's the only thing I have to make interactive. It's interesting to me that this is being done through HTTP calls as a opposed to -- and I know that they're doing HTTP calls whenever you load something with a button click. But it's interesting to me that it's just kind of like putting that right in front instead of sort of abstracting it away the way that a lot of frameworks do.

JACK: Well, sure. And the way that a lot of us -- okay -- anybody, wow, React has been around 10, 11 years now? And even before that, our focus was on doing like we make a JSON request to the server, we get back some data. We do some rendering or not client. You know, whether it's Ember or Angular or React or whatever. And so, a lot of folks are just like that is the way. That is the way, the truth, and the light, right? And so, like flipping that around and saying, now the server is gonna be -- like that's gonna do all the rendering.

JASON: Right, right.

JACK: And get some returns for HTML. Kind of like, whoa. Invariably, you know, if somebody said something already. But somebody will bring up security. Obviously you want to be on some sort of platform that's going to do standardization of whatever you're getting back, microservices or user generated content more likely. So you don't get script injection. And that would be like -- I think that I originally used like PHP. And yeah, PHP on its own doesn't do sanitization. But like Laravel if you use that, that will do it. Astro does sanitization.

JASON: Great.

JACK: Look at this.

JASON: This is just me making it so that people can make what it looks like on the screen.

JACK: That's too small -- you don't get that.

JASON: I just did the whole thing. Let me know if that's too small. I'm trying to not make our heads --

JACK: I'm loving Streamyard.

JASON: There was a question, I thought today was about building emails with JSX. That was going to be -- and Andrew had something come up last minute. Jack --

JACK: Got some croissants, came in.

JASON: You were ready to go on 10 hours notice? What a champion.

JACK: So, you know -- does this other bring croissants? No. I'm here. First in studio guest.

JASON: But Andrew will be on the show. That will be a few -- honestly like we're booked out a couple months. It will probably be around February, I'm sorry.

JACK: And croissants are required.

JASON: Yes, the bar has been raised.

JACK: Interesting.

JASON: So, we have -- we have set up a page.

JACK: Yes.

JASON: I'm actually gonna -- let's side-by-side these. This is so simple. You can side-by-side it.

JACK: That's so simple --

JASON: This is the one I was trying to pull down. Look at this.

JACK: How easy is that?

JASON: This is it. That's all of the code.

JACK: And actually, you could really extract most of that out in the layout.

JASON: Yeah, this is the relevant part.

JACK: Yeah.

JASON: So, okay. So, this is sort of I would guess the Hello World of HTMX here.

JACK: Yeah, definitely. But this actually doesn't get a whole lot more beyond that. Most of what HTMX is gonna do is around, you know, the stuff that doesn't come out of the box with HTML -- okay. Because we're gonna start getting the Hyperscript here, I guess. See how far we go with it. But, you know, it's mostly around REST requests. So, automating posts, gets, doing things like intervals, doing stuff like -- so, if you want to do a polling thing. That makes it -- it's super-easy to do that.

JASON: Okay.

JACK: If you want to do a search field, it does the de-bouncing and stuff. Do that. So, there's a lot of that. And then there's some stuff on validation, which is really nice. But the whole idea is to kind of lean as heavily as you can on the web mat form.

JASON: Got it. Okay.

JACK: Really lean hard into it. A combination of Vue transitions, something Astro really likes which is part of the platform but has nice handy helper functions. Really couples nicely with this. So, yeah, you're leaning hard on that platform. Yeah, getting back to it. This request stuff is actually a lot of what HTMX is gonna do for you.

JASON: Let's dive into that.

JACK: Okay.

JASON: You had an idea which I thought was good.

JACK: Yes.

JASON: Where we can take the Spotify API and do a search interface.

JACK: Yes, let's do it. Let's do that.

JASON: All right. Let me pull these back up to the same window.

JACK: We have some code. I actually did some prep work last night. I take this seriously.

JASON: Look at this.

JACK: Hey, man, let's go do a thing. We have some code. You can pull out the Spotify from the library, that TS file.

JASON: Okay, yes. Let me actually show -- here is the code.

JACK: Yeah, right.

JASON: This is the library that Jack built to kind of get us prep for today.

JACK: Full app. Within that, under like source and then --

JASON: You had like a lib --

JACK: Yeah, lib Spotify.

JASON: Okay. And this is a bunch of TypeScript stuff. So, we'll kind of collapse that down.

JACK: Yeah.

JASON: We're getting a token so I have to grab these. Then we send off a call.

JACK: Yeah, we want to get back a token. And it's server to server. It's a couple of ways you could auth. From a server to another server. You can encode in 64 the keys that you get back. And get back a token.

JASON: Okay.

JACK: And you need a toke ton make the subsequent requests. In this case, it's get albums. And get the query. And if just basically gives back --

JASON: We grab our token. We make a search for any type of album up to 20 of them. Send off that bear token we got. Okay. Great.

JACK: And then a thing for --

JASON: Oh, and you're caching, nice.

JACK: Yeah, yeah. You know. Don't to want hit it too much.

JASON: Very responsible.

JACK: Thank you.

JASON: And then it looks like we've got one to get a single album.

JACK: We have to get detailed info. The tracks and all the other stuff. It's amazing, actually. The Spotify API --

JASON: It does a lot. Create the new file. Call this lib, Spotify.ts. Drop everything in here. And then I'm gonna make one quick change because by default, they do the import dot -- oops. If I can import.meta. Okay.

JACK: you're trying to sell me on this keyboard.

JASON: Jack is watching me struggle to type all day. I understand the hesitance. Let me get a dot env in here.

JACK: Than my one, I don't understand.

JASON: And then move this off screen for just a quick second. I need you.

JACK: Make sure you guys don't get all the environment variables.

JASON: As much as the chat would love to have me leak yet another set of environment variables.

JACK: In video, I've stopped covering them up. Because they're already dead by the time the video goes. And I was getting more feedback of hey, you didn't cover it up well enough, you know?

JASON: Oh, yeah.

JACK: There was this one frame where I could see your stuff. Yeah, they were dead anyway. Why even bother. Just say in the video, they're dead. And make sure they're dead, obviously. To anybody doing YouTube videos, kill those keys before the video goes live.

JASON: You're so responsible. I never do that.

JACK: What? Okay.

JASON: Like, well, I mean, okay. So, we've got this here. These are set. We should be good to go here.

JACK: Yeah. We go back to songs, right? Import like get song, get albums, yeah, get albums from --

JASON: Get albums...

JACK: Why is that hinting?

JASON: Who knows. From lib, Spotify.

JACK: Yeah. Cool. And then we want to do -- oh. Well, so, we need to go in -- so, right now you need to go get the -- well, we need to make a search box.

JASON: Okay.

JACK: And we need to post form data to it. So, let's go back over to our page. Well, that's -- okay. Perfect. Okay. So, we want to make a form here and make that an input. Or make an input.

JASON: Okay. I'm gonna go simple. We'll go input. We'll do a search input. Does it need any of the like name stuff?

JACK: I don't know, use a query.

JASON: Okay.

JACK: Placeholder if you want it. And then you need a submit button. Take that -- well, you could just --

JASON: Just use this one?

JACK: Yeah, perfect.

JASON: Okay. Move this one up, delete this one.

JACK: Okay. Type is submit.

JASON: Type is submit.

JACK: All right. And I think you want to do hx-post to songs. Yeah. Perfect.

JASON: Okay.

JACK: That should be good.

JASON: And then content here, this is gonna be the output.

JACK: Yeah, a that's where it's gonna change --

JASON: I'm gonna change this --

JACK: Well, fall back. You could do fall backs I guess with this if you didn't want to support non-JS.

JASON: Right. So, we'll just make this -- we'll do search --

JACK: I always get that one wrong. Sriracha.

JASON: Okay. So, we got this. Label it. And then I'm gonna give in one an ID so that it can find it. Search input. Okay. So, that should give us --

JACK: If you have it inside the label, I don't think you need it.

JASON: I don't think you do. I think you are correct.

JACK: Okay. So, let's hit some sort of search, then. That's nice. Look at you.

JASON: Okay.

JACK: So nice.

JASON: Hit some kind of search.

JACK: Okay. Go. Do something.

JASON: So, we can search -- there we go.

JACK: Make sure this works at least.

JASON: Right? That does what we want. This isn't gonna do anything.

JACK: Yeah, it's not gonna do anything. Now we need to get Q from the form.

JASON: Okay.

JACK: I think in had Astro world...

JASON: We can do...

JACK: We can do... oops... it's -- oh, okay. If Astro request method is post, you can await Astro request form data.

JASON: Then -- okay. So, I'll get data is await, Astro --

JACK: It's high level -- top-level await there.

JASON: Form data.

JACK: That's it. And then inside of that, data.get queue.

JASON: So, we need a way to get the albums --

JACK: Do one.

JASON: Just do one piece at a time?

JACK: Set Q to --

JASON: Data. Q -- do we have to string it?

JACK: It could be a file.

JASON: That's true.

JACK: Why don't we console that out?

JASON: Why don't we just log this?

JACK: You searched for -- Q, but make it a let above the post and then set that. Perfect. Perfect.

JASON: Okay. So, now --

JACK: Now try, it's not gonna work.

JASON: It's not gonna work?

JACK: It's not gonna work.

JASON: How dare you? Why won't it work? Could not parse as form data. How dare you?

JACK: Okay. I'm not sure why we got that. But what's really happening, it's in static mode. It's not running as a server.

JASON: Oh, of course. Because we never told it to be able to accept --

JACK: Right. Astro note integration.

JASON: Okay. We're gonna do a note integration. Stop this, do NPX Astro add node.

JACK: Oh, look at you.

JASON: Yes, I do want to install -- I spent a lot of time in Astro these days.

JACK: You do.

JASON: And honestly the reason I remember this, this is so damn easy that I will never not use it.

JACK: Okay. Hit up Dev and see what we -- get into the right -- what am I doing?

JASON: N PM rev and then go back.

JACK: What? This is too easy.

JASON: It works. it's incredible. I love if you use the search input, you get nice, clear things built in.

JACK: That's cool.

JASON: Use the platform everybody.

JACK: Use the platform. Now back to songs. Take that Q and feed it into our albums thing -- get albums thing.

JASON: Q -- why is it so messy? It's because I'm not using this simplified -- look how much cleaner that is. Everything just -- ah. Did you not see that? So much visual noise just disappeared around my whole VSCode thing. Sometimes you feel like you're just getting crowded in.

JACK: With the font size that big, it happens quick. On a screen that small.

JASON: You're not wrong.

JACK: I do let albums.

JASON: That's true, that's true.

JACK: We're gonna get the list of album --

JASON: And then that's gonna be an array

JACK: Right.

JASON: So, then down here, we don't really need that to be --

JACK: Albums equal, okay. Perfect.

JASON: Albums equal get albums.

JACK: Await get albums.

JASON: Await get albums.

JACK: And change the upper one to lower case, please. Because I'm having VB shellshock. And then I would just do like JSON stringify, albums.

JASON: Yeah, let's do that.

JACK: Look at you with the pre. I'm not that good. I just do...

JASON: Albums.

JACK: Whoa. Oh. Look -- wow! You're really going for it.

JASON: Because then it just gives you --

JACK: No, it's really nicely formatted. Yeah.

JASON: So, we can get actual -- can I spell "Beetles?" And then we search.

JACK: Wowzers.

JASON: That's a lot of data. But check it out. We have got actual artist data here. And if we scroll down, images, yeah, it's where it's available. The countries that you can listen to this song in.

JACK: Oh, JM -- Jamaica. You can listen to it in Jamaica, awesome. [Uncontrollable giggles]

JASON: Apologies to all of the Jamaicans in the chat.

JACK: I love Jamaica. But let's do this.

JASON: Name, release --

JACK: Externals, Spotify, you can literally make that an anchor tag and into Spotify and play the song. You have all kinds of great stuff.

JASON: Inside here we have the -- let's see, the artists. We have got the artists themselves. We have a link to the artist profile. We have got the album details in the album name as well as the album link, and then we have album art.

JACK: Thankfully, the zeroth one seems to be the biggest one. Use that. We don't want to use the little coupon-size thing in the bottom.

JASON: That means that down here --

JACK: Regular old has been.

JASON: Regular old map it is.

JACK: Wouldn't it be great if we had some styling library at our fingertips to use something like Flexbox so easily. You're --

JASON: You're gonna make me use Tailwind.

JACK: Hit one if you want to use Tailwind. A Theo thing, or a prime thing. One, right there.

JASON: All right, all right, fine. Deb, you only get one vote.

JACK: No, that's actually -- yeah. Look at this. Look at this. Look at this!

JASON: We got a couple votes against.

JACK: I'm here for you guys.

JASON: That's all right. We're gonna entertain Joe Herrington today. We have Tailwind. You have to teach me two things. I've never used Tailwind.

JACK: Really?

JASON: I love CSS. I love it so much.

JACK: Here we go. Make a Flexbox. Nothing, space, flex wrap, you want it to wrap, right? That's probably it.

JASON: Okay.

JACK: That's gonna be our container. And then we're gonna go through our albums. And thankfully this is all typed so let's put another div in there.

JASON: Okay. So, we're gonna do a div. And I --

JACK: Sure.

JASON: At some point I developed a diversion to the direct return. It confuses me.

JACK: Do name first?

JASON: Let's do the name. What would that be? That would be H2 probably? So, like album.name -- why am I not getting any types? What's happening?

JACK: I don't know.

JASON: We didn't type these up here, do we need to?

JACK: Oh, okay. Yeah, we could do that. Whatever. It's fine.

JASON: I mean, whatever. We're okay. We can do this. So, we've got --

JACK: Just try that. It saves us -- let's go!

JASON: Okay. So, see and Tailwind added a bunch of default shit. Okay.

JACK: We can curse on this show?

JASON: Do whatever you want Jack.

JACK: Okay. Great. I don't know.

JASON: All right. So, this is fine. We're in here, we got these. So, let's get album art which I think I'm gonna need a little more --

JACK: Right. Okay. What do you want? Do you want to be big?

JASON: Yeah, let's do the big art.

JACK: Big art. Okay. Image.

JASON: So, we'll do an image tag. That's gonna be the album dot --

JACK: Okay. This is where it actually matters. I have it over here.

JASON: It's in here too, right?

JACK: Yes, it is.

JASON: Album item.

JACK: You need to see the type of get album is returning. Go down a little bit. And it's gonna be --

JASON: Get album... it should be returning a promise of an album. Why the hell aren't you?

JACK: The initial let album is NE. Over in your code over in songs.

JASON: Fine.

JACK: Yeah, so, viewport that type, album.

JASON: Got it.

JACK: And set your albums array to be a type of an array of that.

JASON: Type album is going to be -- no, that's not how this works.

JACK: Yeah, that's the one. Okay.

JASON: Okay. So, now I get --

JACK: Now you should be able to get hinting.

JASON: Don't need that.

JACK: Album dot -- and get --

JASON: Okay.

JACK: Images zero.

JASON: Images at zero. I love that. Do you use that one?

JACK: Not really.

JASON: Okay. And because this helps with layout, we can do the same thing.

JACK: Sure. Yes.

JASON: But do the width.

JACK: Sure.

JASON: And the height.

JACK: Yeah. And...

JASON: Whoops! And then for an alt, we'll do the -- the album name again.

JACK: Yeah, album name. Cool. Image. And then let's put in a class there and do W fold -- W-fold.

JASON: Okay.

JACK: This is gonna be big. but whatever.

JASON: We'll end up making these smaller.

JACK: Yeah. Actually in mobile it looks good.

JASON: Yeah, it looks good in mobile.

JACK: Let's do width 1 over 3. Oh, no, sorry, in the -- oh, right. That's the whole card. Good for you. W-1/3.

JASON: One, three?

JACK: One, three, yeah, a third. Yeah. It will look better if it's bigger. But okay. Fine, fine. Okay.

JASON: So, you know what we need, though? We need like a gap one.

JACK: Sure, I could do that.

JASON: I wish I could get that --

JACK: Take the gap out.

JASON: No gap.

JACK: No gap. Mind the gap. One over the three, and after that space, P-2. Perfect. Do a little bit of panning. Yeah. Nice. Aw, nice.

JASON: Okay. All right.

JACK: There it is. It's beautiful! Look at that. Holey moley.

JASON: We're done. We can go even further. We can link to the external links. We can go album.external URLs.spotify.

JACK: Target, blank, I would do that.

JASON: Target blank. Okay.

JACK: I think you -- oh, you're just around the image.

JASON: Right. And then we would do it again around the --

JACK: Okay, do we want to look at the page on this. Where we get the detail?

JASON: Yeah, I didn't think about that. Why don't we just do that?

JACK: Look at the image and go to Spotify. Try one more time and see if that works. I'm a big do, test, do, test, do, test kind of guy. Perfect. That works.

JASON: There it is.

JACK: It's Arc or whatever.

JASON: Perfect.

JACK: Love it, love it. look at us. It's amazing.

JASON: This did exactly what we were hoping for.

JACK: And how much JavaScript have we written -- the server. But imagine if you were -- kind of wrap this all back into HTMX for a second. If you were doing this in Go or Rust or PHP, you're primarily writing all the actual logic and everything over many PHP land.

JASON: Right.

JACK: You're not doing -- oh, actually, you know what? Let's do the thing where it goes as you type. Right? So --

JASON: Yeah, type ed would be great.

JACK: Show off a little bit more of the -- of the coolness.

JASON: Okay. And folks have a like save the Q. We can do that with the albums, right? Where we'll be able to when you click through, we're going to the sub-page and we can set that up. And if we want to, we could theoretically make the servers saveable as well.

JACK: HTML has that as well and it's interesting.

JASON: Cool, cool.

JACK: All right. Let's go to our input again.

JASON: Here I am.

JACK: Cool. And yeah, you want to set up a trigger on that. Hold on. Yeah, yeah, yeah. Hx-trigger. And looking for key-up.

JASON: Key-up. As I'm typing, whenever I put in a key, we're gonna search.

JACK: Changed. And then we're gonna say, well, how much delay do you want? Base delay is I don't know, 500 milliseconds.

JASON: Do I type delay?

JACK: Base delay and a time, 500 milliseconds. MS.

JASON: Oh, put the MS. Got it.

JACK: And then search.

JASON: Like that?

JACK: And that's actually gonna trigger the search.

JASON: Okay. So, what is the search? Like what is search? Or is it search results?

JACK: We'll take it -- let's get it working and then take it out and see if it actually makes a difference.

JASON: Okay.

JACK: Let's also take the hx-post and hx-target and move those into the input.

JASON: Hx-post and hx-target.

JACK: And put those into the input. Good to go. Give it a try.

JASON: Okay. Let's try it. So, we're gonna go with Beatles --

JACK: That works. And see what happens in the search. I was kind of going by the literal like docs, you know? Let's try it again. Jay Z, baby!

JASON: Can I save this?

JACK: All right.

JASON: So, Beatles -- I'm not sure -- maybe that search was a named thing or a targeting across kind of thing?

JACK: I feel so bad for your transcription person. We are talking over each over all the time.

JASON: Amanda, you're a champion.

JACK: Yeah, you are. [I know...]

JASON: So, the other thing, I just copied this back over so that if we do search, it doesn't like submit the form, right?

JACK: Okay.

JASON: Right. Because what I was thinking, was if I do it like this, and then I submit the form, if I take this out... I'm pretty sure like let me double check here. I think what will happen is it will load here, but then it submits the form, right?

JACK: You can set the time out to like 3 seconds to you get enough time to actually try upon the delay up there.

JASON: No, I'm saying --

JACK: Oh, I'm sorry.

JASON: Yeah, let me show you what happened. So, when I saved this, if I go Beatles, it searches.

JACK: Got it. Yeah.

JASON: But then if I hit load, it actually submits the form.

JACK: Oh, that's not right.

JASON: If we put the HTMX back on, then if I go back to my -- all right. So, then we can reload here.

JACK: Yeah, little gotchas.

JASON: And then it loads. But then if I click, it doesn't submit anymore, it just loads.

JACK: Winning.

JASON: HTMX doing the thing. And the other thing that's nice is it's like this is intuitive enough that I understand anything that I put this on. It's gonna do the thing.

JACK: Yeah.

JASON: Right? That's nice. Okay.

JACK: Yeah.

JASON: Okay. Could probably get rid of the button all together. I feel a little weird not having a submit button.

JACK: Yeah.

JASON: It feels like there should be one even if you're not technically using it.

JACK: I don't think we're going for like right, we're going for experimentation.

JASON: And that's true.

JACK: We're just playing around.

JASON: We could make a mess for sure.

JACK: It's cool. Come on, right?

JASON: This is really cool.

JACK: You can kind of see what Joel was all excited about.

JASON: Joel?

JACK: Hooks.

JASON: I didn't know Joel liked this, I thought he liked the laser eyes.

JACK: Maybe he likes the memes.

JASON: The horse mask like me --

JACK: He's a code junky like me. He likes odd things.

JASON: So, shoutout to Joel Hooks for anybody who has no idea what we're talking about right now. Nope, different -- that's sorry -- JK. What am I doing? This is Joel Hooks.

JACK: You might know him from Egghead as well as other courses.

JASON: Yes, absolutely. You have some coming up, don't you?

JACK: I do, Pro Next.js.dev. Sign up today.

JASON: What is it?

JACK: Yeah.

JASON: Look at those beautiful illustrators.

JACK: It's got a full-on state manager tutorial for free if you sign up. For Next.js.

JASON: Look at that.

JACK: Learning how to do Redux or Rushden -- I got my German -- correct -- that's not BS, you get that for free for signing up today. But back to HTMX.

JASON: Back to HTMX . I don't actually know what to do next.

JACK: You want to go over the detail page?

JASON: Let's do it. I want to -- we need to create --

JACK: Over in songs.

JASON: We can do it in songs?

JACK: We're gonna create the link in songs and pin put on the 404 --

JASON: Let's swap this out to be an actual link. And this is gonna be -- I guess we need this.

JACK: And it's gonna be, I don't know. /albums and then ID. It's gonna be garbage IDs. Yeah.

JASON: ID, okay.

JACK: And away we go. All right.

JASON: And then let me copy this over. I'm gonna take the blank off.

JACK: Yeah.

JASON: Okay. Let's take this. And also gonna link the whole album name.

JACK: Whole schlemiel-schlimazel.

JASON: What?

JACK: It's a reference from Laverne and Shirley. Remember that? We're gonna do it? Okay.

JASON: I apologize, I apologize. I don't know that one.

JACK: Laverne and Shirley? From Happy Days.

JASON: I apologize, Jack, but this pre-dates me.

JACK: Oh, wow. Ouch. Okay.

JASON: It is so rare that I'm -- that I'm younger than a reference. Like this is actually kind of delightful for me. You're making me feel young again.

JACK: I could sing the whole song, actually. Okay. Let's go and implement on albums.

JASON: Okay. So, what this just did is we went to slash albums, this is the ID of that album. If I go back, I get another one.

JACK: Stupid easy.

JASON: There's another one. Cool.

JACK: Love it, love it, love it.

JASON: That means I know how to do the Astro part of this. Albums --

JACK: You know the trick, nice, yeah, yeah, yeah.

JASON: Call it ID.

JACK: And put the slashes in there and it auto-creates the directories. Oh, yeah.

JASON: Okay. Okay. So, this then I don't --

JACK: You know a Matthew McConaughey reference, though, right?

JASON: All right, all right, all right.

JACK: Okay. Thank you, jeez.

JASON: So, let's set this up now -- set it up to be just album.

JACK: Yeah, sure.

JASON: And does that automatically work? It does.

JACK: You need to get the param -- Astro.params whatever you use.

JASON: Yeah, Astro const ID equals Astro.params. And then we need to --

JACK: Yeah.

JASON: Album. Will be await.getAlbum.

JACK: Which you have to import.

JASON: Is it by ID?

JACK: Look at that. Like a thing.

JASON: It's like we planned this.

JACK: Like, yeah like I actually did work last night. I was watching -- what was it we were watching? Oh, a British show on time travel.

JASON: Dr. Who?

JACK: Yeah, we watched the new Dr. Who. But no, this is one on -- I think, I don't know. It's a time machine thing. I can't remember the name. It's good, though.

JASON: What if I just say that has to be -- I'm just gonna say that has to be set.

JACK: Yeah, yeah.

JASON: Because lead me along, TypeScript. That's how I feel.

JACK: Yeah.

JASON: Calm down!

JACK: Yeah, calm down. Album -- album.name in the album. Like h2 there.

JASON: I was definitely not listening to what you just said, I'm so sorry.

JACK: Okay. In the h2, replace the text of album with album.name.

JASON: Right. I'm with you.

JACK: Got it, okay.

JASON: We should get, also, the type album.

JACK: I don't think they need to. It's automatically there.

JASON: I don't?

JACK: You're fine, you're good. It was because you had a conditional before. We started out with --

JASON: Okay. Here it is, it's back, it's back.

JACK: It's good, it's good. We're not doing nice stuff, checking for 404s and things like that. But it's fine. Oh, remastered, look at that. Okay.

JASON: Okay. That worked.

JACK: Like with Beatles, you get unbelievable numbers of stuff.

JASON: , so then we'll have --

JACK: Yeah. Source.

JASON: The source is gonna be album --

JACK: Put it back the same as it was.

JASON: Copy and paste. Seems like a better idea.

JACK: Sloth, it's a thing.

JASON: Just grab this one.

JACK: Whoa. Did it work?

JASON: It did. It doesn't like it because -- don't with grumpy at me. Object is possibly undefined. How about you leave me alone?

JACK: Are you sure it's not on a different key? Oh, no.

JASON: Which one do you think is possibly undefined?

JACK: I think it's album info -- okay. Album.images, should be fine. Yeah. What's your problem? What's your problem?

JASON: Oh, it thinks the... it thinks images might not have -- like I guess there's a chance that --

JACK: Okay.

JASON: But I believe --

JACK: Weirdly, you went for relaxed and I went for relaxed. It's more relaxed for me. It could be the app.

JASON: Definitely could be. You're in those brackets.

JACK: I just used the brackets. Oh, and look -- it worked!

JASON: It works.

JACK: And the tracks, that's what I did. I just went through --

JASON: That's a good idea.

JACK: You want some info. Yeah, like a you -- unordered list.

JASON: Album, tracks --

JACK: Tracks. And amazingly, because you can imagine a compilation album, each track has its own artist. And so much -- but you can just do name.

JASON: LI, don't have to key it because we're relaxed. That's lovely. Did I do this wrong?

JACK: No, I think you're good. I think you're fine. I don't know. What's going?

JASON: Oh, I need items.

JACK: Oh, right. Because that make sense. Why -- okay.

JASON: Ta-da!

JACK: Ta-da!

JASON: Beauty.

JACK: You can get the external Spotify URL if you want to put on there.

JASON: Yeah, why don't we -- we'll do that. Do an A, href, album.external_URLs.spotify. And then we're gonna say, listen on Spotify.

JACK: Or you can go to the name of the songs.

JASON: Probably shouldn't hit any of that because we're going to get the takedowns.

JACK: But if you're doing this at home, you're playing the home became.

JASON: Click through, it doesn't play, but here we are on the --

JACK: Right.

JASON: It's doing the thing. We could do more of those.

JACK: Every track. All kinds of stuff.

JASON: But then as we go through, like we're gonna hilt -- let's hit Jay Z, right?

JACK: Nice.

JASON: Hit one of these, we go there. It's great, man. This is wonderful.

JACK: Yeah, I wonder what the history thing is? You want to like learn -- like we can go over to like Astro HTMX docs page and see what the history thing is about. Because the guy asked can you do the Q in the -- can you persist the query string in the -- so, go to docs -- in the history? And I think you can. So, let's go down to history. Yeah, there you go. Perfect. Yeah. Is that it? Really? Are you kidding me right now?

JASON: But that will only push... this part.

JACK: Well, let's try. I don't know. Give it a go.

JASON: All right. Let's do it. So, we're gonna -- we're gonna go back to --

JACK: But we don't auto-prefill the Q. So, we would see the link change, at least.

JASON: We'll see the link change to /songs. So, I check -- was it push? Hx...

JACK: History or something, right? That was kind of weird.

JASON: Wait. I lost it. Here it is. Push-url --

JACK: Push-URL equals true. You got it.

JASON: Now back out how are and search Beatles.

JACK: And the URL

JASON: And it goes to songs. What we need to figure out is how to put the query string in here.

JACK: Well, okay. But all right -- maybe that -- thank that's -- I'm trying to think about all the things that I want to know about HTMX in the time remaining.

JASON: Right.

JACK: And we have --

JASON: Because we do have like 25 minutes.

JACK: Okay. Cool. That's good. Because there's a couple things. There's also this hx-boost thing that you should know about. Go over to HTML, again the stuff, and pretty much add on hx-boost to the body. Oh, you don't have a layout. Whatever. That's fine.

JASON: Like here?

JACK: Yeah, equals true. And what this is gonna do is --

JASON: Break everything.

JACK: That's because you're on /songs. As it changes out the contents, it's actually gonna do -- oh, wait, no, no, sorry. As you transition from page-to-page, it's gonna look at the -- at the DOM and try and do a smooth transition from -- it's actually gonna pre-load the new HTML and then try and do a nice DOM diff for you as you go from page-to-page. If you have a persistent header in NAV.

JASON: Oh, like it won't try to reload --

JACK: Yeah.

JASON: Got it.

JACK: You won't get as much page flicker. Trying to do spa-style stuff.

JASON: That's cool.

JACK: Which competes a little bit with what I call Vue transitions if you were going to use those in the Astro world. It's there if you don't want to use --

JASON: It's tradeoffs. Whatever is better suited to your needs. For a lot of folks, Vue transitions is one of those things, it makes sense, but thoughtfully designed. Blowing away the header and footer does not need to be thoughtfully designed. Just do it.

JACK: As you're -- I think it's doing this. And I don't know for sure. But as you're changing out like songs. Like your query, right? When it's bringing in a new content for that div, it's actually doing a diff between those. Like it's actually trying to make sure that it's only updating where it needs to. When you think about why did we get into React, right? One of the reasons was we want to keep the flicker down by doing intelligent DOM updates. This actually does that, right? behind the scenes for you. Outputting it and trying to do the HTML and look for the div.

JASON: Look for more --

JACK: This is neat. Pearl Jam. What did you search for?

JASON: Lightning. I thought there would be a lot of albums with lightning in it. As we continue to search, something like cars.

JACK: Yeah, right.

JASON: Cars comes up, right?

JACK: Right. Not quite the best --

**JASON:**S and pretty impressive from the --

JACK: I didn't see a lot of the --

JASON: From the Spotify side. Because it looks like it's also doing fuzzy search for us.

JACK: Oh yeah.

JASON: Which is great. Now, the other thing I'm interested in, actually is --

JACK: You can get hard core with the search, you can say artist, colon, and really drill down ton.

JASON: And we could do some fun stuff. We don't need to get into it today, it's an Astro focus, output, view transitions, and as we search, this one moves back and forth. As this one, if you click on it, it would transition to full screen. There's some really nice stuff that would work in here.

JACK: Yes, that's really nice. Because of that view transition stuff that you're getting again for free from Astro. The other thing that we should talk a little bit about on the HTMX side -- so, let's go back to the HTMX docs -- is Hyperscript. I wouldn't --

JASON: HTMX --

JACK: And not talked about Hyperscript.

JASON: Docs and... Hyperscript.

JACK: I don't know if it's gonna show.

JASON: What just happened?

JACK: Well, you know, they got a really lame search on this, by the way. Just --

JASON: Hyperscript.

JACK: Yeah, that's the one you're looking for. Okay. So, as I said, they're not gonna do the stuff like hiding and showing elements and things like that. There's nothing for that like off the shelf. What you can do is you can use either JavaScript -- like they're doing there, I believe -- let's see. Nope. Okay. So, scroll up a little bit. A little more. There you go. Right. Okay.

JASON: Like this on?

JACK: Yeah.

JASON: You can throw some straight --

JACK: You can throw arbitrary JS in there. If you have an element want to show like a hamburger element.

JASON: Right.

JACK: In this case, you could do a document, display none, get ID. Or you can use this Hyperscript stuff. And this is like the other half of the book. This -- of this big book -- is Hyperscript. And Hyperscript is I guess an easy -- simplified language that you can use to do things like set -- you know, say hide this or show that or do transitions things like that.

JASON: And the idea --

JACK: This is where it kind of loses me, actually. Because I'm not a big fan of Hyperscript or Apple script or --

JASON: Is Hyperscript new? Or is this?

JACK: No. It's actually from back in my day. Back in Laverne and Shirley days.

JASON: The new measure of time. Back in the Laverne and Shirley days.

JACK: Back in the before days in historic times. Yeah, before the web there was a actually this program called Hypercard. The concept is you would have a stack of cards. Think like a classic for this would be a recipes sort of thing. And in order to navigate around, there was some nice helper things like this button goes to that card. But you could also script it. And the scripting language was called Hyperscript and it was a -- everything was very humane-sounding.

JASON: Like natural language.

JACK: Tell this card to show itself sort of thing.

JASON: Show yourself!

JACK: And as a C++ programmer back in that day, no, man, I'm not having that. That's terrible. I was never a big fan back then. And now this guy decided he wants it back again.

JASON: Did you ever work --

JACK: It's on 24K, you got to bring it in.

JASON: Right. Did you ever work with Cucumber and Gherkin?

JACK: Yes.

JASON: That was like a plain language testing library.

JACK: Right.

JASON: I struggled so hard with it. It never made sense to my brain.

JACK: I had to be the guy that was like, I would write the little verbs or whatever to make it actually work.

JASON: Right.

JACK: And so, I don't know, shuffle or whatever it was. And I didn't define that. And then I would do all the real work and then, yeah. Right, yeah.

JASON: Yeah. It was one of the -- like, I think -- I love the idea of just explain to the computer what you want it to do. I feel like the instances where humans have attempted to write a programming language that feels like talking to a computer aren't -- in my experience -- have not quite hit the mark.

JACK: Yeah.

JASON: I know --

JACK: Is this where we see AI going?

JASON: That seems to be --

JACK: AI.

JASON: Is seems to be what everybody is pushing toward with ChatGPT, tell it you need a component that does XYZ.

JACK: But it's the last thing I want for tests. If it's non-deterministic, add this to the cart and do the checkout. That's the prompt. If it were to do it different ways. Nope, nope. Never again. Never, never, never.

JASON: It does feel like maybe the brass ring for this is figuring out a way to get the AI inputs with deterministic outputs.

JACK: Totally.

JASON: This is so far out of my field of expertise, I have no idea how it would work. But there's so much to be excited about in that space. It doesn't quite do what I want it to do yet. And with that little aside, why don't we get back --

JACK: Yeah, are there questions we can answer?

JASON: Does anybody have questions about HTMX while we're there? Let's see --

JACK: Somebody asking what no-BS means?

JASON: Joking --

JACK: I have been asked that.

JASON: Demetrius wants BS.

JACK: When I did my no-BS TypeScript series, a bunch of folks didn't get that reference.

JASON: It's tough.

JACK: It's a national norm.

JASON: I used to make a lot of jokes and people with English as a second language, I don't understand your jokes. Probably makes it less fun to do this.

JACK: EC, ALS, BLS -- I don't know what that is.

JASON: Don't know. Did you want to try to write any Hyperscript in our remaining 10, 15 minutes here?

JACK: We could. I don't know how to integrate this into the example. Maybe show songs? Let's do that. We'll make a show songs tag. And Hyperscript.org and bring in the library. Literally bring it in as a script tag. No kidding.

JASON: Okay.

JACK: And go over to the songs page. Because we don't have a shared layout. Drop that. Sure. That works. Oh, wait, this is -- this is not -- we want to go into the detail one, sorry. If we're gonna hide and show.

JASON: Oh, right.

JACK: We want it here, right.

JASON: Okay.

JACK: Okay, cool. I guess we want to put an ID on that ul so we can toggle it.

JASON: ID is tracklist.

JACK: That we go. Have a button for --

JASON: Okay. Button, show tracklist.

JACK: Perfect. And it's gonna be hx-on, I want to say? And then clicked, colon -- hold on. This is where I -- because it's not JavaScript. Like, okay.

JASON: Right, right.

JACK: If this was JavaScript, I would know, like right off the bat. Yeah. Oh.

JASON: Oh, here we go. OnClick send -- wait, can I just do --

JACK: Not hx-on, sorry. It's underscore.

JASON: What?

JACK: Yeah, the name of the attribute is underscore equals --

JASON: What?

JACK: Yeah, I know. And on click show menu -- or tracklist. Go. It's already shown. You need a button hide it. All right? Because it's already --

JASON: Okay. Okay. Okay. We're just -- you know what? We're just gonna do this.

JACK: Okay.

JASON: It's on click hide tracklist --

JACK: We're just kids.

JASON: Hide tracklist.

JACK: Perfect.

JASON: Go back here out to our demo site. Search for --

JACK: Jay Z.

JASON: Yeah, Jay Z.

JACK: It worked.

JASON: It's Tailwind hiding it, it's a mess, isn't it?

JACK: It's a mess.

JASON: Okay. We hide tracklist.

JACK: Show tracklist.

JASON: I'm not gonna lie. I don't hate it.

JACK: You don't hate it?

JASON: But I don't love it.

JACK: Okay.

JASON: This feels like a big pile of magic just showed up.

JACK: Oh, my god, 24K of magic just showed up on the page to make that happen. But I will say, I think it was somebody who posted an example of some Hyperscript where it would have been more difficult to have done it in JavaScript.

JASON: Okay.

JACK: It was this weird parallel perhaps thing. Like, oh, that actually works pretty well.

JASON: Like I think and this is sort of what I've noticed is we probably aren't using it for the purpose that it's like optimal for. Like I imagine there's some sweet spot of Hyperscript where it's like, this is where it shows its power.

JACK: This is the bomb.

JASON: And we're not doing that. We're doing about the simplest thing we can do, basically the Hello World of the scripting language. So, you know, like I'm reserving judgment on it.

JACK: Okay.

JASON: My initial instinct. But also, I'm the sort of person who fears change.

JACK: I guess my thing was I don't see the need to put another language on the browser. But... you're not really -- I mean, it's -- what -- ah... I don't know.

JASON: And I'm with you there.

JACK: Are they gonna hire for folks who are gonna do Hyperscript? Really?

JASON: I do think -- competition is good, and having something other than JavaScript in the browser is exciting. Because it applies pressure to both sides --

JACK: Yes, yes, yes, yes.

JASON: However, do I have faith that anything is going to get the adoption and stability of JavaScript?

JACK: No.

JASON: Significantly less confident in that.

JACK: The HTMX meme guy, right? Love his game and all that. But the whole thing is he's very clear, if you want a job, learn React.

JASON: I've seen that.

JACK: He says it actually a fair amount. And that's fair. Right? It is.

JASON: So, yeah, you know this is cool and stuff. But I think it exists as much to apply pressure to what you were saying. Hey, you don't necessarily need to do the big JSON clientside render mega-bundle blah, blah, blah, blah thing. You can -- if you're smart and safe on your servers go and do HTML, have it all render from the server and it's really easy. It's really easy.

JASON: So, I'm gonna -- I'm gonna drop another link to HTMX here. Maybe. Oh, docs. There we go. So, let's go HTMX home page.

JACK: Yep. Good for you.

JASON: Go check it out. This is fun. I do -- I tend -- I think I agree with the HTMX account -- I don't know his name.

JACK: I don't know his name either.

JASON: If you want a job, learn React. I think this falls squarely into what I would say is the play side of the web. Where it is super-fun to learn about this stuff, to understand how it works. To think about different ways we could solve the same problems. In terms of like practicality and like should you ship this in production? I would probably push back against it personally.

JACK: Yeah.

JASON: Because it feels to me to be something that is like I love it as a learning device. I love flipping some of the preconceptions I have about --

JACK: Yeah.

JASON: -- how we render things. But also, I don't see this being something that is going to withstand all of the very fiddley requests that you get as your team grows to have marketing and product and all the other things that are there.

JACK: Yeah.

JASON: So, like love it --

JACK: Tags --

JASON: All right. Yeah. So, now we got to do a middleware piece where we have to track where people go on their journey to make heatmaps of where they're clicking on the page.

JACK: Yeah.

JASON: You're gonna have to do that in any significantly trafficked product. And we can figure that out in HTMX. But I don't know. What I would rather do, I would use something like this to challenge my assumptions about what I needed JavaScript for. Maybe I can simplify, maybe I can do this with less complexity. I love that. I think it's cool to see people thinking about this differently.

JACK: Because you know the every-expanding frameworks of doom will keep getting better and better and better.

JASON: Yeah.

JACK: And maybe hear the words, JS fatigue. Folks joking about the fact that they're taking they have PN Gs in their bundles, yeah.

JASON: Agreed. What I find most exciting about stuff like this is that it's showing that there's still a place for imagination in web Dev.

JACK: Yeah!

JASON: And I love the creativity that's being applied here to take like -- this isn't PHP re-imagined. This isn't another JavaScript framework. This is like a secret third thing. I haven't really seen this approach before. And it's cool.

JACK: Yeah.

JASON: I hope it inspires some more thinking from the big folks. Like maybe the browsers will take some ideas out of the this, the frameworks, maybe it will help us simplify the way we build in the future.

JACK: Yeah. One thing that I think is in that range as well is Hotwire.

JASON: Hotwire. That's the --

JACK: Laravel Hotwire, I think? I think Laravel is one of them, but also yeah --

JASON: That's turbo --

JACK: Hotwire for Laravel. That third one down, I think. That gets you to --

JASON: Okay.

JACK: Yeah. Maybe it's --

JASON: Turbo Laravel is --

JACK: Basically the idea is that it's server-driven interaction. Think about ASP.NET forms back in the day. Any time you click on something you literally go back to the server.

JASON: This one?

JACK: Yeah, right, yeah.

JASON: This is the one that came out of the --

JACK: The client side library and talking to the server all the time. And the server can send back, okay, show this div now. Here's replacement content for that. And you, again, it's all on the server.

JASON: Right.

JACK: And all server. And it's even more server-driven than this. This is like you've got, you know, you've added a little hx stuff to your HTML -- which by the way, actually, if you were to go and send back stuff out of /songs that had hx stuff in it, that would work too.

JASON: Got it.

JACK: You can do cool stuff.

JASON: Yeah.

JACK: Yea, the Hotwire thing is literally exclusively run off the server.

JASON: Yeah. I can see like -- this is -- this is sort of how we're growing as an industry. And it's fun to see where things are starting to grow back together. Because there was I would say a bit of an exodus away from PHP in the like mid-2000s, right?

JACK: Yeah.

JASON: Where we were seeing the absolute dominance -- the continued dominance -- of WordPress.

JACK: Yep.

JASON: And a lot of people writing PHP, that was how stuff was getting put up on the web. When it's the dominant force, a lot of people are learning and they make learners mistakes. Without a good community or teachers, there's a lot of trash in PHP.

JACK: I think PHP wasn't as good of a language as it is now. Actually, there was a great video, I don't know if you saw that one about PHP is not your father's PHP thing?

JASON: Yeah, that's kind of what I mean.

JACK: That's fantastic. We have improved a lot.

JASON: We had that exodus and what's interesting, it just left the practitioners. Suddenly you had this language, it had its big moment of popularity. It's still dominant. There was PHP everywhere, but wasn't attracting newcomers. Laravel is so good. It's not the only one. So many cool things happening in the PHP space. We kind of saw the same thing across a lot of different spaces where they dropped off the hype radar. And just improved.

JACK: Yeah.

JASON: Like they just got so much better. And what's interesting now is we're seeing -- people are talking about LiveWire from Laravel. And LiveView from Phoenix.

JACK: That's what it is. Laravel LiveWire, yes. That's the one I was playing around with. You're exactly right. That's the one. I thought it was actually really cool. Just a different model. And I like seeing that.

JASON: And what's interesting, we're starting to seat ideas, RSC, React Server Components. That's very much like a PHP-inspired thing. Write code here, we'll render it on the clientside for you. It's cool to see that these ideas are starting to merge. And, you know, I don't know. I like -- I like what HTMX is doing. I think it's gonna, you know, challenge the paradigms a little bit. Maybe we see another Cambrian explosion like we did at the PHP exodus.

JACK: And I think maybe it's pushing stuff on the React side. Or maybe this is just what they were doing naturally. Like they're -- I'm gonna do a video for Monday? I would say? Yeah. On server actions and now server actions with this -- so, Next.js, 14, all that kind of fun stuff. Can stream back components.

JASON: Like client components?

JACK: Yeah. It's bonkers.

JASON: That's cool.

JACK: It's really cool. It's only weirdly in the AI library. And it's like they brought it in through their universal AI library. But it is wicked cool. And it's the kind of thing -- it basically like you can kind of see like that HTMX thing. It's like, oh, wow, we're driving this out of the server again. But the fact that they've now -- they take that extra step to, oh, and it streams. And like, oh, you, that's actually really cool.

JASON: Yeah, a lot of interesting stuff happening in the space. I'm very excited about it. Sob we just dropped a link to Jack -- you said that video is coming out on Monday.

JACK: Yes.

JASON: Subscribe to Jack and to the Learn with Jason channel. It makes me feel good. I don't think it serves any other purpose. But I get a big smile on my face when somebody subscribes to this channel. Jack.

JACK: As do I.

JASON: Where else should people go?

JACK: Twitter, that's one. LinkedIn. I actually cross-post everything I do on Twitter and LinkedIn. Oh, wow, buy me a coffee. Do that.

JASON: You could do so many things.

JACK: Weird. I have been thinking about the whole Patreon thing and all that stuff. I don't know. But yeah. I'm also on Medium. Starting to do a lot more actually like I'll do -- I'm trying to do an article for every single video that I do.

JASON: There is -- look at --

JACK: Crazy guy on the green screen.

JASON: This is great.

JACK: Got to do that. It's YouTube.

JASON: No, this is great. This is great.

JACK: Yeah.

JASON: So, now where should people go if they want to learn more about HTMX? We've shared -- I'm gonna share this one more time.

JACK: HTMX.org for sure.

JASON: Anything else you've seen that feels like a good resource?

JACK: I don't think so, guys. Maybe that Hyperscript? If that -- if you can get into that -- I think the two work hand-in-hand. Basically I think the idea is that you get the sort of Hyperscript as a base layer, I guess? And then HTMX fits on top of that to do all of the async work. That's what I was thinking.

JASON: Got it, got it.

JACK: I don't know. We got the guy's name. Somebody put it up there. Carson Gross.

JASON: Carson Gross.

JACK: That's the -- I guess that's the HTMX guy. Well --

JASON: Sorry for --

JACK: I don't know names from anybody.

JASON: Sorry, Carson, for reducing you to a horse mask. Your memes are funny.

JACK: Strong memes. I mean, hey, if you're gonna do it, if you're gonna get out there. It's an interesting approach to so much about DevRel and trying to get your cool libraries out there. I think, you know, that's one way. For sure.

JASON: Absolutely. Yeah. I think so, here's -- let's see... this is... why did that not -- whatever. I'll figure it out later. So, this episode, like every episode, was sponsored by Netlify and Vets Who Code who made the live captioning possible. We've had Amanda with us the whole show taking down all of this nonsense --

JACK: Yeah.

JASON: Thank you, Amanda, you're a trouper.

JACK: Sorry, really.

JASON: Make sure you go over and check out the site. Because we've got so much good stuff coming up on the show. We have next week -- yes. Next week, Rizel Scarlett is coming to join. We're going to talk about distributed identity. Week after that, we've got Cassie Evans, talking about GSAP, GreenSock, that's super-money. And then Mark Techson coming on, talk about Angular. It's gonna be -- we're gonna close out the year strong. Make sure you can get the calendar wherever you want. You can join the Discord, you can get on the newsletter, you can get the calendar, you can subscribe on YouTube, you can subscribe on Twitch or on LinkedIn. Whatever you want. I want to hang out.

JACK: I enjoyed this.

JASON: This was super-fun. I appreciate you so much for coming in and hanging out studio. You even brought me a snack.

JACK: It's amazing.

JASON: Jack, thank you for spending time, any parting words before we wrap up?

JACK: No, just keep on experimenting and playing with it. It's fun. Do some stuff, make some stuff. Don't just learn. Go make some stuff.

JASON: Absolutely. That's what makes it stick in your brain and it's the fun part. What's the point of study for you're not applying?

JACK: With HTMX, just try it.

JASON: Build the toy. Don't worry about the fact that it may not be the best choice.

JACK: At the end of the day --

JASON: You're gonna learn something. You're gonna have fun. Jack, thank you so much. All right, y'all. Thank you so much for hanging out. We will see you next week. Take care, y'all!