How HTMX is changing the web, with Carson Gross

[aravindmc]

How HTMX is changing the web, with Carson Gross

[Jeremy Howard]

Introduction

Hi there, this is Jeremy Howard from Answer.ai and I am here with Carson from HTMX and Carson’s probably not going to like this if I introduce him in two glowing terms because he’s a very humble man but I can’t help it. There’s just a few people in the world, very few people in the world, who I assign the epithet genius to and Carson is one of them, I told you, he’s one of the very few. He looks and sounds like a little league baseball coach and that’s because he is, I’m sure he’s a very good one as well but that is not the genius that I wanted to talk about today, I wanted to talk about HTMX.

Welcome Carson Gross

So Carson, welcome.

[Carson Gross]

Thank you, I appreciate that, you know, I appreciate you saying that but no, I can’t agree with that. I do look like a baseball coach. And you know, baseball makes people crazy.

[00:01:03]

So I have a lot of people that like me and then a couple people that don’t. And so I’ll leave it at that. I love it. And I feel like I know about your your other life. Yeah, it is definitely pretty funny. Sometimes I’ll just be like, man, this isn’t very different than my online.

[Jeremy Howard]

That’s great. So well, something we both share in common is that we live a long way away from everybody else doing what we’re doing. And we do things in a really different way to everybody else.

HTMX: The Most Misunderstood Technology

So that’s where I wanted to start. You know, HTMX is like the most misunderstood piece of technology I’ve come across in my god, how long I’ve been coding for 40 years of coding. So I wanted to help people understand it. And sure, I think the best way for people to understand it would be to read your damn book. So I’m just going to share like that on the screen. But that was short for a pretty short interview.

[00:02:00]

So here’s your damn book. Not just you, you and Adam and Dennis, hypermedia.systems, called a main name. And the whole thing’s free, for God’s sake.

HTMX Book: Free and Available on Libgen

What are you trying to do?

[Carson Gross]

You’re like, yeah, you’re not gonna be this rate. Now, books are not a good way to make much money in general. I know. Yeah, you know. And even worse, I uploaded the EPUB to libgen. So if people, people want, if they don’t want to pirate your book, they can, they can do so with my blessing.

[Jeremy Howard]

No, but they’re not going to do that now. Because part of getting stuff off libgen is like, you know, sticking it to the man. And if you’re like uploading it there yourself, it’s like, why even bother?

[Carson Gross]

Yeah, exactly. Well, you know, I figured someone was gonna do it anyway. So it might as well be me. So yeah, but yeah, there’s a hardcover that’s, if you really if you want to spend some money on a physical artifact, the hardcover, it’s pricey.

[00:03:00]

And my understanding is it’s hard to get in Australia. But it, it has a really cool cover that was done by us graphics. Really, really happy with that. And then we just released the soft cover to Yes, which on Lula with a beautiful and that’s, yeah, that’s got a pixel art cover that we’re super happy with. It’s we there was a, a pixel artist on fiber named ash. And he did an unbelievable job with it. So super happy with that.

[Jeremy Howard]

Yeah, I love it. And one of the few pieces of software were released recently that was initially available only on floppy disk.

[Carson Gross]

Yeah, we did that for a couple weeks. We had a we have floppy disks. I don’t think they’re available on the store anymore. But you can buy them for a little bit. So yeah, we have some fun.

[Jeremy Howard]

The Book’s Focus on HTML and HTTP

So it’s all have some fun. An interesting thing about your book is that actually the entire first part, not just the first chapter, but the entire first part isn’t about your thing at all.

[00:04:08]

It’s about Yeah. It’s about HTML and HTTP, I guess. Yep. So I wanted to start there because some of like, so I’ve been coding for a while. And I hadn’t quite noticed until recently that there’s a whole generation of people who are competent full time coders that are not familiar with any of the basic concepts of the web because they program at a totally different level of abstraction, which is like, you know, React and JSX and all that. So I thought like, it might be fun to go back to a, an existing web 1.0 web page is Richard storm and personal current website.

Richard Stallman’s Website: A Web 1.0 Example

Could you like just teach us a little bit about what’s going on here? What are the underlying things? What’s the buttons like? What are the what are the affordances provided by the web that Richard’s using here?

[00:05:05]

[Carson Gross]

Yeah, yeah. So this is very much an old school, very, very old school web page, you know, and there’s always been this tension on the web, like, is it a document? Is it is the web about documents? Or is it about something more than documents? And how and if so, how much more. And so here, you can see sort of a standard web 1.0 style web page with a bunch of links or anchor tags that link to various things and let you click on them. Okay, so let’s look at one.

[Jeremy Howard]

So I’ll just click here. So inspect. So here is an anchor tag. So it’s an anchor tag.

[Carson Gross]

Yeah. And so the important, the important thing here is the href attribute. So that href attribute, which specifies another URL, that when you click on that on the text that’s included inside that tag, the browser, which is a hypermedia client is going to issue an HTTP GET.

[00:06:05]

And it’s going to take whatever the the hypermedia responses to that and then load it into the browser. How it’s loaded can be affected by a bunch of different things, affordances. So there could be a response header that tells it to do something specific, maybe do a redirect or something like that.

[Jeremy Howard]

Let’s take a look, because you know, we can something I definitely encourage people to do is to kind of watch their browser doing that, which you can by popping up here. And if I refresh, we can see.

[Carson Gross]

Yeah, you go ahead and Yep, exactly. So you can see, this is the response that came back from that GET request. And so you can see the request URL that was made to and just a bunch of these are headers. These are basically named value pairs. And there’s some that are sent as part of the request. And then there’s some that come back as part of the response as well.

[00:07:01]

And that’s that’s all tied up.

[Jeremy Howard]

And that’s actually the body of the response. But I guess we should look at the response headers. Yep.

[Carson Gross]

Yeah, yeah, these are the response headers. So you know, there’s an E tag in there. And that’s what they actually call this. Yeah, that’s what it looks like when it’s raw. Yeah. So HTTP.

HTTP: The Underlying Transfer Protocol

So what you’re looking at here is sort of a partial representation of HTTP, which is the underlying transfer protocol, the hypertext transfer protocol. It’s what HTTP stands for. That’s the that’s the core network format for the web. And that’s how web browsers in general make requests.

[Jeremy Howard]

So I was just gonna say, we basically have two affordances here, right? One affordance is like, underlined things I can click on, just the links or anchors. And the other is a form I can fill out with a button. And one of the interesting things you point out in your book is, in terms of like, HTML itself, that’s it, the entire set of affordances provided to interact with a web page are those two things.

[00:08:06]

[Carson Gross]

Yeah, yeah, affordances. It’s such a broad word that I think people could could argue about that. But those are the two primary interactive affordances. Or another term I would use for those is they’re the two main hypermedia controls, interactive hypermedia controls in HTML. So so taking a step back again, when you’ve got so how does the web work?

Hypermedia Controls in HTML

Well, you’ve got documents, let’s just start with documents. And this is a, this is an HTML document stored somewhere. And when that document comes down, embedded within the presentation information are these interactive elements. The control elements is what Roy Fielding, the a tags and the form tags, a tag and a tags and forms. And you can also argue that like an image is a hypermedia control, because it’s going to drive another request that downloads an image element that’s then inserted.

[00:09:03]

So there’s a you can get into the weeds and that kind of stuff.

[Jeremy Howard]

It’s not interactive to use your terminology.

[Carson Gross]

Yeah, it’s not it’s not something that the user selects. You know, when Fielding talks about what makes the web special, he, he talks about users selecting actions based on his fielding.

Roy Fielding and REST

Sorry, Roy Fielding, Roy Fielding is the guy who wrote the famous or somewhat famous, it was much more famous, I guess in the past, dissertation on the web architecture. And that’s what gave us the term rest.

[Jeremy Howard]

Yep.

[Carson Gross]

So that dissertation, he and I’m going to be honest with you, the dissertation is a little hard to read. But, but one of these core ideas with the web has always been the embedding of interactive information directly in the document in the presentation information. And so you have this mixing of concerns between the presentation as well as the network stuff you can do with the presentation now in a document like, like fieldings, like, you know, it’s hard for a lot of people.

[00:10:04]

It’s like, these are just links. They’re just links to other documents. Yeah, and that’s true. But then that form starts to get at what really, you know, I think HTML two added forms. And when forms were added as a hypermedia control, that really changed. Yep. Yeah. And so you can see there, it’s action rather than HRF. I don’t know if that’s good or bad. There’s a lot of inconsistencies in HTML. It’s a very, it was grown very organically. And so it’s the text. And so forms are much more complicated, because they, you know, the form of the request that’s made depends on the state of the inputs inside the form and all this other stuff. You can also issue posts. So you see there, it says method equals post. So it’s going to make a it’s going to make an HTTP POST request rather than a GET request, which is what we saw for the links.

Forms: The Spark for Web Applications

Yeah. And so the forms when forms were added in HTML two, I think that’s when the web went from really sort of a traditional hypermedia system, like the old school documents, like the way the web kind of grew up was it was, it was more of a document oriented system.

[00:11:18]

And when this form came along, it was sort of like a spark that made it possible now to build app web what we today call web applications. And I don’t know how much thought went into that, like how revolutionary that was.

[Jeremy Howard]

The Power of POST Requests

I mean, I remember at the time it happened, it was, it was exciting, because like, going behind the scenes as to what happens, like when a POST request happens is the contents of that form get sent to your server. And then at that point, you can run any program you like, do anything you like, and send back a response. And so I remember it was like an exciting time for the internet, because suddenly, you could compute on these things.

[00:12:06]

[Carson Gross]

They really converted the web from a document, you know, a document based like kind of like gopher and gopher wasn’t a great example. But there were a bunch of these sort of document oriented hypermedia systems that were around even, you know, low just purely local ones. But when once you got forms that now you have a distributed application architecture, and not necessarily a good one in many ways, but but had some real big advantages to it, the primary one being that there was this sort of universal client, the browser that was available everywhere.

The Web’s Universal Client: The Browser

And so to give your application to people, you just had to give them a URL. And that was it. And that’s, you know, that’s one of the, that’s one of the reasons why the web, despite all the problems with it, has has done so well.

[Jeremy Howard]

Yeah, well, let’s talk about those, like, limits or constraints or whatever.

Limitations of Interactive Affordances

So I will, you identify them, and you list them in the book.

[00:13:06]

Very eloquently. So I’m just going to go ahead and tell you what you told me. So some key limitations here of these interactive affordances. Okay, number one, there are only two types of things that can interactively generate a request. One is the anchor tag. The second is the form. Number two, anchor tags can only call get request. Forms can only call a get or a post request. So they’re pretty limited in what they can do. So they’re limited in terms of the elements, then they’re limited in terms of like what, what interaction can cause a request. And so in this case, only clicking a link or clicking a button can cause a request. So things like scrolling, you know, moving a slider, scrolling something into view, typing on the keyboard.

[00:14:02]

And then I think perhaps the one I found most interesting, because it just seemed such an obvious implicit thing to me, I’d never realized it was a constraint, is that when you click on a button, you know, or a link, the information that comes back from the server, there’s only one thing that the browser can do with it, which is to replace the entire web page.

The Browser’s Single Action: Replacing the Entire Page

Although in this case, it looks like maybe Richard Stallman’s site search button actually doesn’t work. But oh, yeah, here it comes eventually.

[Carson Gross]

So what you what you just saw there is one of the problems with the web, right? There was no visual before like the the browsers have actually gotten much worse at this telling you, hey, something’s going on, like, wait.

[Jeremy Howard]

Yeah, so the result came back from the browser. And the result of that, in fact, I guess we could do the same thing we did before, right, which is we can go into our network tab.

[00:15:04]

And if I refresh this, it should be an option to refresh the post request. And we should be able to see it. Here it is. So yeah, there’s the post request. And the request headers include, you know, various things. But I guess the interesting one is the payload, which is the form data. The response thing comes back, which is HTML. That’s the body of the response. And so the server, yeah, tell us about what happened then really on the server when it received this HTTP.

[Carson Gross]

