Great tips on using grid for stacking and the value of `visibility: hidden`. Instead of using aria-label on the span, it's better to use . aria-label only works properly on elements with roles that expect a name and even then, client-side machine translation tends not to work on that attribute (but does work on alt attributes). Unfortunately, screen readers don't properly respond to the names of elements dynamically changing so it's typically necessary to also have an ARIA live region to announce state changes.
good comment - thanks for this! I mentioned a few other places that I'd normally use an aria-live region anyways - but alas out of the scope of this video.
Amazing stuff ngl, im the type of person who uses absolute for stacking, but when you mentioned the bigger loading text part.. thats when i realized its dumb to use absolute. 10/10 video as always :)
This is definitely one of the better examples where there's an advantage over position: absolute; The accessabilty conserations in the demo is very good too!
Love that cursor. :D On topic: That's one line shorter than what I've been doing with grid: 1; and then using grid-column and grid-row each to 1 on the children. Noice! Will yoink that for sure.
Your solution increases the size of the html code. Using position:absolute and some .preloader:before you could achieve the same result, much cleaner. The more html code, the faster the glaciers melt
your position absolute wont be able be vertically centered and wont take into account longer loaders. Plus that absolute is absolutely burning up the GPU and melting the penguins more than bitcoin 🤣
@@WesBos Yeah I thought the question was to make button animate to smaller size when spinner showing. Never thought someone will make a drama and a whole video about dummy show/hide
I can't get over the pointer with the middle finger 😆
Great tips on using grid for stacking and the value of `visibility: hidden`.
Instead of using aria-label on the span, it's better to use . aria-label only works properly on elements with roles that expect a name and even then, client-side machine translation tends not to work on that attribute (but does work on alt attributes).
Unfortunately, screen readers don't properly respond to the names of elements dynamically changing so it's typically necessary to also have an ARIA live region to announce state changes.
good comment - thanks for this! I mentioned a few other places that I'd normally use an aria-live region anyways - but alas out of the scope of this video.
Amazing stuff ngl, im the type of person who uses absolute for stacking, but when you mentioned the bigger loading text part.. thats when i realized its dumb to use absolute.
10/10 video as always :)
that cursor icon tho lmao
button { cursor: url('fav.farm/🖕') 15 0, auto; }
Disrespectful to viewers.
@@Ss-zg3yj intended
@@Ss-zg3yjto himself too 👌
@@Ss-zg3yjWell at least the content isn't, so...
Very cool tips. I remember in the "old days" getting the button's width in JS on every click :)
Cool that you teach about the accessibility improvements! 💪
Brilliant idea, I was quite envious when I used ZStack in SwiftUI. Didn't realize I could use grid for the same purpose.
minor nitpick: the spinner is still being animated unless it has `display: none`
I checked - It doesn't trigger any painting when visibility hidden. I don't see the issue?
Nice tip Wes!
Love your beginner javascript course. Do you mind to create another course about react native or a full stack web development course.
Planning on another fullstack course next year
@@WesBos do you have road map? so i can see what is your plan for your future courses
wes you're the 🐐
damn this is AWESOME
Great tip
This is great!
This is definitely one of the better examples where there's an advantage over position: absolute;
The accessabilty conserations in the demo is very good too!
Smart 😊
love this ...
The fact that i didnt see the cursor until i read a comment about it just goes to shows the power that mind when it is only focused on learning.
I felt i don't know css 😂
We, humans, are close to artificial general intelligence, yet are unable to horizontally align a spinner and some text by default.
It's actually funny because I could not get Cursor to generate this approach either :\
neat
Love that cursor. :D
On topic: That's one line shorter than what I've been doing with grid: 1; and then using grid-column and grid-row each to 1 on the children. Noice! Will yoink that for sure.
It's a good one - you can also do grid-row: 1 / -1; grid-column: 1 / -1; without defining the area
This has to be the most in your face and yet somehow totally discreet flipping of the bird I've ever seen 😂
the damn cursor caught me off guard 😂
Your solution increases the size of the html code. Using position:absolute and some .preloader:before you could achieve the same result, much cleaner.
The more html code, the faster the glaciers melt
your position absolute wont be able be vertically centered and wont take into account longer loaders. Plus that absolute is absolutely burning up the GPU and melting the penguins more than bitcoin 🤣
Is this even relevant in the cursor era?
someones gotta teach it how to do this
Yes people still need to know how to do things lol
Jesus Christ, just use Motion library
Use a motion library to overlap two elements?
@@WesBos Yeah I thought the question was to make button animate to smaller size when spinner showing. Never thought someone will make a drama and a whole video about dummy show/hide
@@Ss-zg3yjDownloading a huge library just to control button size is the actual dummy idea.
@@Ss-zg3yj Its not drama, we're learning how to best make flexible layouts!
A 1.5 MB library to make a spinner? 😂