Carson Gross returns to the show to talk about htmx 2.0. He begins by explaining what's new with htmx, its interesting features, the services it offers to its users, misconceptions about it, and many more! Moreover, he talks about his book, "Hypermedia Systems," and discusses what it is about. 

Charles Max Wood (00:03.239)

Hey everybody, welcome back to another episode of JavaScript Jabber. This week on our panel we have Steve Edwards.

 

Dan (00:09.359)

Thank you.

 

Steve (00:16.083)

Yo, yo, coming at you from a cool and cloudy Portland.

 

Charles Max Wood (00:20.259)

We have Dan Shapiro.

 

Dan (00:22.198)

from a warm but starting to get cloudy Tel Aviv, you know, Israel, Israel fall. Sorry.

 

Charles Max Wood (00:28.255)

I'm Charles Max.

 

Steve (00:30.895)

Hehehe

 

Charles Max Wood (00:31.267)

No, it's all good. Long pause. I'm Charles Maxwood from Top End Devs, and we're getting ready to launch JavaScript Jabber Premium if you're interested in getting ad-free plus bonus content.

 

Dan (00:41.11)

Woo! Cool, yeah!

 

Steve (00:44.099)

and more dad jokes.

 

Charles Max Wood (00:48.096)

I'm not committing to that. We also have a special guest this week and that is Carson Gross. Carson, do you want to introduce yourself and say hello? It's been almost three years since you've been on the show.

 

Steve (00:49.695)

Oh, dang.

 

Carson Gross (00:59.934)

Oh, wow, really? Crazy. Yeah. My name's Carson Gross, and I live in Bozeman, Montana. It's starting to get cold here. We had snow on the mountains last week, so a little bit different, it sounds like, than where you guys live. But yeah, I work on a library called HTMX, which I think is what we're going to mainly talk about today.

 

Charles Max Wood (01:01.576)

Yeah.

 

Charles Max Wood (01:08.124)

Yeah.

 

Charles Max Wood (01:20.211)

Yep, absolutely. My sister-in-law is from Miles City, so... Yeah. I guess it's not my family, it's my brother's family up there.

 

Carson Gross (01:23.566)

Oh, there you go.

 

Dan (01:26.314)

Small World.

 

Carson Gross (01:26.89)

Well, cities, yeah. I'm in Bozeman, so sort of the opposite side of Montana.

 

Charles Max Wood (01:30.639)

Yeah. Good deal.

 

Steve (01:34.679)

Montana is such a small state, you know, so you're probably pretty close, right?

 

Carson Gross (01:37.055)

Ha!

 

Charles Max Wood (01:40.411)

Yeah, just tiny. So yeah, so we have an episode that we recorded with you, like I said, almost three years ago. We talked about HTMX and Intercooler is what I...

 

Carson Gross (01:41.736)

Uh...

 

Carson Gross (01:52.15)

Delizio, guys.

 

Dan (01:54.738)

Yeah, I think it was an awesome episode.

 

Charles Max Wood (01:59.223)

Your video froze on my end. I can still hear you.

 

Steve (02:05.475)

Yeah, frozen my end too.

 

Charles Max Wood (02:05.727)

Can you hear us Carson?

 

Dan (02:07.462)

Yeah, I think we might have lost Carson.

 

Charles Max Wood (02:08.947)

Cough.

 

Carson Gross (02:11.692)

Hey guys, sorry about that.

 

Dan (02:12.11)

And then we got Carson again.

 

Charles Max Wood (02:14.963)

Nope, it's all good.

 

Carson Gross (02:17.608)

I turned off my VPNs. Hopefully that'll help. Ha ha.

 

Charles Max Wood (02:18.15)

Anyway...

 

Charles Max Wood (02:22.259)

So we had you on, like I said, I'll just ask the question again. So we had you on about three years ago. We talked about HTMX and Intercooler. And I'm just wondering, like, what's changed in the last three years?

 

Carson Gross (02:31.617)

Yeah.

 

Carson Gross (02:35.296)

Well, not much changed for about two and a half of those years. HTMX was experiencing pretty steady growth. It had surpassed IntercoolerJS, which was the predecessor. And then this July, out of nowhere, I was sitting on a bucket in a little league tournament and my phone, I looked down at my Twitter notifications and was like, that can't be right. And it just went.

 

It went crazy. And it turns out a couple of tech influencers, which I'm not, I mean, I'm an old guy. I'm not super plugged in on this stuff, but the Primogen who is a Twitch streamer and he does YouTube stuff as well, kind of got interested in HTMLX. And then the, what's his name? Fireship Dev, who has a huge YouTube channel, which just gets, I mean, millions of views.

 

He decided to do a 100 seconds of HTML X. And so those two things sort of happened back to back in July. And it actually exploded at that point. So it, you know, went over 20,000 stars on GitHub, which was always sort of my line where I would say, okay, you know, we've made it and it's continued to grow since then. So I don't think much has changed technically about the library.

 

but you know the vagaries of the internet are what they are and just hanging around and being solely on Twitter for About a decade and turns out it pays off in the long run. So it's funny because

 

Charles Max Wood (04:14.431)

Ha ha ha.

 

Dan (04:16.954)

Oh yeah, the bias. It's funny because it's true because you know, your Twitter account is out there.

 

Carson Gross (04:24.884)

Yeah, we get pretty silly on the Twitter for sure. And I've been like that forever. People are like, oh, he's such a marketing genius. And I'm like, I've been doing the same thing for a decade now. I used to be a little bit more serious and try a little harder. You know, I've gotten a lot of essays if the listeners are interested. HTML is an idiosyncratic JavaScript library in that it's very focused on hypermedia exchanges. So.

 

HTML requests and responses rather than JSON, which is what most JavaScript libraries use. And I've written a firm number of fairly serious, although some of them are a little silly as well, essays. And your listeners can read them at htmx.org slash essays. But I've always been pretty silly and I got increasingly silly sort of, I don't want to say as I gave up, but as I sort of accepted that, you know, Intercooler and HTML were not gonna...

 

be dominant, like libraries for building websites. But then July happened and here we are. And now everyone, it seems like everyone thinks I'm some sort of marketing genius, but I think I was just in the right place, right time.

 

Dan (05:39.278)

I think that Primachain is actually making some videos about your, about HTMLX, like all the time almost it seems. I think a couple of videos dropped like this week or something.

 

Charles Max Wood (05:39.295)

Well, it's funny.

 

Carson Gross (05:51.7)

Yeah, he's been making a lot of content about it, which I really, I mean, I've never met the guy. I've chatted with him a couple of times, you know, online, but I definitely appreciate his enthusiasm for it.

 

Charles Max Wood (06:02.651)

Yeah, it's funny too because I've been coaching people lately on their career and, you know, creating content and, you know, doing things like that to kind of build a personal brand. Some people are more interested in doing the open source, but the thing that I keep telling them is, you know, you mentioned, hey, I've just been doing the same thing for 10 years and that's usually the way that it works out where, yeah, you just consistently put things out there, whether it be open source or, you know.

 

be active on social media or have a blog or have a YouTube channel or have a podcast or whatever. Then eventually that opportunity presents itself. If you had stopped at any point, that opportunity wouldn't have come along. The fact is that you were around, in your case maybe for 10 years before somebody finally noticed and said, hey, this is a thing that I like.

 

Carson Gross (06:54.944)

Yep. Yeah, you know, an intercooler really kind of did, I don't want to say it died, but it went quiet for a while. And really it was when COVID hit that I decided to do the HTMX rewrite of it. So HTMX is sort of intercooler 2.0 and it was only because COVID had us all in our houses that I just said, okay, I'll pull out the jQuery dependency that intercooler JS had and see if I can do it in vanilla JS.

 

Charles Max Wood (07:06.216)

Mm-hmm.

 

Carson Gross (07:22.048)

And that, you know, sort of rekindled the whole thing. So very, a lot of very lucky turns of events. I don't think there's a lot of lessons to be learned here. Although I do agree with the idea of like hanging around, you know, trying to hang around until your time comes because, you know, things we've all, we're all old enough, we've seen these waves come and go in the industry. And so, you know, if you, if you're around long enough, the chances are that if you've got a decent idea, it'll start getting some play at least.

 

Charles Max Wood (07:52.443)

Yeah, well we've seen that a couple of times with this podcast, where, you know, whatever, you know, things slow down, the growth isn't, you know, going, and then yeah, somebody picks up something and says, hey, these three or four episodes of JavaScript Jabber really hit the mark, and then we have a whole bunch of growth and attention, and then it slows back down again, and you know, we generally have a steady growth anyway. It's just, you know, not like that. But yeah.

 

Dan (07:53.237)

I

 

Charles Max Wood (08:21.915)

It's mostly just being consistent and giving people value.

 

Carson Gross (08:25.026)

Yep.

 

Dan (08:25.506)