Server-Side Processing of HTTP Requests

Yeah. So the server received that post request. HTTP is a very simple network format. If you’ve ever studied any sort of networking at all, it’s very simple. And so those name value pairs were encoded in the body that was sent up. And so one of the one of those values was the search term.

[00:16:03]

And then on the back end, there’s some program that executes and figures out which pages have that term that you’ve passed up on it and then constructs URLs to link to them and then presents that beautiful search result that we saw in the screen. And it’s sort of a full page thing in there. I noticed that they did not use the very common. First of all, they used a post rather than a get. And arguably, that’s not correct. Because for a search, you’re not you’re not asking it to mutate anything. And so you probably would using a get would actually make like the input values would end up in the URL and then you would have a copy and pasteable search URL and so forth. And so I noticed that they also didn’t do a redirect. So when you hit refresh, you saw another post.

[(unidentified)]

Yeah.

[Carson Gross]

And depending on exactly what the post does, that can be a bad thing, right?

[00:17:03]

Like sure buys a ticket, you know, it could buy another ticket. So it’s, you know, just this is sort of like the old school grunky web that we’re looking at.

[Jeremy Howard]

HTMX: Removing the Constraints

Okay, so yeah, so this is the thing that blew my mind Carson is that you identified these four specific constraints of what a web browser can do. And those constraints are determined by the specs themselves, right? And somehow, and we’ll come back to how later, I don’t know how, but somehow, you realized, or asked the question, what happens if we remove these four constraints? Right, you realize that we can using JavaScript. And then with the right script, it’s almost like a polyfill for the browser. It’s almost like saying, let’s pretend the browser didn’t have those constraints. And like, so just adding a single script tag, it’s like, okay, now the browser doesn’t have those constraints. And so that is HTMX, right?

[00:18:00]

HTMX is like the polyfill, where we say, let’s pretend the browser doesn’t have those constraints.

Click to Load: A HTMX Example

And so you have then a bunch of examples here, right, such as click to load. And it is still let’s find it here. Okay, so you’ve got a table, right? And in this table, when I load more agents, it loads more agents, and it did not refresh the screen. It didn’t. Yeah. And it’ll the actual button here, which is in the last row of the table. We’ve got a new one now. But here we are in the last row of the table.

[Carson Gross]

Yeah, it’ll call span good old center tag and call span three.

[Jeremy Howard]

Here it is. Now you’re not you know, this button, it’s, you know, it’s not in a form.

[00:19:01]

It doesn’t do a submit. It’s like, but it’s all still just HTML. And on these examples, I love that I can actually click show. And it actually shows me the HTTP request that happened, right? The HTTP response that happened. And so we’ve got something that looks in a lot of ways, a lot like Richard Stallman’s website. But it behaves like a modern, you know, SPA style app. So I guess like I was thinking, like, well, maybe we should, like, how are you think this is best to explain? But like, how is it like, what are the constraints that we’ve kind of removed here? And how is removing those constraints, in this case, allowing this button to do this thing? To do some magic.

[00:20:00]

Yeah, and actually, maybe before we do, I’m going to switch over to a version where we get to see the server.

Fast HTML: A Simple Wrapper for HTMX

And of course, I then get to show off fast HTML, which is like an extremely simple wrapper, largely around the genius of Carson’s work, and also the genius of something called ASGI. And the details don’t matter. But here, this is basically says, this is a route. So when you go to slash, call get, it’s going to return a table with a table header with name, email and ID, a table body with five copies of making a row, which has an agent and a null.org id. And at the bottom, it’s going to have that button that we saw. And so if we run this, so I think it’s kind of fun looking at it on the server, because we can now see the server. So if I go there, you can see something looking pretty similar.

[00:21:00]

And I just do one at a time, load another agent, like sure, click. And yeah, it’s it’s actually calling when I click this button. It’s actually calling more. And more is just returning. You know, another row. Plus, yeah, add row. And if we look at the network tab, when we click load another agent, we can see more. And it looks very similar. It’s a get request, it’s to a URL, it’s got headers. Um, but the response is pretty weird looking. So yeah, where do you want to start?

HTMX Attributes: hx-get, hx-target, hx-swap

How do we how do we learn about how these?

[Carson Gross]

Well, let’s go look at the let’s go look at the button. Look, I think you just inspect it. And we can go through each of the attributes on it. So basically, HTMX consists of attributes that you put into your HTML, because that’s how HTML has worked.

[00:22:05]

You know, you use attributes to specify network interaction behavior. And here, there’s three attributes. So hx get hx target and hx swap.

[Jeremy Howard]

So they’ve all got an hx dash on the front. So does that mean Yeah, all of the stuff you’re adding is always going to be have this pretty.

[Carson Gross]

Yeah. Yeah, we use the hx prefix to namespace it effectively. You can also some people prefer using data dash hx, because that’s more that’s in spec. But I’ve been told by the browser people that this will never break a browser. So. So I like the shorter version of it. But what hx hx get says it’s effectively the same as href. It’s saying, here’s a URL that I want you to interact with, like, here’s a here’s a hypermedia endpoint that I want you to interact with. And that endpoint is then specified as slash more, which you’ve set up a handler for.

[00:23:00]

[Jeremy Howard]

Take a look at that. So here’s my more. So when Yeah, so when somebody clicks this button, it’s going to send a request to and a get request. And now I get this is the thing that I find a lot of people don’t understand people like are using PyScript or Wasm or like, how are you getting Python in the browser? And it’s like, we’re not this is running on the server.

[Carson Gross]

Yep, yep. Yeah, everything’s it’s it’s much, it’s much more like the traditional web application where your HTML, I don’t want to say it’s dumb, necessarily. But it’s just everything specified in terms of what I would call hypermedia interactions, rather than in terms of, you know, sort of programmatic interactions, where you’re consuming an API and building stuff sort of locally in the browser. So that first attribute hx get is specifying sort of where to send the request to and how to send it. So you can do hx post if you wanted it to be a post for some reason, or whatever.

[00:24:00]

But hx get makes sense here. And then the next attribute is hx target. And this is really I think, this gets at that last element of I think, yeah, probably Yeah, I agree. I think it’s the most important one. What this lets you do is say, okay, you’re going to get back some HTML from this slash more URL from this request, this get request you make to that URL, where do you want me to put it?

[Jeremy Howard]

So normally, it’d just be like, just replace the whole page. And they call that a full page refresh. That’s the normal.

[Carson Gross]

Exactly. So that and that’s what links and forms do by default in HTML by default.

hx-target: Specifying the Target Element

And so this allows you to say, okay, when that HTML comes back, I want you to put it here.

[Jeremy Howard]

I want to put here it is here is hash replace me. So you’re using CSS selector syntax there.

[Carson Gross]

Yeah, exactly. So we decided to reuse the CSS like this. It’s universal people understand it. And so that tells that tells htmx where to put the content that comes back from the server.

[00:25:02]

hx-swap: Specifying the Placement Method

And then the the next attribute, which is hx swap, tells htmx how to place it. So in this case, we want to replace the entire table row with two new table rows.

[Jeremy Howard]

And so that that so there were the two new table actually, maybe we should just look at that network tab again to see the two table rows. Yep. Okay, so here’s the response we get back, there’s the table row for the new agent. And there’s just a copy of basically the one we just saw.

[Carson Gross]

Yeah, same button, right. And it’s going to replace the same, same element and so forth. Yep. And so, you know what, with this, this new HTML is now going to replace the entire existing table row. And so that’s what this because of that is and that’s going to replace the entire thing. Now there’s there are other options.

[Jeremy Howard]

So for example, you could say, let’s use one, let’s use one now, because actually, I think we could like, simplify this a little, right?

[00:26:02]

Modifying the Example to Append Rows

If we took the table, and if we gave the table an ID, okay, so we give that there.

[Carson Gross]

And then like, we could just like, say, Alright, let’s like, can we kind of like do something like this, where we just one row, and maybe like return it just before the, I would change that to a, I would change, let’s see, how would I do this, I would, I would make add row no longer in the table, I would put it after the table.

[Jeremy Howard]

Yeah, exactly. So let’s just grab the button.

[Carson Gross]

Grab that button and move it out of the table.

[Jeremy Howard]

And you do exactly. Okay, and so we don’t need add row anymore. And we can take the ID off of it. Okay, that makes sense.

[Carson Gross]

He had a body.

[Jeremy Howard]

I kind of like these little lines that VS code can add.

[00:27:01]

So you can kind of see this is where the T is.

[Carson Gross]

Okay, I would put it on the T body, a body.

[Jeremy Howard]

Okay, well, in that case, I’ll do that, too.

[Carson Gross]

Because that’s where that’s where we’re gonna where that’s where we’re gonna append the thing, right?

[Jeremy Howard]

Ah, okay. All right, we can do that for sure. So okay, we’ve now got the body, we’ve got these rows, add row, ID equals agents. Okay, that looks pretty good to me. Okay, so now we don’t have any more, that’s easy.

[Carson Gross]

Fast HTML: Mapping Between HTML and Python

Sorry, I’m learning fast HTML as we go.

[Jeremy Howard]

Absolutely. Yeah. The interesting thing about fast HTML is because it’s a direct mapping, like one to one mapping. So in fast HTML, the it kind of there’s a almost unique thing about Python, which is in Python, you can have positional and named parameters.

[00:28:01]

And yeah, you can see this doesn’t have a name. And so you can have as many of these as you like, and they become positional parameters. So they’re children. And then you can have as many of these as you like. And as you can see, these are named keyword arguments, and they become attributes. So it’s kind of like the mapping between HTML and Python function syntax is almost uniquely perfect. Yeah, yeah.

[Carson Gross]

Targeting the T Body with hx-target

Okay, so now what we want to do is we want to change HX target to be agents, because we’re going to target that T body with the response. And then, rather than outer HTML, we’re gonna I’m gonna have to go look this up. HX.

[Jeremy Howard]

I gotta say the reference for HTMX is great. I just type HTMX reference. And it’s really nice. And here they all are core attributes.

[Carson Gross]

Yeah. So we want to we want to for if you look at HX swap, we want before and that’s the terminology that the DOM API uses to insert something before it because we want to insert this new row before the end of the T body, not after the T body, but like, as its last child effectively.

[00:29:11]

So before and as the right HX swap for that, I think nice. So I think that should work.

[Jeremy Howard]

And now what’s going to happen is there is Yeah, and if we amazing inspect, not at all, then we should say I’m always a little shocked when my stuff works. So now we’ve just got one thing coming back. So I think this is a great example of like, what happened here.

Revised Button: Moving it Outside the Target Area

So maybe just talk us through this revised button here.

[Carson Gross]

Well, so we moved it, we moved the button out of what we were replacing, like previously, we were replacing the button with a new version of itself. And that makes sense when you’re doing things like for example, loading another page, because you want to update the you want to update the URL with like the next page.

[00:30:04]

So when you load the second page, you want the button to then load the third page. And so you want to have a chance to update the URL. So it makes a lot of sense in sort of a click to load more scenario. But here, when we’re just like adding new rows, to to a data structure, it doesn’t make as much sense, you kind of want it, you’re hitting the same URL over and over again. So in that case, why not move the button outside of the target area? And this is the same, you’re just going to HX get is the same. The target is a little different, we target the T body, because that’s where we want to put the new content. It’s not we’re not replacing a parent. Yeah. And and then that before n says, Okay, when you get a response, I want you to stick it before the end of that T body. So that’s the, that’s the dom way of saying like at the end of the children.

[Jeremy Howard]

HTMX’s Small Surface Area

So I think something that I didn’t understand at first is how extremely small the surface area of what htmx touches is, you know, and it’s basically the core attributes.

[00:31:09]

And there’s also I just having a look. Yeah, there’s a few more here. Well, some of them are really obvious, like, Oh, this is just the same thing, but a different verb.

[(unidentified)]

Yeah.

[Jeremy Howard]

