HTMX: 3 IRL Use Cases

three IRL use cases for Python and HDMX this is not sponsored good I'm not sure who I got sponsored by big python I got sponsored by HDMX okay you think the horse the the posting horse Horsehead language is gonna be sponsoring anybody uh there is nothing hmax does that you couldn't do in another way but hmx pairs wonderfully with traditional server-side Frameworks and gives you clean correct results quite fast you won't get Candy Crush bling level oop I'm gonna turn this down with it but you will get something practical which is regularly all I want or all I need yeah this is a fair statement Fair statement I added it to a quick and dirty Dev tool so that I could uh so I could be dynamic with little cost I sparkled it on a personal project I want to know about sparkling how does one how does one Sparkle Sparkle it on uh for a time management tool to force it to send standard requests and I uh and I sold it to my not so good coder friend to make the team happier can we just take a moment and all recognize that we all have the not so good coder friend but we all love our not so good coder friend English is a second language confirmed yep that's me yeah yeah yeah hey hi it's me I know we all love we all love you uh mine personally is Nightshade dude Nightshade dude I really appreciate you Nightshade dude uh I know that you're a great person but I would probably recommend um uh htmx to you too also great mod Nightshade dude great mod if at this point you're too afraid to ask but beyond a few months of hype and this hilarious Twitter account by the way the the account is hilarious htmx has proven to be a valuable addition to my toolbox but I read again and again people wondering what use case would you find that it could be done a different way what the heck are those people laughing at drug memes for uh or drug memes using that stuff for first let's make it clear things up there is nothing hmix does that couldn't uh that you couldn't do in another way it's not htmx versus it's htmx also this is a fair statement this is actually a really good statement which is I mean you can build anything in react you can build the same thing since felt and you can pretty much build the same things in htmx as far as I can tell there's no hurdle that I have seen yet that can't be done uh like you could like you wouldn't really use react probably for a Maps app for the Google Maps app I mean you could you could use it for all the Chrome but you could also use htmx for all the Chrome and then have the intense web component being the map itself or however you want to create that map right like there's no application that somehow too complicated or not complicated enough right uh you add the tool to the ones you uh can use depending on the situation yes it's funny to make jokes on obese client Stacks complicated build workflows and so on but of course we use them too that's why it cracks us up oh while I'm a python expert I'm very comfortable with JavaScript and I use react and view for my clients what's more if you started web dev after 2015 it is hard to see how to do a site without anything other than client-side Frameworks this is a great observation by the way I absolutely love this observation which is if you're not used to doing if if you've only ever lived in a world of Frameworks or meta Frameworks it's really hard to see that that's not the only way around it's kind of like picking up functional programming the first time there's something about doing functional programming that feels really confusing like I'm great with recursion not a problem I just don't reach for it as a way to solve all my problems and so when I start having to do that all of a sudden it changes like my perspective quite a bit and now I have to think in a much different way than I used to think right and so I think it's the same thing with htmx is that when you're used to object oriented getting tossed into a functional programming language would be hard it's a familiarity issue more than anything else because there's a way you solve problems that cannot be connected right like the way you do it and react cannot be done in htmx and if you try to make it that way which you can you can actually use react in htmx it just gets all effed up not the CSS tool I mean sassy HDMX is a good Tech if you know how to wield it it's not going to change the destiny of humanity forever it does require the coder to think like php3 uh is a thing again but it has a lot of good things going for it sick Bird Man mostly it keeps um the simple things simple that's pretty nice it does this is a great thing and most things you do I'm going to throw this out there web devs almost everything you do is simple you make it complicated I'm sorry I I know this hurts I know you don't want to hear it but most things are simple we've just made them really complicated and some complicated things we've made really simple so you know there's a trade-off I would say that web dev is in a much different area it's hard for me to call it simpler but it's hard for me to call it more complicated it's different there's a lot of niceties and there's a lot of horribles uh anyways about the use cases before we start with the use cases again I must insist there is nothing in those that could be made uh in another way you may think oh but I would have just you know you'd probably be right it's not about the best way it is it never is in engineering it's all about what was right for me and my context while reading them I I mean I mostly agree with the statement but at some point it does make a difference you know I I've gone to some recent websites that are selling like a very simple tool and to load the main page is 350 KB of gzipped JavaScript right like that's a lot for a simple tool it was literally a login and some payment things and it was pretty and it was 350 KB gzipped right that's like megabytes of JavaScript code that becomes tens of megabytes of JavaScript you know what I mean and so it is a little bit surprising right whereas like you could get an entire thing sent down you could get the ex same thing with the same functionality sent down by htmx in 40kb 30k 20 KB it's just different and it loads differently and it feels different to the end user and so there is a point in which going all in on these big tools can actually have adverse effects especially on phones not everybody's gonna be sitting around with the I have the latest pixel some people some people are dumb enough to spend 1700 on a phone I'm not gonna do that not gonna do it even if Netflix could buy it for me I'm still not doing it they bought this one for me uh anyways use case one a quick and dirty Dev Tool uh working for a main client we started to have quite the sized core lib dedicated to tricky calculations one of my colleagues told me it would be nice if on the top of the unit test we could have a UI with all the params so that an intern could play chaos monkey on it and see what uh she finds since they already had fast API in their requirements files a web UI made sense but I started to think that if I created a new endpoint for this then I needed to make the whole logic in JS which means adding JS to the project that has been a pure headless python core it seemed unnecessary so I just went with regular HTML form plus table with a ginger template it's that uh it's the it's simple fast to make and as a bonus I could make the form emit a get request so that the intern could send us the URL and we could just copy and paste it into uh or to replicate any bug on our side that's nice I like that it was easy to code uncomplicated nice I agree at some point though the intern was annoyed uh she had to click the button to see the new results she was used to apps that were automatically updating with her phone after all okay fair a bit of JS and Viola add event listener submits the form on change and we're happy but again the intern was not pleased changing one field would uh reload the page but dismiss her focus on the inputs okay I was not gonna do the full collection of the fields why are you guys all saying that why you guys am I just saying it wrong we are now a musicians we're musicians just it just accept the musicianness okay not to mention it would seem crafting the URL manually to push it into the history especially given the Delta of money the client spent on the intern versus me so as a good Lazy Boy I fired htmx the form now makes an invisible get request on the submit fetch is a very same page extracts the table replaces the old one and updates the URL dynamically all of that for typing three lines of code dude HX select is so good look at this I knew it HX select oh dude I love HX select do you can also just go boost you can boost it if you're fine replacing everything but if you don't want to lose anything in the forums and you want to reload the entire page and just have it perfectly deep linked so you literally never have to think about anything this totally works this grabs the table the first take the highest parent table out of the response it targets the current the the whatever the the table is that it finds it does the get request on itself it replaces the URL with itself and it Triggers on change and it swaps the outer HTML of the table so the table replaces the table like dude this is sweet this is exactly it that's all you need as a bonus I said goodbye to my loan ad event listener roses are red my client is happy now I can play Baldur's Gate 3. that was a beautiful poem I'm gonna I'm literally gonna try that out on my wife tonight see if I can get lucky because I think that that is obviously the poem of the century I started a new habit anytime I spend playing games or watching TV shows I had to spend an equivalent time being Physically Active what a great the more I think about this this is great what a great kind of requirement for yourself given uh give and I practice uh some sports almost every day uh that mostly result in less screen time or me being too exhausted to go grab a drink with my friends but tracking this is annoying so I made uh what all good devs would do I spent hours writing an app to save myself a few seconds absolutely absolutely again since it's just for me I have zero incentive to spend a lot of time making a killer UI but one of the one button to consume a potato time one button to top uh to top it up that's not rocket science and apart from a few lines of alpine.js to make a timer which appears wonderfully with hdmax I could go full server side and get this this is wonderful you I mean yeah you can you could totally have the timer you don't even need the timer for with alpine JX or alpine.js you literally could just use a the world's simplest web component this is like the world's simplest web component and you're done it's like five lines of JavaScript look at that that's this is great this is great right here everything was working fine but I had to send a post request for everything and that bothered me it can it's completely pedantic but having actions in my URLs instead of uh using the correct HTTP verbs just doesn't feel right uh did I need htmx no it worked did I want htmx yeah I I like I like this guy I like I like this guy this guy is fantastic uh button button uh do a little put there you go look at that he's dude he's hitting the correct HTTP verb right here I just want the effing put I want to update the thing I want to patch it uh and that's it now I have a real uh organic delete put request and and I feel good plus my Django view blocks are beautifully segregated use case three working with my best Nemesis I have a very old friend and we work uh on side projects all the time he is a terrible programmer and he hates it but but he loves the results in the same way some people hate running but feel uh but like feeling in shape hi uh so he made some personal websites and basically uh live off them okay it clearly does not sound like a bad programmer just made a couple personal websites and and and and then made a living off of it oh okay yeah so he sounds terrible he sounds like he really doesn't know what he's doing um working with him is a blessing and a curse uh once uh one let's see on on one side his coat is dirty he has refused to learn get basics for 10 years and just asked me every time what to do and will blindly copy paste in a frenzy everything that comes out of stack Overflow and chat CPT until something works that is annoying on the other hand he's incredibly hard working more than I'll ever be and has a great sense of pragmatism and a lot of experimental experience with b2c customers he keeps me grounded we make a great team I clean up his mess and he keeps the project on track plus it's uh just fun to be together it feels like being 14 year old again I love this there's this person named JJ prum prum the micro King and me and him have started companies together and also of uh sandroston and uh I'd also do had enough uh those are like my my three best buddies of my lifetime and man I have a potential offer to go work with two out of three of them and get paid for it but it requires me to leave Netflix and a man I've thought about that over and over again because it's just like I love it would be so sweet to work with them again you know what I mean it would be so sweet to work with them you know and so now I have to think about that I have to think about that you know I'm going to think about that let us decide no you guys are terrible at that decide based on Chad Paul I I abide by chat's results I'd be able to stream the same and make YouTube videos more anyways but forgot about let's see but forget about a fancy stack every new project has an occasion not to add something but to remove something I use do it to abstract the entire project management for him I keep finding ways to make the client side simpler and simpler for him and he usually makes the UI we just moved to tailwind and he loves it I love Tailwind too it's for us stupid people uh the templates are huge walls of infinite class blocks repeated by Ad nauseam feels fine to me but having to make an API call every time he needs some data not so much he's not comfortable with asynchronous workflows the promise API is still a vague mystery after a decade of it plus depending on the framework where to put the Ajax calls don't mention hooks he just came out of jQuery we're really good at coming to the right decisions with very little consideration and incomplete data let us decide so I write the client I wrap it up in an object and I place it in viewer react component and we are uh BNF again Bacchus noriform oh best Nemesis friends that's not okay I thought he was talking about some sort of compiler I was like what about what am I reading here everything is kind of like this project at this time no more I just went full HDMX he got the concept quickly and now he is autonomous on his uh side of the project meaning I can focus on other things he doesn't have to wonder at something uh if something is mounted uh what is the await or if he has to write account color account color or account color no more State Management outside of the DB one single routing for everything permission and Sanity are checked once plus it works with flash Django or fast API all the same something you can't say about sending uh back a decent Json these are pretty good there is no real conclusion as you've noticed there is never a need for HDMX but I was satisfied with the results every time I chose to use it so see that's the problem about defining the word need right because I mean technically we don't need JavaScript you can write that in assembly right coding right now on Twitch is writing a web server using assembly do you ever really need any form of abstraction the word need is a funny you know term right need implies that it is a must requirement it's like I mean technically you can write all the way down to assembly and so if something makes your life dramatically easy over over over and over again I would say that you can put it into the quote unquote needs category of programming that's kind of how I live my life like if I use a tool and I absolutely love it and I can build fast and well then that's my new tool that I I need for working right uh so when it comes to building a simple CLI or a test application or something I love rust I think it's the best right when it comes to web servers I'm really starting to dig on go I'm really really liking go I think it Go in htmx I just it just feels the best for me and now I'll probably change that at some point but right now I'm happy with it that's kind of where I let where I land right I just need electricity yeah so go templates are beautiful I didn't stop let's see I didn't stop to use react view axios I didn't stop uh using a vanilla.js or Alpine I actually sometimes mix them with htmx I do not use htmx more and more or I do use hmx more and more because it produces fast acceptable results I do value the short feedback loop do you want to post subscribers what a great what a great article so it's okay so my only my only thing I really want to take away from this article it's just something I've seen a lot in general is that it almost there's kind of Two Worlds that exist in in programming there's those that sh that absolutely were just just don't make an opinion about something like this this piece is like the refusal of an opinion right I'm not gonna say it's better I'm not going to say it's worse I'm not going to say I need it I just say that I personally like it that's that that right and I think in today's world people like to hear opinions they would rather hear an opinion from someone who likes X and then hear an opinion from someone who loves loves why and then try to come up with their best version of it or they usually just listen to one person and then they think it's the best and then if you say anything on Twitter they say you're an absolute ridiculous person have you ever built a real app the dhh builds apps you could even dream of and so I I I'm more of the fan of just like stating more of a like concrete this is what I like and this is why I like it and I you know as opposed to like not really leaving anything it's really important to master tools that allow you to do large jobs yourself so they can prototype efficiently hmx is a much better solution for a prototype of an nvp than a massive freaking react thing plus a bunch of back-end Services yes you can run quick to to to v0 or to V1 you can run to V1 super quick and that's what I really like the name is the HTM Exogen

Channel: ThePrimeTime

Views: 89,474

Keywords: programming, computer, software, software engineer, software engineering, program, development, developing, developer, developers, web design, web developer, web development, programmer humor, humor, memes, software memes, engineer, engineering, Regex, regexs, regexes, netflix, vscode, vscode engineer, vscode plugins, Lenovo, customer service

Id: sTzF57GE4-k

Length: 18min 33sec (1113 seconds)

Published: Sat Sep 30 2023