HTMX for Impatient Devs

Поделиться
HTML-код
  • Опубликовано: 2 янв 2025

Комментарии • 152

  • @IsaacHarrisHolt
    @IsaacHarrisHolt  Год назад +26

    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!

  • @Rtzoor
    @Rtzoor Год назад +59

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

  • @foxoninetails_
    @foxoninetails_ Год назад +17

    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
      @IsaacHarrisHolt  Год назад +6

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

  • @hola_chelo
    @hola_chelo 5 месяцев назад +12

    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
      @IsaacHarrisHolt  5 месяцев назад +1

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

  • @dameanvil
    @dameanvil Год назад +7

    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
      @IsaacHarrisHolt  Год назад +2

      Appreciated! I have already created chapters though 😉

    • @InOtherNews1
      @InOtherNews1 Год назад +3

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад +3

      I had a feeling...

  • @bobsalita3417
    @bobsalita3417 4 месяца назад +2

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

  • @tomthetitan101
    @tomthetitan101 Год назад +17

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад +4

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

    • @tomthetitan101
      @tomthetitan101 Год назад

      @@IsaacHarrisHolt🤣

  • @eric-seastrand
    @eric-seastrand Год назад +8

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

  • @roelvaneyken211
    @roelvaneyken211 Год назад +5

    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)

  • @cgalo
    @cgalo 3 месяца назад +2

    Is 3:45 supposed to say hx-swap?

  • @TriNguyenKV
    @TriNguyenKV Год назад +3

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

  • @antonsinitsyn6420
    @antonsinitsyn6420 Год назад +3

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад +1

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

  • @shofada
    @shofada 11 месяцев назад

    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
      @IsaacHarrisHolt  11 месяцев назад

      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 😅

  • @PerryCodes
    @PerryCodes Год назад +5

    What is HaychTMX?

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад

      As opposed to...?

    • @michaelbuerge
      @michaelbuerge Год назад +1

      ​@@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
      @IsaacHarrisHolt  Год назад

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

    • @EnglishLaw
      @EnglishLaw 9 месяцев назад +1

      It's called English

  • @bhavyakukkar
    @bhavyakukkar 11 месяцев назад +1

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  11 месяцев назад +1

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

  • @Manja500
    @Manja500 Год назад +3

    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
      @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
      @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
      @IsaacHarrisHolt  Год назад +2

      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 RUclips 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 RUclips 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
      @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
      @IsaacHarrisHolt  Год назад +1

      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.

  • @aditya95sriram
    @aditya95sriram 5 месяцев назад

    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
      @IsaacHarrisHolt  5 месяцев назад

      Haha thanks! I'm glad you found it helpful

  • @takacszsolt4940
    @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
      @IsaacHarrisHolt  Год назад

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

  • @RishabhDeepSingh
    @RishabhDeepSingh Год назад +2

    Thats a whole lot to digest soo quickly.

  • @codexed-i
    @codexed-i 11 месяцев назад +3

    Deleting Emacs?

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  11 месяцев назад

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

  • @beest_
    @beest_ 8 месяцев назад

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  8 месяцев назад

      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_
      @beest_ 8 месяцев назад +1

      @@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
      @IsaacHarrisHolt  8 месяцев назад

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

  • @Monkers18
    @Monkers18 Год назад +11

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад +1

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

    • @TeamCykelhold
      @TeamCykelhold Год назад +3

      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
      @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
      @IsaacHarrisHolt  Год назад +3

      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
      @TeamCykelhold Год назад +2

      @@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.

  • @ukrustacean
    @ukrustacean Год назад +2

    Will try it with Leptos

  • @RayZde
    @RayZde Год назад +48

    This is modern day jQuery.

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад +9

      Pretty much! But with extra memes

    • @sregexer
      @sregexer Год назад +6

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

    • @decoyslois
      @decoyslois 11 месяцев назад +6

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

    • @owenwexler7214
      @owenwexler7214 11 месяцев назад +1

      Reminds me more of Handlebars on steroids honestly.

    • @uflidd
      @uflidd 11 месяцев назад

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

  • @taimurqureshi9540
    @taimurqureshi9540 5 месяцев назад

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  5 месяцев назад

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

  • @TracyNorrell
    @TracyNorrell 11 месяцев назад +1

    PHP for the backend? Hold my beer!

  • @binodsharma112
    @binodsharma112 11 месяцев назад +1

    thanks .. you got a subscriber.

  • @GirishVenkatachalam
    @GirishVenkatachalam 9 месяцев назад +1

    Wonderful details

  • @colinmaharaj
    @colinmaharaj 11 месяцев назад

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  11 месяцев назад

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

  • @science_trip
    @science_trip Год назад +2

    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
      @IsaacHarrisHolt  Год назад +4

      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
      @trlpht Год назад +2

      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
      @RealDevastatia Год назад +1

      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 RUclipsrs 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
      @IsaacHarrisHolt  Год назад +1

      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 :)

  • @manuelquiroga8022
    @manuelquiroga8022 Год назад +1

    amazing explanation

  • @justingiovanetti
    @justingiovanetti Год назад

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад +4

      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
      @justingiovanetti Год назад +1

      @@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.

  • @yarmgl1613
    @yarmgl1613 7 месяцев назад +1

    you can now say: I program with HTML!

  • @Dstonephoto
    @Dstonephoto 9 месяцев назад +1

    Im sold.

  • @TesterAnimal1
    @TesterAnimal1 Год назад

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад

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

  • @simonegiuliani4913
    @simonegiuliani4913 Год назад +1

    Hero!

  • @sergehulne
    @sergehulne 11 месяцев назад +1

    excellent!

  • @Cypekeh
    @Cypekeh Год назад +2

    good video

  • @AhmadHddad01
    @AhmadHddad01 Год назад +1

    First comment, thx mate

  • @JasonCunliffe
    @JasonCunliffe 11 дней назад

    very elpful

  • @naranyala_dev
    @naranyala_dev Год назад +1

    golang + htmx

  • @vivsh.1999
    @vivsh.1999 Год назад +3

    apart from the accent it was an awesome video ❤️

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад

      Hey, what's wrong with my accent 👀

    • @vivsh.1999
      @vivsh.1999 Год назад +2

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад +5

      That's just how us Brits speak 😉

    • @TesterAnimal1
      @TesterAnimal1 Год назад

      There was no accent.
      You have the accent.

    • @jolynele2587
      @jolynele2587 Год назад

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

  • @matthewb192
    @matthewb192 3 дня назад

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  3 дня назад

      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

  • @rubisyed8574
    @rubisyed8574 5 месяцев назад

    too fast

  • @fedpo6022
    @fedpo6022 18 дней назад

    Delete emacs

  • @perkin524
    @perkin524 9 месяцев назад +2

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

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  9 месяцев назад +1

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

    • @tinkmaster1054
      @tinkmaster1054 9 месяцев назад +1

      You're too patient for this video

    • @codeaperture
      @codeaperture 6 месяцев назад

      ​😂@@tinkmaster1054

    • @picklenickil
      @picklenickil 6 месяцев назад

      I watch it at 2x.. idc

  • @avi7278
    @avi7278 Год назад +2

    Stop pronouncing it "haytch" it's ridiculous.

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  Год назад +4

      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
      @takacszsolt4940 Год назад +1

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

  • @betterinbooks
    @betterinbooks Год назад

    ew.

  • @Ver2ion
    @Ver2ion 6 месяцев назад

    hxswap is too good

    • @IsaacHarrisHolt
      @IsaacHarrisHolt  6 месяцев назад

      I know, right? It's useful as heck

    • @Ver2ion
      @Ver2ion 6 месяцев назад +1

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