Find all the code examples, as well as more detail on everything discussed here, in my full article: www.builder.io... #javascript #html #css #webdev #react
I've been studying CSS for a couple years now and this is hands down the best video I've seen. I love how you went through each one and explain when and why we use each element. I have a lot of trouble learning when people don't explain 'what does this allow us to do and what are we not able to do without it?' You really hit the nail on the head here. I feel like I understand the reasoning behind all 3 cases after just 1 watch, that's pretty incredible.
For accessibility try not to reinvent controls unless you really have to, but make sure you’re making it accessible! When clicking on this video I was afraid accessibility would be neglected. Happy to see it’s the focus of the video.
That MyButton component is actually really nice! Never thought of that. My rule of thumb is that a button is for interaction for things that happen on the current page only, anchor tags are for navigation only.
I usually don't comment but now I have to. Steve - your delivery is among the cleanest, most concise yet deep teaching styles I have ever come across. You definitely need some more zeros behind that sub count!
Steve your teaching method is the most comprehensible i've come accross. Please continue making these! I really hope you release some more basic stuffs also
Just great and useful content, no filler no spam no nonsense... This is why I open youtube This channel deserves at least 1 mil subs, I hope you get there someday
Just starting to watch. The "rule" I try to remember is: anchor for navigation, button for interaction The styling bits are the reason why a CSS reset is necessary for me. The conditional rendering is nice I suppose
Another discussion is on button disabled state and the color contrast debate around it. Another thing to remember you can’t disable links. All you can do is to hide them.
As someone who builds accessible websites, it's easiest to just stick to the intended purpose of the element. Buttons submit (or reset forms), anchors create hyperlinks. They are both accessible and understood by just about all assistive software and have worked in the same fashion for 30 years. Yeah, if you're building something fancy then adding custom functionality to role=button buttons is fair, but I see so many people starting from scratch without realising they've lost accessibility features along the way.
This was great Steve. Thank you 🙏🏼 I think for things with anchor tags we should probably use buttons for accessibility purposes. I love the one component you showed to render the consistent button!! Although our designers tend to have a few button variations so would be good to see that as well. Would love to have you on my channel for a collab once. Thank you again!
Is this a coincidence, or does the youtube algorithm know what is in my mind ? I wanted to learn how to make a text clickable, and this video is the first video in my feed.
@@Steve8708 nice! Otherwise, this was excellent and something that everyone building a component library should watch just to see the base considerations of things you might want to call "simple"
If I see one more job application project where people NEST a and an I'll cry. W3C standards exist for many reasons. Mixing conflicting interactive elements makes my brain hurt.
Typescript version of this is super messy. You have to use polymorphic methods to get the correct type inferred and its a pain. After experiencing, I now like to separate them into and for better and cleaner type.
I think that this kind of merge of buttons and link are not good mainly because it blurs distinctions between these two tags. In real designing scenarios there should be clear styling diference between how button and how link looks like so user know what to expect. If its button it will perform some kind of action, as for link it expects routing behaviour. So in your case you would need to pass variant to your merge button. But that button variant could be applied on both elements wich will cause undesired styles for one. It is much more clear to have buttons separetad from links since in its nature they are not same html tags. Besides it would be weird from dev perspective to see button with hrf atribute. We should keep our code ease to read
It’s a good video, but in a few places at the beginning your audio was cut a bit badly, some of the words you spoke were cut off in the middle, making it a bit awkward to listen to
Switching the tag type behind the component is much to magic. Unless you work totally alone, you have created a scenario where someone using your component will think they are getting a button and may be getting an anchor. Components should be simple, pure and never contain magic.
All of the issues you mentioned with using the button tag are actually non-issues. Especially since you're using react, you would never just use a button tag anyway. You should make your own button components for coupling styles and functionality.
All the code examples, as well as more detail on everything discussed here, in my full article: www.builder.io/blog/buttons
Go team Steve!
I've been studying CSS for a couple years now and this is hands down the best video I've seen. I love how you went through each one and explain when and why we use each element. I have a lot of trouble learning when people don't explain 'what does this allow us to do and what are we not able to do without it?' You really hit the nail on the head here. I feel like I understand the reasoning behind all 3 cases after just 1 watch, that's pretty incredible.
I've been learning A LOT from you! The way your videos are short yet delivering a deep explanation is spot on for me! Thank you.
agreed. Short, concise, and full of practical knowledge.
For accessibility try not to reinvent controls unless you really have to, but make sure you’re making it accessible! When clicking on this video I was afraid accessibility would be neglected. Happy to see it’s the focus of the video.
That MyButton component is actually really nice! Never thought of that. My rule of thumb is that a button is for interaction for things that happen on the current page only, anchor tags are for navigation only.
I usually don't comment but now I have to. Steve - your delivery is among the cleanest, most concise yet deep teaching styles I have ever come across. You definitely need some more zeros behind that sub count!
Great video, I did not know I needed this but the a vs div vs button problem was quite frequent for me and this video cleared things up
Steve your teaching method is the most comprehensible i've come accross. Please continue making these! I really hope you release some more basic stuffs also
Nice, didn't know about all:unset. Thank you!!!
Just great and useful content, no filler no spam no nonsense... This is why I open youtube
This channel deserves at least 1 mil subs, I hope you get there someday
I already knew this but learned it the hard way unfortunately. Thank you for for evangelizing this knowledge for everyone. Cheers!
Oh my god that way of explaining things it's just amazing
The style of the code and browser window is LOVELY
Simple with good explanation. My favourite kinda Ytber.
I hate that I learned so much about buttons from this video. Thanks, Steve. I hope you're happy.
Also, keep up the good work 😊
Holy sheee, this is quality content. I have watched few of ur shorts before, but after this video i was 100% sure i wanna follow u constantly.
Just starting to watch. The "rule" I try to remember is: anchor for navigation, button for interaction
The styling bits are the reason why a CSS reset is necessary for me.
The conditional rendering is nice I suppose
Was watching your video and was whole time thinking, "why not just make it a web component?". Then you actually did exactly as I thought lol.
I just discovered this channel and I need to watch all of your videos!!!
Literally amazing man. One of the best tutorials I've ever seen. It's humbling because who thinks about buttons twice? But there's so mucho to know
Another discussion is on button disabled state and the color contrast debate around it.
Another thing to remember you can’t disable links. All you can do is to hide them.
You are like Matt Pocock but for javascript 😀 Great content
OMG. It's a gem. So concise and meaningful. Thanks a lot to the author.
instantly subscribed, best presented web dev video i’ve ever seen
Thank you so much for sharing. I always was fumbled in this conundrum and now you gave a solution with your pattern. Thanks a ton!
Outstanding. I love the style of demonstrating the good and the bad. You saved a lot of trial and error.
You're absolutely nailing this format my guy. Keep em coming!
Well this was way more useful than I thought it would be.
Really nice trick with conditional.
Thank you for all your videos, short and so usefull !
Super explanation video! This was brilliant! Thank you for sharing
all: unset blew my mind, can't believe this is the first time I'm hearing about it
Love this so much ❤ all the details people usually overlook or don’t talk about
i've learned so much in just 4 minutes. Great content 👏👏👏
Looks like I have a new channel to binge
Also good to look into the other focus styles! There are focus-within and focus-visible. Good for other things.
Wow wow wow!!! Appreciate your efforts on explaining minor details
Great unknowns to know for me 😀 Thanks a lot for these tricks
May I just discovered my new favourite full-stack dev youtuber? I guess I did
Thanks, that sure was helpful. Since I've been using qwik, it's nice to know the nitty and gritty details of some html tags
You know someone has only coded in React when they make fun of the idea of "button"
As someone who builds accessible websites, it's easiest to just stick to the intended purpose of the element.
Buttons submit (or reset forms), anchors create hyperlinks. They are both accessible and understood by just about all assistive software and have worked in the same fashion for 30 years.
Yeah, if you're building something fancy then adding custom functionality to role=button buttons is fair, but I see so many people starting from scratch without realising they've lost accessibility features along the way.
Nice! That was helpful, man!
Wow. Amazing content Steve
This is so concise & useful! Thanks a lot for sharing!
I learned something new today thank you
Fantastic tutorial, thanks a lot man.
I love this, thanks Steve
This was great Steve. Thank you 🙏🏼 I think for things with anchor tags we should probably use buttons for accessibility purposes. I love the one component you showed to render the consistent button!! Although our designers tend to have a few button variations so would be good to see that as well. Would love to have you on my channel for a collab once. Thank you again!
Go the other way - use an A link with Javascript onclick. This is great for SPA page rewrites.
Excellent video, thanks for explaining.
awesome tutorial!
Is this a coincidence, or does the youtube algorithm know what is in my mind ? I wanted to learn how to make a text clickable, and this video is the first video in my feed.
Incredible video 👏
More videos please
Great video! 👏
This is great
Still I’d love to see the div button fully reimplemented
awesome, keep going
Quality, pure quality. Subscribe
I think it would have been worth it to note that you probably want :focus-visible and not just :focus styles.
Ah yes! Just learned about this after posting the vid, but updated the blog post to use focus-visible
@@Steve8708 nice! Otherwise, this was excellent and something that everyone building a component library should watch just to see the base considerations of things you might want to call "simple"
Wow,
thanks man 👍👍
Prefer outline-color:transparent; over outline:none; better for high contrast themes.
If I see one more job application project where people NEST a and an I'll cry. W3C standards exist for many reasons. Mixing conflicting interactive elements makes my brain hurt.
what about input type=button? is there any difference with a normal button type=button?
Subscribed.
Typescript version of this is super messy. You have to use polymorphic methods to get the correct type inferred and its a pain. After experiencing, I now like to separate them into and for better and cleaner type.
I think that this kind of merge of buttons and link are not good mainly because it blurs distinctions between these two tags. In real designing scenarios there should be clear styling diference between how button and how link looks like so user know what to expect. If its button it will perform some kind of action, as for link it expects routing behaviour. So in your case you would need to pass variant to your merge button. But that button variant could be applied on both elements wich will cause undesired styles for one. It is much more clear to have buttons separetad from links since in its nature they are not same html tags. Besides it would be weird from dev perspective to see button with hrf atribute. We should keep our code ease to read
all: unset !!! Wow nice 👍
Why not use ?
what if you add role="button" to an anchor tag?
Why not wrap a button with an anchor tag?
Amazing
It’s a good video, but in a few places at the beginning your audio was cut a bit badly, some of the words you spoke were cut off in the middle, making it a bit awkward to listen to
Nice frontend tip
Great
Switching the tag type behind the component is much to magic. Unless you work totally alone, you have created a scenario where someone using your component will think they are getting a button and may be getting an anchor. Components should be simple, pure and never contain magic.
Do people actually still use the native submit functionality?
Can you add back the subtitles like before? I really appreciate them
I like the part where he says "type equals butt..."
not knowing button is type submit by default gave me so much headache
if (event.key === Space || Enter) is borked logic. Just saying
💪
Wow I didnt know pewdiepie knew how to code
you guys always end up making things way more complicated than it needs to be . I don't mean YOU as a teacher , I mean the designers of this crap !
Great content, as all other channel videos
...so no need for the clickbait face expression in thumbnails 😜
MyButton component like this example is an unnecessary abstraction...
Bruh
Now we have problem
Now that is not working
Now this is broken.
Why do you touch it let it be.
All of the issues you mentioned with using the button tag are actually non-issues. Especially since you're using react, you would never just use a button tag anyway. You should make your own button components for coupling styles and functionality.
lol F accessibility use your div my man
Buttons suck.
if you wanted to just teach html, dont put it in javascript...