But if we pivot back to HTMLX itself, I think it's more than just persistence. I think the star is kind of aligned because everybody is going in a certain direction with the web front end. And you kind of represent the exact opposite on almost every level. So you mentioned one.

 

Charles Max Wood (08:44.903)

Mm-hmm.

 

Carson Gross (08:53.156)

Sure.

 

Dan (08:54.31)

which is, you know, focusing on sending HTML over the wire, rather than other formats, in particular JSON, which is kind of funny that, you know, the web and sending HTML is considered kind of out there. It's kind of amusing. But it's not just that. I mean, it's a whole bunch of aspects of HTML, which are almost like polar opposites to...

 

Carson Gross (09:12.228)

hehe

 

Dan (09:20.778)

things happening with React, with Vue, with Svelte, with everybody else, and you're kind of going like the totally opposite direction.

 

Dan (09:34.079)

Yeah.

 

Carson Gross (09:34.728)

Yeah, I think that's true. I think one thing that HTMX really benefited from was that, but when I built Intercooler, I really developed a better sort of philosophical base for what I was doing. Intercooler was very much like just trying stuff out. But when I rewrote to HTMX, what I realized is I just wanted to make HTML better. And so if you don't, so that constraint of like, okay, let's just prove, let's improve HTML.

 

Let's make it so that any element can issue a request. Let's make it so that any element can issue any kind of HTTP requests. So get, you know, post, put, patch, and delete. Let's make it so that any element can do that request in response to any event. And then finally, and probably most importantly, let's make it so that request can be placed anywhere in the DOM rather than just replacing the entire screen, which is what.

 

the normal hyper media controls, forms and anchor tags do. Those sort of four core concepts of HTMX, I think having that philosophical basis really constrained HTMX to keep it a relatively small library and also very focused library. So, and that was, I didn't have that benefit of sort of having time to think about it when I built intercoolers. So intercoolers sort of more of a kitchen sink.

 

front-end library. It has a lot of stuff in it that I kind of view as superfluous, whereas htmx is much more focused. So it's a smaller library, it doesn't have jQuery dependency and so forth. And I think that focus keeps me away from stuff like reactive style programming. That's just not part of the idea with htmx. And so it keeps htmx sort of segregated away from the...

 

the other major front-end libraries, because we're not trying to solve some of the problems that exist, and there are good reasons to use those tools at times. But that's not the problem that HTMLX is really trying to solve. It's really focused on extending the expressiveness of HTML. So I've found that sort of having that as my touchstone being to be a very...

 

Carson Gross (11:52.76)

good way to keep the library tight and focused and sort of have its own flavor when compared with other libraries.

 

Dan (12:00.234)

So like you... Oh sorry, go for a check.

 

Charles Max Wood (12:01.899)

So you mentioned that HTMX is not solving those problems. You can use this alongside an Angular or React.

 

Carson Gross (12:12.548)

Yeah, absolutely. And so that's one thing, especially on JavaScript Java, I do want to clear up is people say, Oh, HTML is the anti JavaScript library. And that's not true. That's not true. You know, I do, there's obviously contrarian feel to it. So I don't want to pretend that there's no sort of like salty contrarianness to it because there is. But at the same time, HTML is written in JavaScript, first of all, so it'll be hard to be

 

anti JavaScript entirely. But also, HTMX is, or at least I am, fairly pragmatic about it. And scripting has always been part of the web. So Roy Fielding, who is an engineer who worked on the early web, and wrote a thesis, which is where we get the terms restful and hideous and all this stuff from. So he kind of wrote the, that thesis was in some ways the,

 

Charles Max Wood (12:59.772)

rest.

 

Carson Gross (13:06.708)

intellectual description of what the web was, why it was different than other distributed architectures. And he explicitly mentions scripting as a component of that system. And so, HTML X, in that sense, is not hostile to scripting. So, if you have, for example, an island of interactivity, then maybe a reactive framework like React or Vue or Svelte or whatever is called for. And there are entire applications that...

 

HTML just isn't a good fit for. So if your readers are interested, or if your listeners, I should say, are interested, there's an essay called When Hypermedia is Appropriate or something like that on the Essays page on HTML. And I talk about, okay, these are the types of apps that HTML is a good fit for, or the parts of the app that it's a good for, and these are the parts that it's not a good fit for. And those areas where it's not a good fit, your other option is gonna be scripting of some sort. Now that scripting can be reactive.

 

Charles Max Wood (13:51.935)

Mm-hmm.

 

Carson Gross (14:02.916)

potentially. It can also just be vanilla JavaScript, you know, and we don't shy away from that at all. We have a book that we released recently called Hypermedia Systems, and we have a whole chapter on scripting and sort of three different approaches to scripting using, I think, what do we use? Vanilla JS, I think we use Hyperscript, which is an esoteric scripting language that I work on as well, but then Alpine, which has a more reactive feel to it as well.

 

So we're not anti-scripting or anti-JavaScript. We're just, I would call us hypermedia enthusiasts rather than anti anything.

 

Charles Max Wood (14:44.252)

Hahaha.

 

Dan (14:46.782)

If I can take you on a slight detour for a minute. So you mentioned that, you know, you're not anti-scripting because HTML itself is written in JavaScript. Is it written in JavaScript or in TypeScript?

 

Carson Gross (14:49.86)

Sure.

 

Carson Gross (15:01.668)

Ha, oh boy, that's a controversial topic. It is written, not only is it written in JavaScript, it is written in like ES5 or four, it's written in IE compatible JavaScript and it's written in a single file. It's no build system, no build script, no nothing. It's just one giant ball of JavaScript and very old JavaScript at that.

 

Dan (15:04.88)

Hahaha!

 

Charles Max Wood (15:28.016)

Old school, I like it.

 

Carson Gross (15:29.744)

Yeah, so if you look at the internals, it's written in a functional manner. I have a fairly idiosyncratic style of JavaScript that I write. I write it very functionally on the inside. And so that I find that easy to pick up. My experience is that non JavaScript developers who come in, pick it up pretty quickly, but people who are used to modern JavaScript tooling, sometimes it makes them cross their eyes when they look at it, but

 

The advantage, the big advantage of this approach is number one, it's IE compatible, which is kind of a joke at this point since IE has been retired, but we've always been IE compatible. And so I like that we can say that. It's kind of funny. We're going to drop that for HTML 2.0, by the way. But then also we don't have a build step. Yeah, you're not alone in your opinion on this matter.

 

Charles Max Wood (16:13.151)

Mm.

 

Dan (16:14.785)

time.

 

Charles Max Wood (16:20.273)

Uh-huh.

 

Carson Gross (16:24.14)

But we also, we don't have a build step and actually a guy named Alex on our team wrote an essay on why HTML doesn't have a build step and some of the advantages of that approach to building software where there's, there's an immediacy to changes like hit refresh and it just automatically works. You don't have to set up some build tool chain and so forth to make everything work and how that was how the early web was. And that was one of the nice things about JavaScript was it was an interpreted language, so you didn't have to have a big build system.

 

that's kind of been lost in a lot of Java projects. So it's not right for everybody, but it works for us, for sure.

 

Dan (17:01.134)

Yeah, also the fact that you hardly have a JavaScript API. I mean, you do as far as I recall, because you support JavaScript extensions to HTML. But the majority of developers using HTML aren't going to be interfacing to it with JavaScript. They're mostly just going to use it as attributes on their HTML. And the primary benefit of TypeScript in the context of libraries is...

 

Carson Gross (17:11.769)

Yeah.

 

Charles Max Wood (17:23.519)

Mm-hmm.

 

Carson Gross (17:24.887)

Right.

 

Dan (17:29.302)

effectively documenting the interfaces. And yeah, so you don't need that as much. I would suggest to you, let's put it this way, just for your own sake maybe, to consider starting to sprinkle in JS doc, kind of like what the Svelte project is doing.

 

Carson Gross (17:33.293)

Yeah.

 

Carson Gross (17:50.72)

Yeah, that's exactly what we're planning on doing. And we actually have some JS doc in the code base right now, but we're not verifying it. Our test suite is really what keeps things on the rails for better or for worse. And the funny thing here is that I'm a statically typed language guy. I studied programming languages in graduate school and I write, you know, I write.

 

Dan (18:04.283)

Oh yeah!

 

Carson Gross (18:17.532)

I teach the compiler's class here at Montana State, and it's a statically typed programming language because that's what I prefer. And, you know, it's a simple type system, but still. So it is just one of life's ironies that I've ended up using a totally untyped, safe scripting language. I remember arguing with people back in the day when the dynamic language people would say, tests are good enough.

 

And I would say, no, you need to have static typing. And now I'm the guy saying tests are good enough. So you never know where you're gonna end up in life. But here we are.

 

Dan (18:48.974)

Uh...

 

Dan (18:53.022)

be fair, I think the case for using JS Doc would be primarily about just making the editing experience nicer, at least in some context. So having correct completion when working, let's say in VS Code is just... And it's also like, you know, the biggest problem with code

 

