Anthony Alaribe on building a company with htmx and leveraging the browser
So we got a new season going, new theme music, doing a new format. We're gonna try, some conversations this time. So conversations around hypermedia and HTMX, and just talked to some people who are in the industry doing work. So first person I'm talking to here is Anthony. And, how do you pronounce your last name just so I get it right?
Lazarus:I I can guess from the from the way it's spelled that it's Alaribe, but I don't know that that's right. So how do you say that last name?
Anthony:You pronounce it perfectly. Alaribe.
Lazarus:Cool. So yeah. So welcome. Thank you for joining me and also helping me set up my, my recording set up here. This was awesome.
Anthony:Yay. Oh,
Lazarus:yeah. So just for some background, I met Anthony at the, h the no. I'm not gonna say h t next Devcon. At the Big Sky Devcon in Montana. Anthony gave an amazing talk, basically, about a lot of myths with, you know, multipage applications and stuff like that.
Lazarus:So yeah. So welcome. And, you said you're you're just coming off off another conference right now?
Anthony:Oh, yeah. It's it's been a a con a summer of conferences. Yeah. But, there was a Golan conference in Berlin, and Golang is my other love. Golang.
Anthony:HMX came along.
Lazarus:Yep. Yep. So, basically, you're just like your tech stack. You just go from conference to conference. And are you, I mean,
Anthony:not so much. Not so much? To this summer. Just this. Just this.
Lazarus:So are you were you talking at the conference or attending?
Anthony:Mostly attending. Yep. But I held a or I led a a a session on monitoring and just a kind of a like a community roundtable thing. Nice. Mostly attending.
Lazarus:Nice. Okay. So so let's, I guess, just, like, some background info from from your end. I mean, I I know you as, you know, a speaker on on kind of general, HTMLX and browser expertise. But sort of what's your what's your main project?
Lazarus:What are you working on these days?
Anthony:So I I I I'm found out a startup called API toolkit, which is it's a monitoring and observability platform. And, what makes it API toolkit and not just, I don't know, monitoring toolkit is that, most monitoring platforms are very general. You know? If actually, most monitoring, platforms have their background in infrastructure monitoring and sort of extended into application monitoring starting with logs. And I argue that they don't give as much value as we care about as engineers.
Anthony:And Yeah. API toolkit, is specialized in applications and actually looks into the payload. So it's, it monitors the app and looks at the payloads that come in and out of servers, especially, you know, like rest APIs and any such APIs in order to catch, sorts of bugs and breaking changes in the APIs. And if you've actually maintained, back end services, you know that there's different categories of problems that our our services have to handle. And, this monitoring platform, they are optimized for catching when or everything goes down or there's some crash or exception in the in the logs or things like that.
Anthony:But a lot of errors are actually that the the service is working perfectly, but maybe one field is missing or one field is wrong because of a bug some someone in the team introduced. And so API toolkit optimizes for, like, learning and catching, issues in in applications in web applications, especially.
Lazarus:Yeah. Interesting. So so this is I'm just kind of, like, realizing this now, but this is kind of it's funny because one of the big HTMLX things is not exactly using a JSON API. It's Yeah. So you're, like, using and examining and, like, this is your extreme expertise.
Lazarus:It's, like, JSON APIs, how they should work, what formats, what breaks them, all this kind of stuff. And meanwhile, to build that monitoring tool, you are not using JSON APIs. In fact, you're using a hypermedia setup where I mean, this is right? This is kind of the Mhmm. How the actual app is built, using HTMLX?
Anthony:Exactly. I mean, when you use APIs and you're so neck deep in this space, you realize how much things break.
Lazarus:Yeah.
Anthony:It's so much can go on, this indirection in between, and something that people don't realize is that Marshall and Jason is also not fast. In a previous job, that I had, we would we're handling quite a lot of requests per minute, and we hit a point where if you do a profile of the service, the only red spots you see are just from the JSON Marshall. You know, outside of, of course, the IO that we're doing to the network. But, with with API token, I wanted to just prioritize developer productivity, especially when building the platform itself. And, you know, using APIs was just gonna be a productivity drain as opposed to focusing on yeah.
Anthony:As opposed to what HDMx offers.
Lazarus:Yeah. So, like, I mean, I so I one of the issues I've had with the JSON API, and one of the reasons I would say I've moved off of it, in the last few years is the need to version different versions of the API because, you know so so I have at least 1, know, I have one mobile app, which is sort of the last remaining kind of API first kind of, system that I have. And I have to be so careful when I make changes and updates because some people are just never gonna update the app on their phone. Like, they just won't do it. So I've had to make all these decisions in, you know, do I version this API so that the next one can or do I just kind of, like, update it without breaking changes and stuff like this?
Lazarus:Yeah.
Anthony:Ironically, this is our entire business model at API Toolkit. And the business model is just that, you you see the care you are giving to these APIs. You're actually thinking about breaking changes. In the real world out there, people don't care. So I have I have, customers who are, like, digital banks, e banks, and they depend on third parties.
Anthony:And a third party would just come would just wake up at 2 AM in the morning and deploy some change that renames, message to maybe MSG or the reverse.
Lazarus:Yep. So
Anthony:it's kind of a harmless change. Maybe it was MSG before and the person decided, oh, this should actually be message, but forget that they have all these customers that have built their system around the previous implementation that said MSG. And yeah. So what we are just doing is catching those changes, those breaking changes, and telling the, you know, the team that, hey. Like, this third party API you depend on, they've changed this field from this to this.
Anthony:Maybe you should update your systems or at least, maybe sue them for breaking some SLA or something.
Lazarus:Yeah. There's a special sue button on your site.
Anthony:That that would be a lot that should be like some premium feature.
Lazarus:Yeah. Yeah. Interesting. So how does it so how do you actually do it? Like, do you connect?
Lazarus:I mean, if if it's secret, don't tell me. But, I mean, like, do they give you, like, everything that the API should be doing, and then you kind of compare it from that? Or do you just, like, ingest every endpoint they give you, and you make your own map, and then you, like, almost do, like, a git diff or something and check for changes? Like, what's your what's your sort of thought process on that?
Anthony:It it's actually both. So first, you you can anyone can upload, an open API specification of of the APIs they're monitoring, and that specification becomes the v one. You know, we we that becomes the first basis which we start comparing any request. So we are a middleware, which means all the requests that go in and out pass through the middleware. Of course, you can
Lazarus:How interesting.
Anthony:Sensitive information or whatever. So we never get a sensitive information if you like, but it's we're looking at the the actual payloads of the request response body and could compare it against the specification So that immediately differs on the specification, we we know. But for a lot of projects, they don't even you don't even need to upload the specification because we actually would learn from the the data that we are monitoring and generate the specification for you as well.
Lazarus:Yeah. Because I've never made a specification because I'm always ingesting my own APIs, you know. So I know I'm, like, I'm not gonna spend time writing it.
Anthony:So that that would actually be handy
Lazarus:to have it do it for me.
Anthony:Exactly. And, the behavior, the implementation is I I was actually describing it, to someone. I mean, it's pretty simple. It's it's especially for people who have some exposure to the blockchain space.
Lazarus:Blockchain. Interesting. Okay. Now you're getting into this. It's pretty simple.
Lazarus:I just need to know a little blockchain.
Anthony:No. Not all blockchain. But there's, there's something called Mekel trees, which is popular in the blockchain space. And the Mekel trees is basically a hash of hash.
Lazarus:I'm I'm sorry. What what what was the name of it? Mekle? Mekle tree.
Anthony:Mekle tree. It sounds fancy. Yeah. It sounds fancy, but this is all it is. You get a bunch of hashes.
Anthony:There's still a share whatever hash, and then you hash those hashes, and then maybe you can hash some more hashes,
Lazarus:and you
Anthony:end up with one hash. That hash that entire thing is a miracle tree.
Lazarus:Oh, so you're checking for changes in the hash and then rooting your way down.
Anthony:Exactly. So every time for every endpoint, we would get the the we get the payload. Let's say the request if it's adjacent, and we would flatten it into this key value pairs where the key is body dot name dot something, you know, something like that. So we have the key, and then we have the list of values, and we hash each of the keys as well. And then hash we hash all the keys then hash the keys together to get one hash, one single hash which is the Mako tree that represents that endpoint or one of the shapes of that endpoint.
Anthony:And what it looks like is that for every endpoint, they would usually be 5, 6, 7, shapes or hashes that represent that endpoint. That's the the combination of of fields that, your customers or you would would send would send out of that, endpoint. Yeah. And if for whatever reason, you know, someone adds a new field to the response of that endpoint or removes the field, etcetera, then, of course, it would mean there's a new hash, and that's a breaking change. And, the engineer simply has to go and acknowledge if that change was intended or if it's actually a bug.
Lazarus:Wow. That's cool. Yeah. That's fascinating.
Anthony:So just where where our life is just a bunch of hashes. We're just like, Yeah. Harshish. Harshish.
Lazarus:That's cool. I mean, that makes sense. And then sort of combining them together, so you just have to check one place, and then you see, okay. Well, now I get to check deeper, deeper, but it's like, you know, this gives you, like, log of n, like, ability to look into really complicated trees. That's cool.
Anthony:It's actually even less, because for most requests, they would I can hash it. I I can hash it and just check-in this bucket of hashes in, how do I how do I say this? For most requests, we'll process it super quickly Yeah. Because immediately, they we we get a request and we get one hash. We can just check and know
Lazarus:Oh, you're checking, like, an index of that hash. Like, it's not even, like, oh, not even looking in a big list. You're just, like, checking it.
Anthony:Exactly. Yeah. Yeah. So for most requests, it's just we process it in, like, nanoseconds because we just get a hash check. Okay.
Anthony:Nothing special. Move on. So we only need to do something when, you know, a really unique request comes along the first time.
Lazarus:Yeah. Yeah. Okay. So so in your presentation at Big Sky, you showed some screenshots of API toolkit, and it was a lot of, like, graphs. Right?
Lazarus:Mhmm. Am I remembering that correctly?
Anthony:Yeah. I remember you correctly.
Lazarus:Yeah. Yeah. So what I mean, it looked you know, it's very, like, kind of visual, which I thought was cool. It's very sort of dashboard y look. So what are you showing in graphs like that?
Anthony:At the end of the day, it's even though we're I'm talking about all these fancy breaking changes thing, which separates us from everyone else, but we're still observability, which means, people want to observe. You know, you wanna see, okay, these are all the requests coming in. Mhmm. This is the error rates. So we are indexing all the errors that happen, all the crashes that happen on your web service, performance metrics, you know, how what's the latency of this particular endpoints.
Anthony:Wow. So we know all the endpoints. We know how fast they are, how slow they are, how much errors are happening, and we allow you query that as well. You know? So you might want to query, give me all the requests that my customers made, which had an error in the last 10 in in the last hour.
Lazarus:Yeah. Yeah. Yeah. This is so useful.
Anthony:I was like, because I'm like
Lazarus:I mean, this my experience with APIs, like like I said, I I just create them for myself. You know? So it's I haven't, like, made one that's really ingested. It's my own apps that are using them, whether it's a front end web app or a mobile app. So I my monitoring is, like, when a customer is, like, yeah.
Lazarus:I wasn't able to save, and I'm, like, alright. I gotta check whatever logs I have, and it's usually pretty slim. It's like, can
Anthony:I read through it? Let let me tell you the process for you. It's usually that you ask the customer, what were you doing?
Lazarus:Yes. Okay. Yeah. What screen
Anthony:were you on? What did you click?
Lazarus:I I literally had that conversation a couple days ago. But, yeah, keep going.
Anthony:Exactly. And you asked that because if you can't reproduce the issue, you cannot fix it.
Lazarus:Yeah. Here's a quote that I fix it. Here's my quote from the scene. I'm flying blind. So can you tell me what happened?
Lazarus:Can you take a screenshot? Because I I literally have no idea how that could have happened. You know? It's, like, not it wasn't a big deal, but it's, like, I can't recreate it. I've tried 10 different times.
Lazarus:I don't know exactly what you're seeing. So just do you know how to take a video of your phone? Like, send that to me, please.
Anthony:Exactly. So that's kind of the benefits of actually logging the request. You know, very few platforms log the requests and response bodies. I don't know why it's not so. Maybe it's just because of the scale of data involved.
Lazarus:Yeah.
Anthony:But if you if you log exactly what the customer did, it means you could instead of asking the customer, oh, what did you do? Blah blah blah. You can just go into your observability tool and search for that customer's request and copy it as a call, for example, and paste it in your postman and try to reproduce it without asking. And this is very important because I am I'm Nigerian. I I did my last two jobs.
Anthony:I we did Fintech in Nigeria, which is 200,000,000 people. A lot of these people are not very educated. So even the basic stuff like, sign up form, you have first name, last name. People would put the full name in the first name box.
Lazarus:Right. Right.
Anthony:And you're, like, asking the customer, why couldn't you sign up? They're like, oh, it's not working. And you're like, what did you do? I he has no idea how to answer that question.
Lazarus:Right. It could be like, oh, I'm I was thought I was signing up 2 people, but I'm the first one, and then the second one is the second one. So yeah. Yeah. So so and you're if you're actually able to see it before they do, before they need to tell you about it, it's like you feel like a superhero.
Lazarus:Like Exactly. Like, oh, yeah. No. I know what you're talking about. It looks like you just need to, you know, you it just looks like you just need to split your name in in different parts.
Anthony:Precisely. Exactly. You I mean, you know you you you know what I'm talking about. Yeah. Yeah.
Lazarus:Yeah. So okay. So so you're building this API toolkit. Did you start with HTMX, or was it something like so how did you get started, like, with HTMX in general?
Anthony:So I spent maybe the journey actually starts a little bit before. I've always been trying to build, like, startups of some form. Yep. And my the previous startup I tried to build was, an auto failure because I I was building it for 3 years with my cofounder at the time. And, it was sort of a Shopify, but more targeted at the African market.
Anthony:And we never really launched. Just it was just so much work. You know, when you are 2, 3 people trying to build stuff, you have a react. We had a something like a react front end and then a go land back end. And you it's just you have to context switch between both modes, and my cofounder, Dan, he did not know anything.
Anthony:He didn't care about JavaScript at all. So I would have to do a lot of this front end stuff as well as and it was just slow.
Lazarus:Yeah.
Anthony:So after that, I'd after I decided we decided to, you know, no longer work on that, I want I I took a break and said I wanna do something new, but I didn't wanna go through that, experience of, you know, where the engineering is actually what is holding you back.
Lazarus:You know
Anthony:what you need to do, but it just takes so long because of the hoops you have to jump, to, you know, to make something, to put something in in the user's hands. And, I I wanted to build a regular back end, you know, the kind of apps I used to build when I when we would do Spaghetti PHP. Yeah. Remember in PHP where you would you would do the SQL query right inside the HTML file.
Lazarus:Yep. And you could just pump those things out. That's what I remember
Anthony:on it. Exactly. So I I was like, I'm just gonna build these things because it felt like when I used to do that, like, when I was even less experienced and just starting out, I would actually ship things. And now I'm like so much more experienced as a software engineer, but I can't ship a simple Shopify thing.
Lazarus:Yeah. So I
Anthony:was like, okay. I've just I'll become a caveman again.
Lazarus:And then Caveman. Yeah.
Anthony:Yes. I think I I around that time, I came across this grog brain, Oh.
Lazarus:Hello? And, that was my first HTMLX thing as well. It was a grog brain too. It's just
Anthony:that's funny. It it it's a real thing. I mean, for anyone who if you work in a really big company, where there is very clear you know, there's the front end team, there's the back end team, and you don't have to worry about you only have to worry about your back end. You never have to worry about the end to end product feature. Then you maybe you you you might not connect with the, perspective.
Anthony:But if you actually have to do both, you realize it's it's painful. I have to learn state management, and also the front end ecosystem changes all the time. You know? When I started, they were like, oh, you don't need a state management. Just I don't even remember what was the way to do it.
Anthony:Then it became bad, and everyone had to use something called, re not it's not it's not Redux. Before Redux. A Flux implementation, and then there was like a dozen Flux implementation, and you're like, okay. Which one do I learn? Then Redux became popular, and I think I built something in Redux, and at the time when I was finally getting to the end of what I was building, the ecosystem decided that, okay.
Anthony:This is really a lot of work. Maybe you should be writing MobX. Then I go learn in MobX, and before you build something in mob x they realize oh, mob x is really a lot of work now you should use use effects or it's just changing so much, and I was like, okay. I really just want to put a web page in front of a user. Yeah.
Anthony:Yep. So, I I I built, API token in in HTML access. Actually, before, API token, I built some to do app in
Lazarus:Oh, nice.
Anthony:In HTMX. You know, this is I love a
Lazarus:to do app. I love it to so I've also built my own to do app in it, and I feel like I actually, like, recommend that to everybody because, like, I don't know if you still use yours, but, like, I set up mine for the purpose of you know, it's like all these to do apps, they're not really that good for me. Like, I've tried so many now, and I'm just like, you know, I don't wanna fill in a form every time I have some item. I don't wanna fill in a due date. Most of the time, I don't care.
Lazarus:I just need to see what's what am I working on this week. So it's like being able to build your own to do app with exactly what you need in it, I actually think that's, like, a useful exercise. So did you end up, like, actually using yours?
Anthony:Yeah. I used it, but, I I think I I found that I needed to put in some more work, which I didn't put.
Lazarus:Yeah. So I
Anthony:have not used it as much as I should.
Lazarus:But what do you use, though? Like, what do you use to keep track of your own items? Do you use anything?
Anthony:Unfortunately, I'm back to being a caveman, and I'm using
Lazarus:a notebook. Okay. Okay. Yeah. Notebook is something like that's what I use sometimes too.
Anthony:I used to think. Either I'm just writing in a notebook or I open a Slack, message with myself and just put some checklist in there.
Lazarus:Yeah. Okay. So short term, like, items that are clear, you'll put into like a Slack message so you don't forget about them.
Anthony:Yeah. But I've used everything. Right? I've used I have a notion, to do list, which I never remember to open.
Lazarus:Yeah. I
Anthony:have a Keep, which I I still have a lot of things in in Google Keep, but in I really also don't remember to open. So yeah.
Lazarus:Right.
Anthony:But, anyway, just just coming back to HCMX. That building that to do app was just so it made me feel like, you know, you have these constraints, but I want I want to build something very interactive, but I have the constraints that I get from using HTMLX and not using React. How can I like get that interactivity? So I wanted things like, you know, you can click a a command k, and you automatically can start typing it to do you know, having keyboard shortcuts, and I I think that's when I created, I created a a, a pull request to to to add, support for this HX actions to HX actions. So I'm still gonna revise that.
Anthony:Yeah. But because I know. You know, at some point Yeah. At some point, I discovered the way HTMX does, triggers is just it's amazing. Yeah.
Lazarus:It is. It's ridiculous. Right? Like, you just yeah. I mean, did you have access to any event?
Anthony:Yeah. You can put h x trigger intersect once, and that will get caught once when that thing comes in into the browser. If you've ever tried to write that in JavaScript, it it is like at least 20 lines of code minimum because you have to write an intersection observer and then give it some callback, and it's just so much code. So I wanted to use those triggers, those h x trigger, but, instead of hitting some HTTP endpoints, trigger some JavaScript or Hyperscript, you know, and, I'm still gonna bring that use case back.
Lazarus:Yep. Hyperscript. I haven't I haven't started messing with hyperscript yet. I'm sure I probably will, because I'm, like, I'm all on board with with whatever the, Carson's doing, but I haven't tried that yet.
Anthony:Should I show you an example of something that you do with Hyperscript that I just
Lazarus:Yes. Just show me. Just show me. Yeah.
Anthony:I know it's I know
Lazarus:I'm gonna love it, which is why I haven't touched it yet. I'm just like, oh, man. I cannot learn another thing. I just can't do it. But, like, I can already tell I'm gonna love it.
Anthony:So see this search box. Oh, sorry. I thought I was sharing my screen. Screen. Sorry for people who are listening to this in audio.
Lazarus:I'm I'm gonna give, like, a a perfect description of it as soon as you put it up on the screen. Don't worry.
Anthony:Okay. They'll they'll feel like they can see it. Oh, smart.
Lazarus:Alright. We got a bunch of stuff on the screen. No. Okay. Keep going.
Anthony:You see the search box? Yep. If I type, I wanna filter this list, right? So let's say I I'm typing
Lazarus:So we got a big long list and we got a whole a bunch of endpoints in a huge long list of stuff. And it's and just a, you know, pretty standard, like, long list with the search box up the top. Type typed postman, and it's filtered down So just 3 items.
Anthony:Exactly. So you see, like, if I deleted, I get the whole whatever, but if I type postman or if I type anything resume, it filters down to only the list item that has resume. Yep. How much could you think it would take to write this kind of filter?
Lazarus:So, I mean, I guess I would probably do it with HTMLX, and it would I mean, even with I mean, just if you were trying to do with JavaScript, I've I've done that before, and it's a nightmare. And if I was using the HTMLX, I don't know exactly. I would have to really sort of think about it, because I would be sending a lot each time. I'd probably do a trigger, you know, on key up, and then I would be sending and redrawing it. So what do you is I I guess, first of all, is it going to the server, or is it just front end?
Anthony:It's front end. Okay.
Lazarus:So
Anthony:if you go to the server, then I would use HTMLX like you said.
Lazarus:Okay.
Anthony:Okay. But a lot of the time, you use Hyperscript for situations where the data is right in the browser, and you just wanna manipulate what is already.
Lazarus:Yeah. So this is what I've been using Alpine a little bit for when I when I sort of need that, you know, client side only DOM, you know, things that affect the DOM.
Anthony:I see. So let me show you the code that I wrote, and maybe you tell me how you would do the same in in Alpine. The code for this is it reads as English on inputs. That's every time I type something that's on inputs. Yep.
Anthony:Show this is the class name, so any element with this class name.
Lazarus:And these are this is the list below. Yep.
Anthony:Yeah. When it's text content dot to lowercase contents my value dot to lowercase. That is all.
Lazarus:It's so good.
Anthony:It's literally it's literally one line. If this yeah. It's literally one line, and I have full very flexible, search going on in here.
Lazarus:Okay. Wait. Wait. Wait. Wait.
Lazarus:How is it? It's finding that text anywhere in the actual text? Like, because it's within different divs. Right? Like, it's all Exactly.
Lazarus:Yep. So input show
Anthony:In in in HTML or in JavaScript in general, if you have an element, you can do element dot text content.
Lazarus:Text content. I see. So it gets all the actual
Anthony:visible text. Exactly. So I'm it's this is, like, how many characters? And I'm done.
Lazarus:Yeah. No. That's wild. So and I guess, like, do you have to My my only issue looking at that is, like, how do you debug something like that? Like, you have to sort of get the when it's, like, on input, show items list in items list page, when it's text content to lower.
Lazarus:So it's, like, it reads so nicely, but, like, how would you think to put those you just sort of find an example and and copy it? Actually,
Anthony:I think you get a feeling for it. There are many ways to write this.
Lazarus:Okay.
Anthony:So I could also write it in the JavaScript way. I could say show, dot this in this when I don't know. It when, dot items, list item, dot text content. You can write it you can kind of write it like JavaScript in some sense.
Lazarus:Yeah.
Anthony:It's just I've gotten I've gotten used to this word. No.
Lazarus:I mean I would prefer this if I could fig you know, it's like if you can sort it out then it's like I mean, I'll like, I always kind of want my code to read like English. So I I don't usually use, like, the ternary or whatever they're called. It's like there's a lot of things I don't use, like, collection, morphing, like so it's, like, more mapping because it's just hard. I'm like, I'd rather use a 4 each loop. I'd rather use while.
Lazarus:Because it's like, you can just look at it without any brain processing and know exactly what it does. Like, I know what an if else does. Like, I don't have to think about I don't have to think about, like, the double question mark or other things. Mhmm.
Anthony:Sometimes
Lazarus:I'll use those if it's really, like, you know, if there's a million of them and they're all the same. But, yeah, like, this this reads so nicely.
Anthony:The arguments people give against this style of programming where the code reads like English is that they're like, oh, it's so ambiguous. There's so much it's, you know, it's English. It's not this, but in practice, like, hyper script is not all of English.
Lazarus:Right it
Anthony:has a very constrained grammar and you learn that in like 5 minutes you learn that you can do its or my dot, you know, my it's the same as you would learn that you can do this dot something in JavaScript. And instead of saying this dot, you say my It's the same thing. I it's a very constrained grammar, and you pick it up way faster than you would imagine.
Lazarus:Yeah. Yeah. Interesting. No. I mean, I I'm I'm probably going in that direction.
Lazarus:I can already tell.
Anthony:But let me show you another cool thing. Yeah. You see this, say if I wanna do select all
Lazarus:Okay. Yep. So we're looking at the same list, and it's got check boxes over on the left. And up at the top, there's the check box that you check to check everything on underneath it, which is happening immediately. There's no, like, you know, millisecond delay where it's going to the server or anything like that.
Lazarus:So this is happening client side. I'm gonna guess using Hyperscript here.
Anthony:I wanna show you the the hyper script. I really like hyper script that you can just inspect element and see exactly how it works. Yeah.
Lazarus:Yeah. I'm gonna read it out here. On click set dot bulk action item checkbox dot checked to my dot checked. So my is gotta be the same as this. Right?
Lazarus:And it's like Yeah.
Anthony:The exact element you clicked on.
Lazarus:Yep. So the element you clicked on. So it's just saying set everything with that class, bulk action item checkbox dot checked to my dot checked. So it's setting that value. Yeah?
Lazarus:I get it.
Anthony:So so if this is checked, all of those items with the class would get checked as well. If it's unchecked, all of those items with the class get unchecked. So it's like this feature, I've had to implement it in a dashboard in react in the past and it's the kind of feature that you procrastinate for weeks because you're like oh fuck I have to implement this and you just procrastinate because you don't want to do it because and then in hyper script, you just write, send this dot check, then this dot check, then check, then you're done.
Lazarus:Yep. It just happens. Yeah. That's wild.
Anthony:And you get this whole, locality of behavior because you just add that hyper script thing.
Lazarus:And like you said, you can
Anthony:in question.
Lazarus:You can inspect element and just look at it. Yeah. No. I like that. I'm not gonna lie.
Lazarus:I like it.
Anthony:I can see you getting converted.
Lazarus:Yeah. Okay. So so you built so so what what's the big kinda like, you know, part of the question that I've sort of talked about a bunch on this podcast, and also just like every now and then I go on Reddit and talk about it. I'm on Twitter, and it's, like, I think one of the big questions is, like, HTML still feels new to people. So, you know, I sort of know the my own answer to this question, but, like, people aren't sure that they can build real apps in it.
Lazarus:You know? Like, big apps that do a lot of stuff, that do this and that. So, you know, you've obviously built, this app in HTML, and, like, how much of it would you say? Did you sort of embrace the whole thing, or is it, like, certain pages? Like, what's what was your sort of approach for that?
Anthony:So maybe the first thing I would tell people is that we were building applications before React and Backbone. Js and all of that came along. So even in the even before, I think Google Mail, Gmail was one of the first applications that went all in on Ajax, you know, having this kind of complex, Ajax y apps. But even before goo Gmail, there were lots of other email clients that, you know yeah. Maybe they were not they were not as smooth as Gmail would have would be, but they were they worked pretty well.
Anthony:So if people from 20 years ago could build web apps,
Lazarus:Yeah.
Anthony:You can the same tech is still around. You can do that. So what h t m x brings to the picture is that you can build your application like a caveman from 20 years ago, where your app feels like what Gmail could feel like. Actually, no one would tell any difference because it would be just as smooth. You would be able to have partial page updates.
Anthony:You would have all the nice things without going all in on some single page app React JS framework. And part of my talk at, at the nothtmx conference at Bozeman
Lazarus:Yep.
Anthony:Was that even if you don't go in all in on HTMX, you know, I I love HTMX and I use it a lot, but browsers have already been filling the gap. I mean, the the people on the browser teams, they're not stupid. Right? They they are building browsers for web pages, for web applications, and they've seen that a lot of people are building single page apps because they want certain user experiences. So they sit down and think, okay.
Anthony:Do people really have to go in on, you know, single page ads just because they want these experiences, and what can we do? And one of the simple, examples is that when I started or when at the time when React JS came out, one of the, ways you would tell a React JS application apart or even an Angular one app apart from a non Angular one app is that when you click in in in in a regular non Angular one application, when you click on a link, the browser would flash white Yep. And then load the next page. So that flash white was the thing which at some point, everybody nobody wanted the flash white.
Lazarus:Yep.
Anthony:So we went all in. But now you don't even get that flash white at all because the browsers have realized, yeah, we can do something about this.
Lazarus:I did not know that either. And I after your talk, I was like, is he for real? Like, are you sure about this? How how have I not noticed this? And I went, and I have, you know, I have some apps, just, you know, use a just to click a regular link.
Lazarus:It's true. It's just like it now just updates. Yeah. I guess it waits a little bit. It keeps what's on the screen there, and then it just pops in the new one.
Lazarus:And it I was like, oh, okay. You're right. That's done.
Anthony:Like, this doesn't have that anymore.
Lazarus:Exactly. That's funny that I hadn't noticed that.
Anthony:And and those are the best features, and I I really commend the these the browser teams for doing some of these things because those the best features are the ones that they come in, they make your life so much nicer, and you you you can subconsciously feel that something is better but it's not glaring.
Lazarus:Yeah.
Anthony:And there are lots of other little things that have come, you know, since then. For example, now you can have view there's this thing called the view transitions API where you can build a regular multi page app. And when a user clicks a link, you animate the next page into view. Yeah. So You know?
Lazarus:Okay. So so you mentioned that, and and I, like, I had not seen this before. And I like, what's the what's the concept for that? You does it matching the IDs or something? And and how do you set like, I I guess, like, do you just set that up?
Lazarus:Like, you set, in the CSS or something like that? You're, like, the you want this ID to become part of this transition?
Anthony:Exactly. So you there is both a CSS API and a JavaScript API. So you have a lot of flexibility in how you want to animate things. In the CSS, they introduced some new pseudo classes where you can you can, target the old page. Yeah.
Anthony:There's a pseudo class that represents the old the page you're transitioning from, and then there's one that represents the page you're transitioning to. And like you said already, the the browsers are already doing this paint holding where when you start a request, they hold the the old page in in on the screen, and then make a request for the old page before they swap. That's why we don't have this flashing white as much anymore. So if they are doing this, it means they have at at some point, they have both pages Yeah. Available.
Lazarus:Interesting. Okay. So this, like opens up the view transitions possibility. Exactly. Yeah.
Lazarus:I haven't I haven't tried that stuff yet but I mean you like I would just say, like, if anyone listening, like, I'll I'll add a link to that talk, but I mean, it's it was so good. Like, it was just, like, I all this stuff I had never because, like, I'm on board with keeping things in the simple side. Like, I don't I don't wanna create a virtual DOM. I've done plenty of single page apps in the past, and I don't wanna do it anymore. Like, I that that experience was not pleasant for me.
Lazarus:And, like, now that I have to go back and support, you know, I got big into Vue, Vue JS. And when I have to go back and support those pages, like, I'm just mad at myself that I'm, like, this is not this is not fun. And I don't know if I'm gonna ever be able to upgrade this. I don't think so because it was on, like, view 1.2, and I don't know what we're at now. Mhmm.
Lazarus:But I'm sure they're not compatible. And so, you know, I was even talking about that today on Twitter, how I expect HTMX to be almost literally the same in 10 years from now. And Carson, you know, tweeted as well, like, yeah. It's I don't think it's gonna change much. There's no reason to change it, and that's huge.
Lazarus:Right?
Anthony:I mean This is a value that I don't know why this is not spoken about more. We, as an industry, we we've come to believe that, you know, being busy a project that is busy and changing all the time is the best way. So when you go on GitHub and you see a repository that was not updated in even sometimes even 1 month, you're like oh my goodness I've seen someone create an issue saying this report wasn't updated in a month is it abandoned I'm like
Lazarus:Yeah. Yeah.
Anthony:So now you're just changing things just for the sake of changing things so people feel like something is going on in the project?
Lazarus:So, yeah. So I think so let me let me push the let me push the other side of the argument here, which, like, I now work for myself. You know? And I have clients and the but the projects that I maintain, I'm responsible for. So when technology comes along, that helps me never touch those projects again, but I still, you know, get paid to support them.
Lazarus:I still like, I this is I understand. This is for me great. But if you are, you know, a 1000000 different developers who all need jobs, then, like, I, like, I don't want to negate the idea that, like, these giant corporations need to keep paying a bunch of developers because I like the developer economy. Like, I'm glad that there's plenty of people out there who are working and having jobs and getting paid a lot of money to do support. But, like, that's so like and when I, like, am, like, down on React for stuff like that, and I'm like, look.
Lazarus:Like, it's gonna it just requires so much upkeep for 1 app. What a nightmare. I wouldn't wanna do that. But it's like, yeah. Someone else is getting paid to do that, probably a ton of money, maybe more money than I'm making, like, doing my 20 different projects.
Lazarus:So, like, I'm like, I don't want you to lose your job. That's my, like, you know, my then I'm like, go keep working, do wonderful stuff, all these kind of things. But, like, for myself, like, I don't wanna be caught in that trap of constantly updating one front end app because it requires, like, a hand holding for its entire lifespan. Like, I know that's reductive. That's a little bit, like I don't I'm not trying to be mean about it, but, like, it literally is so much work to just keep one thing going.
Lazarus:That's not what I wanted to.
Anthony:It's a lot of churn. I mean, there's like like you said, there's both sides of the argument. I also think the world is richer for having something like React. Actually Yeah. In my in even in API toolkit, I have some parts of the project that are built using web components because as much as we love HTMLX and love Hyperscript and, you know, there's always just some user experiences that it's just hard to achieve with those things.
Lazarus:Yeah.
Anthony:But that doesn't mean you have to go in on React. But web components now, it only exists because someone decided to build something like React, and then the browsers saw, you know, this desire, this need, and and created a specification out of it. So we need to we we are richer as a result of, you know, of all the innovation that happens in in, you know, in all these fronts. I just don't want, it's like a maximalist perspective that, you know, there should be only one way or everyone should always jump on this new bandwagon and its section.
Lazarus:Yeah. No. And I'm I'm I'm on board with that for this too. Like, you know, I if I if someone asks me, like, what should I learn for programming? Like, I mean, I I could tell them my own like, if you're trying to be a single one developer, full stack, doing everything, like, I might actually recommend huge part of it.
Lazarus:That's the front end world is gigantic and It's an interesting important. Yeah. Like, it's a big part of the industry. So, like,
Anthony:You have to follow the money when you're starting out, you know. Do it what's gonna get you paid first Yes. Before you
Lazarus:Yes. And you might love it and like then good for you, you know, then you can build, like, these incredible experiences that are client side. And like there there is a lot of stuff that would just work better client side fully. And it's not usually what I'm working on, you know. I my stuff is primarily server centric because I between work with a lot of different teams that are working together, stuff like that.
Anthony:I mean, see the app we're using to make this podcast, Riverside. I mean, good luck. This on HDMI.
Lazarus:Yeah. That is a good point. Shout out to Riverside, which Anthony just successfully sold me on for this episode. Yeah. If there is some sort of affiliate thing, I'm gonna make sure that you get yours.
Lazarus:Yep. That's shit.
Anthony:Yeah. But it's just amazing software, so I'm always happy to recommend.
Lazarus:Yeah. Yeah. Yeah. So I I mean, I don't know. I I feel like I actually could, like, ask.
Lazarus:Like, pick your brain. I think I did at Big Sky DevCon at in the after party. Just pick your brain on this, because the stuff you talked about on the browser side, and there were 6 different myths. And that video, like, I would highly recommend to to check out that video, because it's, like, for somebody who's kind of trying to push the limits of, you know, what the multi page app can do, what the sort of old school way of building these things. If you're trying to push those limits, like, every single one of those tips, I feel like, is, like, a key part of that.
Anthony:Yeah. There there is one, feature that maybe I want to mention again for people who are listening. So one common, use case or one common thing that we want people wanna do in multi page apps is that when you click on a link, you you get the next page instantly. And because of this desire, we've had some we've had things like trouble links for people in the whales world. There was also libraries like pjacks.
Lazarus:Pjacks. That one.
Anthony:Exactly. And once again, browsers actually listen. So now they have something called speculation rules, which is a kind of a JSON configuration where you you tell the browser you know what elements or what links to preload or pre render which is which actually gives you more flexibility than what Pjax would do because Pjax would, you know, you would just It
Lazarus:worked on the hover. Right? Like on mouse over. You mouse over a link and it would pull up the page in Ajax and then not show it to you until you completed the link. That's sort of the concept.
Lazarus:Right?
Anthony:Exactly. With the speculation rules, you can have the same, using yeah. But you can have the same with the moderate. It's called the moderate, I don't remember the word, but you can also have even more elegant preload. For example, if you know that a user is absolutely gonna click a particular link, then you can you can just preload and pre render it from the get go, which means when the user clicks, it's instant.
Anthony:Yeah. So it's it's
Lazarus:just sitting there waiting. Almost like you have if you were to preload a template and you know in an SPA or something like that precisely Yeah. Although it probably preloads it after the page loads, so you don't even take that hit of, like, any sort of browser thing. Yeah. I mean, that sounds like I don't know.
Lazarus:Just these things together, like view transitions plus the, plus the speculation. Speculation rules. I feel like I keep getting I almost get tempted. I just wanna, like, have, like, a laboratory where I just, like, try these things. Because, like, you know, I I have my job and my clients and, like, I it kills me sometimes that I I need I want I would like to find time and a reason to explore some of these.
Lazarus:And I do in the projects I work on, but, like, you know, I
Anthony:don't I can't do them all right now. But Mhmm. Like, I wanna move in that direction. The good thing about Do
Lazarus:you ever sort of just use API toolkit as, like, your testing ground?
Anthony:I I mean I do. Unfortunately, I do.
Lazarus:No no. It's good. I mean that's the thing. You you you gotta push the boundaries. You know?
Anthony:Yeah. Especially when it's your project. You know, we have this, this kind of, what's it, what pride about something that you build. So you wanna, you know, make it the best you can. Not always the best idea because maybe I should be doing more marketing, but I'm like, I'm coding some features.
Lazarus:Ah, it's so fun. Yeah. Yeah. This is the eternal developer founder struggle.
Anthony:Something I wanted to mention about this browser tech, is that you can be sure they would always be there.
Lazarus:Right.
Anthony:Compared to when you master some API that comes from a single page app framework, which might not be around in a in a year. You know, like, there's a time when I was mastering Redux and MobX, and I I have no use for them anymore. But the browser would always be the browser. You know, it's easier things don't come into the browsers very often, but when they come in
Lazarus:You're right. It's always there. And this is like this reminds me of one of the talks. I think it was Alexander, who works on HTMLX there, and his talk was about actually changing HTML. And that's sort of the next level of past the browser is, like, okay.
Lazarus:Can you actually add functionality, like HTML style functionality, to HTML and make it, you know, update HTML. And it's, like, between HTML and the browser, it's, like, if you got those, I mean, your your apps gonna sit there forever and work. I mean, that's just, like Yeah. That's that's huge, you know, for people who's who are in in our position of being, you know I mean, it's huge for, I think, anybody. But for people who are trying to save their own time and sanity.
Lazarus:Mhmm. For me, that's huge. So
Anthony:I agree.
Lazarus:Yeah. Alright. Well, it's, you know, I feel like I could probably ask you questions all day about this stuff because I literally am learning, like, every single thing about browsers now. And ever since your talk on this, I've been sort of looking into it, and and, we'll keep doing it. But, I don't know.
Lazarus:I just like, any any other last, thoughts you wanna add?
Anthony:Where are you, actually, first of all?
Lazarus:Where where are you calling from?
Anthony:Oh, I'm in Germany, in Berlin.
Lazarus:In Berlin. Okay. And was that where the conference was also, the Golang?
Anthony:Yeah. It's Gofakon, Europe Awesome. Here in Berlin. Yeah.
Lazarus:Nice.
Anthony:Yeah. So may maybe the only last words I would give to people is build a lot of cool stuff with the browser. Don't be too eager to to to think from an API first perspective, you know. You can you can just build your HTML server rendered application and and leverage some of these browser tricks to make it interactive.
Lazarus:And I'll just follow-up on that by saying this is coming from somebody who works with more APIs than anybody else who has seen every single side. Like, you've seen all the negatives of the API world because you help people overcome them. Mhmm.
Anthony:So, actually, I kinda Imagine. Yeah.
Lazarus:And act yeah. I kinda feel like you're playing both sides here because if more people use APIs, that helps your API toolkit business. And if less people use APIs, you know, you're now the expert. You're one of the experts in the HCMX world, and sort of this other style. So I I feel like you're, you've got a you're hedging your bets here, and you've got both sides covered really nicely.
Anthony:It it sounds more like self sabotage, to be honest because it's in my interest if you
Lazarus:use self sabotage.
Anthony:It's it's not in my interest If you're using APIs and dealing with all this, you know, your apps don't work very well because there's so many things that can go wrong then maybe you would use API toolkit. But on the flip side, I know no one is gonna take the advice anyway, so we'll probably still be in business.
Lazarus:Yeah. Yeah. There's so many out there already. So they're they're not going anywhere. But I do think you also are you're making a little bit of a name for yourself, I think, speaking at Big Sky DevCon and and, you know, in in the hypermedia world.
Lazarus:So I think you've got a nice avenue there too.
Anthony:I don't know
Lazarus:how to monetize that, but I think it's awesome. So
Anthony:I mean, we we we don't always have to do things for to monetize. Right? So we just do things for fun.
Lazarus:That's why I'm
Anthony:doing things for fun.
Lazarus:I'm kind of in the same boat. I'm like, you know what? I'm riding this train. It's not making me any money, but I don't care. It's fun.
Lazarus:Like, you gotta have you gotta have some fun sometimes.
Anthony:I I think in the dev ecosystem right now, HTMX is the most fun place to be.
Lazarus:Yeah. I mean, I don't disagree. That's where I'm I've ended up just kind of, like, on for the ride. Like, this is I'm just enjoying. I don't have that much to contribute right now, but I'm like enjoying the enjoying the scenes.
Anthony:So and
Lazarus:the tech. Yes. Alright. Well, I really wanna thank you for for coming on. Thank you for taking the time.
Lazarus:I really appreciate it and for showing me, you know, some podcast stuff that I'm probably gonna use for everybody now. So yeah. Shut
Anthony:It should automatically, like, generate well, you you might have to click a button, but you would get this, like, 10 to 2nd clips. But also videos you can put on YouTube. You have a YouTube, bro?
Lazarus:Actually, I don't. I haven't started a YouTube yet. I may though. You know, I'm kinda, like, I'm having fun making some content. I just do the, you know, just do the podcast for now.
Lazarus:It's all audio. So
Anthony:Well, you have a video here, so you would have a video with no effort that you can put on YouTube. Interesting. Yeah. What's it? Who?
Anthony:I don't know.
Lazarus:I may I may do