Almost none of those I’ve used. So I can say confidently, this is basically the surface area that normal people like me need. Yeah. And then like you kind of said that even the contents of them are like, copied and pasted, like to the name, the semantics, everything to like how the DOM works. So it’s like, right, kind of like very direct mapping. And even then, you’ve also like got two versions of swap or B or not two versions of select or B or not. So there’s like, it’s a very small, little set of stuff to know. And when you know the basics of how the browser and the web works, it’s super natural.

[00:32:03]

That’s my experience with it.

[Carson Gross]

HTMX: Rhyming with the Web

Well, I think it rhymes really well with the web, like it goes with the grain of the hypermedia infrastructure. And so if you’re familiar with and comfortable with that, which as you pointed out, a lot of younger people aren’t a lot of younger web developers, I should say, aren’t, then I think I can come across as being very foreign, you know, so I think that’s why you see some of the misunderstandings around htmx just like, Oh, this is terrible. Like, why would you do this? Everything has to be a network request? Well, not everything. Yeah.

[Jeremy Howard]

So I think it’s not, it’s also like, surprisingly fast, because the kind of full page refresh, I think, often it feels slow. And it is slow, it feels slow, because you see the whole thing flashing and changing is slow, because it requires like the reparsing the CSS and re handling any JavaScript and relaying everything out.

[00:33:00]

But when you just insert, so this is what I noticed, you know, when I was showing the CEO of Vercel this, you know, and he was trying it out.

HTMX’s Performance Advantages

And particularly because like Vercel has this kind of edge caching thing working, right. And he was just like typing and hit enter, it’s like boom, boom, boom, he’s like, his mind was blown. He didn’t, you know, he was like, I didn’t know this is what the hypermedia application can feel like.

[Carson Gross]

Yeah, it can feel really good. And the browsers are very good at displaying hypermedia. But some would argue that’s what they’re designed to do. And so, you know, I think, yeah, you know, obviously parsing, like little bits of HTML, that’s something that browsers incredibly fast at and inserting it into the DOM is also very fast. Yeah. And so if you’re not trying to do a bunch of like reconciliation logic, like a lot of SPA libraries do, you can be very fast, you don’t you are, you know, to an extent, you’re more dependent on that, like network latency.

[00:34:00]

[Jeremy Howard]

So I have the worst because I’m using American servers, and I’m in Australia. And so the speed of light basically means our ping is 70 milliseconds plus, right? I gotta say it’s not bothering me.

Responding to Events Other Than Clicking

Can we can we pick another one, maybe? So we’ve looked at like, okay, what’s maybe the most important, which is you can arbitrarily update the DOM of the existing page just by passing back an HTTP response. Maybe another way to talk about then would be like, we can respond to events other than clicking something.

[Carson Gross]

Is there a good sample here for I’m gonna always point at active search as being well, we could do lazy loading or do active search.

[Jeremy Howard]

Active Search: A HTMX Example

Okay, so here’s active search.

[Carson Gross]

And this is I have to say this is like a yes.

[Jeremy Howard]

Is what I always do. Yes. Okay, and I didn’t hit enter. So I’m just typing backspace, backspace.

[00:35:02]

Hey, yeah. And let’s have a look. We’ve got so I’ve typed five things that resulted in five requests. And so now interestingly, it’s obviously done some debouncing, because I typed AES fast enough, it just sent one request. And then I started typing backspace, wait, backspace, wait, this time I typed it slower. And so I can see it’s basically it looks very normal. From what you’ve described so far, we’ve got a post, it’s got some data. Yeah, this response. So should I look at this element to see how I would I would go up and we can look at the highlighted code.

[Carson Gross]

It’s a little easier to explain if you go to the top there.

[Jeremy Howard]

Okay.

[Carson Gross]

So this is that’s a obviously a pattern people are familiar with from like Google and like a lot of more advanced web apps. And I called it active search. I think I forget what Google calls it. But and this is achieved with four HTMX attributes, really three plus one we’ll talk about at the end.

[00:36:05]

But we once again have an HX post here we have HX post instead of HX get because we’re issuing a post in an ideal world, this should be a gap.

[Jeremy Howard]

But I won’t go into the reasons why we don’t need to see the the server side code for this. But like, it’s pretty obvious what it would do or take the right data, it would do the search and it would return the HTML that we just saw.

[Carson Gross]

Yeah, exactly. And really the big the big difference here, the thing that’s new here for for people who are watching this, and I’ve never done any I’ve never seen HTMX before is this HX trigger attribute.

hx-trigger: Specifying the Triggering Event

And what that HX trigger attribute specifies is the event that’s going to trigger a request. And so it’s the event that we use as input. And then there’s a couple of modifiers on that input. The first one is changed. Let’s just go back.

[Jeremy Howard]

So tell me what is the event? Input? Is that a normal DOM event?

[Carson Gross]

Yeah, exactly.

[00:37:01]

Input Event: A Standard DOM Event

Input is a is a standard DOM event that you can look up like on Mozilla on MDN. And it basically corresponds to a key up. But when it’s it’s when input when the input changes in an in an input of some sort. So it’s going to be triggered by checkboxes like when you check them and onto that come with text boxes, it’s triggered whenever the text changes.

[Jeremy Howard]

And this is something I really like about HTMX is when I want to know how to do something, you know, and it’s nearly always like, oh, well, this is just doing this DOM thing, then the doc, then the document I search is like, you know, Mozilla web docs.

[(unidentified)]

Yeah.

[Jeremy Howard]

No, it’s not like, it’s not like, oh, here’s the special dashboard abstraction that Carson wrote or whatever. It’s just like, no, it’s just the web, man.

[Carson Gross]

Yeah, yeah, I tried very much to lean on existing ideas.

[00:38:00]

HTMX’s Reliance on Existing Ideas

So you know, again, as you pointed out that the HX swap attribute uses the standard DOM naming, like they’re not the names I would pick, but I just figured, you know, we might as well stick with as much as possible with what the standards are.

[Jeremy Howard]

Yeah. And so we’ve tried to do the same thing with fast HTML, you know, like I say, like, you know, there’s a lot of people who have tried 1000 different functional HTML builders. And I thought like, well, you know, HTML is kind of XML, their tags, they have a name, they have positional parameters, they’re called children, they have keyword arguments, they’re called attributes. Python has those things. So it’s just those things, you know, it’s kind of like this thing of like embrace the technology you’re working with is right, a theme that I think we’re both going for here.

[Carson Gross]

Yeah, like, I like the term rhyming, you know, make it rhyme. Yeah. And so I don’t know, but that just appeals to me. So in any event, yeah, it’s input is a it’s a standard event.

[00:39:02]

And it could be any event, you know, you could even use and people do do this, you can use custom events to trigger requests, if you know, it’s very helpful.

[Jeremy Howard]

And you could delete all this. This is like a bit of extra. Yeah, extra coolness. But all you actually need to make this work is just this one word.

[Carson Gross]

Event Modifiers: change and delay

Correct. Yeah. And so the next two things are modifiers for that event. And so there’s the change modifier, and then the modifier, and the change modifier tells htmx only issue a request if the value of this input has changed. So you don’t want to like if someone hits an arrow key, for example, that’s not a reason to issue a new request. And then the delay, you notice that there was some sort of debouncing going on. And that’s what that delay colon 500 milliseconds is doing. That’s saying basically, when an input occurs, wait 500 milliseconds. And if another input hasn’t occurred, issue the request. Otherwise, just reset the timer.

[Jeremy Howard]

So Carson speaking as like a user, something that I like a lot about this, but at first made me nervous is a lot of the code I saw, including on your website, had like, a lot of unfamiliar words in unfamiliar syntax.

[00:40:16]

Gradual Learning of HTMX Features

And I thought, I’m not clever enough to understand this. But then I quite quickly realized, like, well, you can delete most of them. And it still works. The bits I recognized, which is like respond to this event, like a fine. And so I actually found it suited me quite well to gradually learn these extra bits. And your book is great at this. So the entire first section is about web 1.0, you have an application branch. All of section two is about htmx, and you introduce it like, super gently, you know, right.

[00:41:01]

Mapping Between HTMX and Fast HTML Attributes

And just one little bit at a time. So, you know, I would encourage people to just go through this book. And then the other thing to say is the mapping between just like the mapping between HTML and fast HTML functions is a simple one-to-one mapping. The mapping between htmx attributes and fast HTML attributes is also a one-to-one mapping. You just literally replace the hyphen with an underscore. So like, you know, folks could go through, I think folks should go through this book and build applications. And if you’re a Python programmer, you don’t have to learn any JavaScript. But in the process, you’ll be learning a little bit about, you know, JavaScript things and HTML things like HTML, but you know, this book is a really great way to gradually build up to understanding these like optional extras, in my opinion.

[00:42:03]

Right?

[Carson Gross]

Yeah, no, it’s always tough to balance like, you know, you want to you want to be useful for the advanced users, but not too hard on the new users and so forth. So it’s, it is tough. I do think the book is pretty good at making it a general introduction.

Event Modifiers: search

I appreciate you saying that. So and then there’s a comma in there. And then there’s so the events are comma separated. So there’s also a search event.

[Jeremy Howard]

Okay, so this is event number one, which is an input event, but only if it changed and only if there hasn’t been one within 500 milliseconds. And this is like, or, yeah, or this is a search event.

[Carson Gross]

What the search event is triggered, for example, scroll down to the UI. So what browser are you using? You’re using Chrome? Okay, so that little x on the side there. Yeah. When you click that a search event occurs.

[00:43:03]

I don’t know an input may also occur there.

[Jeremy Howard]

I need to actually because it was Yeah, and that’s because like, there’s a lot of stuff in HTML nowadays, including this type equals search.

[Carson Gross]

Yeah, exactly. And so, so that search and there’s, I think there are other like keyboard shortcuts, I don’t know the details of it. But we felt like, okay, we’re gonna, we’re gonna issue a request on the search event as well.

[Jeremy Howard]

Pico CSS: A Lightweight CSS Framework

And like I just showed example here. So we use this thing by default, you can use whatever styling we like. But by default, we use this thing called Pico, which I’m sure you’re familiar with. And one of the things I like about Pico is it really leans in also to the idea of like, just embrace, you know, the, the web. And so here’s a rather nice, reasonably, you know, reasonably nice looking search box.

[(unidentified)]

Right.

[Jeremy Howard]

And as you can see, it’s an input with type equals search.

[00:44:02]

Yep. And the button, you know, and in fact, the source code for this is literally form rel=“search”. So yeah, I think by like embracing the stuff that’s available in HTML, and then joining it together with things, other things that embrace that like Pico and like HTMX, you can have very kind of, I don’t know, it feels like the stuff you learn as you put this together, all joins up together.

HTMX and Pico: Embracing Existing Concepts

It’s very different to learning like this dashboarding system. And now if you want to use a different dashboarding system, throw away everything and start again, you know?

[Carson Gross]

Yeah, no, I agree. I think that’s a good thing about HTMX and Pico CSS is a great library as well. And that it’s just it, it does, you know, again, rhyme with like, and tries to reuse the existing concepts of the web rather than imposing a bunch of new sort of mental categories on top of it.

[00:45:02]

[Jeremy Howard]

So yeah, okay, so that okay, so either a search or input.

Common HTMX Pattern: Targeting a Table Body

All right. And then target we’ve seen. So the search results, and this is a kind of a common pattern that I guess we see with HTMX is you kind of start off generally, let’s just like close, let’s just refresh this. You kind of start off with.

[Carson Gross]

So you’ve got a table, if you open that table up, there’s a table body in there that’s got nothing in it, but it has that ID on it.

[(unidentified)]

Yeah.

[Carson Gross]

And so we’re targeting that, that that T body. And the default swap is going to be inner HTML. So what HTMX is going to do is take the response that comes back and then put it inside of that element. And so that works for this situation. So but yeah, that’s the that’s the idea there. And then there’s a last attribute, which is kind of a new one, the Ajax indicator.

[00:46:01]

Ajax Indicator: Addressing Loading Delays

I haven’t used this yet.

[Jeremy Howard]

But people rave about it. Okay.

[Carson Gross]

