HTMX for Impatient Devs

[@IsaacHarrisHolt]

ERRATA: 3:10 - When using hx-target="this", descdendant elements will target the element with hx-target="this" instead of themselves. It's only the default behaviour if no hx-target is set. Thanks to @foxoninetails_ for this!

[@Towhidn]

A rare no-fluf guide with short and clear style. I wish more content creators emulated this. 👍

[@IsaacHarrisHolt]

Glad you found it useful!

[@hola_chelo]

This is a 10/10 video. For devs who are considering HTMX this is the perfect guide, it showcases the features and it does a great job of giving us an idea of what can be done with HTMX so we can ultimately make a decision, my decision is that I'll use HTMX for my next (and first) website. Wish me luck, I'll 100% need it.

[@IsaacHarrisHolt]

Thanks! I'm glad it was helpful! And good luck 😉

[@Rtzoor]

great summary for my impatient self, now ill watch more shorts instead of actually building something

[@IsaacHarrisHolt]

You embody the spirit of a true dev

[@dwiatmika9563]

lmao

[@bobsalita3417]

Balanced, well-scripted, respectful of devs time. Congrats.

[@IsaacHarrisHolt]

Thanks :)

[@stewartdahamman]

Also beautifully blended and delicate.

[@eric-seastrand]

This is what I’ve been looking for. Perfect guide.

[@IsaacHarrisHolt]

Glad you found it helpful!

[@foxoninetails_]

Small note for accuracy: hx-target="this" is not actually the default behavior, as descendants will now target that element instead of themselves unless they define their own hx-target. The actual default behavior when no hx-target is defined at all is for the triggering element to target itself, rather than the parent that hx-target is inherited from.

[@IsaacHarrisHolt]

Thanks for calling me out! I've added a pinned errata comment :)

[@tomthetitan101]

Love the format of this video dude, like having the docs read to me like a bedtime story

[@IsaacHarrisHolt]

I'm glad you enjoyed it! And if you do ever want me to narrate a bedtime story...

[@tomthetitan101]

@@IsaacHarrisHolt🤣

[@TriNguyenKV]

wow, i was looking for an htmx tutorial. Glad i saw this one. Save lot of time 🎉

[@IsaacHarrisHolt]

I'm glad you found it useful!

[@roelvaneyken211]

I use it with custom WordPress themes (so with PHP). Works pretty well to turn them into semi SPA's this way. (hx-boost is really usefull for this)

[@IsaacHarrisHolt]

Oh interesting! That's very cool

[@dameanvil]

00:00 🚀 HTMX Introduction: HTMX is an HTML-centric extension for web pages, aiming to enhance them with Ajax, websockets, and more, favoring HTML as the application state engine. 00:43 🛠 HTMX Usage: Adding HX attributes to DOM elements (e.g., HX get, put, post, patch, delete) allows issuing HTTP requests on element events, updating inner HTML with the server response. 01:09 🖱 Event Triggering: Events like change, submit, click, etc., are naturally triggered, or custom triggers like load, reveal, intersect can be set using HX trigger attributes for specific behaviors. 02:04 ⏲ Event Control: HX trigger options (e.g., delay, throttle), modifiers (e.g., closest, next, previous), and filtering (e.g., with JavaScript expressions) allow precise event control. 03:14 🔄 Manipulating Response: HTMX provides various options (HX swap) to control how server responses replace or merge with target DOM elements, enabling fine-grained content handling. 04:38 🔄 Syncing Elements: HX sync allows coordinating events between elements, enabling control over race conditions or overloaded server requests by defining syncing strategies. 05:21 🔄 Advanced Swapping: Techniques like out-of-band swaps, preserving elements during replacement (HX select, preserve), or scrolling control after swaps enhance user experience and functionality. 06:03 📤 Sending Data: Methods for sending form data, including additional parameters (HX include, HX params), file uploads (HX encoding), or confirming events before submission (HX confirm). 07:13 🌐 Extended Support: HTMX supports websockets, server-sent events, history API, CSS transitions, and offers headers for behavioral changes, making it versatile for various browser features. 07:40 🧰 Backend Agnostic: While HTMX is backend-agnostic, choosing a suitable backend with HTTP API frameworks and templating languages (e.g., Express, Django, FastAPI) is crucial for efficient HTMX applications. 08:07 🛠 Backend Choices: Selecting backend frameworks and languages compatible with HTMX, focusing on reusable components and maintainability, ensures effective development of HTMX applications.