Carson Gross (19:05.422)

Yeah.

 

Yep.

 

Mm-hmm.

 

Dan (19:22.57)

they get out of date and then they're worse than useless. Uh, the, the benefit of JS stock is that it cannot get out of date because then it gets in the way of your writing the code. So you kind of forced to keep it up to date and then it actually serves its purpose as proper documentation. I'm not saying it's without its problems. There's extra effort involved, obviously.

 

Carson Gross (19:26.773)

Yep.

 

Carson Gross (19:43.041)

Yeah.

 

Dan (19:47.946)

You will run into situations where certain things that are very straightforward to implement in JavaScript are kind of challenging when you try to do it with TypeScript and especially with JSDoc, but it might be beneficial, like I said, to sprinkle it in.

 

Carson Gross (20:07.828)

Yeah, well, I agree. I mean, I agree. I think at this point, it's just a matter of doing the work. And I know at least one error which slipped into a release of htmx that would have been caught with decent JS docs. So there's at least one bug that I can point to that was not tested properly that would have been caught with good TypeScript or JS docs. So I appreciate the correctness argument as well. But I think...

 

what you touched on, even more so the tooling around code development that strong typing can give you is worth the effort. And have you guys heard of grugbrain.dev? Have you guys ever gone to that website? So I wrote, this is a joke website that I made. It's called grugbrain.dev and it's sort of a caveman, caveman's take on software.

 

development. And if you find that the type systems chunk of it, I kind of say exactly what you just said, Dan, where I think that one of the most valuable aspect of static typing is tooling, is tooling support. So code completion, refactoring, all that sort of stuff, the ability to find usages effectively without guessing based on symbol names and so forth. All that stuff is extremely valuable. And that's, I would definitely like to have that in the HTML code base at some point.

 

But I do have to say all that being said, the test suite has done a pretty darn good job of keeping the correctness of the software fairly high. Not had a lot of errors. What do we use? We use, oh shoot, I'm gonna have to go look. No, I just write, I just copy and paste. We use copy and paste. No, I forget. It was whatever the cool.

 

Dan (21:39.762)

What are you using for the test?

 

Dan (21:51.053)

trick question

 

Carson Gross (21:59.944)

One was when we started. No, what's going on? Mocha, that sounds right. Mocha, and then there's a mock server by another dependency. I'm gonna have to find it, but I'll have to look it up. I forget which one. I just copy and paste the tests at this point. So the actual dependencies don't matter so much.

 

Dan (22:02.627)

Cześć! Moka?

 

Dan (22:20.886)

Do you also do like end-to-end tests with automations or stuff like using something like a playwright or something?

 

Carson Gross (22:25.664)

Most of our tests are... We don't do any sort of server browser-based testing. All of our tests are against... They're written... And there's a part in grubbrain.dev where I talk about testing. And I like kind of in-between tests. So I don't like unit tests very much. And end-to-end tests, I think, are great, but they can be really hard to diagnose what's going wrong with. And so there's sort of this in-between test.

 

which people sometimes call integration tests. And I think you would characterize the test suite of HTML access mostly integration tests where we generate HTML that has attributes on it. And then we click on the button or whatever. And then there's a mock server that intercepts the AJAX and sends back a response that gets inserted into the DOM somewhere. And then we test the state of the DOM afterwards. So it's definitely not a unit test in the traditional sense.

 

but I also would not call it an end-to-end test in the sense that we're going through a browser normally. It's sort of set up kind of with these in-between tests. And I think that's very effective because that API, the HTML API for HTML is its main API, and that doesn't change that dramatically. And so the tests stay useful for a very long time when compared to like if we were unit testing individual functions, for example.

 

Charles Max Wood (23:49.223)

So, I'll go ahead.

 

Dan (23:49.49)

Now I'll go, I keep stepping on your questions, Chuck. Oh.

 

Charles Max Wood (23:54.191)

Well, I was going to take us in a different direction. So if yours is in the same vein as where we're at, then keep going.

 

Dan (23:57.99)

No, no, it's a different direction as well.

 

Charles Max Wood (24:02.035)

So I have two questions that I want to ask. I don't know which one we answer first, but I don't know if we actually talked about what HTMX is or what it does. And I know that we talked about it three years ago, but it's been three years. I'm assuming people are picking this up from channels like the Primogen and going, oh, okay, I see what it is. But do you want to just give us a really brief example of what it is and how it works? And then the other question I have is, then what are you putting into 2.0?

 

Carson Gross (24:28.161)

Yeah.

 

Carson Gross (24:32.484)

Sure. Okay, yeah. So just to give you a complete high level overview, let's, htmx effectively extends html as a hypermedia. And as I said sort of earlier, it lets you make, have anything on your page, make a request based on any event, and then take the response from that request and place it anywhere in the DOM. So imagine you had a like button in a user interface, and let's just make it a button, like a real button.

 

this point. So you have a button element and you want that button to do a put to, for example, say tweet slash and then a tweet ID or something like that, like post slash post ID. What you would do is you would put onto that button the attribute HX dash put and then the URL slash post slash whatever the ID of that post is. And what that would do is it would, HTMLX would see that attribute and it would say, okay.

 

This is on a button. The natural action for a button is click. So when a click occurs, I'm going to issue a put to that URL. And then that URL is gonna return some response. For example, maybe it says, you've liked, returns a heart or some animation or something like that. Some bit of HTML though, it wouldn't be a JSON response. And that's the crux difference between HTML X and most other JavaScript front end libraries.

 

So you would get that response back. And then another attribute that you would put on the button would be HX target. And that HX target would let you use a CSS selector to say where to place that content in the UI. So maybe you wanna replace the button with it. So you would target like the parent div of that button, or maybe you wanna put the message next to the button or whatever. And so you could use a CSS selector in order to specify exactly where that HTML that comes back its place.

 

And that HTML in this case anyways, would not be an entire HTML document, rather a snippet of HTML. And so those two attributes, putting an HX put and then an HX target would let you implement sort of a like functionality that in a more traditional JavaScript library might be tied together using events and maybe some backend store for posts and so forth. And so a little bit more elaborate on the front end with advantages and disadvantages.

 

Carson Gross (26:55.224)

sort of idea is let's just use the server, the server will respond with the updated state. And the more, it's a, I would call it a more traditional web model where hypermedia is the engine of application state, which is where the abbreviation HDS comes from. You're using the HTML exchanges in order to update the UI. So that's the crux of a HTML accent. Basically you have a bunch of attributes that you control behavior. For example, if you wanna take the URL that

 

the request is against, you wanna push that up into the history, there's an HX push URL attribute you can use, you can specify different types of swap if you wanna swap in the inner HTML, the outer HTML, if you wanna place it after an element or before an element or whatever.

 

Dan (27:37.742)

If I can interrupt you on that point for a minute, because that's one that I kind of made a note to myself ahead of the show that I wanted to bring up with you. So one of the cool things about the web when you just use the HTML that's built into the browser and not like a framework or even HTML X is that you got this history thing. The fact that you've got working back and forward buttons.

 

Carson Gross (28:03.693)

Mm-hmm.

 

Dan (28:07.222)

Uh, and you know, like the content of the page changes, usually the URL will change because it's always a page navigation and then you can click the back button to go to where you previously were and the forward button, you know, to go forward again. When you start replacing things in the page itself, that model kind of breaks down. Um,

 

There is no, if you basically download the bit of HTML over the wire and then use JavaScript effectively behind the scenes to inject it into the DOM, there's no history operation associated with it. So there's, if you click the back, you will just go, you know, pull the way back. So my question really is conceptually and also practically, how do you deal with that?

 

Carson Gross (28:53.44)

Yeah.

 

Carson Gross (29:00.5)

Okay, that's a great question. There's sort of two components to it. So first of all, htmx does have history support. So if you put the attribute hx pushurl equals true on an element that's making a request, that URL that the request goes to will get pushed into the location bar. And what we do is we snapshot the DOM before the request is made, save that to local storage as a cache, and then...

 

it'll actually create via the history API, which is a horrible API, but it's fine. It'll actually create a history element. So you actually do have back button support if you use that HX push URL, if you use that HX push URL attribute. So that works. Now there's another side to that though, which is what you also mentioned, which is, well, if I'm just getting a small snippet of HTML back from that URL,

 

What happens if I refresh the page? So I hit refresh, I issue a get. Is it only gonna get that little snippet of HTML? How does it render the UI properly? And the answer there is there's a header that is passed up when it's an HTML based request called HX request. And that'll be set to true. And if you really wanna do that right, what you need to do is look at that header.

 

and say, okay, is this a partial request? And we'll include also the ID of the target of the request if there is one, so that you can figure out exactly what content you wanna render. And so, but to do that properly in order to support deep links, which is the broader concept here, you have to do that on the server side. A lot of libraries that backend frameworks are starting to integrate that into middleware, so they'll do...

 