Yeah, you use that it takes a CSS selector, and that you can point it at an element. And it’ll basically show that element while the request is in flight. And that addresses that issue you saw on Richard Stallman’s web page, where you click the button, and it seemed like nothing happened for a second because it was I see that searching thing popped up. Yeah.

[Jeremy Howard]

And so I see it. But yeah, yeah.

[Carson Gross]

I was so sometimes I make this slower. So that like, yeah, we can see the indicator. Yeah. And then people complain that HTMX is slow. And then I speed it up. And then they don’t see the indicators. Okay, great. Yeah. Let’s that’s what that’s there for.

[Jeremy Howard]

Do you have a hard stop at some time? I just want to think how much time to spend on different things. I don’t I can talk. So let’s look at the lazy loading one, then.

Lazy Loading: A HTMX Example

That’s okay. So here’s that demo. Tokyo.

[Carson Gross]

So here, refresh, refresh.

[00:47:01]

Okay, refresh. And you’ll see like, this is a big indicator.

[Jeremy Howard]

And then I see. So if I scroll with let me just I think I understand. So if I make this smaller, yeah, and then I do that. And then I scroll to it, I see it’s kind of happening in the background. And yeah, okay, cool. So the reason for that is if I wanted to like have something I could start reading, or something else was busy calculating underneath. So what’s happening?

[Carson Gross]

Lazy Loading: Rendering the Page Quickly

Yeah, this is a this is a good pattern for when you have some, some information that is maybe even even if it’s important, it’s something that you don’t want to block the rendering of the first render of the page, you don’t want it to block that first load of the page, because it’s going to take a while. So this is just a I mean, it’s just a dumb image, like, but it’s a stand in for, okay, here’s some complicated stuff that we did to compute, you know, Tokyo’s climate or whatever. Yeah. And so the important thing here is that the rest of the page renders very quickly. And then, and then we can issue this request, sort of when the page loads to sort of have a secondary request, it’s going to bring in the expect the expense of computation.

[00:48:11]

So looking at this div, we want to once again have an HX get where we’re going to issue a request to URL that’s going to make presumably take a while because it’s expensive.

[Jeremy Howard]

And now this presumably would be basically returning an image tag or like a div with an image tag, an image tag or whatever.

[Carson Gross]

Yeah, whatever.

[Jeremy Howard]

And then that’ll get loaded into wherever the target is.

[Carson Gross]

Yeah.

[Jeremy Howard]

And I guess in this case, the target is itself.

[Carson Gross]

Yeah, the target is since we don’t specify a target, the default target is going to be the div itself.

[Jeremy Howard]

And just to come back to your last thing, you said also that the default swap is the inner HTML, so this is going to be swapped out.

[Carson Gross]

Exactly. Okay. And then the trigger here is load.

htmx:load: A Non-Standard Event

And that is, unfortunately, that is not a standard. But I just I couldn’t resist making a specific event called load.

[00:49:01]

[Jeremy Howard]

Okay, so you’ve got events here. And we can scroll through them to see there’s quite a few events. And here is Yeah, load.

[Carson Gross]

Yeah, this is actually if you go to the docs, it’s not I don’t think it’s this is a this is triggered when an element is loaded. But it’s in the docs I mentioned. And if you don’t look on htmx.org slash docs, there’s a there’s a section on events.

[Jeremy Howard]

Oh, actually, well, if I got a trigger, I guess that would be the best way.

[Carson Gross]

Yeah, it’s probably in there as well. Yeah, there’s a couple of special ones in there.

[Jeremy Howard]

Cool. So I’ll just search for load. Here we are non standard events.

Non-Standard Events: load, revealed, intersect

Great.

[Carson Gross]

Yeah. So we have load we have revealed and intersect revealed. And like, have you ever worked with the intersection observer in JavaScript? No.

[00:50:00]

Okay. The the way JavaScript handles sort of like things scrolling into view, it’s pretty complicated. And I wanted a declarative API. And so I just kind of put and the same with loading uses, I forget the name of the event. It’s a big, ugly name. And so for these three things, I was like, Look, I’m just gonna have like my own obviously named events for this stuff. And we’ll, we’ll just have to deal with it.

[Jeremy Howard]

And so make sure I kind of clarify both myself and for other people are just confused. There’s two of these two different load events htmx colon load versus Yeah, this low.

[Carson Gross]

htmx:load: A Synthetic Event

Anything that starts with htmx colon is an event that htmx itself triggers as a custom event. Yes, these are these, these three events are synthetic events that htmx makes work as if they were real DOM events.

[Jeremy Howard]

Okay, they’re not real htmx colon load before.

[00:51:01]

Because like, I like to set up things so that when I’m working with a JavaScript library, that when sure, htmx add something to my page, the JavaScript library can run on that as well.

[Carson Gross]

Exactly. Yeah, that’s exactly what it’s useful for. So maybe not the best name in the world, but it is what it is.

[Jeremy Howard]

Lazy Loading: A Straightforward Example

Okay, well, this is pretty straightforward, then, isn’t it? So you’ve got this div targeting itself. And when it’s Yeah, when load is done, it’s gonna go ahead and stick the graph in here.

[Carson Gross]

Yeah, exactly. And that’s so this can be very, a very good way. Like if you have a part of a web page that is expensive to compute, and it’s making that web page, the first paint of that web page very slow, you can just move that that chunk out to a new URL, and then use this pattern. And then suddenly, that web page will load very quickly. And you know, the other stuff will come in when it’s ready. But the user can still interact with the page, they can still click on links, or if they get sick of waiting, or whatever, they’re not stuck there waiting, like we were for that search result on Stallman’s page, just wondering when this was ever going to come back.

[00:52:06]

[Jeremy Howard]

HTMX’s Minimal Impact on CSS and JavaScript

Right? So exactly. So um, okay, great. I, I wanted to just maybe show folks how then all this works together with, like, CSS and JavaScript and, and all that stuff, because like something else that I found interesting is how the fact that htmx removes those four constraints doesn’t really impact at all how I use styles or JavaScript, you know, right. So like, I’ll just share a couple of things. You know, to maybe make that more clear for folks.

[00:53:00]

Fast HTML and Railway: A Powerful Combination

So for instance, the other thing I found interesting, Carson is like, combined with fast HTML, and also combined with this really nice deployment service we’ve been using called railway, where you can run as many things as you like, and they cost two or three cents a month, you know, unless lots of people are hitting them. And so there was this interesting thing where I wanted to create this little mini page, you know, where I talk about things like htmx and HTTP and memes and stuff. And I, what was wild to me as I started doing this was like, realized I kind of created this thing, which has like all these like little things like this auto updating kind of side and like things that wave over when you go over them and they’re very bold. That’s like, Oh, like some blogging content framework and I’m like, actually, no, you know, this is just a fast HTML page.

[00:54:03]

Fast HTML: A Simple Blogging Framework

Right? The source code for this page is like, you know, it’s just marked down with like a tiny bit of code. And all the work happens actually in bootstrap, you know, right. And so like, with, with bootstrap, you know, I was able to basically create this tiny little thing for this page, here, called like a bootstrap page, you know, so overview, basically says return a bootstrap page, it’s page number zero. So that’s why it knows which one to make bold. This is the title of it. These are the sections and like, there’s all these nice little things in htmx. Like, if you return a title tag, as one of your partials, it actually changes the title of the page, which is sweet. Yeah. You know, like, what’s a section? Well, section is just like, you know, just a div, you know, with, so like, although CSS is just really normal, and then like the JavaScript, and I think this is the bit people get the most confused about is also really normal.

[00:55:19]

JavaScript Integration with Fast HTML

So if you look at, you know, that we have fasthtml.js, for example, for markdown, if you create, have a marked class on anything, and then you basically add a markdown.js component to your page, then it runs a bit of JavaScript. And now all of your markdown is automatically done. Or, you know, you can do the same thing for highlight to get syntax highlighting. Or, oh, one of my favorite ones, sortable. Yeah, this one, like, actually, I much prefer my version, because it’s less clever than yours.

[00:56:01]

It’s much easier to see.

Sortable: A Drag-and-Drop Library

This is my version of sortable. That’s the entire thing is you just call sortable create. And so it’s down there, drag and drop. You end up with this, this ability to drag and drop. And the cool thing is that behind the scenes, it’s telling the server what the new order is. Yeah, yeah. So yeah, this is a great example.

[Carson Gross]

HTMX: Not for People Who Hate JavaScript

Like, you know, sometimes I’ve heard a lot, especially now that HTML is getting more and more popular. And the JavaScript community can’t ignore it anymore, or make fun of it like they is people say things like, oh, htmx is for people who hate JavaScript. And there’s some truth to that. Obviously, if you’re not a big JavaScript fan, htmx can give you a lot of oomph. But also really to take advantage of htmx, like the the events, the fact that it uses events and integrates like with the DOM via events means that it should be able to play very well with JavaScript.

[00:57:06]

Let’s look at it.

[Jeremy Howard]

Drag-and-Drop Example: Integrating with Sortable

So like, let’s run this little, so I’ve got this kind of like idiomatic app I’ve created with like, most of its comments, you know, and so like, you know, here’s the bit, here’s the bit that makes makes it drag and drop describes how that happens. And so if we run it, and then I say, like, okay, let’s show prioritization, drag it to the bottom, right? I missed drag it to the bottom. There we go. And if I now refresh, it’s still at the bottom. And yeah, it’s magic, you know, and like the, and like, how does that work? It’s like, I think this is really interesting. It’s like, okay, well, we include this library, which as we described, is literally three lines of code. And I added this tiny thing, Carson, which is just a little JavaScript thing that just basically does a HTMX for each unload kind of thing.

[00:58:07]

HTMX and JavaScript: A Powerful Combination

So it causes this to happen on all new things as well. And then sortable, it’s kind of amazing how all these things you may just come together. So we have a form. And so the to do list itself is actually inside a form. And so that form is triggered by the event that the sortable docs say is triggered, which is the end event. Yeah, I didn’t have to do anything. And then it just calls slash reorder, you know, and then reorder is two lines of code, you know, it updates each to do to the new priority and returns. This is the reason my code simpler than yours is because it’s less efficient. I returned the whole list, you know, it was just fine.

[Carson Gross]

Yeah.

[Jeremy Howard]

So sometimes that’s the right thing. JavaScript is such a delight in HTMX, because I only have to use it for the bits I need it for, you know, right.

[00:59:02]

[Carson Gross]

HTMX: Pro JavaScript

And that’s so you know, I say htmx is pro JavaScript. And because of that, for that very reason, it takes the pressure off of JavaScript to be the entire infrastructure for your web app. And so it can be used for these situations where it really can add a lot of value. So drag and drop is something that’s not baked into the web out of the box, at least not well by default. And so these, you know, sortable j s addresses that and provide some really good functionality. And then HTMX can integrate with it via events really cleanly. So a really good that’s a another great example. I think of HTMX being being used the way it was intended to and sort of playing well with other things, you know, it’s designed to be, especially with it’s a focus on events. It’s designed to plug in reasonably well with other libraries, as long as they, you know, as long as they play well with the DOM to triggering events, and then using inputs to communicate information out to the remote systems.

[Jeremy Howard]

Carson Gross: A Genius

So let’s switch topics a bit if we can.

[01:00:02]

And the reason that I or a reason I use the much unappreciated epithet genius is because the most things that I come across and I say like, that’s clever. I can immediately think like, oh, I see exactly how they came up with that, you know, but like my friend Chris Latner, for example, who’s created like LLVM and Mojo and Swift and other things like very often I have conversations with him where he describes the thing he’s created. Having described the thing I can say like, yes, that is the right way to do that. And then I’m I don’t know how you could possibly have known that I only know it now that you’ve told me now this thing you’ve done, like, there are four constraints, we can remove them with a polyfill. Once we do that, we can reprogram the web. Like, where did that come from? Because like, this goes back to like, like 10 years plus ago that you kind of first implemented this.

[01:01:05]

And I hadn’t, I’ve not seen it.

[Carson Gross]

Pjax and jQuery: Early Precursors to HTMX