[@IsaacHarrisHolt]

Appreciated! I have already created chapters though 😉

[@InOtherNews1]

I've seen this on other youtube videos. It's almost assuredly chat gpt

[@IsaacHarrisHolt]

I had a feeling...

[@antonsinitsyn6420]

Ohh, thanks. Finally someone explained what the thing is it

[@IsaacHarrisHolt]

You're welcome! I'm glad you found it helpful!

[@shofada]

This is so good I think you should make it into a full-fledged tutorial. None I have seen so far go into this amount of detail. Well done!

[@IsaacHarrisHolt]

The reason most tutorials don't go into everything is because finding a coherent demo that showcases every feature would be difficult, and explaining it would take ages 😅

[@RishabhDeepSingh]

Thats a whole lot to digest soo quickly.

[@IsaacHarrisHolt]

I hope you found it useful!

[@aditya95sriram]

I was looking for a quick breezer to judge if it's worth spending some time to try out HTMX and this video served exactly that purpose! Thanks! (P.S. ignore the "Haters" (pronounced with whichever 'H' you're comfortable with :))

[@IsaacHarrisHolt]

Haha thanks! I'm glad you found it helpful

[@ukrustacean]

Will try it with Leptos

[@IsaacHarrisHolt]

Let me know how you get on!

[@cgalo]

Is 3:45 supposed to say hx-swap?

[@IsaacHarrisHolt]

I believe so, thank you!

[@RayZde]

This is modern day jQuery.

[@IsaacHarrisHolt]

Pretty much! But with extra memes

[@sregexer]

Came to say exactly this. Feels like if angular and jquery had a weird baby

[@decoyslois]

I dont remember ever sending HTML down the wire with jQuery or Angular?

[@owenwexler7214]

Reminds me more of Handlebars on steroids honestly.

[@uflidd]

​@@decoysloiswith jquery ive done that a bunch of times 😂

[@bhavyakukkar]

is this video style inspired by No Boilerplate's "Rust for the impatient"?

[@IsaacHarrisHolt]

Somewhat, yes! And Fireship's "X in 100 seconds". It's one of the reasons I haven't done a Rust video 😅

[@codexed-i]

Deleting Emacs?

[@IsaacHarrisHolt]

Yes, it's my favourite pastime. Unfortunately it does mean I need to install it first...

[@takacszsolt4940]

nice tuts, but can I have a question? how can I solve the "Not covered" part of this tech, "form validation" for example...

[@IsaacHarrisHolt]

The docs! HTMX.org is a good place to start. Links are in the video description

[@PerryCodes]

What is HaychTMX?

[@IsaacHarrisHolt]

As opposed to...?

[@michaelbuerge]

​@@IsaacHarrisHolt It's about the pronunciation of the name of the letter "h". You use "haitch" instead of the common "aitch". That threw me slightly off as well. However, checking out en.wikipedia.org/wiki/H revealed: "... the name for the letter is pronounced as /eɪtʃ/ and spelled "aitch"[1] or occasionally "eitch". The pronunciation /heɪtʃ/ and the associated spelling "haitch" is often considered to be h-adding and is considered non-standard in England.[2] It is, however, a feature of Hiberno-English (from Latin Hibernia: "Ireland") and occurs sporadically in various other dialects." Now I know. You Irish by any chance? Just spent way to much time looking into this 🙂 Good video btw.

[@IsaacHarrisHolt]

I'm not Irish! I'm Welsh 😅 I don't have a regional accent at all, so maybe that's it

[@EnglishLaw]

It's called English

[@Manja500]