they'll let you do that pretty easily via middleware. But it is more manual work and it's certainly much more complicated than just standard links and forms. I often recommend to people just use standard links and forms if that's all you need because you do get all that functionality, quote unquote for free. And there are issues like you have to set up the very header correctly and so forth in order to get browser caching to work properly and so forth. So it's not trivial. I don't wanna present HTML axis.

 

Carson Gross (31:20.152)

just solving that problem without any effort on the user's part, but with a decent understanding of all the components in motion, you can have a very good and not difficult to implement deep link support in an HTML based application.

 

Dan (31:35.114)

So basically when you change a bit of HTML on the page, and if you do want to have a history associated with it, if I understand correctly, you take that part of the DOM that was changed or replaced, you kind of push it into the local storage, I assume as the actual original HTML, as the HTML, I assume, and you kind of use the local storage or as kind of a stack.

 

Carson Gross (32:01.271)

Yep.

 

Dan (32:05.326)

I guess that you can push and pop things out of.

 

Carson Gross (32:05.844)

Yeah, I wouldn't call it a... The history API provides the stack. The JavaScript history API provides the stack and it's kind of a, it's more of a length list than a stack. But the local storage I would call, I would say it's more of a cache. So given a particular URL, like what was the content? And when we snapshot it, we snapshot the whole page. So much like the browser does natively, we don't...

 

look at like just one little part of it, we snapshot the entire page and save that into the history cache, which is what we call it internally.

 

Dan (32:41.866)

Hmm. You might want to look at other forms of storage instead of local storage. Eventually. I, I'm not, I'm not sure that local storage is the optimal type of storage for that, but that's a different discussion, I guess.

 

Carson Gross (32:43.189)

So.

 

Carson Gross (32:56.08)

Yeah, we let you set how many, like some people don't like that behavior at all. They don't want anything stored in local storage. And so you can configure there to be zero local storage slots. And then effectively there's a fallback mechanism where if we, if we, if you click a back button or navigate back in the history and you hit a URL and we don't have an entry in local storage, we'll actually issue a get request to the server for that URL and just take the content.

 

and swap that in instead, which again, sort of mimics the browser behavior. And some people who don't like the way that history, if you have a really complicated webpage with a lot of JavaScript, it can be kind of a pain to get the JavaScript, to get the HTML, right?

 

Dan (33:38.534)

I just had an insane idea that probably is broken, but I'm just gonna throw it out there for you to think about after the show. Instead of putting it in a local storage, create a hidden iframe and stick it in there. And then you can actually have the browser's history do the work for you. Ha ha ha.

 

Carson Gross (33:45.828)

Sure. Yeah.

 

Carson Gross (33:53.38)

Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha

 

Charles Max Wood (33:54.993)

Ha ha ha.

 

Carson Gross (34:01.076)

Yeah, maybe it's worth looking at. I think frames and iframes are underutilized in general.

 

Dan (34:07.102)

Oh, frames are dead effectively. So it's iFrames is all we still have. Frames and frame sets are dead, I think. I'm thinking most of our listeners don't even know that they ever existed.

 

Carson Gross (34:11.492)

Yeah.

 

Charles Max Wood (34:15.228)

So.

 

Carson Gross (34:18.499)

Ha ha ha.

 

Charles Max Wood (34:20.303)

Yeah, so I do want to push this more toward, okay, so what's coming in 2.0? Like what are you adding or changing?

 

Carson Gross (34:28.501)

Sure. So 2.0 has kind of gone through a few bumps, actually. Initially, I was thinking that a big aspect of 2.0 would be something called a one of the neat ideas that's come up in the last, it's been around for a while now. There's something called Morphdom. Have you guys ever heard of Morphdom, the Morphdom library? It's a DOM morphing library. So basically what it does is it takes

 

Dan (34:48.552)

Nope.

 

Charles Max Wood (34:49.403)

I've heard of it, but I don't know what it does.

 

Carson Gross (34:55.008)

an existing DOM and then some HTML and parses the HTML and then morphs the current DOM into the new DOM form. And so what that means is that it means that the DOM stays relatively stable. So elements don't get removed. It's not just like the standard swap in HTML is replacement. You just jam in, enter HTML. And the problem with that is it blasts a lot of state like focus state, which we try and...

 

keep up to date and so forth. There's a lot of hacks that we have in there to make that all work. But the morphing algorithms do a much better job of preserving, for example, videos running and so forth. And this is one area where, yeah, so like the VDOM tries to do this as well, but morphing algorithms don't have that layer. They just take an existing layer and then try and sync it with an existing, they take a new DOM and like an actual DOM and then morph it in,

 

Dan (35:34.706)

Veedon!

 

Charles Max Wood (35:37.096)

Hehehe

 

Carson Gross (35:53.356)

morph an old DOM into it. So I came up.

 

Steve (35:55.087)

So when you start talking about morphing, I'm thinking Mighty Morphin Power Rangers, you know.

 

Carson Gross (35:58.912)

Yeah, yeah, it's kind of kind of. So I came up with a new algorithm called idiomorph, which uses something called ID sets and it behaves, it performs slightly, it's a little slower but it performs slightly better than the old morphdom algorithm does as far as keeping nodes stable in a DOM. And I really was feeling like I was going to integrate that into htmx 2.0.

 

Charles Max Wood (35:59.711)

Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha

 

Carson Gross (36:27.512)

So there was an out of the box sort of swap that was available because it really, it addresses some corner cases that people object to with HTMX. But after getting into it and doing it over the summer, we made the decision sort of as a group, primarily me that I just don't think that complexity is worth it for the majority of HTMX users. And so we've actually, we've said, okay.

 

Dan (36:50.526)

surprised.

 

Carson Gross (36:53.1)

Forget about that, that'll still be, it's a plugin. So if you wanna use that algorithm in HTML, you can use it, but as a plugin. We're not gonna put it in the core of the library. And so what that means is we've kind of taken a step back and reevaluated and what that really means for HTML 2.0 is there's gonna be very little difference between, like when we make the one to two step, there's gonna be very little difference functionality wise between the two. We're gonna remove.

 

A couple of legacy features, we have legacy web socket support and legacy server sent event support. Those have already been replaced by extensions that do a much better job of supporting those technologies within HTMX. So those are already available. And those are what we recommend. We say don't use this old stuff. So we're going to remove that. We're going to remove the IE support and all the junky code that we have along with that, which will help. And then we're going to look at changing a few defaults.

 

So for example, htmx right now by default, just because it's the standard Ajax behavior, it allows you to make a request to a different domain from the current domain. So you can put in a, you can do a cross domain request by default. And so we're gonna make that no longer legal by default to help.

 

secure HTML applications by default. You'll still be able to enable it if you want. Some people do wanna make those, but the majority of people don't wanna make them. And so we're gonna change a few defaults like that. There will be a small upgrade guide that'll help people upgrade things, but I really don't think there's gonna be too much dramatically different. Hopefully it'll be a little smaller because we are pulling out a lot of functionality and then a lot of junky IE code that we don't have to support anymore.

 

but it won't be, it's not gonna be very dramatic. I'm sorry to report. I wish I had a big sexy, that's kind of what idiomorph was. It was the big sexy thing that would inspire people to upgrade. But I just, I don't think it's the right thing for the library.

 

Dan (38:58.37)

Yeah, I, without seeing it, I tend to agree if, if you were to put it in, I would put it with very like strict cutoff points, like, you know, looking at the content you're replacing and deciding whether to use it or whether using it or not is even worth it because, you know, for example, if you don't even have input elements in the stuff you're replacing, then maybe there's no point and stuff like that.

 

Carson Gross (39:15.66)

Yeah.

 

Carson Gross (39:23.008)

Yeah, well, one thing that's tough about that algorithm in general, and idiomorph suffers from this, Alpine.js uses a similar algorithm, is that it doesn't work 100% of the time. It just, there are times when it'll behave the way you want and then there are times when it won't, and it can be hard to understand why. And so that was really the thing that finally put the nail in the coffin for me was that, you know, this is gonna generate a bunch of support because people are gonna think it's magic and it's not.

 

The fundamental problem, and actually, I don't know if I'm allowed to talk about this, but I've talked with some Chrome engineers about this, but the fundamental problem is what we really want as a library is we want the ability to re-root, to take a dom node that has one parent and move it to another parent without losing the state associated with it. So to take, you know, like a video element and move it from one spot to another without the video resetting, for example, that's like a sort of classic example.

 

And once you can do that, then you can do an awful lot of cool stuff. And if, uh, my, my sense is that there is momentum building in the browser engineer community around that feature. And that'll, so that was another thing that sort of, I was looking at saying, you know, this could be a solved problem in two or three years, and then HTML is going to have this legacy swapping mechanism that doesn't really work. Perfectly, but.

 

now we have this opportunity to do the right thing because the browsers have caught up with what we want. So that was another thing that sort of just ended up helping us make the decision to say, now we're gonna reset and redo this in a much less dramatic manner.

 

