Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So I want to talk about something that happened last week, just at the end of the week. And just a short story, I'm on client projects every day. I am a working developer. Not that everybody's a working developer in different ways, but there's different types of developers and different types of projects and different types of worlds that all these developers and podcasters and educators or whatever it is live in. So I just want to preface that I am blessed to have what I have and to be in the place that I am.
Lazarus:I get to do work that I love. And but I do client work. I have, you know, 6 or 7 main projects, including my own projects. I am my own client as well. I own one of the businesses that I do work for.
Lazarus:But every day I get calls. Every day I get, emails. Every day I get, you know, different issues with different projects, different features we're trying to roll out, different things we're thinking about, different demos we're doing, different things like that. This is all to say, that I am in the fucking trenches every day. And if you want to sort of if you're looking for someone who's coming from the position that a lot of, you know, maybe senior developers or people who are sort of done with their developer career and now they wanna educate and they've made all this money and stuff like that.
Lazarus:If you wanna hear someone coming at you from the other side who are speaking about, HTMX made me a millionaire and now, like, I'm gonna show you how to do the same thing and all this kind of stuff. I just wanna say that you you're not gonna get that from me. That's not where I am. I am out there grinding and doing my best, and I am learning HTMLX and using it, because it's making my life easier right now. And this last week was just it was just a moment where it just made me think about you gotta celebrate those little victories.
Lazarus:So okay. So I'll set up. I have this project, and it has a search engine built into it. The search engine is a third party project product, that we pay for, and, you know, it's been around. It's an old third party project that uses XML, and it uses SOAP, and it uses, you know, it doesn't even have it.
Lazarus:It's pre API. I'll just say that. So before all the the hubbub about what's better, an API or sending HTML, you know, this is this wasn't even the search engine wasn't even around when that discussion was starting. There was no JSON. There was no API, all this kind of stuff.
Lazarus:So that's the search engine that we have in the product. It's a good search engine. It's great, actually. That's why it's still there. Works great, but sometimes we need to make updates and changes.
Lazarus:The project itself, is a code base that is, you could call it legacy code. It's 2,000, you know, 17 or so it was written. And that just means certain things. It means old versions of stuff. Not everything has been brought along with the updates.
Lazarus:You know, it uses some Vue 1 point o or, you know, Vue Point 5 or something like that Vue JS, a little bit of that. And, you know, it's an older project, and I give it, you know, it gets some love, and but it's never you know, it's not it's not gonna get an update anytime soon, like a full rewrite and stuff like that, as it shouldn't. It doesn't need one. But that's just to say that it's it's got a code base where it's not the newest, most amazing stuff, at all times. We're not sort of pushing the envelope in terms of tech.
Lazarus:We're just keeping things running or making it work. So I had to implement a feature. You know, right now, the facets for the search has a limit on it. Okay? So just get in the code space in your mind space of coding.
Lazarus:You have facets over on the left of your search. Okay. You you do a search, you get 550 results. You have a bunch of facets over on the left, different categories, you know, maybe people, maybe products. I'm gonna try to keep it kind of vague, but, everybody knows that search thing.
Lazarus:You know? So you click on one of the facets on the left and it narrows it down, and now that facet is one of your selected facets and, you know, now you're down to 17 items. Right? But over on the left, it's only showing 25 items. K.
Lazarus:And maybe you actually have 500 of those facets or a 150, and the customer wants to see all of them. You know, they're really looking for a particular one of these facets, one of these these group by options. Okay. So what do you do? You know, I could go in and I could investigate this this old sort of system and figure out the search engine.
Lazarus:Are there some options for showing more? And that's probably the first place to check is just, like, what's the default? But I find out the default is 25. And the reason it's the default is because that's how many results are turn returned. And what it does is it just matches the number of results that are returned on each page.
Lazarus:So if you've ever worked with search engines before, the more results you show on a page, the slower it is. Like, it makes a big difference. Search engines, even Google, you know, it doesn't show a lot on the first page of results, and that's because it's indexed. It's it's built specifically to return those top 25, top 50, top 10, whatever that is. It's built to return those very quickly.
Lazarus:But you start pushing that envelope and saying, like, well, okay. Now we want to return a 100 items at once. 500 items at once. You know, if you tried to return all in Google, like, I mean, that's just, it's not gonna happen. So but clients, customers, they don't care about the tech details of how the search engines are optimized.
Lazarus:Right? They just I wanna see everything. So in this case, they don't necessarily wanna see all the items, 550 items all at once, but they do wanna see what are my options for facets, what are my group by options over on the left. Okay. So I'm faced with this.
Lazarus:What's how do I handle this? And it's just for the user the best option is you just run searches like normal, they're super fast. If you want to see more it shows you the first 25 facets on the left. If you wanna see more, you click a little see more button right there. Right?
Lazarus:And then you get a little spinner, and then it loads all the rest of the facets, and then you can see more. So, you know, it that's a very very normal kind of, user behavior. That's kind of people are fine with that. You know, they don't need to see sometimes it can be overwhelming if you see too many at once. Right?
Lazarus:So we just show the first 25 and a see more button. So I'm just looking at it and I'm like, you know, okay, am I gonna dive into this older system? And and then, you know, I think, okay. I'm just gonna use HTMLX for this. Right?
Lazarus:Like, this is just a small interaction. It's perfect. It's an old system. I don't need to run any code to make it compatible. So I go to the core, the root of the system, and I'm almost surprised I hadn't done this in this project yet.
Lazarus:But like every project I've been working on recently, I just go up into the main layout, and I add the little CDN include for HTMX, copy it from htmx.org. Then I go into my page, and I add my little button that says see more. That's the first thing I do. I just add the button with no nothing else there, no routes created. And then I think, okay.
Lazarus:How am I gonna do this? So I know that if I want to return all the results, I just need to change the results per page from 25 to, you know, a 1000 or something like that. But I don't wanna reload the whole page when you do that. I don't wanna make a link that reruns re reloads the whole page. I want the user experience to just be everything you see is right there, and you just click to see more, and then that loads.
Lazarus:So that's perfect, HTMLX. Just a little tiny feature. Not that you can't build bigger features with this because lord knows you can, but this is just the kind of thing that's just a little thing that you can add in to any code base just to make a smooth interaction. So I add that. I add the HX get for the exact same page that we're already on.
Lazarus:Right? But I switch the results per page to a1000. K. So it's the exact same, get h x get equals for the URL that we're already on with that switched out, the results per page, and then, I set the target to be just the facets over on the left. Just the facets.
Lazarus:That's the target of this. And then so but the HX get is gonna return the entire page. Right? So if you set the entire page to that target, what's gonna happen, you're gonna try and fit that page into a div, you know, everything's goes to hell. It's just not gonna work.
Lazarus:It doesn't make any sense. So I then set h x select equals for the ID of the same as the target. So the target is gonna be that facets page, and the HX select equals that facets page. So the HX select, what that does is it pulls out of the response, just that target. So it's taking that target and putting it so long story short.
Lazarus:I mean, this is it's the short story, but I'm just taking this one little section. I I didn't even have to add any routes for this at all. All I added was one button with a couple HTMX, h x get, h x target, h x select, And it just replaces that page, and it puts the entire list of facets right there. You know what? And actually, you know what?
Lazarus:I also added, because I just wanted to, a little spinner, a little loading spinner icon, which I already had as part of the project. You know, we have loading spinners in different places, so I just used one of the ones we already had. All you have to do is give it the hx indicator, attribute. So I just put that loading spinner right next to my button, right inside my button, right next to my, see all. When you click see all, because it has the h That little loading spinner has the h x indicator on it, by default the opacity is 0.
Lazarus:But when I click, and once that response goes, the opacity goes up to a 100, so my loading spinner fades in nicely, and then it spins until the request is done. And if the request takes a little bit longer because it's returning a 1,000 results per page, So what? You know? Do you see the loading spinner? The user's ready.
Lazarus:They've they've decided they want to see a little more. They wanna see a little extra. So they click the button and then they wait for that to load and then it loads and everything's there. So this is all just to say that this is why I am doing this is why I'm into HTMLX. You know, it's making my life easier.
Lazarus:If I had had to go into that code base and do gnarly things and mess with mess with the format of the of the search engine and mess with, you know, the old project and the routes, and I would have had to build some special Ajax and I would have gone into JavaScript. And it's just like, I don't need to think about any of that. I added one button. This is like 6 lines of code. And I this is generous with the lines because I like to I like to add lines for each attribute.
Lazarus:And I added that to this project, and this is a nice feature. This is something that people have been requesting, and that people this is something they're gonna like. This is something that just makes their life easier and HTMLX just made my life that much easier on this one little feature. And that's what it's all about for me. That's why I'm doing this.
Lazarus:That's why I care about this. That's why I'm making this podcast episode because I'm out there doing this every day and anything that I find that makes my life easier, it's a privilege to be able to use the tech that I wanna use. And that's what I found, and that's what this is. So I just wanna say celebrate the little victories, because I I celebrated that one. That one took me, you know, I don't know, 15 minutes or something like that once I actually got in there, and opened the file and just thought about it for a minute and, and sort of applied some basic HTMLX to it.
Lazarus:And that was just a little victory. And that's just me, but celebrate your own victories, HTMX or not, being a developer. It's great. There's ups. There's downs.
Lazarus:When you have a little up, just be happy about it. It's great.