HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript
ฝัง
- เผยแพร่เมื่อ 11 มิ.ย. 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 - วิทยาศาสตร์และเทคโนโลยี
> uses htmx to avoid writing js
> node js server backend
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?
Hands down, this is the best HTMX tutorial on TH-cam!
heck of a "how a Crash Course should be", nice variety of mind-opening mini projects as well. Kudos
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.
It's great to finally get a good HTMX tutorial. Happy New Year Brad and thanks for the great tutorials.
Always there for the community! Thanks Brad!
Amazing! Been waiting for a course on this - Thank you Brad! Happy New Year.
Happy new year to you Brad. Thanks again for enriching our learning. Wishing you good health in 2024.
Thank you 😊Same to you!
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".
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. 😃
New Years gift from Brad is here!
Thank you a lot! 😊
Thank you Brad. Had been waiting for this one.
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.
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.
Wow, what a treat! I've been looking for a quick and simple tutorial for HTMX. Thank you!
The Excellent! Clear Notch Voice, Pace and Modulation which makes easy understanding
Whenever I want to learn something, I always check your channel first man.
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!
Thax Brad.This is really cool! Happy new year!
Happy New Year!
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".
that was just amazing… thank you, I needed an introduction to htmx, and this was better than i could have hoped for
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 ?
I'm really happy you took an interest in HTMX. I've been using it for personal projects and am very happy with it.
Love seeing more HTMX knowledge content popping up.
Hey Brad, I wish you all the best for 2024!!!
Regarding the vid, this is the best one I have seen about HTMx thanks 👍🏿
I was waiting for an HTMX video from you. Thanks for posting!
Excellent overview - easy and clear to follow along!
Brad we really need a full great next js course I really love your courses
Working on it next (pun intended)
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 love you! ♥ Learning from your courses since 2019
Following your github i always know new video is coming when you have a new repo, love it
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 🎉
This crash course was extremely helpful for a school project I’m working on.
HTMX... by Traversy MediaX
>>
Happy New Year BradX !
Thank you.
Great tutorial, gets straight to the point.
Great video. It's what I needed to get on with HTMX. Thanks.
Honestly, fantastic. Coming from a background where I can work with NPM, this is an excellent tutorial.
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.
Thanks Brad, this is really a great introduction of HTMX.
TH-cam 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. ❤️
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
I just finished watching the tutorial. Thanks a lot for these videos sir, I really appreciate you and your efforts
Thanks Brad, been curious about HTMX.
Thanks for posting this!
Happy new year 🎉🎉
And thanks a lot because of you i learn dev the way it's supposed to be ❤❤❤❤❤
Thanks for another great demo !
The man is backkkkk 😊
Happy New Year Brad
Great content! Thank you for this tutorial. Happy New Year. Do you have tutorials for framework agnostic components ? Like say LitElement or Adobe Spectrum ?
New Year started with this big ka-baooom from Brad
Thanks so much for making the first day of the year so special
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.
This is awesome, thank you for sharing! =)
Happy new year Brad
Really great, thanks dude!
Great HTMX Crash Course . **thumbs up**
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...
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
Happy New Year sensei 🎊
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?!
I was about to email you and recommend this crash course.
Happy New Year! 🎉
Brilliant as always
This is cool. Anything that lets me not write any JS is a plus. Man, i hate JavaScript.
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.
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???
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
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.
YASSS I'm loving HTMX so far. I'm trying to move away from stuff like React/Vue as much as possible.
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.
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.
Thanks Brad!
Thank you for the tutorial ! It was very interesting.
We should think of HTMX as a replacement of back end templates 🤔
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 ?
This is so magical wtffff
thanks, more HTMX videos please.
Imagine using Htmx and Tailwind in your project... No comment , HTMX powerfull!💀
Happy new year
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 TH-cam tutorial building a site like this TH-cam web page I am editing this comment in. Any Takers ?
Thank for sharing 🎉🎉🎉
Thanks !
Is htmx a good addition for the app developped in the course "PHP From Scratch 2024" ?
Helpful video
thanks Brad
This reminds me of the goal for originial Angular
Awesome content! Where can I find your courses ONLINE? Kudos!
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
Big thank you👏👏
Thanks Brad
Thank you for this
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
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)
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.
I wasn't sure if I should learn Vue or HTMX for my next project and I just happened to look at my notifications. HTMX it is.
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)?
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
I had a ton of issues even with the very first steps, try with node versions 10, 13, and 20 and got the same error: "[nodemon] app crashed - waiting for file changes before starting..." this is pretty weird
I have installed XAMPP already, Now if I install Express js Server does it cause any issues?
Isn't offline mode a problem for htmx? I'm sticking with Svelte for the frontend and I can add in HTMX as needed.
First view brother ❤