Wait, why would you use Leptos, which is essentially a Rust equivalent of React or SolidJS? The whole point of HTMX is to not have to learn a frontend framework. This makes no sense. You would use Actix or Axum plus a a templating library like askama (Jinja clone in Rust).

[@IsaacHarrisHolt]

I haven't done much HTMX + Rust, and honestly Leptos is the recommendation I've heard thrown around. I think the biggest benefit to using Leptos here is the componentisation, which makes it easy to compose UIs without messy template mangling

[@Manja500]

@@IsaacHarrisHolt Leptos is super ugly for simply making components and is it's least attractive feature. If you really want components, you can export components in svelte, then use them directly in your templates. You just have to include a single JS file and you get easy, native web components that can be called in directly in HTML. I would do at least 5 minutes of research on the topics you cover. I love Leptos, but if you saw how the components are implemented you wouldn't be suggesting this as a good alternative to templates. Do better.

[@IsaacHarrisHolt]

Fair enough! I just wanted to have a Rust suggestion in there for people to get started with. It's a suggestion I've heard from a few places around KZbin and X, so I decided to include it. I'm sorry if it's not the solution you personally like the best. As for doing better, I suggest you try making some KZbin videos yourself before making comments like this. There are so many better ways to phrase what you've said without coming across like a spoilt child. Do better.

[@Manja500]

​​@@IsaacHarrisHoltYou suggested Leptos as a templating library when in reality, it's a front end framework. The whole point of htmx is you don't need a front end framework. You're an educational channel, doing zero research on a topic and suggesting something simply because others have talked about it in passing isn't okay. And when someone calls you out for spreading misinformation, you call them a child. If you don't want to put the effort into your videos, then don't make them at all. And when someone gives you completely valid criticism, don't insult them. You made a video on HTMX which replaces front end frameworks, then suggested a front end framework. That's a pretty big screw up that could have been avoided if you actually put effort into your videos instead of insulting your own audience. PS: The templating library i suggested is a clone of Jinja specifically for rust. The funny thing is, you suggest Jinja as a templating library for python. So why is it okay to use a templating library in python, but the exact same templating library isn't good enough for rust, and instead we have to use a front end framework? To me, it sounds like the whole componentization thing is an excuse to cover up your lack of research, because you're contradicting yourself directly in the video by suggesting Jinja for one language but not the other

[@IsaacHarrisHolt]

Okay, great points. I understand that there are other alternatives available for Rust, that's great. What isn't great is the way you decided to inform me of this fact. There were plenty of other ways you could have phrased what you did without slandering the effort I put into making this video. I would argue that the point you're making is arguably very minor. It's at the end of a video about HTMX, and is merely an implementation suggestion. If the video was "The best backend for HTMX", then yes, it would be a bigger deal. But, it's not. I'm very open to constructive criticism and admitting when I'm wrong (see pinned comments on various videos), but I don't take it when people come at me with a combative attitude. If you have nothing else better to do with your day than diminishing the hours of research that people put into educational content like this, then I guess I feel sorry for you. Look, I'm sorry for how I initially reacted, but when someone puts a good deal of effort into making content like this, and people in the comments say throwaway things like "Do better", it's really not a pleasant experience. Next time, you could say something like: "While you could use Leptos for this, I'd say that X is a better option". Much better than "Omg why would you use Leptos you've clearly not researched this at all", which is how you're coming across, somewhat.

[@Monkers18]

We need to get rid of too much reliance in JavaScript. HTMX is leading that way.

[@IsaacHarrisHolt]

Agreed! It's great for a lot of the simpler apps people want to write

[@TeamCykelhold]

Lol, htmx is just a javascript library. So you are as reliant on javascript, but in a different way because it's packed in to a library.

[@Monkers18]

@@TeamCykelhold yes, similar to jQuery it allows you to write JS codes in a clean and shorter way. Get rid of JS means, eliminate it's weird ass syntax.

[@IsaacHarrisHolt]