Yeah. I mean, there were, you know, there was a there was something called pjax back in the day. I don’t know if you ever heard of pjax. Yeah, there was pjax. And then there was a in jQuery, there was this I think it’s called fetch, or load, load, I think it’s a load. And it does something similar, you can give it a, you just give it a CSS selector, like in the dollar sign syntax, and then you say dot load, and you give it a URL, and it’ll issue a get and just load the response into that thing. Yeah. And so there were some, there were some little things like that floating around.

[Jeremy Howard]

We were one of the first jQuery users when it first came out, actually. And so it was fun to watch those things kind of get added. And definitely Reisig, Reisig’s a genius.

[Carson Gross]

You know, yeah, he’s, oh, yeah. And so I think, like, you know, I saw that I’ve told story before, but I was just having trouble with a performance issue.

[01:02:05]

The Genesis of HTMX: A Desperate Move

I was trying to do sorting in JavaScript in like 2009, or eight. And it just was too slow, because the runtimes at that time were so slow, and non standard and all the rest of it. And so DOM manipulation was very slow. And I ended up I don’t know if I use the jQuery dot load method, but I did something, I think I might have seen it and did something similar, and then kind of started making that more general using the jQuery AJAX function. Where, you know, I was like, oh, yeah, I didn’t. So I had a UI I was trying to sort, it was too slow to do in JavaScript. And out of desperation, I tried doing it on the server side, and then just slamming it into the UI. And that turned out to be really fast, like, to my surprise, it was pretty desperate move on my part, I didn’t think I was gonna be able to do it well. But, but it worked. And I was like, Oh, this is great. Okay, I didn’t know you’re allowed to do that. You can just put right, you know, you can put HTML wherever you want.

[01:03:02]

That’s cool. Yeah. And, and then so that turned into like a little function that I had for a while, that was kind of more in the jQuery style of like, you look things up and hook in functionality. And then I saw Angular one.

Angular 1: Inspiration for HTMX

Yes, I didn’t like I didn’t like much of Angular one, except that they use attributes to specify behaviors. Yeah, I was like, you know, this is this is a lot like, like the href stuff, my first links and big hit YouTube video was an angular.

[Jeremy Howard]

Okay.

[Carson Gross]

Yeah. Yeah, I don’t want to throw it. I don’t want to throw any shaded Angular. I’ve got no beef with Angular, and it’s fine. But it wasn’t what I was looking for in what I was trying to do. But I did like how they use attributes. And I realized, okay, I can use attributes to hook this behavior in instead of instead of using a jQuery selector. And, and so that sort of turned into that just very organically turned into intercooler.js. And I’ve got to be honest with you, like a lot of the academic stuff came afterwards.

[01:04:04]

HTMX: An Organic Evolution

Yeah, I didn’t understand hypermedia very well.

[Jeremy Howard]

Yeah, when I did when I initially did all this stuff, it was just, you know, look, that’s that doesn’t show me at all, you know, my, my friend and co founder, Eric Reese wrote this book called the lean startup, which is actually a lot more than just about startups, you know, his idea of the MVP. And it’s actually the basis on which answer AI is created, which is building things that way, which is like, iteratively, bit by bit, you know, and then later on, you kind of look back and be like, Oh, I kind of built something kind of cool here. I wonder how this thing I built actually works. And then you’re like, Oh, I guess it’s hypermedia. And I guess there’s actually these four constraints, we actually ended up removing them. And yeah, I think it makes it less intimidating to know that you don’t have to invent this new universe in your head all ahead of time, and then implement it.

[Carson Gross]

Existence Brings Essence into Being

Yeah. Yeah, you know, there’s what’s the saying, like, existence brings essence into being like, you have to do the thing first.

[01:05:04]

And then you can talk about what the thing is. Yeah, it’s kind of got to be there first. And then you can say, Okay, what just happened?

[Jeremy Howard]

You must have had some kind of intuition at some point that there was a direction forming that felt like you were enthused enough about it, you wanted to invest in.

[Carson Gross]

HTMX: A Solution to JavaScript Complexity

Yeah, you know, to me, it was more just an unwillingness to deal with the complexities of like, you didn’t knock out j s at the time. And yeah, and things like that. Like, I just, I was like, man, I just don’t want to deal with all that. No, I just, I just, I just want to be able to put stuff in the DOM. And, you know, I think when I first did it, I went through there was a within this is with the intercooler, the predecessor to HTMX, which is very similar. It’s just it’s basically a jQuery implementation of the same stuff that HTMX does. I went through and I started doing examples. And then I started realizing, like, Whoa, you can do infinite scroll with this.

[01:06:03]

Discovering the Power of HTMX

Whoa, you can do active search with this. Like, yeah, this is cool. Like you can do a lot with this. And so that, but that was, I discovered that, you know, I didn’t think about that up front, I discovered the fact that, hey, with these abstractions, you know, with the limitations on HTML removed, you can actually do a lot of cool stuff. So yeah, it was very organic. And I definitely not like me thinking things through. Yeah.

[Jeremy Howard]

So no, I mean, it’s, it’s interesting to me, because I’m sure I’ve never created anything as clever as HTMX, but I’ve definitely created things that are at least as bloody minded as HTMX, you know, like you’ve kind of been like, you know, it’s interesting, you mentioned Knockout, for example, most people listening probably won’t remember it, but it was very popular back in the day. And it came out as, as we were building Kaggle, which is one of my earliest startups.

The Reaction to Change: Psychological Pain

And some of the folks were like, we’ve got to do Knockout.

[01:07:02]

And I was just like, just so don’t have to do Knockout. And yeah, it’s interesting, you have this reaction to complexity. It’s not a reaction to like, it’s not a kind of classic conservative, like we have to do things the same way. It’s more like, no, we have to make things accessible. And we have to like, you know, appreciate what’s good about what exists and take advantage of that. But yeah, it’s interesting.

Carson Gross: An Outsider

Like, I feel like maybe, like I said, at the start of this interview, you don’t look or sound like a tech genius. You don’t live in a place full of tech geniuses. You know, you’re, you know, and I’m also not a tech genius. So it all checks out, teaching kids baseball, you know, like, you, you know, and, you know, so I guess, you know, I would consider myself an outsider, you know, would you kind of consider yourself an outsider?

[01:08:05]

And would you say that’s part of why you can create these somewhat bloody things that push back against what everybody else is trying to do?

[Carson Gross]

The Importance of Looking Back

Right? Yeah, I definitely was an outsider in the Bay Area, because I was from Sacramento. And I’ve been like, one thing I realized about my, my particularly when I was younger, as I was very naive about, like, everything, pretty much everything. And so, you know, the problem with being naive is when bad stuff happens, you can get pretty embittered. And so I went through that whole naivety, embittered cycle on the Bay Area and so forth. And so, so there’s definitely people who don’t know.

[Jeremy Howard]

So Sacramento is like, three hours or so in land of San Francisco. And it’s like, it’s pretty hot. And pretty kind of like, it’s not. It’s not at all like San Francisco.

[Carson Gross]

Yeah, it’s very agricultural or was it’s the Central Valley is filled up because the Bay Area has gotten so expensive.

[01:09:03]

So what I grew up in has been is very different now the area I grew up in. But, but yeah, I was just not, you know, I just wasn’t a Bay Area person. And I felt that like the entire time was there even when I went to Berkeley and then Stanford for grad school, and just was very much an outsider. And that’s fine. I’m also, you know, a little bit of a contrarian, I guess. And so that, you know, that’s good and bad. You know, it’s been good parts of my life and bad in other parts. But I do think like something you sort of touched on there is there doesn’t in tech, technology is so forward looking, that we don’t do a lot of looking back at what people had before, right, or what was done before.

HTMX: Rhyming with the Past

And I think that’s one reason why we’re constantly reinventing the wheel, you know, in many ways, sometimes worse, you know. And so the with with HTMX, and with intercooler before that, I really was trying to once I understood once I got my feet under myself and understood what was going on, is I tried as much as possible to rhyme.

[01:10:07]

You know, that’s the way I would say it is, you don’t have to be the past, you don’t have to dress or like, you know, actor or whatever. But like, if you can rhyme with that stuff, like there’s probably some good ideas there. And I think that’s one reason why HTMX has a pretty high power to weight ratio is that it just builds on these really, like CSS selectors and like the basic DOM APIs and events, like, you know, the DOM being an event bus, like that’s, those are all concepts are already there. And HTML is just like, is built on top of them.

[Jeremy Howard]

Recognizing Deep Thoughts from the Past

I mean, that’s why I think I spent months, the year or two ago, teaching people APL notation originally developed in the late 50s. Yeah, like, I definitely appreciate this idea of recognizing when really deep thoughts have been had in the past. And when you can take advantage of that.

[01:11:02]

Yeah, present and combine them with new things.

[Carson Gross]

The Visual Basic 6 Debugger: A Great Example

Yeah, like, what’s a new take on that? You know, that’s that can often be one example I bring up a lot is the visual basic six debugger was like the best debugger I’ve ever used. And continue. So good. Yeah, you can it was like, you could do whatever you wanted, you could drag the program count, like you could drag the pointer wherever you wanted to during execution. It was unbelievable. And my understanding is dotnet has that now, but I work on the JVM a lot. And it’s got nothing like that. Nothing even close.

Microsoft Access: A Source of Inspiration

Yeah.

[Jeremy Howard]

And it’s like, and if you look back to get back, if you go back further to Microsoft Access, you know, the thing it had with these like reports and stuff was basically flex grid, you know, HTML programmable back and I was doing that, I guess in the early 90s. Yeah, let me just again, switch then to kind of like talking about something which I’ve seen with you, and I’ve certainly experienced myself.

[01:12:02]

Experimenting with Different Approaches

I very intentionally do a lot of things extremely differently to everybody else. Because I like to experiment with like, what happens when you try things differently. So I built a thing called nbdev, which is where you do all of your software development inside Jupyter Notebooks.

nbdev: Software Development in Jupyter Notebooks

And I’ve written most of my software like that for the last few years. And it turns out, the affordances provided in notebooks are actually amazing. I’ve, you know, I’ve created an AI thing called fast AI, which kind of, when everybody was trying to build big foundation models, I was focused on like fine tuning. And now with fast HTML, when everybody’s focused on Svelte, React, Vue, whatever stuff, I’m like, let’s lean into HTMX and hypermedia and Python instead of JavaScript.

The Psychological Reaction to Change

Something I’ve noticed a lot is, and I’ve seen there’s a psychological phenomenon, where when human beings are presented with change, it’s like literally a chemical reaction in their brain that is identical to physical pain.

[01:13:13]

And I see that with how people react to HTMX as well, which is I often see people respond with an enormous amount of anger. You know, almost like this kind of desperate anger. And yeah, I’m kind of like, and so it’s interesting how, what, you kind of have these two really different directions.

Carson Gross: A University Professor and a Troll

One is like, you’re literally a university professor, like you say, expertly Stanford, and you create these like incredibly academic things, looking back at Roy Fielding and HATEOAS and everywhere else. And then there’s the other cast, which is like trolling, memeing, you know, I guess like, yeah, is it like, is it like partly that you’re kind of reacting to the bullshit earnestness of this world and trying to like, not take it too seriously?

[01:14:09]

Humor as a Response to Bullshit Earnestness

Or like, is it kind of like an intentional thing you’re doing to try to deal with the reaction people are having to this psychological pain of seeing change? Or, you know, what’s, how do you see all this?

[Carson Gross]

Change is Hard on Humans

Well, so I think you’re right. And I’m sympathetic. There’s a reason we’re like that, right? Like, there’s nothing about us that is not there for some reason or other. And so change is hard on humans. So we should make, you know, allowances for that fact. Humor is for me, I’ve always been kind of a joker and last clown and so forth. And I grew up on the, you know, on the forums in the late 90s and early 2000s, kind of pretty rough and tumble back in the day.

Memes: A Powerful Communication Medium

And so I got I got good with memes. And I just always preferred joking. It’s funny, you know, I just, I don’t know, I end up like a lot of memes.

[01:15:07]

