🎯 Key Takeaways for quick navigation: 00:00 🌟 Astro combines static HTML simplicity with dynamic flexibility. 03:33 🧩 Astro components allow prop customization and reusability. 08:17 🎨 Use slots for content in Astro components. 13:08 🔄 Dynamically add classes with `classlist` in Astro. 15:57 📜 Spread HTML attributes using `...rest` for flexibility. 17:50 🎨 Define variables in front matter for dynamic CSS in Astro. 19:41 🧩 Pass CSS variables with the `Define vars` feature. 20:21 📐 Set default styles with CSS variables for theme-based adaptability. 22:38 📏 Use relative units like `em` for dynamic padding. 23:36 🖱️ Add interactivity to Astro components with JavaScript. 32:12 🚀 Enhance Astro components with TypeScript for auto-completion and type safety. Made with HARPA AI
Many thanks! Is there a way to encapsulate the 'onClick' logic inside the button? Instead of a query-selector and a script tag outside of the button...
It's possible, but I've found it's cleaner to have in-line scripts for these items. I've changed my pattern here for components. I'd definitely use a slot these days. In that case, you could fairly easily have a slot for a script that could run whatever function you needed. Hopefully that makes sense?
Agreed! They did make some small changes to it recently so that it now uses CLSX. That basically just means you can't use sets, I think? But still basically the same and super helpful!
Awesome! Well, that’s the cool thing. Since we spread in the …rest, you can add an aria-label=“whatever” and it’ll get added to the button! So that should handle most all of your accessibility needs with a button!
Love exploring astro with you ! 🙌 I was wondering what's the avantages to use astro with react ? Since react and astro are based on component , how to use astro and react together then ?
I think for me, it comes down to complexity. If the UI/UX required is complex, it's likely worth it to load react (or if it's behind auth). Otherwise, I tend towards vanilla JS and Astro components. Does that help?
I don't remember all the choices I made here, but looking at the code, I agree with you. I'm wondering if I was just trying to show different options? But I think I'd tend to just use classes here.
🎯 Key Takeaways for quick navigation:
00:00 🌟 Astro combines static HTML simplicity with dynamic flexibility.
03:33 🧩 Astro components allow prop customization and reusability.
08:17 🎨 Use slots for content in Astro components.
13:08 🔄 Dynamically add classes with `classlist` in Astro.
15:57 📜 Spread HTML attributes using `...rest` for flexibility.
17:50 🎨 Define variables in front matter for dynamic CSS in Astro.
19:41 🧩 Pass CSS variables with the `Define vars` feature.
20:21 📐 Set default styles with CSS variables for theme-based adaptability.
22:38 📏 Use relative units like `em` for dynamic padding.
23:36 🖱️ Add interactivity to Astro components with JavaScript.
32:12 🚀 Enhance Astro components with TypeScript for auto-completion and type safety.
Made with HARPA AI
You're teaching me so much about Astro. You inspire me to help others as well. Keep them coming!
So glad you’ve enjoyed the content! More coming next week!!
Still very useful for a newbie like me i use to change the HTMLAttributes to HTMLAttributes to make it work
Yes, there we go! Lovely to see another developer tackling this subject :D
(Shoutout to Mr. Kevin Powell aka The CSS King)
Glad you enjoyed it! Did Kevin do something on an Astro button?
@@CodinginPublic he basically did a video exploring components in Astro, Chris. Not buttons specifically => watch?v=acgIGT0J99U
Really starting to enjoy learning Astro and only got started because of your videos! Thanks for the great video as always
That’s so encouraging to hear! Thanks for taking the time to comment!
Many thanks!
Is there a way to encapsulate the 'onClick' logic inside the button? Instead of a query-selector and a script tag outside of the button...
It's possible, but I've found it's cleaner to have in-line scripts for these items. I've changed my pattern here for components. I'd definitely use a slot these days. In that case, you could fairly easily have a slot for a script that could run whatever function you needed. Hopefully that makes sense?
@@CodinginPublic can you detail more how to do it?
Amazing stuff, a real master class tutorial, thank you!
So glad you found it helpful!
Awesome guide Chris! Typescript was cherry on top. Thank you! ❤
Glad it was a help! Thanks for taking the time to say something!
Danke!
Wow! Marc! Thank you so much!
Your astro course is amazing
So glad you enjoyed it!
Fantastic - `class:list` so helpful!
Agreed! They did make some small changes to it recently so that it now uses CLSX. That basically just means you can't use sets, I think? But still basically the same and super helpful!
Awesome content as always! keep the good work!
Glad you liked it!
What is the terminal/shell you are using? I would like to know how you have "intellisense" like menu for folders
The autocomplete is a tool called Fig! At fig.io :)
Super Thanks!
That's very kind, Mark!
amazing i learned so much but what about the accesibility ?
Awesome! Well, that’s the cool thing. Since we spread in the …rest, you can add an aria-label=“whatever” and it’ll get added to the button! So that should handle most all of your accessibility needs with a button!
This is cool....
But what happened to your other video Chris?
I published it too early :) It'll be back up Friday!
@@CodinginPublic I had my editor ready to follow along, then boom gone 😂
@@CodinginPublic Yes, I was wondering about that too lol - okay, noted that on Friday then.
@@DanteMishima Sorry! It's up now here: ruclips.net/video/wkxPpGXAoes/видео.html
@@phucnguyen0110 Sorry! It's up now here: ruclips.net/video/wkxPpGXAoes/видео.html
Love exploring astro with you ! 🙌
I was wondering what's the avantages to use astro with react ? Since react and astro are based on component , how to use astro and react together then ?
I think for me, it comes down to complexity. If the UI/UX required is complex, it's likely worth it to load react (or if it's behind auth). Otherwise, I tend towards vanilla JS and Astro components. Does that help?
My first time learning Astro =)
It's awesome!
10/10
Glad you enjoyed it!
I would use a CSS library such as Bulma instead.
Yep, same principles apply!
Why so many props for a component that could easily be CSS classes ? I don't see its usefulness.
I don't remember all the choices I made here, but looking at the code, I agree with you. I'm wondering if I was just trying to show different options? But I think I'd tend to just use classes here.