True, but it means you don't have to WRITE any JavaScript. Also, most JS (or WASM) frontends will get JSON back from a server and then have to turn that into markup for the browser to display. This way, the server returns the markup directly and all the JS is doing is inserting it. Doesn't have to parse any JSON, etc. Also, if you need to make an addition to what's being rendered, there's only one place you need to make that change (the server) rather than two (the client and the server). I'd recommend the HATEOAS page of the HTMX docs as a great read

[@TeamCykelhold]

@@IsaacHarrisHolt Yep that's right. You will write something that looks like HTML and get functionality that normally would require either JS or a library to do something. htmx seems like a great choice for some projects with specific requirements that fit into whatever functionality exists in htmx but you are also limited in other ways unless you want to make a hybrid and then you are back to either JS or a mix of libraries. As with all project it's all about figuring out the scope and choose the correct technology/library/structure.

[@beest_]

Can I start a w sockets server on page load, and then just talk to new socket instead of the backend?

[@IsaacHarrisHolt]

There's a WebSocket extension for HTMX that might do what you want, but where are you hoping to open a connection to if not your backend?

[@beest_]

@@IsaacHarrisHolt I was only thinking to connect to a server that is started on the client. I'm only thinking of an example, so the client services/server then be like a router/filter..... Maybe doesn't make sense but I still thought of it 😄

[@IsaacHarrisHolt]

@@beest_ I'm not 100% sure what you're going for, but you should give it a try!

[@binodsharma112]

thanks .. you got a subscriber.

[@IsaacHarrisHolt]

Thank you!

[@GirishVenkatachalam]

Wonderful details

[@IsaacHarrisHolt]

Thanks! I hope you found it useful

[@manuelquiroga8022]

amazing explanation

[@IsaacHarrisHolt]

Thank you!

[@Dstonephoto]

Im sold.

[@IsaacHarrisHolt]

Awesome!

[@taimurqureshi9540]

Thank you for this. However, I keep getting distracted by how you pronounce the letter "H" 😬

[@IsaacHarrisHolt]

It's called being correct *cough*, sorry, British 😁

[@colinmaharaj]

I this was a new browser code/interpreter, so to me its just html with a JS library

[@IsaacHarrisHolt]

It's just a JS library, but it's what it allows you to do that's really special

[@sergehulne]

excellent!

[@IsaacHarrisHolt]

I'm glad you found it useful!

[@TracyNorrell]

PHP for the backend? Hold my beer!

[@IsaacHarrisHolt]

Bit of a PHP fan? 👀

[@Cypekeh]

good video

[@IsaacHarrisHolt]

Thank you!

[@simonegiuliani4913]

Hero!

[@IsaacHarrisHolt]

Glad you found it useful!

[@science_trip]

you didn't mention PHP. However I ve tried Vanilla PHP and Laravel (with blade template engine) and I ve build SPA with htmx in frontend and it works perfectly fine! ps sto hating PHP or any other language. you don't like a language just don't use it but you have to mention this as backend you like it or not it empowers the 74%+ of entire web

[@IsaacHarrisHolt]

I didn't mention PHP because I'm unfamiliar with it, not because I hate it. This channel is predominantly Python focused, with sprinklings of Go, Rust and TypeScript, which is why those got a mention :)

[@trlpht]

PHP indeed holds a significant place in web development, and as you rightly pointed out, it consistently ranks among the most popular programming languages. Its regular improvements, especially with advancements in frameworks like Laravel, contribute to its enduring relevance. While there has been a historical stigma, the language has been making strides to address concerns and enhance its features. Many developers are recognizing the positive changes, and PHP is regaining a more favorable reputation. Each language has its strengths, and the key is to choose the right tool for the job. Promoting a broad and equitable discussion about technologies is essential for a thriving developer community.

[@RealDevastatia]

I'm not religious about programming languages either. I use PHP because that's what I've been using for over 20 years. I know its idioms and quirks. My custom HTML parser is written in PHP. It may or may not do some of the same things HTMX does. I had difficulty listening to the video because of the lack of verbal whitespace. Why do KZbinrs talk so darned fast and edit out all of the pauses these days? There's no time limit on the length of a video.