And, you know, I think they’re, there’s, they’re good. They’re, you know, a picture is worth 1000 words, and I mean, maybe worth like 100,000 words, like a good meme can really get through a lot of stuff. And so that’s it. That’s one. That’s one by Alex. That’s pretty funny one. So I really like humor.

[Jeremy Howard]

The Power of Foundations

It’s so on point, like, like, it’s literally what we were talking about. It’s like, I was like, Hey, if you do this stuff, you’re just doing the foundations. And you keep doing the foundations, and they all come together. And suddenly, you’re like, you’re really good at building web apps, you know, and like, you know, Daniel Roy Greenfeld, one of the co authors of two scoops of Django, which is one of the best programming books of all time, within 45 minutes of trying fast HTML, and he’d never also used HTMX, he had rewritten his entire blog system.

[01:16:03]

Fast HTML: A Game Changer

You know, his his wife, Audrey, the other of the two scoops of Django co authors saw him do that. The next day, she was doing a a hackathon. She had never used fast HTML before she decided that morning that she was going to use it for her team in the hackathon. They won the hackathon. You know, like these people who have like learn the basics, and then they get something that rhymes.

Memes: Cutting to the Bone

Yeah, they zoom in. But so these memes they’re like, they’re funny, but my god, they’re like, they cut to the bone as well.

[Carson Gross]

Carson Gross: A Good Writer

You know, yeah, yeah, I think I’m pretty good writer, you know, the book, I was actually better at English, like I scored better in standardized tests on on English than I did on math. And I’ve always just liked, you know, I like I read a boatload when I was a kid. And so I you know, I just, it’s just a knack I’ve got for me.

[01:17:02]

I don’t know. It’s not this isn’t Shakespeare, but it’s very effective communication medium. Combining a picture with a, you know, with a short and pithy statement.

[Jeremy Howard]

Memes: Explaining HTMX

So well, I mean, when I wanted an explanation for HTMX, I, I used to I used one of the memes because it is Yeah, it did a better job of explaining what was in my head, I could use words for which is like, yeah, and actually, so Eric grease and I were

The Simplicity of Early Web Development

talking about the kind of days of when we were starting coding PHP, you’ve got a show home directory, you dump a file in there, you’ve got a web app to show to your friends, you know, and so it was even simpler than your 2004 model. And yeah, you know, we were both saying like, you know, it’s so painful to create an application now, right? You know, and so yeah, the picture does tell 1000 words.

[Carson Gross]

Humor: A Good Way to Communicate

It does.

[01:18:01]

It does. And humor works. People like humor, the people who get mad about them, like they’re probably the people that you want to get mad anyway. So you know, I don’t know. It’s been a good way. I’ve gotten much better though. Like, you know, if you if you were talking to me 10 years ago, I would have been much more embittered about things like much more sarcastic, you know, there’s, and there’s a part of me that’s still like that.

The Importance of Positivity

I just really, you know, I was about it was about 10 years ago, I just kind of was like, you know what, I can’t live like this. Like, I’m not I’ve got to be more positive about things. There’s a lot of good things. It’s so easy to be negative in the you know, especially with the information overload we have now. And I you know, I just was I just sort of committed to being more positive about it.

[Jeremy Howard]

The Benefits of Living in Rural Montana

And so does it help to be away from the Bay Area, you know, living in rural Montana, probably it’s, there’s less financial pressure.

[Carson Gross]

That certainly helps. You know, Montana is very beautiful. And like, there’s a lot of nature. Also, you can freeze to death. So that gives you some perspective on life.

[01:19:02]

Like, Oh, wow, it’s minus 40 outside. I don’t really hope the power. I really hope that the minus 40 Fahrenheit, I really hope that the power doesn’t go out, because that would be bad. So, you know, I think that helps.

Handling the Bay Area Better

But I think, you know, when I look back, I think I could have handled the barrier much better than I did. If I had just been a little bit more, just been more positive, you know, early on, it was early on, what do I want to say, you know, for a long time, to me, people who were sort of Pollyannish were, like, I just would, you know, like, Oh, that person’s just positive matter what is fake. And now I’m much more I tried to be much I tried to be almost fake positive, because it’s not going to change so much is not going to change anyways. Right? So like, yeah, you know, you can control your, like, there’s a lot of stoicism, I can’t handle stoicism, because it’s often very sort of, like, morose. And I just can’t be like that. And so I like the more Joker approach.

[Jeremy Howard]

Finding a Community That Appreciates Your Weirdness

I think also, like, it, like, I’ve always felt like the internet’s a big place, you know, and I always feel like my, my job is not to market my weird shit to other people, but to find the other people who appreciate my weird shit, and let them find me.

[01:20:17]

And so then you end up with a community of people who appreciate your weirdness, and you don’t have to spend time trying to convince people to do something they don’t want to do.

[Carson Gross]

HTMX: An Unexpected Success

Yeah, well, and that’s, you know, I didn’t know this was gonna work as well as it did. You know, I had, like a year ago, we basically, you know, we were gonna release the book, and I’ve been messing around on Twitter a little bit more, I’d taken some time off Twitter, because it just had gotten so crazy. And so, but I came back and I was like, and I about a year ago, I committed, I was like, okay, I’m gonna really like, I’m gonna engage on Twitter.

Embracing Twitter’s Crazy Side

And I’m just gonna go crazy and be like the crazy person that I want to be on Twitter, and have fun with it. And if that works, great. And if it all goes down in flames, also great, like, I don’t care.

[01:21:03]

Right. And I think so, you know, there’s probably some authenticity there. But there’s also a bunch of risks, like, you know, this could all end in tears, probably will.

The Risks of Authenticity

But, you know, I just, I don’t know, I just, I really, I tried, you know, I gave that talk to Big Sky DEV CON, where I talked about trying to be more positive. And I think that’s been the big change for me about 10 years ago, I just was like, I need to be more positive about things. Yeah, still be a joker, still be myself. But just don’t emphasize the negative stuff so much. Don’t do it so much.

[Jeremy Howard]

Finding Different Facets to Highlight

No, I mean, you can find like, you can be you’ll continue to be authentic whilst finding different facets to highlight internally and externally. For sure. Yeah. Yeah. We all have those facets.

[Carson Gross]

Right. I’m not sure I can recommend what I did for other people.

HTMX: A One-Time Success

But it worked. It worked this one time anyways.

[Jeremy Howard]

The Future of HTMX

Um, so, you know, I guess the thing I’d be interested to kind of wrap up on unless there’s other stuff you feel like is worth talking about is like the kind of where to now, you know, if it seems to me, you’ve highlighted, you’ve highlighted how browsers ought to work.

[01:22:20]

Browsers Should Work Like HTMX

I don’t see any reason they shouldn’t work like this. And in fact, if this stuff was built into the browser, you wouldn’t probably need the HX dash pieces, you know, maybe some of it could be have a bit of a streamlined developer experience in ways that you couldn’t do. Um, I guess like, I mean, not that it feels like it matters hugely to me, if whether that happens or not, I don’t mind sticking an HTML script to the top of my pages. And in fact, fast HTML adds that script header by default. But yeah, I guess I’m curious about like, what’s, um, what’s in your head?

[01:23:01]

Carson Gross’s Thoughts on the Future

Now? Are you thinking like, there’s other things I could do with this? Are you moving on to something else? Are you feeling like, you know, you’re the browsers might actually pick up on some of these ideas, you know?

[Carson Gross]

Browser Interest in HTMX

Yeah, well, I think, I think we’ll, I know that the browser people are looking at HTMX and are interested in the idea. It’s a big process to get anything like that into the browser, especially coming from more of an external source than sort of the internal, you know, sources.

[Jeremy Howard]

The Fourth Constraint: Updating Any Part of the DOM

And also the most important bit, the fourth one, the like, update any part of the DOM that feels like that would be hardest to Yeah, yeah.

[Carson Gross]

Existing Infrastructure in Browsers

So there’s already there’s already, it’s kind of there a little bit, you can actually, there’s a target attribute on anchors and forms. And that takes an ID, but the ID has to be of an iframe. So nobody uses it. So there’s like, there’s the infrastructure is there, it’s like almost there. So I don’t think it’s, I don’t think it’s a too far of a jump.

[01:24:02]

A Formal Proposal for HTMX Features in HTML

And one of the HTMX team members is working on a more formal proposal to get some of these ideas, not the full HTMX API, but some of these ideas, and HTML. And you know, I mean, it could happen. That would be a very long term process.

HTMX: Pretty Much Done

I do think HTMX is pretty much done as far as like what it does. And the API provides, if new technologies come out in the browser, so for example, the transitions API came out, and we integrated that into HTMX. So I would expect to, you know, do some things like that, as browser technologies improve, but I don’t think it’s gonna change a whole bunch, just fixing bugs and, you know, improving it, hopefully not.

Avoiding Ruining HTMX

At this point, I want to not ruin it. Like, I’ll put it that way. So I’m going to try and keep it pretty stable.

[Jeremy Howard]

Discovering HTMX

And people Yeah, it doesn’t feel I mean, that’s kind of partly what I was asking. It feels like it almost feels like you discovered something.

[(unidentified)]

Yeah, totally.

[Jeremy Howard]

And you discovered the thing.

[01:25:00]

And you, you know, and then you showed the people the thing. And then you’ve written down why the thing’s good. And you provided examples of the thing. Like, yeah, dude, where do you go from here?

[Carson Gross]

Idiomorph: A DOM Merging Algorithm

Oh, man, what’s a well, you know, I’ve got other projects I work on. There’s a, you know, idiomorph, which is sort of a DOM working algorithm that I think was an improvement over the state of the art.

[Jeremy Howard]

Okay, well, let’s go slowly here. Okay, so HTMX idiomorph, because I know of this thing. But maybe you could like just quickly teach me about it.

Idiomorph: A Better Approach to DOM Morphing

Because it’s like, is this like when you say a DOM merging algorithm? Is this kind of like what Alexia live view does or something like, yeah, from diffing? Like, you should explain maybe from scratch?

[Carson Gross]

What basically, the fundamental problem and the original library? Yeah, well, I mean, the original, the original problem is, you’ve got a DOM, which is a tree of stuff.

[01:26:02]

And you’ve got a new tree that you need to take this tree and like, change it into this other tree. And you want to do that with as few changes as possible. And so that that’s called morphing.

[Jeremy Howard]

That’s what the web Oh, you know, you’ve got that thing with like the Rick Astley video that you get playing or something. Is that that’s, is that one of these examples?

[Carson Gross]

Idiomorph: An Improvement on Morphdom

That’s, yeah, it’s not it’s not in the examples. But if you go to the bottom of the idiomorph page, there’s there’s an example that shows that. Yes, down there somewhere. So if you watch this gif, like that top is what basically what happens is, if you if you watch the top, top one, the video keeps playing, or the top ones resets, and the bottom one doesn’t. And so like, yeah, morphdom doesn’t work.

[Jeremy Howard]

Yeah, that’s the video.

[Carson Gross]

Yeah. And so I don’t want to get too much into the weeds on this.

Idiomorph: Using ID Sets for Efficient Updates

But basically idiomorph is an improvement on morphdom.

[Jeremy Howard]

It uses something called ID sets to do a better job of matching up elements when it’s trying to basically I can return a bigger chunk of a bigger HTML partial into something where some of what I return is the same as what was there before.

[01:27:16]

And it won’t actually replace what was there.

[Carson Gross]

So to be kind of more efficient update the stage. Exactly. It doesn’t make mistakes higher in the DOM because it has these things called ID sets. So I don’t know.

Hyperscript: A Scripting Language

And then there’s and then there’s hyperscript. Don’t show anyone.

[Jeremy Howard]

But I mean, you say this, because like, you know, a few weeks ago, I asked you about this. That’s like, should I learn hyperscript? And you’re like, no. And that was the end of the conversation. And then since then, I’ve like seen people using it. I’m like, wait, this looks amazing. Somebody on the discord yesterday had like, literally like a spreadsheet written in hyperscript.

[Carson Gross]

Hyperscript: A Spreadsheet Written in Hyperscript

So yeah, that was pretty incredible. Yeah, so hyperscript is another project. And it’s basically a scripting language.