Dan (41:05.49)

Now, so I was saying how the fact that you're the HTML is kind of the inverse of so many of so much of what modern frameworks are like it's a library rather than a framework. It's focused on the HTML rather than on the JavaScript. And the fact that it sends HTML over the wire rather than other protocols in particular JSON and so forth. One other big difference.

 

is that all the other frameworks seems to be going full stack, whereas HTMX remains very much a client-side library. Is the way that I'm seeing it correct? Do you agree with that?

 

Carson Gross (41:48.577)

Yep.

 

Carson Gross (41:52.976)

Yeah, 100%. And so each one thing we talk about with htmx is how hypermedia on whatever you'd like. It's like a stack, you know, there are various stacks. And I agree, you know, obviously there's React server components, and there's fell kit and all this stuff that's driving a server side component, whereas htmx and again, I think it's because of that philosophical commitment to HTML to improving HTML, you're not going to be using HTML to write God forbid.

 

you're using HTML to write your server-side logic. That's just not a thing. So it's just not realistic that HTML is gonna have a server-side presence. And I think that's a good thing because it allows people, one of the downsides when you have a particular server-side technology that pairs best or whatever with a given front-end technology is that people have to adopt it. And so that forces people out of their preferred programming line.

 

which like we have a lot of very passionate Rust developers, Go developers, Lisp developers, Clojure, which is a JVM based Lisp, Python developers, Haskell, we've got some Haskell people and we've got a lot of people that like their particular programming language, F sharp, OCaml's for whatever reason, blowing up on Twitter, you know? And so, HTMLX tries to stay agnostic towards the backend technology, so.

 

whatever you use to produce HTML is fine. It's, you know, that's your choice. And so it removes that pressure to adopt a particular backend. Now there are disadvantages to that. You don't have the tight integration necessarily that you have that you can have with something like, for example, React server components. So there's definitely a sacrifice that has to be made there in the name of that sort of hard break between the front end and backend technology choices.

 

So it's not, and another, another disadvantage of it is that there's, there's not really a canonical, um, backend example for HTML. People come in and say, how do I do this? And we have to say, well, what are you using for your backend? And then we have to find someone that's also using that backend and using HTML in order to help them. And that can be, you know, off putting to people who are used to a more sort of one-stop shop. Um, I said, Shaw is an author.

 

Charles Max Wood (44:14.864)

Mm-hmm.

 

Carson Gross (44:15.24)

and he tried out HTML at one point and just had a horrible experience with it because he expected it to set up a server and all this other junk for him. And unfortunately, the interaction on Twitter became a little, it didn't work out as well as I would have liked, but I understand where, I understand.

 

Charles Max Wood (44:31.699)

Zedd is one of my favorite and least favorite Comregians out there, so...

 

Dan (44:31.734)

It's not full stack.

 

Carson Gross (44:36.404)

He's definitely got strong opinions, which I appreciate. But he had a point, you know, it is. There's no, you don't create an HTML app. There's no create HTML app. And so that can be.

 

Charles Max Wood (44:38.835)

Yeah.

 

Dan (44:45.014)

Well.

 

Dan (44:51.767)

It's not a full stack solution. And to be fair to you, it doesn't pretend to be. So I can appreciate. Yeah, if he was disappointed that a server was not included, then effectively he was looking at the wrong thing, it seems to me.

 

Carson Gross (44:54.358)

Yeah.

 

Charles Max Wood (45:00.827)

Yeah, I don't feel like that was what was sold.

 

Carson Gross (45:04.165)

Yeah

 

Carson Gross (45:09.781)

Yeah.

 

Charles Max Wood (45:14.107)

Yeah. You sold me a hammer and I expected a nail gun. It's just-

 

Carson Gross (45:15.421)

Yeah, I-

 

Carson Gross (45:18.932)

Yeah, well, you know, there's also there's all sorts of context. This is one of the problems with online stuff is, you know, I think sometimes people run into my Twitter account and they're just like, what is going on? This guy's a lunatic, which is true. But also, but also I've got some reasonable ideas. So you know, it's fine. I referenced his book. I mean, it was his book on Python has been highly recommended to you. And so in our book, Hypermedia Systems, we actually recommend his book.

 

Charles Max Wood (45:23.431)

Yeah.

 

Dan (45:29.888)

Hahaha

 

Carson Gross (45:47.812)

people that are looking for a Python introduction, because our book does use Python. We use Python and Flask in the Hypermedia Systems book in order to introduce HTML. So you have to use something. And that was the sort of, we felt was the most broadly useful and easiest to pick up for people that were coming from different languages. That was the best tech stack for that. Even though, for example, the Django community was really the community that picked up HTML first, the Flask community.

 

is there, but it's just not as big and as strong as the Django community. And so if I were just following who the users were, we would have used Django, but then Django has, you know, it's a, it's a thicker, more complicated server stack. And so that's why we went with Flask instead to try and keep it simple for people who weren't committing to Python, but still wanted to learn the concepts of HTML acts. So, you know, it's just like anything it's there's advantages and disadvantages to this sort of backend agnosticism that HTML has.

 

Charles Max Wood (46:47.783)

Yeah, one thing that I'm...

 

Dan (46:47.858)

Interestingly, again, in preparation for this episode, I was looking at various videos on htmx and you know, just off of the cuff, I saw I think the primogen was using go. I saw another one using PHP, like you said, quite a bit of Django stuff around it. So yeah, it seems like this is the front end library for anybody who doesn't want to be using JavaScript on the back end.

 

Carson Gross (47:12.964)

Yep. Yeah. And that's, you know, again, we're not, we're not anti JavaScript. And there are lots of people that use JavaScript with HTML X like bond. I kind of have a joke joking ongoing rivalry with bond on a, on Twitter right now. I think I may be the only front end library that has had a major JavaScript runtime, tell it to delete its account on Twitter. So I feel like that's a, I've unlocked that. That's a life achievement there.

 

Charles Max Wood (47:15.508)

Yep.

 

Carson Gross (47:41.888)

but there's something called the Beth stack, which is bun and then a framework that starts with E and then T and then HTMX. And people are using the Beth stack, which is JavaScript based, you know, it's running on bun and they really like that. So there's, yeah, it's the new thing. Yeah.

 

Charles Max Wood (47:59.335)

Oh, interesting. I haven't even heard of this. Bun, it's Bun Elysia, which I haven't heard of. Terso, which I have. That's a CSS library, I think. And HCMX.

 

Carson Gross (48:08.436)

Yeah, Elysia. Yeah. I thought Tersa was SQLite. Yeah, it's a local SQLite that syncs, so it's super fast, apparently. I don't know, I haven't used it, but I don't, yeah. Yeah, yeah, no, it's all good. I mean, it's brand new, but again, I think that points to the fact that each, like we're not anti JavaScript on the server side. There are people that are using it very successfully.

 

Charles Max Wood (48:16.419)

Oh no, it's a sequel. No, it is, you're right. It is Sequelite.

 

Charles Max Wood (48:23.899)

No, you're right. As soon as you said it, I knew you were right and I was wrong.

 

Carson Gross (48:37.784)

And that's great. But also my position is I'm a programming languages person. And I think it would be a shame if the internet became only JavaScript. I like multiple languages. I'm not a Haskell person, and I will never be a Haskell person. But I like that they're Haskell people. And I want them to be able to write web apps in Haskell and not have to write basically half their app in JavaScript if they don't want to.

 

So it's something I really like about the HTNX use of hypermedia and the hypermedia approach is that it opens up a lot more possibilities on the backend.

 

Dan (49:18.139)

I think a key aspect here and one of the reasons for the big success of JavaScript slash TypeScript on the back end is that people don't want to be writing the templating code twice. When you implement logic that generates HTML and you want to do it or you need to do it server side

 

Carson Gross (49:30.628)

Mm-hmm.

 

Dan (49:43.586)

You want to deliver a contentful response for the initial load of whatever page it might be. But you also want it on, let's say, the client side because you want to have more sophisticated client interactivity culminating in single page applications. But even if not, just the fact that you can, like you said, like click a button and have stuff modified without forcing an entire page reload. And having to implement all this stuff, all this logic.

 

Carson Gross (50:09.987)

Mm-hmm.

 

Dan (50:14.535)

in two distinct programming languages, two distinct sets of APIs, was something that people really didn't like and found to be a maintenance nightmare. Now, most of the common frameworks that we're seeing are addressing this by just doing everything in JavaScript, and let's say doing everything in React, both on the client and the server, or doing everything in Svelte, both on the client and the server.

 

Carson Gross (50:25.836)

Yep.

 

Dan (50:39.278)

I find it very interesting the way that you approach it. And that's a point that we kind of skipped this time around, which is the fact that for in your case, it's HTML on both sides, it's server generated HTML on both sides. And the key aspect here is that server side generated HTML can contain HTML directives, which I think is something that people...

 

