Це відео не доступне.
Перепрошуємо.
Everything you didn't know you need to know about buttons
Вставка
- Опубліковано 30 січ 2023
- Find all the code examples, as well as more detail on everything discussed here, in my full article: www.builder.io/blog/buttons
#javascript #html #css #webdev #react
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
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 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
You're absolutely nailing this format my guy. Keep em coming!
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
I just discovered this channel and I need to watch all of your videos!!!
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.
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.
The style of the code and browser window is LOVELY
Nice, didn't know about all:unset. Thank you!!!
Love this so much ❤ all the details people usually overlook or don’t talk about
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
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 😊
Simple with good explanation. My favourite kinda Ytber.
Thank you for all your videos, short and so usefull !
Wow wow wow!!! Appreciate your efforts on explaining minor details
instantly subscribed, best presented web dev video i’ve ever seen
You are like Matt Pocock but for javascript 😀 Great content
i've learned so much in just 4 minutes. Great content 👏👏👏
This is so concise & useful! Thanks a lot for sharing!
I already knew this but learned it the hard way unfortunately. Thank you for for evangelizing this knowledge for everyone. Cheers!
Well this was way more useful than I thought it would be.
Really nice trick with conditional.
OMG. It's a gem. So concise and meaningful. Thanks a lot to the author.
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.
Fantastic tutorial, thanks a lot man.
Oh my god that way of explaining things it's just amazing
Nice! That was helpful, man!
Excellent video, thanks for explaining.
Super explanation video! This was brilliant! Thank you for sharing
Wow. Amazing content Steve
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.
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!
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
Great video! 👏
I love this, thanks Steve
Also good to look into the other focus styles! There are focus-within and focus-visible. Good for other things.
awesome tutorial!
Great unknowns to know for me 😀 Thanks a lot for these tricks
Incredible video 👏
Looks like I have a new channel to binge
I learned something new today thank you
awesome, keep going
Wow,
thanks man 👍👍
May I just discovered my new favourite full-stack dev youtuber? I guess I did
You know someone has only coded in React when they make fun of the idea of "button"
all: unset blew my mind, can't believe this is the first time I'm hearing about it
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.
More videos please
Subscribed.
Amazing
Go the other way - use an A link with Javascript onclick. This is great for SPA page rewrites.
This is great
Still I’d love to see the div button fully reimplemented
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"
what about input type=button? is there any difference with a normal button type=button?
Quality, pure quality. Subscribe
Great
what if you add role="button" to an anchor tag?
Do people actually still use the native submit functionality?
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.
Why not use ?
Why not wrap a button with an anchor tag?
all: unset !!! Wow nice 👍
💪
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.
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
Nice frontend tip
Can you add back the subtitles like before? I really appreciate them
Prefer outline-color:transparent; over outline:none; better for high contrast themes.
I like the part where he says "type equals butt..."
Wow I didnt know pewdiepie knew how to code
not knowing button is type submit by default gave me so much headache
Great content, as all other channel videos
...so no need for the clickbait face expression in thumbnails 😜
if (event.key === Space || Enter) is borked logic. Just saying
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.
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 !
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.
lol F accessibility use your div my man
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.
Buttons suck.
if you wanted to just teach html, dont put it in javascript...