HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript
Vložit
- čas přidán 20. 05. 2024
- Learn HTMX by creating a couple of small projects with a Node.js and Express backend, including a contacts search, temperature converter, mock weather app with polling and form validation component. We will learn about the common HTMX attributes like hx-get, hx-post, hx-swap, etc.
Final Code:
github.com/bradtraversy/htmx-...
Alpine Crash Course:
• Alpine.js Crash Course
Check out my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - / traversymedia
Instagram - / traversymedia
Facebook - / traversymedia
Linkedin - / bradtraversy
Timestamps:
0:00 - Intro
3:42 - Node.js/Express Server Setup
9:23 - Simple request with hx-get & hx-trigger
11:12 - hx-swap
11:58 - Route to get a list of users
16:04 - hx-target
17:00 - hx-confirm
17:30 - Get users from jsonplaceholder
18:40 - hx-indicator
21:06 - hx-vals
23:27 - Temperature converter with hx-post
29:44 - Polling
33:23 - Mock weather app with polling
36:44 - Contacts search widget
39:50 - Backend route for search
47:08 - Inline form validation
50:12 - Backend route for validation
56:01 - Wrap up - Věda a technologie
If one day a lot of people manage to create an app that revolutionizes the world, they should thank you for making such clear tutorial. Thank you so much! HTMX is cool!
You are the only person who has mad an actually valuable HTMX tutorial, to my knowledge. I needed to learn this for school and the docs were not super helpful for getting started. I'm 12 minutes in and I now understand how to get HTMX running.
I was just thinking the same thing! This is because he's a really good "teacher".
Do you have an HTMX class in your high school?
Always there for the community! Thanks Brad!
heck of a "how a Crash Course should be", nice variety of mind-opening mini projects as well. Kudos
A simple but lucid explanation of HTMX. Anyone can use this as a stepping stone in further advancement in web development. Thank you Brad for sharing. 😃
It's great to finally get a good HTMX tutorial. Happy New Year Brad and thanks for the great tutorials.
I have been exploring HTMX for the past few days and trying to build a todo app using the BETH Stack, which includes Bun, Elysia, Turso, and HTMX. This video has come in handy! Thank you!
First of Happy New Year to Brad. Your Crash Courses provide a wealth of knowledge and they always lay the foundation for exploring in-depth topics. Looking forward to more content this and hope that this year will be extremely great year for you.
Excellent video! Thanks for sharing it!
When picking a server-side stack, I think it’s a good idea to choose one that has good support for generating HTML (not just string concatenation) and has tooling support that gives syntax highlighting and understands what is valid in HTML.
New Years gift from Brad is here!
Thank you a lot! 😊
Thank you Brad. Had been waiting for this one.
Thank you Brad, the best and award-winning programming instructor in the world. Keep up the good work. May the good Lord bless you and water your garden as you water ours. Happy new prosperous year.
Amazing! Been waiting for a course on this - Thank you Brad! Happy New Year.
htmx, finally ;) You've just scratched the surface... Hope you will continue on this path as, IMO, you are probably the only YT coding instructor that is clear and devoid of fast-edit/fast-speak. Thanks!
My pet peeve is demos where the person keeps having to retype things because they are trying to talk and type at the same time. "Every once in a while... fine... but that's the third line in a row you've have at least three stabs at... and you have code completion switched on".
I was searching for an HTMX guide to start my next project, this came up right on time. This was a great tutorial, thank you!
Happy new year to you Brad. Thanks again for enriching our learning. Wishing you good health in 2024.
Thank you 😊Same to you!
I'm really happy you took an interest in HTMX. I've been using it for personal projects and am very happy with it.
I'm in love with this. It makes reasoning about what is going on, so much simpler than react. God, hooks and the complexities of react these days just makes my head hurt. This is so elegant, minimal and wonderful. Here's to hoping that HTMX becomes a web standard and breaks us away from these overly complex "solutions".
The Excellent! Clear Notch Voice, Pace and Modulation which makes easy understanding
Wow, what a treat! I've been looking for a quick and simple tutorial for HTMX. Thank you!
that was just amazing… thank you, I needed an introduction to htmx, and this was better than i could have hoped for
Hey Brad, I wish you all the best for 2024!!!
Regarding the vid, this is the best one I have seen about HTMx thanks 👍🏿
Impressive as always Brad. Just want to notify the fellow developers if you are facing an issue while running the project as fetch is not defined. Please install node-fetch package and import it in server.js.
import fetch from "node-fetch";
Thanks
Love seeing more HTMX knowledge content popping up.
Brad we really need a full great next js course I really love your courses
Working on it next (pun intended)
I just finished watching the tutorial. Thanks a lot for these videos sir, I really appreciate you and your efforts
Thank you for this amazing tutorial.
I think you could explore more the potential of HTMX and Django in another tutorial, showing how to manipulate fetched data with jinja or post processing after a POST request.
A CRUD application with python, django and htmx will be welcome.
Thanks for posting this!
CZcams Intro Tutorials are a requirement nowadays for people who cant even understand the documentation.
Videos like this actually explain what you should/and should not do and I appreciate that. ❤
If more tutorials are done like this first, developers will understand the documentation better. Then they will he able to use these "steel lego bricks" to build "tools" to build components that (feel) very easy to reuse.
You are the first best teacher on these things and I appreciate that. ❤ Thank you. ❤️
Yes 🥂. That's the course I've been waiting for. I literally used the documentation to learn it 6 months ago - something I never do 😂.
Anyways, Happy New Year Brad 🎉
> uses htmx to avoid writing js
> node js server backend
Awesome, I’ll have to actually watch this course soon, I’m still learning some JS. From what I’ve seen online, lot of the content surrounding Htmx makes it seem like it’s not a serious thing.
Whenever I want to learn something, I always check your channel first man.
Following your github i always know new video is coming when you have a new repo, love it
You never disappoints always coming through for the community when needed the most, now I can finally learn HTMX. Videos I have been seeing are not worth it
Thank you and Happy New Year to everyone 💖🥳
Thanks so much. Yeah surprisingly, not a lot out there as far as content on HTMX. Happy New Year!
Also here to learn this new paradigm. Happy new year 🎉
@@TraversyMedia You should do a codux tutorial
you know you can read the docs ?
Thax Brad.This is really cool! Happy new year!
Happy New Year!
Hi Brad and hello community. Thank you for this intro to HTMX. I like the simplicity and the low footprint of HTMX. I want to use it with Rust and now need to figure out how. Overall it looks very nice. May you all have a great 2024!
I will be doing the same, there is something about performance that's very fascinating
I was waiting for an HTMX video from you. Thanks for posting!
I love you! ♥ Learning from your courses since 2019
Excellent overview - easy and clear to follow along!
Great video. It's what I needed to get on with HTMX. Thanks.
Great tutorial, gets straight to the point.
HTMX... by Traversy MediaX
>>
Happy New Year BradX !
Thank you.
Thanks for another great demo !
Imagine using Htmx and Tailwind in your project... No comment , HTMX powerfull!💀
Great content! Thank you for this tutorial. Happy New Year. Do you have tutorials for framework agnostic components ? Like say LitElement or Adobe Spectrum ?
That's a great video. I loved it. I kinda don't like the fact you still have to kinda pre-render or generate front-end HTML(X) code from the back-end.
But I can also see how a multi tiered app can have a pseudo back-end just as a bridge between front-end and proper backend responses.
I can't wait to try it
This crash course was extremely helpful for a school project I’m working on.
Thanks Brad, been curious about HTMX.
Happy new year 🎉🎉
And thanks a lot because of you i learn dev the way it's supposed to be ❤❤❤❤❤
This is awesome, thank you for sharing! =)
Thanks Brad, this is really a great introduction of HTMX.
Everywhere I hear about "no-js," "0% js," etc.
Is htmx suitable for enterprise-level web applications?
Can someone provide an example where htmx is used with a normal datagrid-like functionality?
I'm not referring to a basic table but rather features such as column resizing, drag-and-drop movement, etc. Something like AgGrid.
Excellent video and a very good primer for HTMX.
Very important note: anyone using HTMX to make a user-facing production project that takes user input should use a templating system that escapes user input to send the HTML as part of whatever backend stack they choose. res.send()ing raw HTML in strings is a big XSS vulnerability, as someone could easily inject a tag that does bad things into unescaped user input.
User input needs to be sanitised before it gets stored, in your backend controller. All input checks need to be performed on the server, not in the browser - because all users and malicious agents have full control of their browser (not just a text input), including js scripts. Escaping text input twice is also a common problem in inexperienced projects.
A book fitted into a 58 min video. HTMX is really amazing; hope there are no caveates. The code you give is so multi-utility. Thank you Brad! (Would be so happy to see more on Express.js from you.)🌻
Book(Hypermedia systems) is more than htmx tutorial. Its about what hypermedia is? why we should use it? What REST really means...
Hey Brad, great tutorials as per usual, quick question, if the form is updating some other part of the page like adding an item to a list, how do you clear out the form with htmx after updating the list - thanks
Brilliant as always
Happy New Year sensei 🎊
I was about to email you and recommend this crash course.
Great Brad ! A quick question - Since we don't use JS at client side , there is no way to do some client validations ? Lets say , we want to validate email format at client side before even hitting the server ?
Great HTMX Crash Course . **thumbs up**
New Year started with this big ka-baooom from Brad
Thanks so much for making the first day of the year so special
Happy New Year! 🎉
Thanks for doing this... just what people need to progress beyond the htmx example page and/or learn python for backend... question: have you considered Astro partials as "backend" for HTMX???
Mr Traversy! can you read my mind? I needed this htmx intro from YOU!!! Over the years I learned a lot from you. By the way: your voice sounds like having a cold?!
YASSS I'm loving HTMX so far. I'm trying to move away from stuff like React/Vue as much as possible.
Thanks Brad!
Very nice intro; I’ve seen others use it in videos but none yet who explained it as well or as thoroughly.
PS The regex for email addresses is outdated now ICANN has allowed vanity TLDs; there are now plenty of TLDs >4 characters.
Thank for sharing 🎉🎉🎉
Really great, thanks dude!
I saw people on Twitter regularly mocking htmx for reasons I didn't understand. I think some were saying it opens up security issues that haven't been around since the earlier days of javascript, but then I saw other people saying "nu-uh, you don't know what you're talking about" and explaining why their claims were wrong. But, after seeing that whole conversation a couple times, I gave up trying to figure out who was right because I'm trying to learn other stuff right now.
The man is backkkkk 😊
Thank you for the tutorial ! It was very interesting.
We should think of HTMX as a replacement of back end templates 🤔
Happy new year Brad
Happy New Year Brad
Thanks !
Is htmx a good addition for the app developped in the course "PHP From Scratch 2024" ?
thank you very much for a very useful course. It would a great addition to have another course on both HTMX and Alpine.js from your experience how to get the best of these two libraries.
thanks for the great tutorial
imho, implementation of the email validation though doesn't look like a good practice - having that complex piece of markup both in the frontend and backend is an issue in case that markup needs to be updated, it would be better to use a dedicated separate element to hold the validation message and only fetch that from the backend, keeping markup and styling only in the frontend
This is so magical wtffff
Big thank you👏👏
Thanks for the introduction. I am not a web developer and have stayed away because of the Giant Complex frameworks. Maybe certain sites like FB need those beast frame works but probably 80% of web sites do not. IMHO. So a easy to learn , expressive functionality and ease to maintain like this HTMX appears is a good thing., It would be neat to see a CZcams tutorial building a site like this CZcams web page I am editing this comment in. Any Takers ?
This is cool. Anything that lets me not write any JS is a plus. Man, i hate JavaScript.
Thank you for this
Thanks Brad
this Course was easy to follow, especially for those who already has ExpressJS background. HTMX is a great solution for applications that primarily focus on AJAX interactions and that doesn't require complex UI. it looks like it still worth to learn alongside with it React or any other popular framework to perform complex stuff like using websockets or using an API type other then REST (tRPC for example), am I wrong?
Brad, I would like to know the settings.json that you are using in this demo. I have seen a dozen of suggestions on StackOverflow, but I can not get it the way you have it. I want to be able to place every attribute on its own lin, if there are many, like in an input. But in other cases, where there are only 2 or 3 attributes, they can all go on one line.
All presets do one thing or the other, but not as want it to be. What is the wrapping setting you have in VSCode? (on windows)?
Helpful video
what theme are you using in VS code which makes your html tags green please? (mine are blue tags) I looked though a few videos of yours but this I could not find. Thanks
Happy new year
Btw beware injection attacks if you render html from the server and don’t use protection there (that’s better with the automatic quoting of eg angular)
Really liking what I'm seeing, I vastly prefer this style over what Next does currently (but still a must to learn because of jobs requirements), simplicity is king always
thanks Brad
hello sir thank you for your best tutorial of js 12 hours,i have finished js tutorial 12 hrs shall i proceed to this one?
This reminds me of the goal for originial Angular
thanks, more HTMX videos please.
Being a developer since the Netscape era, discovering htmx has been a delightful journey back to basics for me. This tutorial is particularly outstanding: it's not only easy for beginners to grasp, but it also comprehensively covers the key aspects of htmx in a single video. It's rare to find such an effective blend of simplicity and depth. Thank you for this enlightening tutorial.
Nice, how to seperate files and include it in the index.html? ejs or .html?
Thanks 👍
Isn't offline mode a problem for htmx? I'm sticking with Svelte for the frontend and I can add in HTMX as needed.
Awesome content! Where can I find your courses ONLINE? Kudos!