Carson Gross (51:02.805)

Mm-hmm.

 

Dan (51:05.45)

Don't think about and it's like a big aha moment once you realize that thing works.

 

Carson Gross (51:12.84)

Yep, yeah, that's a good point. And so just to give a concrete example, infinite scroll, right, an infinite scroll is something that most people would assume you would need to use JavaScript for. But with HTML, you can implement infinite scroll, excuse me, by having an element at the end of a list that issues a new request and then appends the stuff that comes back from the server to it. So it.

 

appends effectively appends stuff. And then that new bit of data that comes down will itself at the bottom have an element that when that element is revealed, that's the event that's used for infinite scroll on HTML. When it's revealed, it'll issue another request. And so you get that infinite scroll or that infinite list sort of style of UX. And it's because of exactly what you said that HTML when it gets content back,

 

processes that content for any htmx directives that are in that Content and hooks up all the event listeners and so forth to make it all work And so it really it makes it just you know The way I like to think of it is it makes HTML much more expressive as a hypermedia And that turns out that you can do you can do quite about it quite a bit of interesting stuff not everything You can do with a single page application frameworks necessarily, but quite a bit and depending on your application you can get away with

 

using it for maybe everything.

 

Dan (52:44.402)

my money whenever you can do something in a declarative way rather than in an imperative way it's a win

 

Charles Max Wood (52:52.275)

Mm.

 

Carson Gross (52:53.468)

Yeah, I think that's a good point. There's one disadvantage to the declarative way of doing things is it's harder to debug. That's the one thing I will say is that at times it can be harder because there's nowhere really to set a break point. But I think by and large, the simplicity of the declarative approach wins in most cases. So I would agree with that.

 

Charles Max Wood (53:19.411)

Yeah, the thing is though is that everything has its tradeoff one way or the other. And so if the declarative nature of it makes it easier to just move forward quickly, and then when you have to occasionally debug it, right? I mean, if... I guess the flip side is if you wind up debugging it frequently, then yeah, then the tradeoff becomes a little less worth it.

 

Carson Gross (53:24.034)

Yeah.

 

Carson Gross (53:42.76)

Yeah, yeah, I think and I try to, you know, one thing I do, it's hard on Twitter because, you know, I'm such a, it's ridiculous. And, but I do try to like, this is, we're, we're all senior engineers at this point. And we all know there are trade-offs. There are times when one approach will work and there are times when it won't work so well. And so there's nothing that's the right answer for everything. My hope with htmx is to make html or hypermedia is the way I would say it. Correct.

 

more plausible for more problems, but it's still not gonna replace, react for everything, that's ridiculous. It's just not what it's designed for. It's really, there are some things that the hypermedia approach is very good at. And we have a couple of examples of people that have gone from a React-based system to an HTMI, or from a React-based application to an HTMX-based application, and they've had pretty dramatic reductions in their code bases, but that's because...

 

First of all, they're willing to accept the less interactive aspects of HTML for their app. Their apps were amenable to hypermedia. And, but then also they had, they already had strong preferences for a particular backend language that they wanted to use. And so, you know, it worked very well for them. But in other cases, it's not going to work so well. So, and I try to, you know, I try to stay balanced about this stuff and be reasonable. There's, you know, there is no silver bullet in software development. You can.

 

Dan (55:06.492)

So

 

Carson Gross (55:07.872)

You can make a mess of HDMX, you can make a mess of React and you know.

 

Dan (55:11.526)

Oh yeah, you can definitely make a mess of React. For sure. Most people do. So two points really. First of all, it occurred to me again, maybe I'm barging into an open door, but I could see you like adding like logging capabilities that would assist debugging HCMX. Like this is what we're going to send. This is what we received.

 

Carson Gross (55:17.368)

So.

 

Dan (55:40.222)

This is what we're replacing with what we received. Stuff like that could really assist in debugging. I don't know if you have such capabilities built in.

 

Carson Gross (55:49.449)

We do, you can turn on log all, there's an htmx.logall method, and if you call that, it'll log every event, which gives you probably more information than you ever want to know about the internals of htmx. So that is there, but it's still not the same for me anyways. The ability to set a breakpoint somewhere is really, really nice. So one thing, if someone's a, you know, we'll get support, people come in and say, oh, this isn't working.

 

on the HTMLX Discord, which is unfortunately our primary support mechanism at this point. And I'll often ask them, hey, I know it is, it's crazy, but it is. Yep, that's where everybody is. But we all often say to them, hey, do you mind running the uncompressed version of HTMLX and then set a break point here in this function and step through and see what happens

 

Dan (56:26.634)

Pretty standard for open source, I think.

 

Charles Max Wood (56:30.271)

Hehehe

 

Dan (56:31.038)

Power for the course.

 

Carson Gross (56:47.5)

That just, you know, it's, it's an easier way to the ability to put a break point somewhere is really, really nice. And that's one thing that unfortunately the declarative, uh, appreciation next takes doesn't give you. So fortunately it works, you know, it's, it's fairly intuitive most of the time. And so, uh, we don't get a ton of it, but, uh, every once in a while we, we will have asked someone to drop.

 

Dan (57:07.318)

Well, if you have a proper build process, you could probably ship map files with htmx and then you wouldn't have to require them to use the uncompressed version, at least in most cases.

 

Carson Gross (57:18.788)

I know, I know, I hate, I hate map files.

 

Dan (57:22.498)

Everybody hates map files, it's just that they're better than nothing. Ha ha ha!

 

Carson Gross (57:26.252)

Yeah, sometimes. I've had so many bad experiences at this point. I'm like, nope, no map files.

 

Charles Max Wood (57:26.885)

Yeah.

 

Dan (57:35.723)

Yeah, one more question, if hopefully we have time for this. So another feature that I saw that I found really interesting in HTML is the option for graceful degradation, like effectively work either with or without JavaScript. Now,

 

To be honest, I don't think in most cases you'd actually run into a situation where you don't actually have JavaScript. And also, HMX being all of 14k, you're probably not going to have to wait a long time for it to actually download. But still, it's a nice filler capability, I think.

 

Carson Gross (58:13.473)

Yeah.

 

Carson Gross (58:20.82)

Yeah, that's so progressive enhancement is the terminology that I often hear used for that. The idea that something works, you know, even when JavaScript goes away, it just doesn't, you know, you progressively enhance stuff. So if JavaScript is present, then you do something a little nicer. But if it's not, you don't. And HMX does support progressive enhancement to an extent. It's, it's, it's you as a developer have to do a fair amount of work to, for that. So.

 

there's a feature called HXBoost. And what HXBoost does is you just put that attribute on something and it'll find all of the anchor tags and forms and hook up basically an AJAX version of that interaction. And what that saves you is basically head processing. So if you click on a link instead of downloading the head and processing all the...

 

script tags and all that stuff in it, it'll just grab the body and slam the body in. And so that can make things feel a lot faster and it's sort of a quick win. A lot of people end up just using HX boost, which is a little unfortunate because it's not the main point of the library, but and some people dislike the feature, but it's an easy way to win. And that works great for progressive enhancement because if JavaScript is disabled, then the link just works the normal way. And so HX boost is an example of a feature in HTMX.

 

that is very progressive enhancement friendly. But if you do something more complicated than that, then you have to start thinking about exactly how you wanna write the HTML X code and then the non HTML X code that is gonna support the same functionality. So as an example, there's an active search example on the website. And if you wanted to make that, so active search basically is you type results, you gotta wait until a pause happens then it'll bring down results.

 

kind of as you're typing. So it's a nice UI feature that you often see in JavaScript-based applications. So if you wanted to make that work for someone who didn't have JavaScript enabled, then that form needs to be set up so that when you hit enter, it actually submits, so it actually submits and then renders the entire page with the results in it. So it's more work. So I would say HTML has some aspects that are progressive enhancement friendly.

 

Carson Gross (01:00:36.968)

But it's very focused on, again, enhancing HTML as a hypermedia. And some aspects of that involve functionality that doesn't degrade gracefully. So you really, as a developer, have to decide whether or not that's important to you for your particular application. That's in contrast with, for example, another great JavaScript library that is also hypermedia-focused, which is called Unpoly. Unpoly is a library that...

 

It's similar in some ways, it's much higher level than HTMLX, doesn't have the focus on HTML that HTMLX has, but it is 100% based on progressive enhancement. So if progressive enhancement is extremely important to you, then Unpoly might be a better library to take a look at than HTMLX.

 

Dan (01:01:24.59)

Interestingly, if we're looking at frameworks like, or meta frameworks like Remix or even SvelteKit, they're kind of embracing this approach as well. In a way it just, you know, they require you to use a certain type of a back end. But, you know, a well-known Remix demo was them basically disabling JavaScript on the client side and showing that most of the stuff still works and effectively it's kind of like the same approach.

 

