Django and HTMX #2 - Trigger Modifiers and CSS Transitions

hi there and welcome to another htmx tutorial in this one we're going to extend the setup that we had last time and we're going to include trigger modifiers and css transitions we're going to see what those are in a minute but this is what we got to last time this form here where we could type in a username and htmx will dynamically send an ajax request to the back end so now we're going to extend this i'm going to look at trigger modifiers and i've got the htmx documentation open here so what is a trigger modifier on the sidebar we can click um the trigger modifiers link and that will take us down to this and what it says is that a trigger can have modifiers that change its behavior so remember that the triggers are actions such as click and mouse enter and key up and submit and the modifiers enable you to change the way that these behaviors occur now some modifiers you have here for example there's a once modifier that means that you can only do the specified action or the request once can be done multiple times you have other modifiers such as delay which specify that if you perform this action multiple times you can delay sending the request until for example one second where you have never sent any actions so we're going to see what these mean in this tutorial so let's get started by extending the setup we had here we've got a view that returns html data and it's called check username now what we want to do is we want to experiment with these trigger modifiers so if we go to a register.html template this is the field that's being rendered and the trigger is specified here and the trigger is key up because when the user types into this field when the key goes up then we are actually going to send a request from htmx so we're going to modify this by adding a delay now let's see what the delay gives us we're going to delete the request being sent by two seconds now let's see what happens when we do that i'll refresh the page and i'll open the network tab as well here so you can see that the post requests are being sent so we're delaying by two seconds so if i start typing m you see that the post request is delayed by two seconds so every character i type it takes two seconds until the request gets sent now one interesting thing about this is that if you type a character such as m and then you type another character a it's not going to send the request for just m because the other character has occurred within the time period of the delay that means it's only going to send one request and if you look at the request body you see m a here so this gives you a way to prevent sending hundreds of requests to your server instead you only send the request when you receive no action for a specified time in this case two seconds so that means i can gradually type mark here and it's only ever going to send one request after two seconds of no typing and you finally send that ajax request this is an important thing to know about because you can avoid overloading your server with unnecessary ajax requests so that can be much better for performance and the way to achieve that with htmx is to specify a delay and in this case it's the key up action but you could also do this with any action in html moving on we have another one called throttle and this is similar to delay it means that we only ever send requests every two seconds now you'll see what this means if we refresh the page if we now start typing mark here i'll clear the tab you see that even though we're typing every two seconds another request is getting sent so it's not sending a request every time that we type but every two seconds that there is an action it will then send the request to the server now the main difference between throttle and delay is that throttle it guarantees that you do execute the function every two seconds in this case whatever the time period might be if there's any action then the function will be executed within that time period with delay that's not the case when you delay what you're saying is if you receive another action before the time period expires then you're not going to send the request instead the time is going to be reset and you're going to wait another two seconds before sending a request but only if you don't get another action so it's a subtle difference one last trigger modifier is changed for example if i type mark here and if i was to highlight the k and then re-type k it's not going to send the request because it's not changed you've just removed the character and immediately replaced it with the same character so there's no change therefore no request so it can be useful to know about these trigger modifiers by far the most useful are the delay and the throttle modifiers because they can help you avoid sending too many ajax requests to your server now the second part of this tutorial we're going to quickly look at css transitions now hdmx provides you in the documentation a very short section on transitions it's very easy to create these in hdmx you just return your html with the same id and then you specify in your css class the transition property so let's see how to do that just now i'm going to change the response from the view to match this id here so let me go to views.pi and we'll set an id property of username error and just remove that and we'll copy that in here too and we're going to now create classes called success and error so success when the username is available and it's going to be a class of error when the username is unavailable so we're going to return this html and we're going to swap it into this div here now what we're going to do now is we're going to create some css classes and i've got a styles.css here and i'm going to copy and paste the success class which is going to display green text for indicating success and we're going to just paste that in here and the error class is going to contain red text now we'll see what css transition does it allows you to animate the content on your page the next step is we are going to edit the base.html and i'm going to load django's static and that will allow us to reference static files easily within the template just fix that and finally we're going to load in the this is a custom css file and we're going to link to a file here i'm going to copy paste this and this references within a static folder which we're going to set up in a minute the css slash styles.css now if we go to the settings.pi we're going to set up the static folders static files and that's going to be a list and this points to all the folders containing your static files now we have a base directory in settings.pi and it's a pathlab.path object so we can then chain to that another directory static now this is where our static files live in the base directory which is the root directory and then within there the static folder so when we load the static files here and reference css styles.css what that's going to do is it's going to load in the css styles.css stylesheet and that's where we've made these classes here so with that we can now start testing this so now we can load the browser and we should hopefully see that this works so if i start typing in mark here as soon as we get to the k with there's a two second animation a transition here where it gradually turns red let's see why that happens in a review we're returning a div with the same ideas we had before and to a class of error or success and within this style sheet which is styles.css we are specifying a transition on all of the changes in the in the style and we're seeing ease in which means go slowly at first and then quickly at the end and a two second duration for the animation so if i change the duration to 0.5 seconds that's half a second so this will go a bit quicker and we refresh the page you can see the animation is much quicker here when you go from green to red and vice versa now what we can do is we can have a bit of fun with that and we can add some more complex style changes here so when there's an error we want to really make the user aware of that error we'll say font size of 50 pixels and we'll also specify a rotation here now there's a transf transform css attribute and we can say rotate 45 degrees now we're going to perform a transition over two seconds let's say where when we go from success to error we're going to rotate the element 45 degrees we're going to change the font size to 50 pixels and we're going to change the color to red so let's see what that looks like in the browser now so we start typing and it's all good here but when we go to mark that username exists so we start getting this crazy transition here where the font size is increased to 50 pixels the colors are red and it's rotated 45 degrees and again you know when you go back to the r this will change back and that's now going back there's a transition each way here in the document so this is pretty cool and you can do any crazy thing you want with us we could do five seconds here for a very gradual transition the longer the duration the you know the longer it will take but when you do it the other way you can see it goes very quickly because we've got duration here of 0.5 seconds so you can do these crazy css animations this one isn't particularly usable this is just not a good user experience don't do this at home but on the other hand you could make some very engaging animations in css very easily with this htmx property because you return html from your hdmx endpoints that allows you to do this kind of thing where you keep the ids but you specify transitions when things do change so that wraps up this quick video i hope you've enjoyed it please like and subscribe check out the blog post if you've enjoyed it for more details and we'll see you in the next video

Channel: BugBytes

Views: 775

Keywords:

Id: yf7_txKvexk

Length: 10min 50sec (650 seconds)

Published: Fri Oct 29 2021