[01:28:02]

Hyperscript: An Alternative to JavaScript

So it’s an alternative to JavaScript. And it’s based on an old scripting language called hyper talk, which was a scripting language for HyperGuard, exactly, which is also based on, you know, same.

HyperTalk: The Inspiration for Hyperscript

Yeah, AppleScript has given a lot of people a bad taste for that style of language, because AppleScript is so bad, which I agree 100%. But it’s, it has a lot of interesting features.

Hyperscript: Interesting Features

I teach compilers, and I like programming languages.

[Jeremy Howard]

And so, you know, I enjoyed reading the source code to this, actually, like, it’s Yeah, it’s Yeah, I thought like, okay, I can see you’re an academic who you probably must teach this shit, because it’s pretty hardcore.

Hyperscript: A Standard Recursive Descent Parser

Like, I yeah, it is.

[Carson Gross]

Yeah, it’s a it’s a standard recursive descent parser and all that sort of stuff. But you can see like these things, it’s just like on click toggle disabled until, you know, it has a very English like syntax. And then the really interesting thing about it, if you go up to the top, go up to the where’s the nav or excuse me, go to docs is scroll down on the left hand side, go down to keep going, keep going, what’s called keep going.

[01:29:18]

Hyperscript: Async Transparency

Keep going. Keep going. It’s async transparency. So if you’re, if you’re, if you’re into languages, this is one thing that’s pretty interesting about HyperScript, which is that it the way the the runtime works, like you don’t have to resolve promises, the runtime effectively resolves all the promises.

[Jeremy Howard]

I hate this. So script code, you know, it just makes me miserable.

[Carson Gross]

Hyperscript: Event-Driven Control Flow

Right? So instead of like this callback style, or doing a weight, you know, there’s a if the thing you’re working with returns a promise, you can do in a weight on it, but then you have to mark it as a sink and all the rest. You just Yeah, in HyperScript, you just you can put like, wait one second, and it’ll do it does all the stuff for you.

[01:30:01]

It like it, it waits for that two seconds, and then starts executing the next thing. And so that’s a, that’s sort of a, it’s an interesting technical thing. Like if you scroll down a little bit further, there’s keep going, toggle loops, this one.

Hyperscript: Event-Driven Loops

So this scroll up there, that loop, this is a this. So one of the neat things about the runtime infrastructure of HyperScript is that you can have event driven loops. So this, this is this is a loop that’s saying loop until you get this event. Right? So on click repeat until events stop. And so and then send and then there’s another button that sends the stop event. So if you click on that, click meet a pulse button. Yeah, it’s gonna pulse and then it’ll keep pulsing until you click cancel.

[Jeremy Howard]

Yeah. Which is when you click cancel event to a particular element.

[Carson Gross]

Yeah, to the previous button. And so it’s sending it to that button.

[01:31:00]

And what’s interesting there is that if you watch the pulse, it finishes it, the pulse finishes. And that’s because it that’s because it’s in this loop, that only after the loop is finished as a check, did I receive the stop event. And so it’s like, it’s event driven control flow, which is pretty interesting. Like when you’re working with the DOM.

Hyperscript: A Passion Project

So I don’t know, this is definitely a passion project. I have a hard time recommending any anyone watching this or listening to this, check it out. But it’s got some cool ideas in it.

[Jeremy Howard]

nbdev: A Passion Project

I know those kinds of projects. Like I, I’m a bit the same with nbdev. You know, when people are like, should I use nbdev? I’m like, I don’t know. I’m like, I like it a lot. I’ve written all my software for the last few years. And that, you know, people keep asking me, how come I’m so productive? And I’m like, I think a lot of us because of nbdev. But should you use it? Oh, I don’t know. It’s pretty weird. Everybody’s gonna think you’re weird. Yeah. Right. Yeah, funny, though, like, you know, this kind of parsing compiling stuff.

[01:32:01]

Carson Gross’s Friends in the Compiler Space

I happen to have been lucky enough to have a few friends in my life who, you know, have who are amongst the best in the world. They’re like Terence Parr, who was a colleague at the University of San Francisco, and Chris Latner, obviously. And then years ago, I back in the Pell days, I used to spend some time with Damien Conway on Pell.

The Fun of Implementing a Language

It’s such an interesting space, you know, like, like, getting down to the hard core of these algorithms, and then implementing a language. It must have been super fun for you just to make this.

[Carson Gross]

Yeah, yeah, for sure.

Hyperscript: Written in JavaScript

And it’s all written in JavaScript.

[Jeremy Howard]

So the parts, it’s all, it’s all in JavaScript, which is going to be a little bit dodgy, I guess, like it has to.

[Carson Gross]

Hyperscript: Not for Bitcoin Mining

I would not write a Yeah, I would not write a Bitcoin miner in it for sure. But I think for what is designed for, like little interactive elements, like where you embed the code, like it’s designed to be embedded in HTML, like it’s supposed to be and very readable.

[01:33:00]

Right Click View Source Extremism

Like, that’s one thing there’s an essay, I think, what there’s an essay on the HTMX website about that about, I think it’s right click view source extremism, I think is what I call it. Hold on, hold on. It’s that last one. And so this is a kind of riffing on something like Cory Doctorow, who’s a real good writer.

Cory Doctorow: A Passionate Advocate for the Web

Yeah, guys, very passionate about the web. Yeah, yeah, 100%. And he talked about how like the early web, you could always look, you could be like, one of the reasons why the web was so great is you could, if you saw something cool, you could right click and view the source and see what was going on.

[(unidentified)]

Yeah.

[Carson Gross]

And, and so that’s one thing that I think HTMX and Hyperscript kind of have that, yeah, like, I believe in that ethos, though, like, exactly.

Hyperscript: Not Open Source

It’s not open source. It’s not open source. It’s view source. It’s no, no.

[Jeremy Howard]

Embracing View Source

Yeah. And in fact, you know, I really kind of leaned into that with, like, one of the things I created for fast HTML is like, I really love being able to, like, even just view, you know, view HTMX or HTML or whatever source.

[01:34:08]

Fast HTML: Copy Outer HTML, Paste into HTMX

And so one of the things I should kind of show people in our very first video is this idea of like, copy outer HTML, paste it into HTX. And now you’ve got, you know, the fast tag tag ready to go. It’s like, I really wanted people to be able to grab stuff that’s out there.

The Openness of the Early Web

Yeah.

[Carson Gross]

Yeah, yeah, there’s something that we’ve definitely lost in the web now that everything’s like a huge, massive, you know, either it’s a bunch of like, if you want to cry, like go and look at go to google.com and right click view source.

Google.com: A Cautionary Tale

And then go to the Wayback Machine. Oh, I know and go to google.com. And like 2002 and view the source of that. And it’s just like, guys, what are we doing?

[Jeremy Howard]

The Current Google: Not a Better Experience

You know, like, it’s just crazy that the current I don’t find the current Google a better experience to use than I mean, it’s a little better in some ways.

[Carson Gross]

But you know, so I do I do like the, the openness.

[01:35:03]

Hyperscript: Designed for Openness

And so that’s one of the reason I’m on this kind of riff is just because Hyperscript is designed to be part of that, like, yeah, you put the code in, you put the code directly in there.

[Jeremy Howard]

Surreal JS: A Similar Idea to Hyperscript

And you know, there’s another one, I don’t know if you’ve tried it at all. Which is surreal JS, which is actually what what I am after you convinced me not to use. Yeah, I don’t know, it’s almost as weird, but not quite. But it’s a similar idea. Yeah, yes, I got a knack.

Surreal JS: Inspecting Elements

Yeah. So this is like nice example here. Yeah, you know, where you can inspect these things. And yeah, they’re just like, right there.

[Carson Gross]

Surreal JS: A Script Tag Next to the Element

And it’s just a script tag right next to the thing. Yeah, yeah.

[Jeremy Howard]

Surreal JS: Beautiful CSS

And, you know, also this really beautiful CSS, like, not like this is 320 lines, you know, and then the CSS one is like 50 lines or 40 lines or something.

[01:36:00]

Surreal JS: Tailwind Killer

But it’s like, yeah, in many ways, it kicks tailwinds ass, you know, you just have like me, yeah, in your styles.

Python Components: Self-Contained and Powerful

And then it works really well with the fast HTML approach that we were trying to create Python components, you know, where it’s Python functions, and the Python functions are self contained.

HTMX and Surreal JS: No Need for Web Components

And so with something like HTMX, or with the surreal approaches, you know, everything is like, you don’t need web components anymore. Because right, the servers generating the components. So I’m really in that direction.

[Carson Gross]

Fast HTML: How It’s Treating Carson Gross

Yeah, I think it’s a good one. I it’s, you know, and that’s a quick, I mean, I guess, like, maybe a last question for you is, how’s how’s fast HTML treating you? So you got a couple of negative content, it’s always easy to focus on the negative stuff.

Fast HTML: Positive Reactions

But I’ve seen a tremendous amount of positive stuff too.

[Jeremy Howard]

Fast HTML: 2.7K Stars on GitHub

So yeah, it’s been less than a week. Let’s see, we’ve got 2.7 1000 stars on GitHub.

[01:37:01]

So it’s like people definitely gravitated to it.

Fast HTML: Number One on Hack and Use

It was number one on hack and use. Yeah. The reaction has been Yeah, it’s interesting.

Reactions to Fast HTML: Style Guide and Jupyter Notebooks

Like, we get I get reactions to a few different things, right. So like a lot of the people reacting to fast HTML aren’t reacting to fast HTML at all. But actually, like, so for example, I use a different programming style guide, which I wrote fast AI style instead of the one that most pretty much everybody else uses called pep eight. Okay. And it’s based on like, literally 60 years of study, you know, in other communities, like it’s not bad, right. But because people see my code looking different to what they used to, a lot of people just react like, this code is wrong. There, it’s bad, right? You know, although the other the other thing I’ve seen people react to is like, wait, it’s 91% Jupyter notebooks, it’s actually worse than that, because the other 8% is auto generated.

[01:38:06]

Fast HTML: Doing It Wrong

Like, yeah, it’s like it looks wrong. It’s written wrong. It’s written in the wrong system. So you know, I get a lot of that.

[Carson Gross]

HTMX: Similar Reactions

I definitely I get some of that too, with with htmx.

[Jeremy Howard]

So yeah, doing it wrong.

Fast HTML: Creating Beautiful Applications

And then people are like, well, you know, you’re never going to be able to create something that looks nice with like tailwind and stuff like this, you know, and I’m like, dude, this is like a fast HTML application right here. You know, it’s here’s a great example.

Fast HTML: A Standalone Application

This thing here is like something that wrote like a standalone thing. And then now that we’ve got it, you know, it’s just like CAD 3d. There it is.

Fast HTML: Getting the Current Temperature

And there’s this like there’s some things with where I just it’s a bit like what you’re saying with htmx. But to a lesser extent, where like, this one, so this is actually the current temperature as like, well, how the hell are we getting the current temperature on the homepage of a really popular website?

[01:39:06]

Fast HTML: Low Running Costs

You know, right. And the cost of running this, you know, including including the entire launch on Hacker News and all that is like, yeah, you know, it’s gonna cost 20 bucks, right?

Railway: A Powerful Deployment Service

Three bucks. So man, I need to look into railway app.

Fast HTML: Using Python

It’s and the trick is that I just used Python, right?

Fast HTML: Caching with Python

And this function actually has a cache on it. And, and then I realized like, well, actually what so the normal Python cache basically is just like a memoization cache.

Flexi Cache: A Tiny Caching Library

So it’s like an LIU cache. So like, I wrote this tiny thing called flexi cache. You know, like everything I write, Carson is just like tiny, right?

[01:40:00]

So this is like one of the biggest functions I’ve ever written is like 30 lines of code.

Flexi Cache: Policies for Caching

But with this cache, you can then say, you can basically define these things are called policies. So here’s a policy cache, which is just like, oh, let’s check the time, you know, and you either return none if it’s still in cache, or you return the new cache time, you know, you know, whatever state you need.

End Time Policy Cache: Auto Reload