in a lot of ways. It's about just letting the HTML forms do what they do in the links, but then if the JavaScript downloads and it intercepts them and converts them to edgyx calls. So in a lot of ways, it's kind of similar, it seems, to what you're doing. I also wanted to mention that a lot of interesting things are now happening in HTML, which are making the HTML itself much more appropriate for building...

 

Carson Gross (01:01:54.936)

Yeah.

 

Carson Gross (01:02:07.553)

Yeah.

 

Dan (01:02:22.886)

Let's call it applicative interfaces. Stuff like popovers and dialogues and, you know, stuff that's happening in CSS. And it's, it'll be very interesting to see, you know, how this type works. This stuff works with HTML because it seems like they're kind of made for each other in a lot of ways.

 

Carson Gross (01:02:26.337)

Yep.

 

Carson Gross (01:02:43.86)

Yeah, a good example of that is the new transitions API, which just came out. It's in Chrome. I don't think it's in Firefox or Safari yet, but that lets you do very professional looking transitions between one DOM state and another DOM state. And so HTML as soon as I saw that API, it was like a two liner to add support for it to HTML. So you can use that API with HTML just by specifying.

 

Charles Max Wood (01:02:43.92)

Mm-hmm.

 

Dan (01:02:47.336)

Exactly.

 

Carson Gross (01:03:11.636)

You can either configure it as global or you can specify on a particular swap that you want to use that transitions API So I agree. I think there's a sense my you know in the long run My hope is that the concepts of HTML actually get folded into HTML because I really this is in my opinion Is that HTML is how HTML should work? It should you should be able to make anything on the screen a hyper media control Maybe that needs to be limited because their accessibility concerns as well. So I want to

 

be open to that conversation for sure. But nonetheless, this idea of increasing the expressiveness of HTML, I think if we could do that in a standardized way in HTML, it would be better in the long run, even for the accessibility story, because people wouldn't need to write a bunch of JavaScript, which often can be very difficult to get the accessibility story there right. So I really hope in the long run, the ideas of HTML, which are not that dramatic. At the end of the day,

 

The swapping model for HTML is something called transclusion, which has been around for almost 50 years now in the hypermedia community. It's just never gotten much play within HTML. So my hope is some of these ideas get folded into HTML in the longer term.

 

Charles Max Wood (01:04:31.923)

Cool. Well, I guess the last question that I have is just if people wanna follow you or see what you're working on, see what's coming down the pipe for, or Pike. I can't remember which one it is.

 

Carson Gross (01:04:47.218)

Yeah, so HTML 2.0 should be out. I'm hoping like end of the year-ish, maybe start early next year. I've got a Twitter account which is HTML underscore org. It is quite silly, however, and so if your listeners do not handle silliness online very well, they might not want to follow that.

 

Dan (01:05:02.323)

it.

 

No, they have to follow that. You won't believe it till you see it. That's all I have to say about it.

 

Carson Gross (01:05:11.808)

Yeah, my life definitely feels the same way. But there's also the htmx.org website and there's an essays slash essays if you want some more serious content and thinking about hypermedia and trying to explain, okay, look, this is why htmx is the way that it is. It's not perfect, it doesn't answer every problem, but here's the philosophical basis of it. And then we also, as I mentioned earlier, we released a book.

 

Charles Max Wood (01:05:15.753)

Ha ha!

 

Carson Gross (01:05:38.9)

in July. I mean, every day, like talk about the stars aligning, you know, we release a book and the primogen starts covering it and then a Fireship Dev covers it. It was just crazy. Um, but the book is Hypermedia Systems and you can read it online for free if you'd like at hypermedia.systems. You can also buy a hard copy version of it, which is actually a hard cover. It's a massive book. It's an eight, eight by 11 book. Um, or there's a Kindle version of it as well that you can purchase if you'd like.

 

And that sort of box, if your listeners are not familiar or maybe were familiar with the old sort of web 1.0 style applications, that book walks you through, here's sort of the web and covers like a lot of concepts around the web that a lot of people don't see these days. And then goes on and says, here's a web 1.0 app built in Python. And then let's improve that web 1.0 app with HTML. So it's kind of a gentle introduction, very book-length.

 

version of that. So those are the main areas where you can find me. And then my company is big sky dot software. So you can go there. There's not much there. But yeah, there's a contact if you want to get in contact with me.

 

Charles Max Wood (01:06:53.823)

Cool. All right, well let's do some picks and start wrapping this up. I'm really looking forward to trying this out. It seems like it's a step shy of what I usually use which is Stimulus.js, but it doesn't require all the programming and setup and JavaScripting. This would solve 99% of the stuff that I have to do and then the really customized stuff I could use Stimulus for, so.

 

Dan (01:07:23.426)

I totally agree with what you just said, Chuck. I think that one of the key features of HTML is just how easy it is to use. I mean, all you need to do in order to quote unquote, install it is basically stick a script tag in your HTML. It can even be service served from unpacked. So you didn't don't even need to have it on your own server, although it's probably what you would want to do once you go like production. Um,

 

and just start sticking the htmx tags on your HTML. And that's more or less it. So yeah, it's like the easiest deployment that I can think of, really.

 

Carson Gross (01:08:02.896)

Yeah, there's a, on the essays page, there's an essay called a real world react to HTML export. And in that port, that engineer used stimulus and HTML in combination. So used HTML for the core functionality and then use stimulus for the stuff that wasn't, the HTML wasn't gonna be a good fit for. So you might wanna take a look at that to see an example.

 

Charles Max Wood (01:08:31.815)

All right. Well, let's go ahead and do some picks. Dan, do you have some picks?

 

Dan (01:08:39.97)

I have an outpick. By the way, I've got one of the neighbors has a sing-a-long going on with accordion music and everything. So hopefully, doesn't intrude too much into our recording. It's interesting to hear.

 

Charles Max Wood (01:08:54.447)

I left my accordion in the pockets of my other pants, sorry.

 

Dan (01:08:59.21)

Yeah, anyway, yeah, it's funny I need to go and check who which one which one of our neighbors is yeah having like this anyway So yeah, so I have just the one pick really and that pick is actually this podcast because Turns out that so it's a funny thing. I put the podcast In in my LinkedIn bio and then LinkedIn reminded me

 

that it's my fourth year anniversary on this podcast. So, yeah. So it turns out that me and also Steve, because I think we joined more or less in the same day, the same episode. So both, yeah, so both of us have been on the podcast for four years. And so I want to thank the more or less 200 or so guests that we interviewed during this time that...

 

Carson Gross (01:09:32.605)

Hey.

 

Charles Max Wood (01:09:32.625)

Oh nice.

 

Charles Max Wood (01:09:40.319)

Pretty close, yeah.

 

Dan (01:09:55.038)

very much includes you, Carson, because I've learned so much from you and from all our other guests. This is becoming one of my primary sources of information about what's actually going on in the web today. Also, I want to thank all our listeners. They're a growing number, as you pointed out, Chuck. I never thought that I would have the ear of so many developers. And it's always

 

Carson Gross (01:10:10.773)

down.

 

Dan (01:10:24.434)

get to conferences and have people walk up to me and tell me that they really enjoy the content that we're putting out and that it helped them in their careers. And I remember somebody told me that he listened to one of our episodes about some topic and then he had an interview and he was asked exactly about that topic and he had like the perfect answer for them and he got the job again. Thanks to our podcast. So that was an awesome story.

 

And of course, I especially want to thank you, Chuck, and also AJ for welcoming us on the podcast, because you were there before us. Also want to thank Amy, who's no longer with us, but still a good friend and very much remembered. And Steve, like I said, who joined with me. And so that would be... Oh, and I want to mention to all our listeners who probably know it or at least should know it.

 

that we have an amazing archive of past episodes, which I think is becoming one of the primary resources of good content for the web. Like, you know, again, stuff like what we talked about today. My other pick, well, kind of the same thing that I always mention is the ongoing war in Ukraine, which is still very much ongoing. They're heading into the winter. Russia is intentionally targeting.

 

their electricity grid to get them to suffer through the cold winter. So keep the people of Ukraine in your hearts, do whatever you can for them. And those would be my picks for today.

 

Charles Max Wood (01:12:03.875)

Awesome. I'll throw in my picks. I've been a little bit preoccupied. I haven't played any board games lately. Mainly, I'm running for the state legislature here in Utah. And so last week I basically didn't sleep. I just met up with a whole bunch of delegates and stuff. It's a special election. And so basically have like two or three weeks to run. And we're

 

Carson Gross (01:12:20.621)

Hey!

 

Charles Max Wood (01:12:32.723)

convincing 150 delegates to vote for us is the way that it works.

 

Dan (01:12:35.654)

Also, it's not open to the public. It's just those delegates that are like the vote, the voters.

 

Charles Max Wood (01:12:42.068)

Yeah. So effectively, I'll just explain it because it's really easy to explain, but the way that it works in Utah is, um, I think our legally, our, uh, governor could appoint whoever he wants, but the way that it's worked for the last quite a while is that the party holds, uh, special election. So if it's a Democrat, the Democratic party will hold the special election.

 

