Building the perfect hypermedia modal
So I just put out a video yesterday, building HypeCP, and I want to work on some example using those HTMLX essentials. So the first thing I really thought of was the model because there is this idea that, you know, stuff like drop downs and modals are kind of hard with HTMX or something like that because they require some front you know, you sort of imagine that as front end state. You know, you're changing the state. You're popping up a modal, which is like taking over your screen, but you don't want it to have to go to a new screen and go to a new context. So you sort of think of that as front end.
Speaker 1:Right? So, basically, what I'm thinking is just, you know, that video is already out there. So I'll put a link to it. It's on YouTube. But I was just thinking of kinda like going through in the headspace of making something like this.
Speaker 1:So the idea is that we want to, you know, have this mantra in our in my head of how long do I want this code to work for? And this is, you know, Alex, Petros, the hundred year web service, like the interview I did with him and the video that he has about it. Just this concept that you can build things. If you build things out of just HTML, semantic HTML, and just things that use your browser and use plain CSS. And if you're not kind of relying on some specific, you know, versioned JavaScript, not just JavaScript, versioned anything, you know, all these kind of updates that libraries that change frequently, that you're gonna need to have like a stack of dependencies, that if any of those change, it's gonna change your underlying one.
Speaker 1:So how long do you want this modal to work for? And I the answer for me is I want it to last forever. So even Tailwind, which I did end up using in the video, but I think I might strip it out. I love Tailwind. It's great.
Speaker 1:It's great for just kinda like, it's probably the, I think, the fastest, very maintainable way to do stuff. But if you're building something that is going to be, it's fine. It's good. But for the purposes of having like a really reusable modal, I think I'm gonna get some of the tailwind out of there and replace it with straight CSS. Okay.
Speaker 1:So what's the concept of a modal? A lot of times when you use modals, or at least for me, I used to always just go to Bootstrap, and I'd copy and paste the Bootstrap modal. And I'd have to include Bootstrap CSS, Bootstrap JavaScript. I'd have to include both of those at the top of my file. I do pay for Tailwind UI, and they have, you know, modals there.
Speaker 1:You can you can copy and paste again. But it's the same sort of deal. You've got the JavaScript, and you've got the CSS. And you are then sort of locked in to using Tailwind for stuff. So and and that's fine.
Speaker 1:Like, they do a nice job. Everything they do looks really good. But let's say you want something that's just native to your browser. So that's why they have the the browser already has something called the dialogue. The dialogue tag will pop up.
Speaker 1:It's by default. It's hidden. It will you can pop it up by just having a line of JavaScript show modal. You target that ID. So here's how you'd build it.
Speaker 1:You have your dialogue tag. You just, you know, dialogue, open tag, dialogue, end tag. Give it an ID. So we'll call it my modal. Underscores or no spaces or whatever.
Speaker 1:No dashes. That's the thing you don't wanna do. And the reason for that is that once you give something an ID in the DOM, you can then refer to it anywhere else on the page with window dot and then that ID. And then you can access, in this case, show modal. So we we create first, we create that dialogue, empty something in it, doesn't matter.
Speaker 1:Then we have a button or a div, whatever you want. And on that div, say on click equals window dot my modal dot show modal. So that's gonna open it. Then inside that modal, inside the dialogue tag, we're gonna add a close. And so I like to go to heroicons, to get like the little x SVG just because it looks nice.
Speaker 1:It's easy. But you can just type the word close, you know, and then wrap that in a div. And again, give that window dot my modal dot close. So now we have a dialogue that you can click the button and it opens and it closes. You can click the close button once it's open.
Speaker 1:It grays out the back of the screen. By default, this dialogue doesn't look amazing. It's got, like, a, you know, very, like, old school default look and feel, like a two pixel black border, a white foreground square. It's just not quite what the modern web wants in a modal. So but we can change it.
Speaker 1:We can override. This is all built into the browser here. It's got its own built in CSS that is on a dialogue by default. So we can override that. So the way we override it is just in the CSS.
Speaker 1:We use we just do dialogue. So dialogue and then in in your curly brackets. So the first thing you can do is just do set the position, I'm sorry, the, display to flex. So that's gonna make it so that you're it's visible. By default, your dialogue, the display is none.
Speaker 1:But you can just make it flex. And and the reason we're gonna make it flex is that if you want something to have a nice animation or a nice fading or some sort of state from one to the next, if you use display none and display block or whatever, display flex, display block, if you use going from display none to display flex, there's no there's no gradations there. There's no fading. It's just it's like a binary on, off. Display none, it's not there.
Speaker 1:Display block, it's there. So that's not the thing that's gonna let you do any sort of nice smooth smoothness to this. Also, while you're building it, it's nice to put the dialogue at display flex so you don't have to click it every time to see what it look see what it looks like. Okay. So that's the first thing we'll do.
Speaker 1:We'll do display flex. Now we can see our dialogue. So what do we wanna do now? We want to give the ability to hide it. So it should be hidden by default.
Speaker 1:So we can set the opacity of it to zero. Right? So we set the opacity to zero. Now it's gone again. This is something actually I don't think I did in the video, but you also wanna move it off the screen.
Speaker 1:So, you know, set the the translate or something to like position absolute maybe and then translate way off screen. The position might already be absolute, so it might not be a big deal. But you just wanna make sure that it's not part of the flow of the rest of the site because you are changing it from display none to display flex. So by default, it's gonna be part of the site. So what do you do after that?
Speaker 1:You we've got now, we've got this this dialogue, and the opacity is at zero. Now we want to, when it's open, make that opacity one. Alright? So so that now it becomes visible. So you can go up to your CSS again and dialogue and then square brackets open.
Speaker 1:So that's when it has the attribute of open. And then you set your CSS, curly brackets, and we'll do the same thing. We'll do display flex, and this time we'll set the opacity to one. So now if we set the opacity when it's closed to zero and this to one, it operates the same. You click the button to open.
Speaker 1:Boom. It opens. It looks exactly the same as it did before before we did that. But the difference here is that we can now take that and animate it if we want to. So you can do a transition.
Speaker 1:You know, CSS transitions are just extremely supported, easy. One of the ones I like to do and the one that I did in the video is you can do the trans, transform, the scale. So what you do, transform, and then so that's the in in CSS, on the dialogue, you do transform, scale, 0.9. So it just starts off a little bit small. And then you do so you have opacity zero and transform 0.9.
Speaker 1:And then in your transition, so you set a new a transition property in your CSS. This is all still on the dialogue. You set your transition property on the CSS and you say transform in, you know, point three seconds, point one seconds, something fast. Right? And then you say opacity point one seconds, and you can set what type of transition.
Speaker 1:I think ease dash in is the best one. So you do ease in ease in. So what's happening here? Now when we click that button, it's running window dot my modal dot show modal. That is setting the open on that dialogue.
Speaker 1:Once it goes to open, it is operating with the CSS from the open, version of the dialogue. So and that is where it's gonna transition from opacity zero to opacity one, and it's gonna transition from a trans transform a scale from 0.9 to one. So it's gonna get a little bigger. So it, like, pops in like it was kind of hidden in a smaller size and boom, shows up. Okay?
Speaker 1:So now we can start to do some other stuff if we want to. We can, you know, make the modal have rounded edges or something. This is where, like, I use Tailwind in the video. But you don't have to. You can just do border radius.
Speaker 1:You can also do a shadow. The shadow CSS is complicated, but little little hot tip. If you wanna get a shadow that's like Tailwind and you're not quite sure how, just go to the Tailwind docs. They're extremely generous with their, you know, they show you the CSS that Tailwind's using using. There's no magic.
Speaker 1:I mean, there's lot of magic in Tailwind, but they don't mind. They show you everything that's happening, which I really appreciate. You know, that's very low level to the CSS. You can go there, do the box shadow, copy paste, get their shadow large, copy paste that, and put that onto your modal. And so now you've got this really nice kind of experience.
Speaker 1:One thing that that is missing here is if you close that modal, it's also going to, whoop, fade out. And even the spacing might be kinda weird. Stuff might move around. I like to just when you close a modal, it's just gone. That's my preference.
Speaker 1:People can do this in different ways. I don't think there's any benefit to, like, an animation on the way out. I think it makes it feel faster if it just disappears. So, actually, when I said transition on the dialogue earlier, just copy that or actually cut that off the dialogue and put your transition onto the dialogue open. So as soon as that dialogue is opened, that's when it starts the transition.
Speaker 1:And when it's closed, that transition doesn't exist on the other one. So everything happens immediately. So now you can style your your, you know, modal however you want. But at this point, we haven't even talked about HTMX. But the HTMX part of this is if you just put the contents of your modal into the HTML, fine.
Speaker 1:That's good. That's your default modal. It's nice. Everything's fine. What if you wanted to do something like you have a you have a table, and there's a hundred rows in it, and each of them has an edit button.
Speaker 1:The edit button pops up the modal. You could put that edit into every single one of those, and you'd have, you know, a hundred modals with a hundred different edit forms, maybe 200, maybe a thousand. It just gets a little bit inefficient. It's fine. Your browser will be able to handle it.
Speaker 1:Not a big deal. I might I might even do that by default. But there are other times where you just you you want to keep it very dynamic, very light. Maybe you want other things on the page to change, and then when you click edit, it needs to get that most current data. So if you want to load your modal dynamically, that's HTMX is just perfect for this.
Speaker 1:So so the way that I would recommend, the way I set it up in the video is you have your button. Right? And by default, it's just popping open that modal with all the contents. So you just leave the contents blank, and you put, like, a little loading spinner or just the word loading or something inside that modal. And then on the back end, you have a route that will give you the contents of that modal.
Speaker 1:So not the whole outside, not the whole modal itself, not the dialogue, just the contents that go inside your modal. And you what you do, you know, that's a snippet of HTML. It has its own route. It has its own place on the server, and it has its own content that's specific to that edit button. So let's say you now click the edit button.
Speaker 1:It's gonna pop up with that content. So the way you do that is you could do it on click. So they click the button, then it makes the request, and then it pulls it in. But if you do that, you're gonna see a little blip because you you click, and then it needs to go to the server. And meanwhile, this animation's happening of the dialogue opening.
Speaker 1:So actually, the really slick way to do this is to, on the button, do mouse enter. So h x trigger equals mouse enter. I'll just go back for a minute. H x get equals the route to your edit content. That that's part that's the HTML for the model.
Speaker 1:H x get equals that route for your edit content. H x trigger equals mouse enter. And then h x target is the CSS selector, the ID of your dialogue, so my modal. So does that all make sense? It's only three things.
Speaker 1:These are three of the essentials, h x get, h x target, and, h x, trigger. So trigger is mouse enter. Why mouse enter? Because the thing is, it's very fast to load the content with HTML, with HTML, everything. If your user just moves their mouse over that, by the time they actually click, know, as soon as the mouse enters that button, it's gonna do the the loading.
Speaker 1:It's gonna fill your dialogue. That's gonna happen in, like, I don't know, twenty milliseconds, maybe fifty milliseconds at the longest. Meanwhile, your user still is moving the mouse, and then they're clicking the mouse, and then there's this little animation that comes. So by that time, they're never gonna see that this dialogue wasn't already there. It's gonna be loaded into the dialogue.
Speaker 1:Everything's gonna be nice. And you can then set it up so that every edit button, if you want to, loads the same dialogue. So you just have one dialogue on the page, and it's just loading the data with each time you hover over that different button for each edit one. So that's the idea. That's the concept.
Speaker 1:There is that video if you wanna check it out if the, you know, the audio version isn't painting the full picture, but I kinda hope it is. I hope it's, like, making sense. I hope that that, you know, hearing how that dialogue works. So I'll just go through it one more time quickly. We create the dialogue tag.
Speaker 1:We create a button. The button opens, does does window dot the ID of the dialogue dot show modal. Then we override the CSS, the default CSS of the dialogue. We make it so that it fades in. We give it transitions.
Speaker 1:And I just gave one example of a transition. You could make it it pop in from the bottom or from the side or anything else. Once you have it set up using opacity and overriding the defaults of the dialogue, you can then make whatever you want happen with that. It's gonna have a nice fading effect. So now we have the CSS, and then you make it dynamic by adding h t m x on the mouse enter of the button.
Speaker 1:So, you know, locality of behavior. Where is this happening? When they hover over the button, that's where the action's gonna happen. They hover over the button. It's gonna load that modal behind the scenes.
Speaker 1:They are never gonna see that they're never gonna see that little loading thing. It's too fast. It's always fast unless you have some crazy huge thing inside your your modal, which you're not gonna do. It's gonna be fast. They're never gonna see that.
Speaker 1:So you're loading this fully dynamic, you know, hypermedia based thing. You've got no you're not pulling any JavaScript. You're not pulling anything else. The amount of JavaScript here was basically nil. We did, you know, dot show modal.
Speaker 1:That's it. And we did CSS transitions, and we didn't need anything more than that. And we just use the stuff in the browser. This modal, you can perfect it over time. It's gonna look great, and it's gonna last forever.
Speaker 1:That's really that's it. That's gonna be awesome.