So there’s an end time policy. So like, we have, I basically replaced static site generators now, because I just returned file responses with an end time policy cache. So like, it literally gives you auto reload, if the file changes, you know, that thing was showing us the weather has like a one minute time policy cache on it.

Fast HTML: Replacing Static Site Generators

And it’s just a decorator on the function. And so now, you know, this, you know, just updates itself once a minute. So it’s like using all of Python, right?

Fast HTML: Using Python Effectively

Really? It just feels great. So yeah, so to answer your question, you know, this kind of new generation of JavaScript only programmers, you know, there’s quite a common reaction, which is like, you can’t do all these things.

[01:41:08]

The JavaScript-Only Programmer’s Reaction

It’s like, yeah, you know, Instagram’s written in Python, Dropbox is written in Python, like, it can definitely create whatever application you have in your head.

Python: A Powerful Language for Web Development

Yeah. But then there’s this fantastic group of like, very experienced coders, who have like, come in to our like, discord channel, and just been like, this is the thing, you know, so like, for example, Audrey and Daniel, who I mentioned, these fantastic authors, and, you know, really great web developers.

Positive Reactions to Fast HTML

Within like two days of checking it out. Not only had Audrey won a hackathon, they’re like, we want to fly to Australia to spend two weeks working on this with you, please.

Fast HTML: A Collaboration with Audrey and Daniel

Wow, they’re going to be coming like next week or the week after, we’re just going to hang out here in my backyard, man. Yeah, so like that kind of reaction of people who I really respect, who just go like, yeah, I want to focus on this as my as my work for sure.

[01:42:07]

Fast HTML: Reacting to HTMX

And they’re reacting a lot to HTMX.

Fast HTML: Providing a Surface for Hypermedia Applications

Do you know what I mean? Like, I feel like what we’re doing is we’re providing this surface to allow people to create hypermedia applications.

Fast HTML: Cobbled Together from Existing Ideas

Right. You know, and it’s just cobbling together like the idea of functional components that goes back a long time in like OCaml, Haskell, Elm, of course, History, you know, then the, you know, the HTMX approach, you know, the, the ASGI approach of like simplifying HTML a whole lot.

Fast HTML: A Small Implementation

Just kind of like, cobbles together these things. And like the whole thing’s like 100 lines of code, you know, and HTMX is pretty small as well, I think, right? The implementation.

[Carson Gross]

HTMX: A Small Implementation

Yeah, it’s well, I think it’s, it’s 4000 lines of code now, or maybe even 5000. Because we added so many type annotations.

[01:43:00]

Type Annotations in HTMX

I think if you looked at like actual lines of code, it’s just I don’t know, man. Okay, whatever. They found zero bugs, by the way, but it’s gonna say I don’t do type annotations in Python, because I’ve Yeah, we had a pretty good test suite.

HTMX: A Well-Tested Implementation

So but it’s all it’s fine. It’s all good. People want it. And now they got it. So but, but it is, you know, yeah, I think if you boiled it down, and sort of into normal code, I bet it’s a couple 1000 lines of code.

HTMX: A Couple Thousand Lines of Code

Yeah, you know, and I don’t write the most efficient, like lines of code style code, I tend to write plotting code where at this point, so but yeah, you know, you say it’s only 800 lines of code, but obviously, it’s 800 lines of code to do the right thing, or a lot better than 100,000 lines of code that does the wrong thing.

The Right Thing: A Good Thing About Getting Old

So that’s one of the one good thing about getting kind of old is you start realizing what the right thing might be.

[Jeremy Howard]

Discovering the Right Thing

Well, exactly. And you suddenly discover these people who have built, built the right thing, like when I came across the real JS.

[01:44:03]

Self-Contained Components: A Delightful Discovery

And I was like, Oh, yeah, self contained components. It’s almost like a kind of discovery. Again, it’s like, oh, there’s these things that when you put them together, it creates something delightful.

Combining the Right Things

You know, yeah. And combine. Well, yeah.

Fast HTML: Creating Little Apps

So I’ve created all these little apps now.

A Fast HTML App for Markdown Conversion

So like this thing, the other day, I was like, I was on the plane. And so I started writing a blog post in Microsoft Word, you know, that’s like, okay, I want to convert this to markdown. And I was like, Okay, I can’t find anything that does a great job of converting it to markdown. I write a fast HTML app to convert it to markdown. And that took me like, two hours, you know, chop it up on the web.

An Obscure JavaScript Library

And I found like, this obscure little JavaScript library somebody had used. So I basically hooked up with HTMX, you know, I used HX spells, which lets you call JavaScript kind of before it passes it back to your handler.

HX Spells: Calling JavaScript Before Passing Back to Handler

So I was able to that way, get this JavaScript client side cleaned up thing.

[01:45:03]

And then I used a Python markdown converter, and then use that to update.

A Weird UI Experience: Copy from Word, Paste into Markdown

And I it’s kind of funny, the way I actually had it set up is that you paste into this text box. The on paste event basically is the thing that causes the handle to happen. So it actually pastes the markdown. So it’s kind of this weird UI experience of like, literally copy from word and paste.

Fast HTML: Creating Things That Feel Good

So yeah, so I kind of create all these little things, and they just feel good. And I think like, yeah, this is, this is the right way to do this stuff.

[Carson Gross]

Fast HTML: Scratching an Itch

Well, it’s really good that it’s scratching your like, the fact that you’re using it, and it’s not just you kind of inventing this tool for the world.

[Jeremy Howard]

Fast HTML: Jono’s Moodle App

You know, I think my team loves it. Like my friend Jono, he wrote this thing called Moodle. It’s so fun. And like, so he’s somebody who spends all his weekends like tinkering with, I don’t know, robots or art or whatever.

[01:46:04]

He’s a inveterate tinkerer. And nowadays, it’s a good sign that he always wants to tinker with fast HTML.

Moodle: A Pictionary-Type Game

So he wrote this thing called Moodle, where you go to the site, and it gives you basically a Pictionary type word, you have to draw, you start drawing it, and then there are three different language, three different language models running in the background that are trying to guess what you’re drawing.

Moodle: A Leaderboard

And as soon as one guesses correctly, you’re done. And so there’s like a leaderboard.

Moodle: Combining Canvas and HTMX

It’s all HTML based, you know, of like, who managed to reach word, get it done the fastest, right. And again, it’s combining like Canvas, and you know, all these things with like, oh, HTMX can’t do that. And I’m sure we’re doing well.

[Carson Gross]

HTMX: Working with Canvas and JavaScript

You know, it does the job. But exactly. And it’s not that HTMX isn’t trying to do all that, right. It’s there to work with Canvas and with, you know, JavaScript and whatever else it needs to work with.

[Jeremy Howard]

Moodle: Using WebSockets

Yeah, we get our leaderboard and we get our like, you know, and we’re using the WebSockets thing, which is nice.

[01:47:04]

Server-Side Events: A Powerful Extension

And I’m about to dig into the server side events extension. That looks nice as well.

[Carson Gross]

Yeah. Yeah, server side events. Those are, you know, two extensions, WebSockets and server side events.

Server-Side Events: Read-Only

I like the server side events one. It’s read only. So as long as you’re just consuming stuff.

[Jeremy Howard]

Server-Side Events: Good for Language Models

It’s good for language models that stream the results back to you. So you basically read it until it’s finished.

[Carson Gross]

Server-Side Events: Dependent on Server-Side Environment

Totally. And a lot of that, you know, being able to use that depends a lot on what your server side environment gives you too. So you know, if there’s good support for it using whatever your server side environment is, then you can you can take advantage of them.

[Jeremy Howard]

ASGI: Clean Support for Server-Side Events

Yeah, no, I mean, with ASGI, it’s all like async Python. So everything works. Yeah, pretty cleanly.

Hyperscript: A Cleaner Example

I mean, not as cleanly as the hyperscript example that you showed.

WebSockets and Server-Side Events: Everything is a Nail

The other thing I like about with these things like WebSockets or server side events or whatever is this idea of like, oh, you want to like, stop the connection as like, well, you literally just return a new DOM element that doesn’t have a WebSocket, you know, attribute in it anymore.

[01:48:05]

Like, it’s like, yep. When you got a hammer, everything’s a nail. Well, kind of in HTMX, everything is a nail. It’s like, everything’s a div.

[Carson Gross]

HTMX: Everything is a DOM Element

No, no, no, I’m kidding. Everything’s a DOM element, not a div.

HTMX: Discovering a Solution

But yeah, yeah, I, you know, again, I feel like just what you said originally, like, it’s more I discovered this than anything else.

HTMX: Working for a Lot of Stuff

And it does, it works for a lot of stuff, you know, and if you’re, you know, like, it sounds like what you got, you guys are approaching it the right way, which is, I’m not going to try and make HTMX do stuff it’s not good at.

Integrating with HTMX via Events

I’m going to instead, I’m going to integrate with HTMX via events. And that’s what I try to tell people.

A Good HTMX Developer: Thinking in Events

That’s what, in my mind, makes someone a good HTMX developer is if they they get that, okay, like, start thinking in events, and I’ve got these other tools that I want to integrate. Now, how do I integrate them cleanly, hopefully, they have a good event model, or maybe I have to impose one on top of it or something like that.

[Jeremy Howard]

A Web Programming from Scratch Course

So maybe I should think that’s the right way.

[01:49:01]

I should talk to you sometime about my my coming up plans. I’m hoping to actually create a kind of like web programming from scratch course.

Building Up from Socket Handlers to ASGI

And I’ve actually now created this whole thing where I like literally, it’s a notebook that starts with a socket handler, and builds up HTTP, and then builds up SGI. And, you know, I’m really hoping that a lot of people will understand the pleasure of this style of web development.

The Pleasure of This Style of Web Development

And I also want to introduce people to things like pay five bucks a month to run your own VPS that you SSH into when you deploy things by r syncing to it.

The Power of a VPS

And, you know, yeah, it’s, it’s a, it’s a bit of a superpower, I think, to have those.

[Carson Gross]

Teaching Hypermedia at MSU

It is. Absolutely. I’m teaching. I’m teaching a class at MSU this fall on hypermedia. And so I’ll be teaching sort of similar things.

[Jeremy Howard]

Recording the Hypermedia Class

Will you have a chance to record any of that?

[Carson Gross]

Or, you know, I’ve got to I’ve got to talk to the department.

[Jeremy Howard]

Collaborating on a Hypermedia Presentation

But maybe alternatively, you know, we can do something together where you could show some of your slides if you’re allowed to.

[01:50:05]

And yeah, team up. Yeah, that sounds amazing.

[Carson Gross]

Getting Permission to Share Slides

Yeah, yeah, no, I’ll, I’ll, I need it. I just want to I need it.

Summertime: No One Responds

Right now. It’s summertime. So everyone’s gone and no one responds. But, but I’ll talk to him as soon as everyone they should be back in a couple weeks or so.

[Jeremy Howard]

Appreciation for Carson Gross’s Time

Well, Kasson, I really appreciate it must be getting a little late in the evening for you. So I feel like it’s not too bad. I’ve learned a lot.

Helping Others Learn

And I feel like I’ve hopefully helped other people learn a lot. Yeah. Is there anything else you wanted to say or ask or anything before we wrap up?

[Carson Gross]

Congratulations on the Launch of Fast HTML

No, I just you know, congratulations on the launch. And I really appreciate you know, your support.

[Jeremy Howard]

Showing People What Carson Gross Already Made

And like I said, I’m embarrassed by it, because I feel like all I’m doing is showing people what you already made.

[Carson Gross]

The Python Community’s Interest in HTMX

So I hope I don’t get you know, obviously, that’s not true. But, you know, the I think the Python community has been a big source of, you know, HTMX people excited about HTMX because they can stay in Python.

[01:51:05]

Excitement for the Future of Fast HTML

And so, you know, I’m just I’m excited to see what you guys are what you guys are going to be able to do with this tool looks really, really neat.

[Jeremy Howard]

Thank You and Goodbye

Thank you, sir. Have a great night.

[Carson Gross]

You as well. Bye bye.