FULL Introduction To HTMX Using Golang

all right I'm here to introduce you HDMX this is unironically the intro that I have chosen which is this beautiful beautiful post by HDMX or actually just the banner which uh he tends to take pictures of things people positively say on Reddit and then make them His Banner so this one says the creator of HDMX is a blowhard who found fertile ground for his broken library in the minds of backend devs that refused to learn JavaScript for reasons that are 20 years out of date it's propaganda being spread by propagandists ignore them all and they'll go away I am a propagandist being paid by big HTML money very excited about this uh it's I don't know what it is about the world of HDMX but for whatever reason it has just the bizarrest either lovers or haters of it there is just zero middle ground for this Library uh I recently saw a tweet saying uh someone says that they're very convinced that there's influencer money behind HDMX I don't know what that means yet I would love to know more about this influencer money if anyone would like to send me some please uh twitch primes are always accepted around here all right so there you go this is this beautiful thing and yes this was literally my introduction you're welcome but hyper media has been around for a long time there's been papers engineering exercises long before the internet had a such a wide pipe that I mean even in 1995 there was discussions and white papers about how to use this as an engine of application state so this is a fairly older and more researched topic it's not just some new library that recently came out it's been going on now for dang near 30 years so hopefully everyone's kind of excited about that all right so there is more to HTM X than just the memes uh yes they use their Twitter quite a bit to deliver all the sweet memes but really it's just so people can learn about HDMX it's a great marketing strategy you would think that it's a whole team of people doing something spreading the word since it's going all over the place and yes it's now on frontend Masters but no it's just one slightly unhinged man in Montana tweeting from his professorship nobody knows what's happening uh and it's actually is used production there is a nice beautiful talk about somebody how they went from react to HTM X reduced a huge number of their libraries how fast they're able to build the project there's a list of sites that use it I have people that have reached out to me that have converted their big projects from Spas into HDMX several of them with lots of lots of Engineers and they found that they're now moving faster it's easier to reason about and I do think that there's not like every single application should be written in HDMX and I think there's actually a good deal of applications that probably are easier or harder with clientside State Management I just really don't know but I do think that there is a sweet spot for htx and so at the end of this course I will try to give you what I think is the good place what's the bad place and hopefully you can do that too so why do I like HT Max well it's kind of a long story but in about 200 what n uh that movie The Social uh the social media one what's it called does anyone remember what it's called the social awkward the social awkward yeah that's what it's called uh where Mark Zuckerberg discovers Facebook and that discovers people really like to know who's dating who and that's like the point of the story and it blows up and all these things happen and I remember watching that show and getting so pumped up to uh create my own website and all that even though I was in college and all that I was like you know G dang it we're going to do this and so that's what I did I sat down and for 80 hours a week I tried to learn how to make websites for oh gosh four years straight something like that and it was fantastic made websites tried to do all these things lost all my money lived in a uh small studio apartment where the man below me smoked meth and threatened to kill me and my beautiful wife so we eventually moved out of there fantastic times but that was like the introduction into the web programming world that I had and through that I got to see a whole bunch of change right I started before jQuery was super popular and then during the height of jQuery where you'd even do your math via jQuery you know that whole you know jQuery dollar sign 3. add you know four it was really really beautiful uh those are the good days and so that was like the height of it you could see all these stack Overflow questions that every last one was answered with jQuery no matter what it was fantastic and then react came out and at that point I was working at Netflix by the way I work at Netflix and during that time I remember thinking this is the coolest thing ever because I've been using jQuery and all the stuff to manage my website for so long and now there's like something that feels better it feels more exciting and I just I couldn't believe how cool it was and so we started doing that and even at Netflix we started adopting it even for television platform and it took us a long time and during that process it went from classes are the best to classes are the worst we had functional component use effect don't use effect and it just kept on changing and kept on happening and over the course of the eight years and in there I tried to solve a lot of the data fetching problems that people run into with spas and they're rerunning into and rediscovering the glories of the N plus1 query problem in rsc's right now and so it's just like watch all these things happen and you realize that maybe something went wrong along the way maybe things weren't exactly what I thought they were and I started becoming disenfranchised about six years ago and I just became progressively more and I've just been looking around trying to find something that is maybe less foot gunny something that less causes uh so many easy problems and yeah there will always be the website that needs these high powerered engines but for the most part for all of us that are just making our nice little reel of cat photos on the internet you just don't need necessarily the largest uh the largest possible State I think of the uh I don't know if you guys watched the one piece live action but uh when the the greatest swordsman fight ever happens and he pulls out the little teeny tiny sword you know the answer was you just don't you know you don't hunt fish with a cannon it's just like yes sometimes you just got to get the little sword out you don't have to have the big one and so I just absolutely loved that part and so that's kind of htx that's kind of why I love it is that it kind of fit this weird place that I've been looking for which is I just need something that I can about in a more engineering sense about how something moves over time cuz that's ultimately what I'd like uh hmx is extremely googleable if you happen to know what you're looking for like if you know the terms it's extremely googleable like let me I'll show you like if I go like this htx select it's going to come up as one of the first things of how you do uh things so htx select it's going to give you all the notes for it it's very very easy to learn how to use this everything is extremely lookup uh and helped build uh the LSP which is pretty nice it really only works with neovim right now I'm sure someone they I know it kind of has a vs code integration it's not on Mason or anything but it's all kind of there it's pretty nice um there's a great book the book is really great it's free digitally so go use it you can also get um HDMX coffee mugs that exclaim that you are a htx shill very good with influencer money so fantastic stuff out there you're going to need to install goang 1.2 or higher preferably or 1.21 or higher uh you can Google install goang it's pretty straightforward and you should really also install air air is really easy just copy and past of this line right here and it will just make things work out very very easily also make sure you have the go LSP again life is just easier if you have an LSP I don't know how vs code does LSP so if you're using VSS code I'm sure it will just tell you how to install it but if you're using Vim make sure you get Go please and then I have just like a little quick set of things you're going to want to execute cute to uh just get everything up and running if you're completely unfamiliar with go I'm going to move faster than completely unfamiliar but you can most certainly read the code very easy and all the code will be on the internets I'm not sure if I've pushed it up or not I could get it pushed up pretty quickly uh it's pretty straightforward language go is an easily if you have any experience coding you can pretty much read the language off the rip it is about as simple as of a language as one can get and it's a it's the reason why I chose it for this Workshop I really wanted to use rust or oakl but it's just way harder to convince a group of people to follow along when you're using not the simplest C based language possible okay everybody if you can clone down this project I give you a give us just like a little bit of a base template that has a couple things in it including just the air script which really that's just it makes life pretty easy um all right awesome so everyone's there I'm actually also I probably need to also do that so I'm just going to do that do the exact same thing fantastic sometimes um you're going to oh hey hey hey it didn't go through did I not oh whatever go uh there we go fantastic and we can even go mod tight if you need to uh it's kind of nice to oh look at that it already has uh some things already installed for me I shouldn't have anything installed for me whatever that's fine enough I shouldn't be installing anything uh quick notes I uh we're going to be going through this pretty quick um I'm added some intentional failure cases so we can kind of debug what's happening and kind of discover how HTM X Works uh there are some intentional moments where you're supposed to feel confused or you're supposed to not like what's happening I want you actively engaged please take the time to guess why things are not working please open up the Chrome debugger if you can keep up it would be very very good and I may mess up and accidentally program the right thing and if that happens I'm sorry we can back it up and I can try to program the wrong thing to begin with but if we do it on if we do if we do it good I'm sorry that's just part of it and of course you will forget you'll forget everything uh that you've learned up until now to be able to be successful at HDMX if you try to build an HDMX application like You' build a react application you'll be upset just like if you try to build a react application with htx knowledge you will be upset use any tool the wrong way and it becomes a mess pretty quickly so we will be using URLs today I know they will be used they will be important we may even add query parameters to to change Behavior we will even be using status codes this will not be happening today okay this is not an option there will be no 200s with a 400 inside of the uh body this is just not a thing I know this will be difficult uh some of you may get a little scared I'm sorry we be even using HTTP verbs get post and delete we're not doing any updates but they're not too hard you get that once if you know how to do a delete you know how to do an update uh we will use as little dependencies as possible uh that's actually why I chose go is that also don't have to tell you 900 things to go and install as far as libraries we'll be using go templating so there just it's just it's already internal item we'll be using uh the only real dependency we'll have is just the server which we'll be using echo which appears to be the simplest possible server I can find and that's it so I wanted this course to be about htx not about other text it's really not even about go it just happens to use go all right uh time to build a server so uh if you're Adept at how to launch a server and and you want to use a different language than go you can follow along and not use go because the server will not be a huge part of the code today well actually I mean it will be about half the code today uh the other half will be literally HTML uh all I need is that your server should be able to produce HTML you should be able to respond with various status codes uh you should be able to make routes with prams I.E like contacts with ID you should be able to read query parameters form parameters uh anything like that and you should be able to create verb-based routes get post delete so as long as you can do that and you feel like you can keep up then use that that's one of the beauties of hmx is that you don't have any requirements on the server choose whatever language you want whatever you're most comfortable with it has absolutely no decisions or thoughts about what a server should do and I think that that is very very important part of HDMX uh there you go uh so where do we start well I think the best place to start is usually the beginning so we're going to create a very simple HTP server uh an index page and then upgrade it to use htx to give like the very first kind of int introduction I know in today's world templates are not sexy no one says hey everybody let's use templates everyone wants that jsx that RSX that GSX that's Go's version of jsx which does actually exist uh they are simple they can become annoying and I fully agree templates sometimes are annoying but so are other options every option has its trade-off I intentionally chose templates because of the same and above I want zero dependencies and I want this as simple as possible anyone with any reasonable amount of programming experience can look at a template and pretty much figure out what's happening and that's that so uh let's see which also means I'm going to try to do uh everything as grug brain as possible I'm going to just have everything in one file for the templates and one file for the server we're not trying to do good programming here but if I were to use something and I wanted something a little bit more spicy I would consider using something like temple temple is pretty cool it's an possible word to uh Google for so you try to go Google goang Temple you'll probably not get the results that you're looking for it's quite surprising so if you ever get interested in it it's just literally temple. guide and then you get this whole great little thing about how to build it so you get to use something that looks like jsx you can only use string inter uh interpolation all that fun stuff it's actually pretty good I had a great time uh playing around with it all right uh now back to our regular scheduled programming and that's going to be and so so our task is to display account that represents how many times a page has been requested so let's first start with the view the uh the the delicious HTML so I'm going to jump in here I'm going to open it up at the base and I'm going to go down to views don't worry about what's in blocks we'll come there later okay and I'm just going to create a new file called index.html I'm sure everyone can join in now me personally I love naming every one of the blocks in a file I don't know what it is about it but I like having names for my templates so I'm going to go block Index this and there we go I've named my block perfect and so I'm going to create a quick HTML5 document pretty straightforward and all we're going to do is just put a count in there so that should be as simple as count uh count now if you're unfamiliar with go uh templating these little two uh squirly braces on each side simply say hey what's in here I think it's actually lisp that gets executed in there so practically oaml uh but what's inside of here simply I'm saying hey whatever objects passed in give me the property count off of it all right so now we need to set up the server uh you need to definitely get these two items installed this is just Echo uh it's just a really simple server as far as I can tell I think they have a decent amount of features if during your time you're using Echo and you keep seeing an error popping up on your import despite you doing a go getet of that item just execute a go mod tidy it cleans things up I'm not really sure what a go mod tid does other than it must organize your files make sure you're using all the things that you said you're using and then ensures that they're installed that's my guess on what it does I'm sure the Gophers can uh validate and or tell me I'm wrong but that's pretty much what I guess happens all right so we're going to come back here okay so I'm going to execute those two things go get GitHub lab echolab V4 and go get echolab V4 middleware it's gonna probably do those two things I think I already technically accidentally have them already installed fantastic we're going to go to the command directory uh I'm going to open this up and just create a main.go so you can see right here touch command main.go awesome create a little quick package main a quick Funk main awesome and I'm just going to start using it as if Echo is here so echo echo open up a new Echo make sure it's V4 as you can see I'm using V4 don't accidentally use something else there we go new uh let's see we're going to use a middleware look at that co-pilot r already knows exactly what we want to do add the middleware here so look at this I am having that same problem that I was talking about how it's just like I don't know what this is I don't believe any of this stuff exists so I'm going to do a little go mod tidy everything should be nice there all right fantastic and H usually that goes away there we go fantastic and I'm not using the correct middleware oh look at that see V4 there we go so everything's going good now now this is the only part of the course that has a whole bunch of programming that not really about programming the problem it's about setting up a project so if you've never used templates or Echo you can set it up such that Echo can take in a template renderer and it just makes programming down the road a touch easier so I'm going to do a couple things first I'm going to create a quick struct called uh templates why not and it's going to be pretty easy I'm going to call there you go co-pilot pretty much autocompletes it all for you make sure you get the HTML template uh there we go I am going to look at this it's already co-pilot already knows that's that's the one that's the one I want right there you want to create this function called render that is based off the templates and it will simply have an IO writer uh it's going to have a name it's going to have the data for the uh for the template and it's going to have the context from Echo it returns an error pretty much how Echo works is just that it has functions that return errors usually takes in a context return out an error that's pretty standard and I'm just going to execute the template and that means I'm going to write to the writer uh whatever's in the template and pass in the data and everything so it kind of takes care of all this stuff for you and then I also usually like to do like a new templates I don't know why I like to do this kind of stuff and co-pilot's us really good at autocom completing it just create a new template that ensures that we are able to parse out the HTML all of our HTML is in the views folder so I have it in the views folder there we go so if you're familiar with a different way to produce views and to use a different server again you can even use a different server and go I don't really care long as you can just do your basic verb routing and everything so I think we have everything we need at this point to produce uh a delicious route so I'm going to go down here here I'll leave this up for one more moment let everyone try to catch up if you're using co-pilot it it should if you have Echo imported and you just start typing templates pretty much everything will be autocom completed because this pattern just exists thousands of times on the internet so it can pretty much recognize it right off the rip we hope you're enjoying the course by the way a front and Master's membership gives you access to hundreds of courses just like this our practical real world courses are taught by experts working on large scale applications at companies like Netflix stripe Google and more grab a membership today and gain the confidence in the skills you need to get to the next stage of your career awesome all right so now all we're going to do is I'm going to set up a a renderer so I'm I'm just going to say hey render here's a new template so all a renderer needs to be is has a render function with that same arguments that I said above a writer a name data and uh the context boom so now we can start using that render really easily within the go routes uh going off the context all right so we're going to do an E.G get and I am going to uh pass in a function that takes a echo context returns an error pretty much everything that I said and now we just simply need to render out the index.html now if you remember uh you may not remember but our we expect an object that has a DOT count property on it and we're going to render that property so I'm going to jump back here and we need to create that struct so I'm going to go type count struct that has a count int fantastic and then I'm going to create a count equals count count zero I think that's how you do these specifications there we go too many languages bouncing around my head so every single time count or uh Slash is requested I'm going to increment the count and then I'm going to render the index uh template remember I named all my blocks so this is the index block I'm just going to render it out there we go I want a 200 I want the name template and here's the object I want to use for that template fantastic that's why we did all that work up up above make this part kind of easy right here so everyone should be able to follow along at the end of the day this is the code we had the write fantastic and if we've done everything correctly which we have one more item which look at that co-pilot just knows it just knows we have to do this elog fatal we have to actually listen now so I'll go on Port 42069 and we'll go over here and do a little Local Host 4269 you'll start it site can't be reached why can't it be reached you didn't actually start the program you got to start the program okay it's that simple so in a second terminal just type in air air has all the configuration for this project to just uh watch so if we change any files including HTML files it will automatically recompile our server it's super fast makes it really easy you probably won't be able to get to the browser in time from your editor before go has already reloaded go super fast it'll make this pretty easy so when I refresh it's count one it's count two it's count three 4 5 6 7 8 9 10 all the way up to whatever number we want there's all of our logs because we use the logger so we may need to use this for debugging at some point this uh during this course there we go fantastic Okay so we've done it we've built step one which is the counter that command was just air air yeah air so once you did that go install uh air it will make it publicly available you may need to do a hashr or you may need to make sure that wherever the go bin uh path is is within your path so if you don't have air air is effectively node modom yeah that's a fair way to put it air is kind of or maybe it's a little bit better to say air is more like uh like webpack Dev serve it's having everything it's watching everything the moment you make a change it's redoing it's the Vite of go uh in case I forgot how to program here's all the things look that's pretty much I pretty much programmed the exact same thing each time all right fantastic so we're going to change from HTML which is what we're doing right now and we're going to change into HTM X okay so we're going to do three things we're going to add an endpoint post uh SL count that increments the value that's going to be appearing on the index page we're going to remove the incrementing from the get route and we're going to add a button to the HTML that goes and makes things happen all right sounds good uh by the way this will be a great point if you use co-pilot you can kind of cheat some of the some of the things right here uh but if you don't that's fine so first thing I'm going to do is I'm going to add a post endpoint should be pretty straightforward so I'm going to do that post count and this will do the counting and then I'll return out the template the get we no longer increment on a get only on a post to count so pretty simple server change uh not a lot just went on there and then we're going to go over to our templates and we need to add a little something so I'm going to add a button and that's going to do something called HX uh it's going to do HX G or post so this means I'm going to make a post request with this button and it's going to be for SL count and there we go so now we have a button on the page called count I have told it to post to count don't worry we're going to explain all this in detail this is just kind of like the highlevel introduction we're going to post it to count and we should see just what happened so I pretty much did everything that needs to happen except for we also need HTM X in our website htx is a small JavaScript library so I'll go like this I'm going to tell co-pilot please get me HTM X CDN this is one of the fun Parts about co-pilot and Bam it worked but if you don't have co-pilot go to HTM x.org go to the docs Search up the word script enter through a few times and right there it's about the fourth one in via the CDN link we're just going to use the CDN link it's easy it's straightforward to use we don't need a build process awesome we have that we now have the HDMX script and we have uh the hmx post going on all right so a lot of you are probably confused again that's okay I want you to try to start drawing boxes in your head at this point so if we've done everything correctly when I refresh this we get a count button you should also see that let's press count it's probably not what you wanted to see this is probably not the results you were hoping for it kind of sucks look at I mean this is this is that's just not this is this is not good at all is this I can't get my air to run can't get air to run if you can't get air to run you can I mean literally you could I mean this would be super annoying but you can you can just go gun command main.go and that will run the server it's just that when you make a change you're just going to have to run it yourself which is it's just annoying more than anything else air was just supposed to be a convenience so you don't forget to refresh your server and then you'll be debugging why is in this thing and then you'll go oh yeah I forgot to update it just like the classic why file watching is just such a good developer experience I cannot tell you how many hours of my life has been devoted to I forgot to start the server at least I would honestly say at least one solid year of my life has been devoted to that just singular bug all right fantastic so hopefully everyone is on board um so we did these code updates yep everyone everyone should be able to see these updates pretty straight forward oh I did more count right there and now what happened I don't think anyone likes the results I think it's probably time that I introduce HDMX in maybe a more structured way because this this probably isn't what everyone was going for this double button somehow my button had a baby here and everything feels confused so first thing is hados you've probably seen this term heard this term it stands for hyper hyper media as the engine of application State meaning the state of your HTML is the state of your program and that is how we drive the changes uh further on down the line is what is currently there in the modern world we don't do that what we do in the modern world is that we have the virtual Dom usually contains the state of your program then you have a secondary state which is all the closures and things within your JavaScript the Ed State all the little bits that are going to update that virtual Dom that's your second layer of State then typically if you're more enterpris you'll have a third layer state which is your Redux state which is controlling your routes it could be controlling how you're getting data async reducers selectors all that fun stuff to just simply Drive the engine of state and so in the HDMX world we try to make it simple the hyper media the HTML that's the engine of uh the engine of application State not all the other things all the other layers it's your server is the truth your client is the reflection of the truth and there's little in between now you can go as much as you want I've seen projects where they use HTM X for all the Chrome and all the stuff around the application and then they use react inside of it to drive all the user interactions totally reasonable you can emit events from within a react application and have htx actually run on the and do all the updating and executing on the outside so totally okay uh does that mean html is finally a programming language yes does that mean you're finally an HTML engineer absolutely what a great day to be alive finally uh also uh this is a 2011 uh little nice little document which you should read this is by the current Community manager of rust and he uh has a whole talk about how to do hados and all this stuff even in 20 2011 so this is a fairly again this concept's been around for quite some time this is not something new it just feels new because some unhinged Montana man has now made it popular and that by the way I'm not the unhinged Montana man uh all right so let's do this hopefully uh I have the exact link oh yes I do oh fantastic so typically this is kind of like your standard server interaction I do a get at the route and the server responds with some HTML some that has links off to JavaScript maybe it's not a server that actually does it maybe it's like a CDN in front of the server whatever whatever happens something happens and you get HTML back right and so typically we're going to be doing something like this with a with uh HDMX any element may have some sort of HX D verb that verb will have a path we will make a verb request to that path it will hit the server the server's expectation is to respond with HTML the contents of the HTML will replace the inner HTML of the element that made or that initiated the request and that is only if it responds with the 200 so if you respond with the 400 or 500 or whatever you now have to Define some sort of custom Behavior hdmax just says no we're not going to do anything in the four to 500s so that means if we had a div that posted to Fu and it had the contents of Four green squares and the server responds with two blue squares the final state will look something like this the div will now have two blue squares hmax does emit a lot of events so you can hook in with JavaScript if you want to add custom Behavior Uh it can react on a lot of different things including custom events it has ways to reduce uh HTML from the request so you don't actually get the entire request you can just select out Parts you want and it also has ways to redirect the HML to other parts of your application so this is all a part of it and you can even redirect from the server or you can redirect from the client you can make the choice yourself uh depending on where and how you do it all right so pretty fantastic hopefully everyone like that's it I just taught you pretty much all of HTM X right now so we're going to kind of go through some exercises and put this into practice I just really want you to see this image right here this is I think is the best image to understand htx starts with some green squares inside of it you make a request server responds with blue squares now you have blue squares inside of that same div the div was not removed the insides were removed all right so that probably explains what happened here right I think we can start guessing as to why our button has a button inside of it all right so before we go on though let's go over a couple common arguments you will hear against HTM X aren't servers supposed to respond with Json what if I need a different view why would my server ever want to understand the representation of the client well even before I go to part one uh your server does understand the representation of your client because it is responding with Json it already has some understanding of of how you are communicating betwix the two you've agreed upon names of keys you've agreed upon types of values you've already made a lot of agreements that are implicitly there uh second you can use accept headers I accept HTML or I accept Json and your server can be the one that has all the smarts to say oh this is a request for data in the format of Json here is the Json view of the same data oh you are requesting uh HTML here's the HTML view for that same data so don't sleep on headers headers have a lot of control a second and important thing about uh state right now the current approach is this the server knows the state and produces a view uh into it Json being the most popular transfer the view is then uh transferred across the turtles after being created into a set of zeros and ones the client decodes those zeros and ones and turns it into some sort of object or representation it can understand us Json pars it then reconciles the JavaScript State and then it produces HTML from that reconciliation to be updated somewhere within the application so that's I mean there's a lot of things that can go wrong there HTM X is more that your server produces a view HTML the view is transferred across the turtles via some sort of encoding uh usually strings are already ones and zeros so it's pretty easy to do the view is then decoded and turned into HTML and placed according to the rules on the originating element or the server overrides uh I said this is a slight lie that's because I just mentioned right now the server can override a couple things all right you get that isn't producing HTM or HTML slow no it's not it's not slow what is slower crawling an object in which you are discovering all the keys con catting all the strings going through every single value and slowly crawling everything or is just doing string interpolation with rope strings uh slower or faster I don't think you're going to see I if anything I think you'll see probably a better performance with HTML than you will with Json I can't 100% confirm this it's just that I don't have I've never tested everything fully myself but at the end of the day producing Json is not fast there was an Intel paper 2012 or 133 that uh claimed that over 60% of all server time is spent copying data and that is it and if you think about what Json does it is literally the ultimate copying of data from one format into another format all right it seems like uh htx is for backend deps no serious UI ux engineer would use htx right I mean I I I made a nice little pretty application with it I mean there's no there is no indication into whether the client is interactive or not interactive with JavaScript there is no indication into how much Styles you do or don't use it's up to the person who implements it so can someone use it absolutely do you have to use it you don't have to you can write a web 1.0 styled website if you want to or you can make it really pretty just don't go web 3 once you go web 3 you you've jumped the shark now you have a whole different website you're creating and so one more time just in case you forget uh if we make this element htx will bind an on onclick Handler because the default actions a click uh we can override what the action is but the default is an onclick Handler on the div when the div gets clicked it sends a git request to some resource when the server responds the contents of the div will be swapped out with whatever the server responds with uh with HDMX uh aren't you going against your own advice making statements about performance without testing uh with the hmail production that's why I said I don't know uh I just know that adding strings together in a rope data structure is exceedingly cheap uh crawling an object in all of its properties in a dynamic or reflection based way is expensive that's just long-standing intuition probably plays a pretty good role here I would still test it though I would always test it never never just assume you're right on how things are performance-based because almost always you're wrong typically your gut Dev or your gut uh your gut uh feel is usually wrong when it comes to Performance just always test always measure very simple what nodejs templating engine do you recommend um I am not really a big fan of nodejs for Server stuff if I were to use one I have no strong feelings I mean there's there's plenty of little templating libraries I've played around with they've all been fun I've I've in general not enjoyed using react like or jss should I I should probably say jsx styled templating I tend that I I I find that I tend to over complicate it with a bunch of logic because I can like once you have that available path I tend to take that available path and then I find that I'm very upset about uh jsx so not it's not a react problem it's definitely a jsx problem yeah people really like bun alian and HDMX and react and turo right the Beth stack right that's bun alian turo and HDMX people really like that stack that's by Ethan uh super cool stack how is HDMX lighter on resources than react um if if you look at the only thing so now we're talking about like Dynamic fetching of data and all that stuff I would love to talk about that I think Dax if you know who Dax is and I will be having a podcast on this I've spent a lot of time thinking about JavaScript data fetching and how to do it optimally how to have components to find their own data that they need and to be able to aggregate that into something that can like uh batch and DP requests request duplication is very very difficult to do we have a full working thing that we used to have at Netflix and we're moving over to a graph uh ql but it's a very complicated process and it's 100% not a solved process and I don't think it is actually a solved process uh I would like to talk about that more but I think that it's going to be a different thing because that's a whole realm onto itself let's debug what happened and then we're going to fix the issue so if we go back to here let's open up the Chrome Dev tools okay it'll make life easy having these available uh so let's just refresh this and I'm going to hit the word count and now let's look at the response of count okay cuz we can see we made the request the headers look like we made a post to uh Local Host 4269 count so we have the right path uh we did get a nice response which is this right here and if we look at the response HTML look at what we sent down we sent down the entire document now htx does a little bit of a trick if it receives an entire document it will only select out the body content it'll just kind of go okay obviously we don't need you know you don't need these new headers you don't need all this stuff you just need the body content and so it'll put the body content into the requesting div which is obvious what happened if you open up the element and you look at button you'll notice that button has the exact same stuff that count has right here so Oopsy Daisy we just sent down and we just put it into the button so let's solve this it's actually a pretty simple solve uh we need to set a Target so I'm going to go like this uh HX Target so if you don't know what Target is Target allows you to uh specify which element should receive this content after the ax request you can use a CSS selector or a series of um basic uh supported JavaScript selectors uh they're from uh you can read about them on uh mdn so you can do find next previous this closest or a CSS selector so I'm going to go body there we go so just do whatever you're doing but attach it to the body so if you're using air it will automatically recompile if you're not using air a you're going to have to execute it yourself and now look at that it just sits here and it just counts but I mean let's be real for a second is that great do we want to always be responding and replacing the body is that just how you want to live your life the answer I've seeing head shakes all over the place uh absolutely so let's try to boil this down just a touch more how does that sound let's make it a little bit better all right so I'm going to jump back over to well first off you'll notice also the HTML is correct so good thing to always double check all right HTML is correct so let's go over here and I'm going to create a new block block uh we'll call this thing uh count and I'm going to go up here and I'm just going to take out the body and I'm going to just post it in here and then I'm going to go back up and I'm going to go template count so there we go so I'm going to just say hey we want this small little bit I don't need to send down the entire response I'm just going to send down the things that I think are worthy of change feels pretty good right I'll let everyone take a moment I'm sure you guys can program these templates pretty easily uh they're fairly well understood I don't think I assume no one has a question about what this means but in case you do render template named count and pass in the object that was passed to me pretty straightforward right all right this block says I'm block count and I I accept an object and I will now use that object right here okay everyone gets it pretty straightforward easy peasy lemon squeezy so now that we have that let's jump back over to our code and in our post instead of rendering the index let's render just that count so I'm going to take the count I'm going to replace index with count so there we go fantastic so now if I were to run the server let's just refresh everything so we can see it's all uh into its original state when I press this we still get this beautiful updating but it is the entire body not as cool but notice that the response now is just this little bit better yes best no we can all agree this is not best it's just simply better so we should probably try to make it even better okay so I'm going to go back here let's just make sure this is what I wanted to do okay yeah I did want to do it here all right so let's try rendering something slightly different let's change how we do the socalled HTML so what I'm going to do here is I'm going to take the button out of here I'm going to put it right here and then I'm going to add a div and call ID uh how about this one count right fantastic and instead of targeting the body let's target count so I'm just going to use a CSS selector again to just simply say hey when you press this button make a post request but I want you to Target the div count for the replacement and now my count template literally looks like this it's it's like nothing right it's absolutely nothing but we're still going to refer to it which means that when I go to the server I'm still only rendering that but when I go to the client I'm only going to be replacing this small amount of text so it is now as minimally as defined as possible second thing I'd like to highlight right here is the entirety of the behavior of this is within ey shot of four lines of code so often they refer to this as locality of behavior you can kind of understand what's happening in its entirety by just looking at a few lines of very declarative code so HDMX tends to be a very declarative driver of your application now there are some imperative procedural parts of htx but for the most part it's very declarative style uh so now when we go back here uh we'll now press count and we'll still increment when we look at our element you'll notice that it beautifully just counts right there we're no longer replacing body and when you look at the network we're just replacing it with the string five now we could even make it smaller we could even just make it so it only transfers down just that singular bite but I hate to let you people down if you're transferring less than 1500 bytes it's all the same right there's you know that's called the TCP packet that's the MTU the minimum or the maximum transmission unit so whether you're transferring one bite or $4.99 it's pretty much all the same so you're not making any more W's at this point so now that we did that absolutely fantastic hopefully everyone kind of kept up with that idea you can kind of see how we started targeting HDMX to make updates within the application this is great but it's not really great because I can just feel that everybody here wants to see interactivity right now we're just seeing basic replacement yeah that was awesome way easier to use than just Ajax and trying to find HML elements yourself but it's not any different at this point so I want to win I want a big win so now remember uh this is also a goal to learn HDMX so will I be programming with the world's greatest technique today absolutely not will we do things maybe some Corners will be cut today absolutely fine but our goal is to learn HTM X it's not to be good at programming today what no Tailwind what is the what Twitter is in shambles right now yes we will not be using Tailwind because I'm going to spend approximately zero seconds thinking about how this thing looks I just want to show you how we can execute things how we can add interactivity how we can do some hooking in with JavaScript and I'm only going to show just the surface of it but as long as you can understand that okay uh you can literally not figuratively but actually literally use react with HTM X you can use web components lick components whatever you want you can even Rod Dog some js and CSS in there if you need to we will probably be opting into the final strategy today because it is the most straightforward to see how it's done the classic tail wi problem so we're going to build a small contact application the application has a form that takes in a name and an email and saves it uh so the first thing we want to do is create this email for or this form that takes in name and email uh every time we hit save it will add the name and email to the server just in memory and display the updated list of names in email now you're probably asking no squeal light are you serious you're not even doing that don't you love turo uh isn't this like a hashtag sponsored moment we could just have this totally work out no I don't want to do it again this is just trying to be as minimally uh viable product as possible because I really don't want to get bogged up on anything so yes every time we make a change to our server do we lose our data absolutely um so first let's do the HTML part of the server which should be pretty easy we're going to build a form uh with name and email and a submit button and then we got to build a display that is a list of names and emails and contacts should be pretty straightforward I think everyone here should be able to do this quite EAS but if you can't follow along so we're going to keep index but we're going to probably need to get rid of all this get out of here we don't need that we don't need block count let's start by building the form I'm going to call this block form for form yes is that a good name no it's not is it a good name for our application absolutely probably should have called it create contact but we didn't now this is we're going to we're going to make uh I'm not even going to use that we're going to use a pretty uh poor form of HTML here I'm going to go name and this will be an input with let's see let's see if co-pilot can guess we got type text name is name values this fantastic I'm going to remove most of this we don't actually need any of this all right awesome so I'm just going to have a very simple uh input which is name I'm going to take name we're going to take name and going to replace it with email uh o that's not what we wanted so there we go pretty straightforward and I'm going to make this type email we're going to use some HTM HTML 5 validation in here did you know that input types can have validation faux freezy yes you can now you could drive this all by the server you could drive it by client side stuff if you really wanted to right now we're just going to drive it via HTML 5 validation and what the server says we could get rid of this to make life easier if I wanted to uh do we want to make it easier we could just make it easier but oh let's just make it easier because honestly it's just nicer to type I don't want to have to think about things it just makes life easier so there we go uh fantastic next I'm going to create a block display which again poorly named but it gets the point across we're going to display the list of contacts all right so this is where we're going to just display all the things we have in the server I'm going to do the following let's go a a div on the outside nothing like a good bowl of div soup and then I'm going to do a range over contacts whoops fantastic and now I'm just going to display each contact and look at that it already did it for me at absolutely awesome I'll go name email this is pretty straightforward so if you don't know about ranges in go templates it's pretty straightforward if you could just go range. contacts it's I don't like this style it really bothers me but it it just works out for this it implicitly changes the this object or the dot to be referring to whatever we're ranging over not the outer thing that was passed into the block so can this be annoying absolutely do I love it absolutely not but for the sake of our simple program this templating language is more than enough for us to get pretty dang far and honestly you can get really far in Go's templating language they have some ways to create variables and all that we're just not doing that today we're keeping it simple and lastly we're going to want a little bit of styling on here I'm going to go display uh Flex I know look at this we're actually just doing CSS and flex direction is a column col column there we go can you believe that I actually just got done doing inline CSS you probably think I'm a front end engineer at this point all right so now we now that we built a the form in the display let's make sure we put it into the actual index page so I'm going to go up here and we're going to go template form template display put a nice little HR betwix them so that way we can kind of see them separated pretty straightforward do the form do the display let's move on now we do have a bit of a problem when we build our server we need a contact we need an object with a contacts list so we're going to do that here shortly but let's see what we got to do next all right so look at this here's our fully programmed HTML engineering how close did I get oh man look at how much more professional I made this one I did forget this we do need to tell the form where to post itself too so I'm going to jump back here I'm going to go to the form and I'm going to go HX post equals uh how about context right feels pretty resty of me so we're going to post to context uh the name and the email and we also kind of need a button that is a submit so create cont fantastic so we have a button that submits the form forgot a couple items awesome let's go on I'm really just not a great HTML my HTML engineering very poor oh look at that I I didn't even do a flex container in this one wow just rookie material over here all right awesome so I like everything that I'm seeing our index.html now requires a object with contacts on it and we need to create an endpoint SL context that uh is a post endpoint so let's do those couple things so I'm going to jump back here I'll just use this and we'll go uh contacts awesome and we render out the uh the index here and we have this down here I'm just going to we'll just call this currently index for now till we can figure out what to do with this template uh we'll create this here in just one moment but before we create it let's start by creating the contacts item right we need something that well we need that so let's first start off with type contact is going to be a struct and it's going to have a name that's a string and it's going to have an email that's a string and then we want to be able to have a nice little function that's say new contact I always like that kind of stuff uh plus co-pilot can really just make this stuff kind of fly right through and do we want it as a pointer nah let's just create nice little contact right here very beautiful and then I also want a type contacts that is going to equal a array of contact this will make parts of things easier later on having a nice little typed item right here uh and then we also need some sort of type data that is a struct all right this is just the data for the page I don't care what you call it contacts contacts fantastic we're moving okay we're just trying to move fast here people I'm also going to have a uh Funk new data that's going to return out a data object and I want to make sure I fill it I want to preed it with a little bit of data because if you don't that means every time we try to do something you have to like type multiple times to do all the stuff and it's super super annoying and it's just I I don't want to do that so we're going to have uh John do gmail.com and then uh the next one since I'll call it Clara do because if you do Jane do then the email is like the same and it's just super annoying so we can't do that there we go so now we have our beautiful data that has a contact that has a couple preceeded contacts in there uh just to go over everything we did we created a new contact which is name and email we have a function to create a new contact name and email uh you don't have to put this extra string there okay okay calm down and let co-pilot take control okay let co-pilot Take the Wheel uh next uh have a little type Alias for contacts we have a data that uh just has contacts on there and then we create a new data with some preceded values okay so hopefully everyone's kind of following along you should be able to program this all on your own even if you're not familiar with go I bet you could probably Google copilot your way into an answer here not too hard all right fantastic so we don't need count anymore I'm just going to call data you know why cuz I'm not good at naming things I've never been good at naming things I admit that I admit how bad I am at naming things so now we have a new data when we do our get I'm just going to pass in data because remember we need something with the do contacts on it fantastic now when we do our uh post to contacts well I don't really know what we should be doing here right where should we be putting the data what kind of data should we pass in so for now let's just render out the index because we don't really have a strong plan here and let's see what happens see did I get everything correct just want to make sure oh yeah look at how beautiful oh I used hmx rookie mistake right there oh yeah I forgot to actually implement the post let's implement the post probably a good idea right so I want name from the form value I want email from the form value and then I'm just simply going to go data. contacts equals append data. contacts new contacts name and email right your classic go code right right here fantastic and now we're just going to render this out so we've added the contact to the end of the list and we're rendering it out sounds good awesome did I get it all correct all right so before we uh display all this let's jump over here I'm going to refresh it look at how beautiful this is we have ourselves this wonderful modern looking form and so now I'm just going to type in a name and an email remember we're putting no validation on email right now and look at what happens when we create a contact if everyone's followed along mostly correct you should be seeing something that looks like this so before I go on do does does do people need time time time calls anybody you look distraught you need time I'm fine you're fine you good yeah no yeah okay yeah yeah good yeah okay yeah Mark you you good okay we got thumbs up everywhere just making sure twitch you good yeah yeah no yeah frontend masters.com yeah no yeah all right everyone says okay we got a couple NOS in there but mostly yeah yeah yeah yeah yeah yeah yeah yeah okay now we're getting a lot of NOS in there I'm sorry um sorry fantastic times so there we go we have this nice little post when we make a post this is what happens to our context page this kind of sucks can we all agree that this sucks this is not like that's this is not what I want to see at all right this is not it this is not it at any of it in fact this is horrible and if I keep on adding it'll just keep on getting worse and worse and worse and worse and look at that thing go it's just awful right so this isn't beautiful I bet you though that a lot of people can now guess what happened what happened I have no idea you have no idea but we have already solved this problem we're not targeting the dip say it out loud come on we not targeting the div we're not Target yeah we're not targeting the right content I love it I know John right John I knew you're going to get it correct I could feel it you were ready you were just there um all right so yeah that's exactly it look at our response we're responding with the whole darn thing and what is it doing who made the request in this situation the form made the request so therefore the form gets replaced I betan if we go to the HTML we might see that our form has a form that has a form that has a form that has a form our forms had babies look at that look at how many it had so we did something wrong here right we need to start targeting and thinking about how are we going to update this page and this is actually quite an interesting problem we're going to get to the problem of form and display all in one page let's see I don't know what what it says yeah so let's fix this problem so this is the same problem as before we're returning the whole thing so first and obvious and easiest thing we can do if you're lazy and you just want to get a product out there just hit it with the old HX Target equals body oh my goodness fantastic I'm refreshing the page did you see how fast that compiles look look at oh my oh my goodness it's just like it's the easiest thing ever look at that we're just adding stuff it's updating not a big deal super super simple um by the way I just love how fast that it's just the the compilation is just so good all right is this good what are some problems with this approach can someone give me a problem with what we're doing right now John are we sending the full HTML we're s we're sending the whole we're sending all the contacts and everything what's the problem on chat John says losing focus if you are targeting the body you can lose focus yes so there's an entire concern on focus and all that kind of stuff uh you can totally fix all those things we're not going to really be talking about that there's obviously autofocus HTM X if a child component has Focus will ensure that focus is retransferred to the same uh item there's a whole bunch of stuff around Focus uh there's also the whole uh you know accessibility concern we're probably not we're just we're not going to be really focused on that no pun intended uh instead we're going to be focusing more on just the HTM x side of things because that really is a JavaScript front end problem it's not really an HDMX problem again it's the same reason why we're not thinking about styling it's just not a problem of htx the payload get bigger the more trips that happen yes so if you couldn't hear it the payload keeps getting ever bigger meaning if you had a th000 contacts we have to send down 1,000 Contacts Plus a form every single time you add one that's a horrible problem to be in we don't want to be there so we're going to explore the space just a little bit okay we're just going to get in there we're going to see what happens because this seems kind of exciting uh yes I know some people are suggesting the fix being rust thousand contacts not a big deal with rust right still a problem trust me this is a problem let's not do that uh so let's first start by only responding with contexts that should be a pretty easy reduction of stuff so let's jump back in here and we need to change two things we need to change who are we tar targeting and then the code that's being generated so I'm going to go like this HX Target and let's go down here and call this thing ID equals contacts right and then we're going to jump back here and we're going to go pound contacts all right awesome so now that we have that that should do all the redirecting so now we're going to go over to the server and we need to say hey don't render the index render the context right or wait I think I call it display did I call it display yeah I called it display terrible name but you get the idea okay awesome we we're going to do that so I'm going to refresh this and let's add a contact okay I mean that's better right we're get we're we're getting better I'm going to just keep on look I'm just creating so many sweet contacts is this better in some sense it's better but let's take a little Gander at what's happening inside look at look at what look at what happened here we we're having multiple levels of contacts why is that can anyone tell me why we're having multiple levels of contacts doing in HTML in HTML boom did you know hmx you can say how you want to replace it so let's just jump up here and let's do a little HX swap equals outer HTML so instead of replacing the inner contents let's replace the entire element here for a second so let's at least fix that problem so I'm going to do that do that and boom as we added a bunch notice that oh we no longer have that problem so we can kind of specify how we wish to swap out the elements which is a pretty cool little item so for those that didn't see it on the form I did HX Swap and so this is just how you dynamically say this is how we want to change things out pretty cool pretty great very happy about that I'm happy you're happy hopefully let's keep being happy together all right so is that good let's wrong with this approach again there's two big things there's two very glaring problems here we already kind of discussed the first one what's the first one first one's start returning multiple users yeah we're returning way too many users it could get really bad what's the second obvious problem with this approach doesn't clear out what I mean I just added the pretty much the same contact over and over again there is absolutely no air handling at all what happened if what we put up there and you can always bypass the client right so you cannot even think that client uh client validation is a real topic to be trusted you have to do all your validation on the server so the two big problems is a we're sending all the contacts and B we have no way to specify how errors are delivered back to the client maybe this contact already exist maybe you didn't enter analid email we got some problems here so uh yeah I already did this well one option is we could use something called response headers if you don't know what response headers are in HTM X you can actually do some serers side override of how things should happen so I could say hey we're going to retarget our response to the form and deliver down some errors we could re uh we could resap we don't want to Outer HTML swap we want to Inner HTML swap or however we wish to do it we could do any sort of repping retargeting reall the things I don't want to do that but that is an option if you wish to do that I find that feels a little bit more confusing for me feels a little bit harder to kind of grasp what's happening feels like it could be a little goofy the other another option would be out of band updates so this is pretty cool idea where hmx you can actually say hey go update this other place as well so okay so let's make the response be an error on duplicate email and displays errors uh in the for uh in the form 400 status code for bad request right that should let's use proper status codes let's have this really proper experience I just want to make sure okay awesome let's do that so what we're going to do is we're going to go over here here and luckily we were very very smart earlier we did a little type Alias so I'm going to do a little Funk uh little little uh see uh contacts and then we're going to go we're going to go uh uh has email why not this is you know probably not the way you'd want to do it but this works out pretty much all right oopsies we don't need to do a little star right there you don't want to have a pointer of a pointer it just seems really bad invalid receiver can we do this on can we uh grab one of those on here can we not do that I thought we could do that on this one am I crazy you can't do that I swear you could oh this is just such disappoint such disappoint okay we can't do that I might be rusting inside my head all right fine we'll do it on the data whatever whatever uh sometimes I put in too many things in my head all right there we go so we went over we're going to do has email on the data it's going to go over all of its contacts see if it can find a contact that's emails true and there we go yeah awesome let's go so we're good we're happy about that so we're going to go down here and I'm going to go like this if email if data has email I want to render something back I want to render some sort of error I want to say hey you're a 400 hey things have gone wrong so I'm going to replace this with the 400 we're going to render a 400 and now we need to display some sort of error here so we have that thing called form you may you may remember our well-named form right here but we're going to need to have some more information stored here I want to be able to return down a form that has its previous values and I also want to be able to return down a form that has uh some errors within it and so let's jump back here and let's do that so I'm going to create something called uh type form data which is a struct which has a values which is going to be a map string string and we'll have errors map string string just keep it simple for now pretty generic maybe not the way you want to do that that's fine and then I'm going to have a new form data hey thank you very much which is just simply going to say hey we're going to make those things because if you don't make a map you may not realize this it's one of go Lang's many downfalls is that if you don't make a map it's a nil pointer and things go Kaboom it's the most just it's just so annoying just just give me a zero value map that's all I want in my life I know Gophers are going to come out and be like well actually did you know the reason why I don't want to hear your reason why it makes me angry okay all right now that I got done with that fairly useless okay say sh my finger yeah I shake my finger at the silly things right all right so now that we got that well actually you know all right so now that we did that let's think about how we want to do this form data well we don't care if this looks pretty so I'm just simply going to go like this if uh values uh name oh yeah we'll we'll we'll keep it lowercase why you know it is what it is is uh value equals value name easy awesome we'll do the exact same thing right here and we'll replace name with email all right so if we have an email put the email in the value all right pretty easy I know a lot of people are like well what about placeholder we're not again we're not trying to focus on the beauty aspect here we're just trying to focus on the Practical use of htx so now we need to do something really important which is uh if uh errors. email well then we need to display this wonderful error message so oh yeah look at that I'm going to erase this we even got ourselves a red err so we're going to have an email error that says Hey There was an error here we're going to display this as the form it's now part of our form forms by the way are awful they always turn into this they're always just a huge nightmare of just previous values and filling things in and doing all that so fun times I've never met a form I liked so now that we have form looking like this we're probably going to need the several changes here all right so be prepared so let's jump back to our server let's first deal with this part right here we're like this form data equals new form data beautiful I'm going to go form data values is name I'm going to do form data value uh email is email and then I need to do form data email look at that copilot look at that it's like you knew what I was doing uh we're going to add in the error emails already exist easy peasy pumpkin seedy pass in the form data but now that we've done that we've also screwed up our index page you can no longer refresh because everything's going to have all these errors these properties don't exist so let's create a quick little index page right here type uh I'll just call it page why not uh struct it's going to have data which is the data and we're going to have form which is the form data easy peasy look at look at how beautiful this programming is it's really not beautiful no one should be impressed by this by the way everyone should be fairly upset about this uh instead so now we're just going to do a nice little new page just so I don't have to do it any of that uh can I just do this oh yeah oh yeah new data there we go uh and then just hit them with one of those look at this just the world's greatest programming going on here so instead of using a data let's use a page and go new page there we go we have our empty page it's absolutely fantastic we're going to use page in our index we're going to have to use page all the way down here page. data and things oh data with a capital D there we go we're going to have to do the whole uh page. data with capital d uh yeah there we go page. dat with capital D we're going to display with the page fantastic all right I think everything is looking nice right now all right so there we go so we have the form we have all that let's upgrade our templates as well because our templates our index template currently doesn't actually pass the correct stuff around so we'll just jump in here uh and instead of passing the object uh the form I'm going to just do form and for the display I'm just going to do data all right kind of got those things through things are nice so now that means our form object here is that all right so that's pretty much everything that we're going to need to do we still kind of have some question marks around here to do question mark what do we do down here but let's first make sure we can trigger this and see that thing work and if everything's gone good look at that we have that if everything's gone good we can refresh okay we got some good stuff here I'm going to click this email I should have made the email so much EAS and you know what in fact I'm going to jump back here I'm going to go back to GD gosh D gosh d I didn't even it's not even GD uh let's go like that I'm going to make it aoeu because that I use dvorac by the way by the way I use dvorac and that's just my home row on this finger makes it super easy to use uh so now that we have that there I can just refresh that oh look at that so now I should be giving a duplicate email right so when I create this it should actually display a problem what what happened let's check the network tab just to make sure well we got the 400s the 400s has the it has this what the heck's going on well several things we didn't do several things correct okay first off look at our targeting our targeting totally sucks okay we're not targeting the right stuff here so let's just jump back and make sure we're targeting The Right Stuff uh we're going to just take out the target we're going to when you submit a form its default Target is itself okay problem number one solved does that solve our problem well of course not it does not solve our problem we have one other thing that's wrong we responded with a 400 by default HTM X is not going to do uh display 400s right because that would be really bad you don't know what's coming down with your server second off is 400 even the right status code technically you should probably use something like 422 a 400 means that you've made a bad request did we make a bad request no semantically we made a very correct request here you go we actually did a 422 The Entity itself was unprocessable so let's first do that let's change it to a 42 to be more semantically correct even though now we're kind of getting into the pedantics and some people are like I don't like that I do like this for this specific reason because it really allows uh HTM X to be The Driver of your application state by having very proper status codes because the second thing we're going to do is we're going to update and add this little script to our Index this little script when we load the content We'll add a body uh or an event listener to the body before swap HDMX emits this event before it swaps out the content and what we're going to do is say hey if this is a 422 we know this is good so therefore we should Swap and this is not an error and so we're going to tell htx on 422s we want to actually display what's going to happen because this is this is something we want and so this is another reason why using very precise uh uh what's it called status codes allows you to actually have really precise Behavior where you want it and so this is kind of cool this is kind of like a little cool little thing right here so I'm going to jump maybe some people don't think it's cool I think it's cool so I'm going to go down here right into my HTML not even have it formatted well we're just going to put it in there and now when we refresh we should be able to see this beautiful beautiful beautiful thing happen so I'm going to go aoou aoou I'm going to try to create contact and it's going to say hey contact already exists we could add it so I could throw in like an autofocus here or a select here on the email to kind of make this thing happen well we could do all the designing of the behavior you want your HTML to do uh in the back end or you could really add it to the front end if you were really really excited about doing more JavaScript in your front end but at this point we had a 422 response and we are correctly identifying where to update stuff kind of cool right it's kind of exciting I'm kind of excited I like it I don't know I think this is kind of fun because we're starting to break down problems in engineering path there's design patterns that are starting just to emerge where you can handle forms in a very generalized way at least the response for errors and then how we're going to drive in changes okay I don't know I kind of find this very exciting because I just I love the idea of being able to think of things in patterns not how do you want to do it how did the person design air handling in their form well you look at any form it's all going to be unique it could be tons of different libraries that it's using it could require Json to some other Library format you're just doing series of translations here we're literally just going from server State into HTML it just feels good feels simple so can we so we can render errors we well what about success so now we got to start thinking about outof band updates because right now our form replaces itself so let's go back here and let's think about what we can do down here once we have our contacts here we want to just render just the contacts I know we're going to fix the problem of too many contacts but right now let's just think about the very narrow case of form is good update contacts so instead of instead of doing uh let's see what are we doing right here we do a display display is the right thing I think this looks pretty good except for if we have a success what's going to happen let's find out what happens if we have a success with our current one I'm going to put in a little bracket there create contact and now what are we getting what are we getting why can't why can't I see you oh let's that was that was strange email already exists let's just make sure I have everything why am I getting oh we're getting a 500 what the heck's Happening Here let me just make sure uh can evaluate field contacts okay we're actually having the classic I didn't update the templates as we just as we talked about earlier what are we going to do right here let's do the right thing so right now I can just simply do a uh not page but page data because remember we're displaying the contacts I know again we probably should have just called the contacts we're cutting Corners people we're cutting Corners people let's refresh that and now we do that and look at this our form went away and all of our contacts suck because why why did our form go away and why do we have two sets of contacts itself yep replaced itself Perfect all right so we need to do an outof band update so I'm going to jump back over here to my templates and I'm going to go down here and let's pull out a contact so block contact notice I named this one correctly I felt pretty adventurous today maybe a little enterpris I just felt like it was the right move to do right here so I have this nice little contact that we're going to put right here and I'm going to go uh template uh what is it contact perfect so that should all just work out just to make sure hit that refresh we're looking good and now I'm going to do what is referred to as an out-of- band contact I'm going to go I'm going to call this o contact inside of here I'm going to render out a template that is contact right here I need to add two things I need to add uh to hmx that I want this thing to replace some other item on the screen so I'm going to go like this H uh HX uh swap out of band so this attribute allows you to specify that some content in the response should be swapped into the Dom somewhere else other than the target so you can kind of imagine that we're almost creating like a realtime video game we are based on the user input we are now updating the display and we're kind of doing this game of how we're doing stuff so that's how kind of like how I like to to look at it right so so we are going to add an H we're going to add in a selector I'm going to say contacts so swap me out to contacts fantastic and then also notice that I am just doing a singular contact here I'm not doing all the contacts so let's think about how we can do this in a more singular way so instead of just doing a swap out of bands right here let's do a uh HX or hold on let let's do oops ah uh let's do after begin after begin will'll prepend the content before the first uh child inside the Target and then I'm going to add an ID to it that's contacts so now I've given it all the information I want you to Target contacts and I want you to swap yourself in at the front of the list not destroy the list just swap yourself in to the front of the list pretty fun times this is looking kind of so this is called an out of band contact so if I go here I'm going to do this contact equals uh whoopsies uh let's do one of those oh we we're going to definitely want that in there and we're going to want contact there we go and I'm just going to pass in contact and we're going to do o contact so now let's see what happens here I'm going to refresh this I'm going to do an AOE AOE all right that already exists so let's put a one inside there okay well it did add it to the front of the list awesome but where did our form go our form disappeared what the heck happened there it's like I already knew where this is a great question who designed this it's actually okay so does anyone have a guess where the form went anybody there's just no content replace it's sending back nothing for the the main content this man is ready right here you're ready for HDMX yes so we sent back nothing from the server and we sent back an out ofand update so it said okay I see an out of band update I'll take that out ofand update all right what's the remaining content oh nothing all right well my form says replace outer uh with the contents from the response you spent nothing or you sent nothing we replaced something with nothing fantastic so we can easily fix that by just doing one extra render c. uh render and let's do uh we can do what is it uh form now we need a uh new form uh data there we go just render it blank we don't want all the names and everything in there so absolutely fantastic uh we're not going to do an error check it's warning me to do an error check we're really good at this I mean I could put in there look at that I even have it on little macro just in case little quick one if I just need to throw in an error or an error an error and an error you know I can just just do it really quickly just I'm so ready so ready for go right now uh so now that we've done that when I refresh it and I put in AO one or plus sign why not it will add it to the front and then give us a new form so when we look at the response what do we get here we get the following we get our main content and we get our autoband updates somewhere else within the web application all right all right all right that's it's kind of neat right this kind of neat do we got some thumbs up thumbs down thumbs sideways one in the chat if you're really excited about this oh yeah we got a wall of ones we're feeling good a lot of ones in fun of Master chat too okay I see I see a couple not ones not happy about that but you know you can't win them all okay you can't win them all so let's look at the uh let's look at the HTML and ensure that this is correct I actually have no idea if this is going to be correct or not I put this in here because there should have been an error but I may have actually programmed it correct I'm thinking I know I programmed it correct by accident all right so let's see what do we got here well okay I mean that that that is all correct our form is all correct so I think what I was supposed to do is I was supposed to forget to do the old HX swap on the outer and then we'd start having forms embedding themselves within it it creates no actual problem it's just inside I just I don't want potential problems right I don't want the occasion for a problem so I goofed up I goofed up there and now look at us just disappoint all right so I accidentally programmed something correct I knew it was going to happen I just knew for a fact I'd do it correctly when I wasn't supposed to do it correctly all right there's all our code lot of code here lot of stuff oh by the way I threw this in here at the end sometimes when I'm testing I just throw a little test Block in here I'll highlight it red put like a big red block so I can kind of see where things are going if I want to just test like when I'm just when I was just learning I found this to be super useful so I'd highly recommend that Al Another Kind of super useful thing uh if you're if you're just kind of new and you're trying to discover what is going on in htx what available stuff it has uh I suggest turning on HTM x. log all and when you execute that when we add another contact uh you'll see that it does a whole bunch of stuff right here it has uh let's go all the way up to the tippy top we have the trigger what triggered it we can listen to that so we can listen to the trigger that started some htx event we can listen to a confirm case we can say hey validation every we can do a valid case on it validation case on this one we can add in a config request validate URL before request before send then it does all the uh xhr stuff and then afterwards we have a before swap event notice that we actually use the before swap event uh if you go back to right here that's where we did this whole Dom listener before we swap in the content let's make sure that we can respond to error codes in a way we want to respond to error codes and so there is quite a bit of stuff that you can actually respond to and including every single element that got cleaned up also goes through this before cleanup element so you can actually really go in there and you can really be quite expressive with what you would like to do you just don't have to if you just don't if you don't want to that's fine there's also after swap after request after load uh after settle meaning that everything has been replaced on the Dom there's no more delays all the throttles or everything are all done here you go we're in a new finished state so then you can do something else at that point you can add a set timeout one and then close your modal uh I'm not a big fan of modals or modals however you want to pronounce it I think that's like a that's like a North Coast versus West Coast pronunciation issue North Coast being Montana greatest state in the Union all right question from the chat is Echo handling the HTML serialization with c. render okay so is Echo handling the HTML serialization with render so I'm not super familiar with uh Echo but effectively what is happening when you do a do render it calls your renderer render function so remember at the very beginning of the class we have this function right here renderer and so it will call that function with a name a data a context and then where to write that value to and so that way when we execute the template it produces a string but that string instead of just returning you the string of the template instead it writes that string into the writer the writer is supposed to be you know a nice efficient way so you don't have to have nearly as much memory allocations maybe it has nice large buffer there might be a way to pre-configure how much underlying starting memory a meor a writer starts with I have no idea but that would be fantastic so that way you know you could have some nice some delicious efficiencies there uh but when you call render notice that we do a pass in a string and we pass in some data if we go back up uh if we go back up to the top notice that we get a name and we get a piece of data that is uh for those that are the go uninitiated interface squirely is effectively any in typescript it's not any but you can imagine it's any easiest way to put it it just says hey it's a type I don't know go figure it out yourself uh so there you go so yeah that's all that's all that happens right there I don't really understand exactly what happens underneath the hood but I know most of that happens you can use any now but okay so for those that are talking about go that any is completely different than a typescript any okay it's it's not even the same it's more like a template T than it is in any that's just ridic don't be ridiculous all right let's get back to HTM X this is really where we're going to try to make it a touch more interactive a touch more exciting maybe show that there are ways to add more client side just stuff than is uh there right now so we're going to talk about deleting and events so we need a good icon if we're going to do deleting I did ask chat jippy uh to give me an icon It produced this Savage for me and yes I call these Savages if I'm going to call them pings I got to call them Savages okay you can't just choose one and not the other one okay and so here we go we're going to copy the Savage code you're going to definitely want this code if you're going to want that Savage go ahead take it it's beautiful it is now yours so what we're going to do is uh we want to do some deleting but I want to highlight a really cool part of HTM x uh you can use actual verbs not like fake verbs okay we're not doing a post getting a 200 back and getting a 400 error status underneath we're actually using real end points with real verbs that means you no longer have to do this stupid thing how many people did that with all all the fun times back in the day where you'd have get and post and then you have like a post contact SL delete slid you like put the verb inside of the the path it's kind of annoying it's kind of dumb so with HTM X we can just we can just do the thing you know we we can you just do it and so it's fantastic would you look at that like would you look at that right there we have contacts slid very exciteed I'm very excited about that so we're going to update our HTML let's add a delete icon next to an address an address of course is is a name and an email address and so we're going to first include the icon next to the address we're going to make a delete Handler for contact ID and then next we're going to make an endpoint uh we're going to make endpoint updates for this okay so should be pretty easy let's do this all right is there any way you could post the current code to like a branch we could post the current code to a branch yeah let's do that let's just do that right now uh get stat get status uh I'm going to go like this get add this get commit uh Batman and we're going to check out B uh check uh checkpoint one there we go get push origin checkpoint one boom there you go so it's up there right now you can go get that code so you can start exactly in a fresh location where I'm at because from here on out our programming won't be nearly as extensive because that first part you know anytime you start a project there's like a lot of things you kind of got to do now we're going to get into the finer grain detail okay we're going to go deep in so are you guys ready everyone ready everyone has the delete icon I don't think I have the delete icon anymore I'm not sure if I copied and posted over it so there we go just in case I have the delete icon we're feeling good looking good I'll put it one more time inside twitch chat and let's start all right so we're going to jump over to our templates and I said we're going to go all the way down to our contact and now we need to put this little delete icon in there so what I'm going to do is I'm going to go like this style equals display Flex Flex on those kids without Tailwind I am now oh not that one I'm now going to put in the Savage I'm going to wrap it like every good thing you do in HTML you put divs around it what is that I don't care put a div on it and then I'm going to go uh style equals with one REM I forgot what REM stands for but I think it's root font size because em stands for font size classic really uh and so now look at that we got a little Trash Can icons right next to that how great is that oh that's beautiful let's also add in a little pointer so when we put our pointer over it we get like the little finger on it you know that always makes me feel good right uh cursor pointer right so that should make it go oh yeah look at that you can't even see it cuz my like okay it's not the size of the cursor that really matters here but it's really tiny I can barely even see it but it is a pointer icon all right absolutely beautiful again we're not concerned about all the other things that make HTML so for those that are wondering about accessibility you can do accessibility we're just not doing it right now because that requires like a degree in of itself you know that's people walk people go on like conference circuits to talk about it it's a complicated topic and I'm just not a good enough HTML engineer to know all the things all right so now we have this delicious icon right here next we need to make it do a delete to the uh icons ID or I mean uh whoa we need to make it do a request to uh contacts ID obviously you probably go we don't have IDs for contacts well we're going to have to make one okay we have to make one now all right so let's go HX delete this delete attribute call will cause an element to issue a delete request okay fantastic let's absolutely do that and let's go to contacts and then we'll do a slash ID oh yeah look at that looks good right it's looking good this is feeling good and then I'm going to also do uh a little ID up here and call this contact and then we're going to put an ID on this one this is for a future future problem that we will see we'll get there don't worry about it so okay so we have this nice delete so now how do we say what to delete because if I just issue this request and we successfully delete what is hmx going to remove it should remove the HTML connected to that contact ex it will remove currently the Savage inside of this div right because it always the default behavior is swap inner HTML so we need to have a different swap potential strategy so let's first have HX swap equals outer HTML so now we will delete this div but we're still only deleting the trash can so we need to do something a little bit different let's also add in HX Target equals so normally if you're if you can you can use something called closest which is a CSS which does a selector upwards and will check your ancestor so technically you could do something like this except for I am a div myself therefore closest will also consider yourself as part of the selector thing that's just welcome to web 3 delicious standards here very annoying I wish it just did parent and and Beyond because that'd be super useful because I could just say hey delete my parent div and it would just boom and it would work so we can't do that so I'll just go like this contact um do you like how it does that little shift every time I don't know what that is there we go so fantastic so now we're saying hey who to delete how to delete it what endpoint to get go to I think we're effectively ready uh let's do a little refresh it says internal error why does it say an internal error anybody anyone want to make a guess no ID no ID bam gosh this guy it's like you program go it's just like you know you know it you could feel it all right so I'm going to go up to my little uh contact form and I'm just going to go VAR ID equals z why not this is why by the way if you're wondering why I did a little new contact here it's like I was prepared for this eventuality we're having right here so there we go uh okay okay okay okay okay okay okay okay uh in there we go everything's been specified we're looking good fantastic I don't think I technically need this one yeah I don't even I don't even need it all right so there we go uh awesome so now we have an ID on the contact forms which means every single time we create a contact it will come with an ID which is also why I use these function right here so now even our dummy data we have IDs we're feeling good everything's looking good we go back here we hit refresh everything's there let's look at the HTML just to validate that we have actually done the thing let's bring it down bring it down look at that look at that we have contact one we're flexing on the kids this thing is saying hey Target contact one swap out our HTML so if I click it let's bring up the old uh Network and I click that look at what happened it said hey that's not f found why not well we did a 404 because there's nothing there we haven't added the Handler yet but it did the right thing it went to contact1 and issued a delete request oh it's like proper we're just so proper at this point so let's do an e. delete uh Slash uh contacts ID fantastic uh let's get the ID string equals uh that I'll do ID and uh ER equals stir convert I mean maybe I could have done something better here but I didn't do something better here throw in one of those if we hit that I'm just going to return a e. string 400 right uh is that no it's it's c sorry c. string so if you're not using our UI and you're somehow by going around this I'm just going to issue simple responses out right if you're using our UI you're not going to be running into these situations now you could say yes you could run into the situation you're running into it because it's been deleted by two windows being open okay I hear you we could plan for that we could send back already deleted doesn't exist and just have the content zip out anyways because we know that we've created something or something's on the screen that's out of sync with the server uh which is always the ultimate problem of of all things involving uh the web just continuously out of sync so we're going to go all the way back up to the data and let's add in one more function uh function d uh data find or ooh let's go index of uh this uh and we'll we'll do let see what do we want to do we want to do ID right so there we go so we're just going to return out the contact I mean we could make it nice like that and co-pilot will pretty much do it for us all right awesome and we don't want to do that actually we want to do an index of don't we uh let's return out the index that was found here or uh negative one I guess we could do do the other way I'm not sure why I did an index one why did I do an index one did I do it do I have a good reason for it I don't think I have a good reason for it uh index one it's just in my head that's what I was doing so we're going to keep on doing the thing I already built and we could actually do yeah we could do we could have just use the nil as that else we need to simply delete out this oh that's why I did the oh that's why I had to delete it out that's the thing we got to do and I knew it and so let's just do the little little deletion here all right fantastic let's just make sure this is good we're going to have page up to index and then we're going to start from index plus one and on okay awesome we've now created the this wonderful contacts right here we've updated our contacts now we need to return something from this deletion which of course c. no content 200 right we're just going to return an empty reply you got it so I'm going to refresh this and when I hit delete it's gone look at that inline deleting refresh nothing is there hit the save on the server we're back we just rehydrated the data okay okay so inline deleting we can inline delete okay this is positive this is positive motions here hopefully everyone's excited about this Fantastic look at all this code we have really CED up a huge amount but still this doesn't feel interactive right we want it to feel like something's happening because right now it just kind of like pops out you don't know if a request has been made you don't know what's happening are you going to press it multiple times are you freaked out you could be freaked out so let's start by adding a simple time delay right here so I'm going to go sleep and hopefully 1 second pretty good I'm going to first start it off with 3 seconds so it's like really obvious to see and feel the terribleness of this so I'm going to just press this button look at this is it requesting we don't even know what the okay there we go it got deleted it just disappeared if you had a big list of items all sudden something shifted it might be very hard to see it's not a great experience we should probably fix all of these things at the same time so we have two options we have HX indicator and swap delays both are very exciting and both solve different problems so let's start off with the indicator okay I want you to add these two lines to your server which is just saying hey statically serve these directories um I'll paste it in twitch chat Boomer websites are the best I mean fair fair statement all right so I'm going to go up to the tippity top up here and I'm just going to say hey there you go serve out images serve out CSS that's why I had you kind of used this project to begin with because there is CSS there's is images you can look at it we have some stuff in there that's going to be nice so pretty simple right there next we need to add this CSS link so that we have this beautiful CSS on here it's only like three lines of CSS so I'm going to go back to my template go up to the tippy top go to the Head add that wonderful piece of code right there if you want to use the course website go for it uh there we go we also have this little beautiful image that we're going to be using I took this directly from the HTM X website okay it's my image now that's mine it's our image all right all right fantastic I just tried literally quick uh I just typed in Colon WR enter on a website that's not how you copy something it's just it's it's just I can't help but to do that it's just it's just in my head but just do it all right uh so let's go and let's add that line what was the line sorry I got completely confused there all right so let's go all the way down here we want to add one more item to this contact I'm going to add in this beautiful image right here so let's just see what the image looks like a little loading icon right there how nice is that little loading icon our icon that is all right so I'm going to add one more item to it it's going to call div class equals HTM X indicator now that is what that CSS is for this is a generalized way to solve this problem and so you can use this for all indicators so let's look at that CSS one more time if you have indicator on your class we set your opacity to zero and we have a transition of 500 milliseconds if it were to become visible then remember how there's all those events that happen with HTM X well when an element is a part of a request HTM X request will be added to its class list so notice that I say this if one of our parents has an htx request then our opacity becomes one if we have that our opacity becomes one so we can kind of Define both possibilities and so that way we can load an indicator and show it upon request so now we have that nice delay everything should be good so let's refresh it obviously nothing's there when I click delete what happened well nothing we didn't actually add the indicator so let's go back over here and when we do a delete I'm going to add one more attribute here and go HX indicator equals now we need to have some way to Target it so we'll add a simple id id equals contact indicator uh ID oh yeah oh yeah look at that beauty that is beautiful isn't it there we go we now have hey the indicator for this action exists in this location and so when that happens it's going to do all the addition of things you needed to do so pretty nice so I'm going to hit refresh and now when I hit the delete that thing will nicely show up during the duration of the request and then be removed when it's done if we look at the actual elements let's look at the actual elements so we can see what happens here so when I hit that delete notice that htx indicate or uh htx request is just added automatic Al to that class for you so you don't have to think about it it allows you to have these things added and there's actually more classes that we can we can get which we will get here in just one second so that is one way to add some level of um of interactivity it's good but it's still I mean it's shockingly declarative right we pretty much declared exactly how our element behave including where our indicator is and how it should behave so that's nice but it's still not as good so now we're going to add something called a swap DeLay So I want you to update your CS with this small little thing right here contact SL or contact.htm X swapping it's beautiful okay and you could obviously just make this generalized you could have a single way you do this or you could have it a unique way for each one we could use the max height thing though trying to trying to animate on Max height is extremely difficult and there's all these CSS hacks you have to do just to get height to go downwards oh my goodness I hate CSS sometimes I just want to just punch I just hate it anyways okay so we have contact we have this I'm going to add it to the CSS so I'm just going to walk over to the CSS and I'm just going to paste this little bit in yes my my CSS is clearly a skill issue so we have this beautiful little piece of CSS right here so I'm going to go back to this and now we obviously want to add I mean now we're getting into like full front end here now we have this nice little class contact on it so we know how to say hey which one's going to have this now when we do this uh this right here what's going to end up happening whoopsies um is that let's go back here so now you can see it this right here we have a Target on it when the target happens before the swap happens it adds an additional class HTM X swap or swapping and it's going to say hey we're swapping out this element so if you need to do something with it you now have one visual hook in your CSS to do something with it and it also has something else which is I can go swap for 500 milliseconds I want you to just give me 500 milliseconds on this so I can make something pretty myself so when we go back here and I click delete it will do the whole indication for 3 seconds and then the swap will happen we'll do that nice little fade out and then it goes away now you imagine again you can do the whole height thing you can make it into a much smoother experience you can kind of choose what you want to do here and so it's just another way in which hmx just gives you a bunch of events to tap into it's kind of your responsibility to go the nine yards on this and so I don't know I like that I think it's really really simple and I think it really shows a great way to make nice tools fairly simple right because most of our life is making tools very few things are maintaining very wonderful awesome websites you know all the little ancillary things around it you don't need to have an entire monolithic application for just the simple stuff front and Masters helps you take control of your skills and gain the confidence you need to advance in your career our practical real world courses are taught by experts working on large scale applications at companies like Netflix stripe Google and more no one goes deeper into the foundations of JavaScript and we continue to grow further into design and backend we have curated learning paths built from hundreds of courses whether you're a junior mid-level or a senior developer looking to expand your skills these paths will give you the foundations you need to reach the next stage of your career plus all of our courses are recorded live throughout the year giving you the opportunity to ask your questions directly to our instructors this allows us to keep our courses fresh and up to date with the latest best practices grab a membership today and gain the confidence in the skills you need to get to the next stage of your [Music] career uh there's a couple more things I want to just talk about first off practice makes perfect you kind of got to know and use these for a little bit you'll discover new items I made this really stupid example here for a quick second uh that is just like this really nice little look at that and I used v0 so look how pretty that is I didn't design any of that and when you click it it does all that nice stuff we did this all today went over here made sure that you can't have a valid email and when when you hit subscribe it disables the button for a little bit of time while the the request is happening and then gives you that nice little air like that's nice and pretty it feels pretty it looks pretty uh and I did that all with v0 plus a little bit of HDMX so pretty easy we could do in between swaps as well so we have these nice transition between scenes just didn't do any of that stuff um and we're going to go over a couple examples from the book to kind of show more of the engineering aspect of HTM X okay there's a lot more examples in here go check them out uh first off a current URL can be controlled by uh HDMX which is really great so as we make transitions through our app if you wish to update the URL you can do that uh you can choose how you want it you can say hey don't update the URL so when we do a body swap you don't want to update the URL then hey don't update the URL so we can do all all all those kind of things so let's say we wanted to create a contact page and we so when you clicked on a contact it actually went to a page with all the information but we also wanted to be able to delete from the page our current delete endpoint wouldn't work that way right because it just tries to it will send down no contact what or no content what would happen well the button would disappear you wouldn't know that the the contact has been deleted we just wouldn't have an experience there so what should happen well first we can create a very simple delete button which a nice little indicator we can push the URL so when we do a change with the button it will actually save that change and update our URL we can Target the body if we want to but again we're just sending down no content so it' be kind of weird we just make the page go blank so what we can do is we can actually do a couple things well first off we can always disable the button during the request here's a nice little you know here's a simple JavaScript function that I have that you could just attach to the window color called disable button you pass any button that you create into it and it will automatically listen to the request and disable it during the the lifetime of a request pretty simple to make right uh not only that but how do we do the delete on the context page how would that work well you have to understand a 303 and so first what you probably thinking is that if you were to delete on a contact page you would press the delete button it would go to the server it would do a delete and if you're in a modern front-end world you need to tell your client or your front end to do a navigation to a separate page and make sure that the data is up to date and rehydrate your data make sure that your local cache matches your server in more of this kind of like HTM X world you do the standard which is to actually do a delete to the server the server responds with a 302 but if you do a 302 a 302 redirect carries forward the verb and so that would cause you to call delete on slash so that wouldn't be good what you would want to do is a 303 if you do a 303 it will carry it won't carry forward the the verb instead it will do a get on the slash or on whatever kind of 303 next thing and so if we push the URL like we said earlier if we push the URL and do the delete we'll get the indicator to show up we'll disable the button when the response happens and it does a 303 our URL will be updated to make sure it's now at slash and we will have that contact deleted and everything be done and so another thing I'd like to you know to kind of DEC confuse if you're doing inline or not inline you can just literally add a redirect true right you can kind of go back to the old days where you don't have to come up with super General solutions for every single problem just come up with the solution for the problem at hand this would make the whole thing just simply work right so I like that you could make it a link and do a boost there's all sorts of different kind of tricks you can do I actually really like this uh that approach I feel like it's very engineer right I know how to set up a problem to do that for any type of content and it's very simple to follow the logical steps throughout your application all right next problem you have too many contacts right this would definitely happen to the point where you couldn't just send down a page full of contacts it would absolutely just destroy your experience so there are non-standard events in HTM X trigger which include load reveal and intersect so if you're doing some CSS fancy magic intersect allows for scroll y scroll X kind of offset whereas reveal simply has if an element is visible onto the viewport I want you to trigger an action and so it's kind of a cool way to be able to load content more like kind of when you're on Twitter and you're scrolling down I want to add an final element that's like hey when I show up do something you could also be pretty clever about that you could put that element maybe further into the list and then do two updates a no content update to delete that thing plus an out of bands update to add more things to the list so that way you can trigger a request earlier before the content all runs out a lot a lot of little strategies here but I made a little program called blocks remember blocks we talked about blocks earlier at the very beginning of the course I can kind of show you what that looks like here we go very very simple we have our template right here that does infinite scrolling and all blocks does is it will simply make a block with the ID that was added to the block and if there are more to reveal then I'll do a trigger on reveal swap the outer HTML of this div element so meaning what comes back from the server this div will be replaced with and I already have kind of effectively the cursor right here blocks start equals the next place to start at so I can generate the URL I need to to continue to go through my list of whatever it is and that would look something like command oh that's cmake don't let's not do any of that that that's just the worst stuff in the universe all right so if we did that we go to did I do it at 68 what did I do it at oh yeah I did it at 69 blocks blocks so if we look at the network we'll see that it made two requests right off the rip because when this page landed 10 was already in the viewport that little thing was revealed so then it added the next 10 and then that thing was still in the viewport and made that third request and as I scroll down it's going to just start making requests making it feel like there's more content coming you could do an HTM X indicator you could have a little nice little spinner at the bottom so that way you know more content coming there's all sorts of interactions you can do and this is a relatively unfun thing to program generally which has been made relatively simple especially for a tool like how many times have you used a stupid build tool where you just want to see more things and like that process just totally sucks it just doesn't have to suck right it just it really doesn't have to suck you can make pretty simple servers to uh manage to do all this stuff very simple um so contacts are the exact same thing add a reveal more at the end scroll down what about filtering well filtering is the same problem as the previous one because often besides for the very simple case where you have 10 items you don't need to make a server request and I'm sure you could add some fancy JavaScript for this but in general you have many items and so when you start filtering you have to make a server request because you have to filter your 10,000 items down to some small match that you can display on the screen and then also add an act active reveal if you need to and so this is called Active search and here's a very simple example of an active search you have a form that you can submit to search for contacts but while you're typing the input field is actually making requests and updating the element below so ID search uh you can fill it in with the previous value if you want to so in case you already have a search going and the page refreshes you you maintain all the same stuff so you have a trigger Onkey up delay for 200 milliseconds in other words throttling and if the content's been changed make a request to the server you add some cached headers add some sort of list to it add some sort of key value so if the contacts haven't changed you can just use cached values from within your actual like browser cache all sorts of good ways to do stuff here and it's just a very simple method to do active searching and so again kind of Engineering in a way so I want you to feel that I want you to see that htx it's kind of whole goal is to kind of return to more of what like feels like a computer sciency or a very engineering way to approach problems it doesn't feel like how do you want to solve this what ways can you envision do you want to write your own do we want to use Redux what what can we explore it's like no there's actually a really defined way to do these things that's existed for a long time let's just do step-by-step procedures for everything because anyone can memorize these 10 patterns and be pretty successful at building tools you're probably asking yourself how many uh URLs uh can be represented or how many states can be represented by URLs and HTTP codes well quite a bit uh you can do quite a bit of things with HDMX uh here's some obvious examples that would never use HDMX for uh Maps it wouldn't make any sense the Chrome could totally be uh HDMX but Maps itself you you obviously need that spreadsheets why would you ever do client you know compute uh compute side stuff instead of client side stuff Conway's Game of Life the actual game can be played but if you wish to have something that can save states of Conway's Game of Life and all that you could use HTM X to actually trigger all those events and do all the saving and loading and giving you a list of different games you've played before I actually built this once just to kind of test it out to see if I can do a really nice rich client side experience where you have a game where you can select different items and draw your own Conway's life and then play Conway's life so hopefully you like subscribe do all those things on Twitch and there you go that's really the entirety of the HTM X course hopefully that was not too much of a brief introduction but enough to show you that there's quite a bit of things you can do with such a simple library and again the entire non- gzip size of of HT Max is like 40K its gzip size is I think 12K uh I've been to websites recently that all it was was a simple marketing page and its gzip size was 370k and its actual size was 2 megabytes 2 megabytes of JavaScript to show some colored squares plus a buy button kind of wild to think about maybe just maybe we've jumped the shark here just saying maybe we should consider something different for the simple things if I put a delay in for the response does it delay the server's response to other users on the site I'm guessing no but I'd like to know for sure oh you're talking about uh in HDMX the delay or in go because obviously the go one that's an endo we just put an intentional sleep you'd never sleep in an endpoint intentionally I mean I have no idea why you would do that if you're sleeping in an endpoint and there's an intention to it you're doing something kind of wild right you're doing something that maybe start removing some of those sleeps you know what I'm talking about improving endpoint Performance all right Christmas is around the corner people plan for it uh I've also been told to reduce round trips to the server and this seems to increase those does that slow the site down at all uh it couldn't it couldn't I don't know I I I don't know if I buy that as an argument yet in the sense that you get to choose how much data you first frontload as a server as you send down stuff and then you choose how much interaction or what interaction it takes like if you had if you rendered a website that had uh friends that you had to go click on right you could put all that stuff first on the page but if you went and hovered over a friend to see a popup do you think that they transferred all that data down before you ever put your mouse over that probably not how much do you want to bet they're requesting that information now as long as you have nice HTP caching you have ways you can uh you have some acceptance of potentially stale data how you wish to model that you can always cash it at of browser level a lot of these requests long as you use the right verbs and all that so there are ways you can do things that make sense to make it fast um this is just one way and I'm not saying this solves all problems maybe you want to use your own JavaScript requesting SL Library rendering to do this and there are some cases where it makes sense I can think of something Dax recently built if you don't know who Dax is he's on Twitter he has the spiciest takes of all time and he built this thing that's super super fast super smooth feeling and it's all about like viewing and introspecting data log from your server to me that seems like yeah you're going to want to really think about your caching for that one because you really don't want to just be hitting servers grabbing logs causing a bunch of transfer you don't want to be interrupting production and all that and you want it to be really really nice and highly cached yeah I could see you wanting to do it then do you have to I mean maybe you don't maybe you want to cash it at a browser get level and that's fine and then you can do all of your filtering at that level it's just one way to do things does it make sense to mix HDMX and react people mix HDMX and racks I've seen it I've seen it done um in fact the Beth stack which is that one that I mentioned earlier is bun Elixir turo and HDMX what they don't say is they're using react as the serers side template engine so they're still using react just only on the server so interesting we call it a react cocktail okay and then there's one on the client side that did this cool like Eventing and stuff like that uh we get some more examples of projects that would not be favorable for HTM x uh anytime I mean you could always shoehorn in some amount of HTM X you can always argue why you shouldn't use HTM X anytime that I I I see something that is like highly client interactive and what I mean by highly client interactive I don't mean like a bunch of squares on the screen so if you went to twitter.com like a lot of this is a bunch of squares on screen right oh look at that htx guy right there saying something who knows what he's even saying but anyways like a lot of this is a bunch of squares on screen how much of this needs to be dynamically updated well we have a little notification right here if you can stream in out of- band updates you kind of already have that thing solved and so it's like how much do you need interactivity if I can drag and drop and move a bunch of stuff around and create really customized views maybe that part should definitely not be HT Max you shouldn't try to make that HT Max it'd be crazy to try to make that HT Max I don't even think it's possible you'd want a JavaScript side experience here and that would make way more sense there was a question about how you were getting your auto complete with HTM X your LSP oh how was I getting the auto complete uh maen I I made an LSP it's pretty straightforward uh GitHub the sorry I have it at 4K and I never have it at 4K HTM uh HTM X LSP it pretty much Works couple people have been contributing to it really made it awesome there's still like a bug or two um it's in cargo so you can cargo install HDMX LSP but don't have it so it's hooked up with Mason and I believe there is a vs code client right here uh I'm not exactly sure how well it it integrates with the vs code client it might be in the readme somewhere down here uh VSS code no official support emac no official support so there you go so I'm just kind honestly I'm just waiting for somebody to say hey we got it in Mason and I'll be like hey there you go you can install it now with neovim and then if someone wants to do it for whatever it takes to do in vs code go do it I'll be potentially building an LSP here soon again for work so I'll probably learn all about the vs code side so if it's not done by then I'll just do it for this uh this is a little related to the react question earlier but are do you have any thoughts on a JavaScript framework that is a good match with HTM X in general like solid or spelt I think uh I don't know how spelt would do uh but I'm sure I mean I I would just assume if you're already using a big framework you should just use the one you know best or the one you want to learn right I don't think there's a lot of dictation required you can use leptos and rust if you really want to you can use o camel and dream if you want to right you you got a lot of options there's no it's not it's not something that dictates right it's something that is trying to be like the opposite of it it's having as little opinions about how you do anything as possible is there a way to preserve State without a form submission the example I'm thinking is a tabbed view with multiple steps I want the user to be able to go through the wizard and then have the previous steps data persist when they go to the next tab or another component but not submit anything until the final step is finished yeah you're going to need to have a bit of JavaScript for that one like that's going to have to be some level of JavaScript going on uh I've never tried to build that one in htx so I don't I don't know how how much that is but to me that sounds like yeah you're kind of breaking into potentially I mean the problem about that the problem about that entire thing is that you it's hard to represent that state as a URL uh you have this whole problem where you're you're really representing a single piece of cont content into three separate windows or four separate windows or however many are in the signup Wizard and so that that's a that's that's difficult you can use cookies you could use local storage you could do a bunch of stuff to be able to recall from wherever uh so is it impossible absolutely not is it hard probably not I just have never tried so I don't I've never tried to do it with local storage or cookies so sure you can though probably do something with like hidden input Fields like a fake form kind of thing say that again like hidden input Fields like you can have a form on the page with a bunch of hidden input fields to kind of keep State yeah yeah you could do yeah input Fields would be really easy to kind of make that happen is there a reason you weren't using uh bem syntax in your CSS using which syntax bem I don't know what bem is that's that block object modifier it's a it's I think someone's trolling I don't do CSS Okay so we've already talked about this I called a Google first language uh well now I guess it's a chat jiid first language but you know or vzer first language okay don't don't don't don't test me on that okay I don't know them I I did I did a I did a flex list without looking it up and I did it in both two different directions I already feel like a 95% way there appreciate this time it was fantastic have a good one yeah

Channel: ThePrimeagen

Views: 234,292

Keywords: software, vim, programming, javascript, typescript, software engineering, web developing, web developer, software developer, developer, cpp, programmer humor, humor, reactjs, js, ecmascript, tc39, Netflix, Engineering, Engineer, Facebook, Amazon, Interviews, Software Interviews, vimrc, neovim, spacevim, vim c++, vim editor, text editor, vscode, vscode vim, vim plugins, autocomplete, vim autocomplete, nodejs, twitch, developer productivity, spacemacs, algorithms, datastructures, Data Structures, python, bash

Id: x7v6SNIgJpE

Length: 122min 31sec (7351 seconds)

Published: Wed Mar 13 2024