[@IsaacHarrisHolt]

I create videos this way because they're the type of videos I like to watch. I understand they may not be for everybody, but lots of people do appreciate not having to watch at 2x speed :)

[@justingiovanetti]

How is this html native if the very first thing you need to do is include JavaScript?

[@IsaacHarrisHolt]

You don't have to WRITE any JS yourself, if you don't want to. Making this work entirely in HTML would be impossible given the restrictions of the language, so there has to be some JS. It's also much closer to pure HTML than something like React.

[@justingiovanetti]

@@IsaacHarrisHolt It’s subject to defer, async, and everything else regular JavaScript has to wrangle with. It sounds like it’s another form of binding, which sounds like precisely what Angular, React, Vue, etc do. Don’t get me wrong, progress is progress. In hindsight, we’ll have some perspective on the idea. Right now, not so sure. Native is not needing to import a js library for a select dropdown. Anything short of that is mixed concoction. Concocting native elements to perform calls that they don’t natively do. Cool, I guess.

[@JasonCunliffe]

very elpful

[@IsaacHarrisHolt]

Glad you found it useful!

[@TesterAnimal1]

So it’s for super simple web *pages*.

[@IsaacHarrisHolt]

I suppose, maybe, but with the right backend tools, you can build really complex web apps with HTMX :)

[@yarmgl1613]

you can now say: I program with HTML!

[@IsaacHarrisHolt]

True!

[@AhmadHddad01]

First comment, thx mate

[@IsaacHarrisHolt]

Congrats, and you're welcome!

[@vivsh.1999]

apart from the accent it was an awesome video ❤️

[@IsaacHarrisHolt]

Hey, what's wrong with my accent 👀

[@vivsh.1999]

@@IsaacHarrisHolt hey man sorry if i offended you, nothing wrong but your H sounds more like 'hache' rather than 'ach'.

[@IsaacHarrisHolt]

That's just how us Brits speak 😉

[@TesterAnimal1]

There was no accent. You have the accent.

[@jolynele2587]

@@vivsh.1999 you are the one with an accent. he is speaking normally

[@naranyala_dev]

golang + htmx

[@IsaacHarrisHolt]

Absolutely!

[@matthewb192]

Good. I'm sick of numpties over complicating the simplest tasks. The ecosystem is such a mess nowadays.

[@IsaacHarrisHolt]

There's certainly a lot going on! It seems that a lot of the major frameworks are converging on the same ideas though, which is nice

[@franklin.gamaral]

Like only by title hahaha

[@IsaacHarrisHolt]

Haha thank you!

[@rubisyed8574]

too fast

[@IsaacHarrisHolt]

0.5x speed 😉

[@fedpo6022]

Delete emacs

[@IsaacHarrisHolt]

Yes

[@perkin524]

Dislike the format of this video - too fast and not enough explanation

[@IsaacHarrisHolt]

Fair enough! I appreciate that the Impatient Devs videos aren't everyone's cup of tea :)

[@tinkmaster1054]

You're too patient for this video

[@codeaperture]

​😂@@tinkmaster1054

[@picklenickil]

I watch it at 2x.. idc

[@avi7278]

Stop pronouncing it "haytch" it's ridiculous.

[@IsaacHarrisHolt]

Almost as ridiculous as going out of your way to insult someone you don't know on the internet over something they can't control 🙃

[@takacszsolt4940]

i heard that "hey Jacks"... luckily my name is not Jack 😀

[@betterinbooks]

ew.

[@IsaacHarrisHolt]

What's ew 👀

[@betterinbooks]

web dev @@IsaacHarrisHolt

[@vectoralphaSec]

Web Development is 90% of all development.@@betterinbooks

[@Jabberwockybird]

Bloated JS frameworks like Angular are ew.

[@Ver2ion]

hxswap is too good

[@IsaacHarrisHolt]

I know, right? It's useful as heck

[@Ver2ion]

@@IsaacHarrisHolt yes it is very handy to have an SPA from pasting a cdn link lol