If it's a Republican, the Republican party will hold the special election. The senator that resigned is a Republican. He's actually lives around the corner from me. And so since I'm a registered Republican in the state of Utah, I was eligible to run because I also live in the Senate district. And so the party runs it and then they run their delegates. So.

 

I guess the other complicating factor is if a district crosses county lines, then the state party runs it. And if it's entirely within a county, then the county party runs it. And since I have 15 delegates that are in Salt Lake County and the rest of the delegates are in Utah County, the state party is running it. So it's state delegates that do the voting. So there are actually 148 state delegates in my Senate district. And so...

 

Yeah, we're doing the election a week from Wednesday and then whoever gets appointed fills in for the governor will then appoint them to finish out this senator's term. And then what's crazy is, is this senator's term was up at the end of next year. And so if I win the seat, I have to defend it next year. So

 

Carson Gross (01:14:26.84)

Ha! Man oh man, good luck!

 

Charles Max Wood (01:14:29.752)

Anyway... So-

 

Dan (01:14:31.838)

How many people are running?

 

Charles Max Wood (01:14:34.308)

There are about 15 people running.

 

Dan (01:14:36.379)

Oh, that's a good number.

 

Charles Max Wood (01:14:38.095)

Yeah. And, uh, you can still register for this to run up through tomorrow, but at this point, if you're getting into the race, you're really, really late. Um, cause they've already had a debate. We've already had a whole bunch of campaign events. And so anyway, it's been really interesting, but the other complicating issue for me is that tomorrow I fly to Amsterdam for rails world. And so I will be out for a week of the campaign. And so, um, I'm going to be calling people in the middle of the night in Amsterdam.

 

Dan (01:14:49.43)

Heh heh heh.

 

Charles Max Wood (01:15:07.015)

so that I can get them during the day here. I don't have a board game picked this week and I feel kind of bad about that. My son keeps wanting me to do D&D with him, so I will pick D&D, Dungeons and Dragons. I have to say that...

 

If you want to be like the dungeon master, the person telling the story, you have to do a bit of work or have played a bit in order to understand enough of the mechanics to be able to be the dungeon master. But the nice thing is, is that if you're new to Dungeons and Dragons and you have a group that's got people who have played for a while or a dungeon master, that's really good, then, um, you can jump in as a complete newbie and people will just help you to know what to do. Right. So you can decide, I want to cast this spell. And.

 

The other thing is that I tell people is, don't worry so much about doing the right thing, just have fun, right? So it's like, I wanna try this uber awesome fireball spell that uses all of my energy up so that, right, go for it, right, and then you have to go when you have to whack them on the head with a stick because you can't use any more magic. That's totally fine and make it fun, right? And anyway, some people do get pretty into it and

 

They get frustrated when you don't do the right gameplay move. I used to play it with my brothers and sisters and one of my brothers. He quit in frustration because my brother-in-law kept doing stuff that was just off the wall. And so the rest of us are howling in laughter and he's upset because my brother-in-law is not taking it seriously. So just go in and have a good time.

 

Dan (01:16:52.038)

Can't you also, if you're a dungeon master, can't you just make your life easier with chat GPT or something?

 

Charles Max Wood (01:17:00.74)

I hadn't ever thought of that, but I am liking where that might go.

 

Charles Max Wood (01:17:10.792)

Anyway, so I'm going to pick Dungeons and Dragons. It's funny because I've been reorganizing my office and I found all my Dungeons and Dragons manuals. So I'm probably going to start playing it with my nieces and nephews. I have two nephews in high school in Alabama and one nephew who just got a mission call for the LDS Church. He's going to Helsinki, Finland.

 

and then his younger brothers in high school as well. And so I think I might be able to pull together a group with them and some of my kids' friends and just use like Roll20. So I'm gonna pick Roll20 as well. It's kind of a nice online way of playing D&D with people. And then we just get online and play on Monday nights or something. So anyway, I'm gonna pick that. And then I'm gonna pick another thing that's game related that I kinda wanna start taking my kids to because it's right up.

 

the same alley with, especially my older son. They have Magic the Gathering night at the local game store on Fridays. And what you do is you basically buy a pack of random cards and then you play a tournament with the cards that you bought, right? So you don't bring your own deck and you don't have your own cards that kind of synergize nicely together so you can build out your own deck. You just kind of end up with this pile of cards.

 

and then you can kind of pick and choose a certain number of them to play each round. And I can't remember what they call it, but it seems like a ton of fun. And I've played plenty of games like Magic the Gathering. I've played Magic like twice in my life ever. But anyway, that seems like a lot of fun. And then finally, I know I'm kind of generically picking things. But the other pick that I have, I found an old model truck that I have yet to assemble.

 

It's a Ford F100. It's just like that big if you put it together. I was talking to my wife the other night because she was helping me kind of get things organized in here. I have things mostly together now at this point. We switched rooms with my daughters because they couldn't keep this room clean and the other room smaller. So it's a smaller mess or maybe just a deeper mess depending on how you look at it. But anyway, I was like I've had this for years and years since I was in college.

 

Charles Max Wood (01:19:31.955)

and I never built it. And I was like, but I have trouble getting rid of it because I remember building these with my dad. And my dad passed away like five years ago. And so it's just been hard for me to let go of it. And she's like, just build it with your kids. And I'm like, oh yeah. So anyway, so in a couple of weeks I'll be doing that. And then finally, my last pick is, and I use this all the time, it's my Traeger. It's a smoker. And so...

 

Carson Gross (01:19:51.774)

Nice.

 

Charles Max Wood (01:20:02.159)

Yeah, next Friday and Saturday, I'm planning on making ribs on Friday and brisket on Saturday because we're going to have company. And oh buddy, I just can't get enough of that stuff.

 

Carson Gross (01:20:12.414)

Oh yeah.

 

Charles Max Wood (01:20:13.927)

Those are my picks. Carson, what are your picks?

 

Carson Gross (01:20:17.184)

Well, I'm going to just go with technical stuff. Sorry. A little boring, but, um, my, my first pick is going to be unpoly.com. Um, it's a, an alternative actually to HTMX. Um, but I think it's, it's not as well known as HTMX and that's a little bit unfair, um, you know, again, I think HTMX is benefiting from right place and right time, so I would encourage listeners to go take a look at unpoly.com and just give it a, you know, give it a fair shot. And, uh,

 

Charles Max Wood (01:20:20.664)

Nope, it's all good.

 

Carson Gross (01:20:46.396)

Particularly if you're interested in progressive enhancement, I think it's a real good option for building hypermedia-oriented applications at a higher level than HTMLX. And then the second thing that I would pick is AlpineJS, which I don't know, are you guys familiar with AlpineJS? Is that?

 

Charles Max Wood (01:21:07.747)

I think we did an episode on it, didn't we?

 

Dan (01:21:07.827)

I know of it. Yeah, I'm 100% sure we've done an episode at least one about it. I know of it. I have not actually used it.

 

Carson Gross (01:21:14.209)

Okay.

 

Carson Gross (01:21:18.532)

Okay, Alpine.js is a library created by Caleb Porzio and it's a much more, it has some Ajax functionality, but the core library is more focused on front-end interactions and has reactive aspects to it. But it's a really neat library that dovetails very well with HTML Max. And so if you're writing an HTML Max application and you feel the need to do scripting Alpine.js.

 

might be a good option. It's definitely worth checking out. It's much lighter weight than React and more focused on sort of front end interactions, but very well thought out. And the engineer behind it, Caleb Porzio is a really smart guy. So there's a lot of really neat stuff going on there. So those would be my two picks. I think those libraries, both are good libraries that are certainly, they're in the same arena as HTMX and are worth considering.

 

Dan (01:22:15.83)

Another one that might be interesting to use with HTMX would be Astro, I'm thinking.

 

Carson Gross (01:22:22.996)

Yeah, the Astro people have expressed interest. There's a couple, there's a, it sounds like just a few small changes that they need to make with their sort of server side infrastructure to, to really make Astro sing with HTMX. So I'm looking forward to seeing, seeing that stuff come out from them.

 

Charles Max Wood (01:22:44.507)

All right, well, let's go ahead and wrap it up here. Thanks for coming, Carson. This was a lot of fun.

 

Carson Gross (01:22:49.696)

Yeah, thanks guys. I really appreciate it. I know htmx is not the normal javascript framework and I'm not the normal javascript developer so I appreciate you guys having me on and listening to me listening to me rant.

 

Dan (01:22:50.175)

Yes, it was.

 

Charles Max Wood (01:23:00.815)

Yeah, well, like we said before, it does things differently, but it does things in a way that is intuitive and useful.

 

Carson Gross (01:23:09.653)

Yeah, hopefully useful.

 

Charles Max Wood (01:23:12.121)

All right, well, folks, until next time, Max out.

 

Dan (01:23:12.886)

For sure.