Sometimes there should be an ability to give multiple likes because this video really deserves it. Hands down one of the best ways to teach css and tailwind as well.
I think that removing the tab-index for the close background "button" isn't a great idea in general... Most keyboard user's are familiar with the idea of using SHIFT+TAB to jump back to the last link they were on, as a way of "undo" for their previous keystroke. It's not much of a big deal, but you say about creating a button for the full-screen fill to be semantically correct, but then disregard people who navigate solely by keyboard, and might not think to use the escape key. A better solution would've been to simply move the full-screen close button up an element, so that it's the first child in the wrapper. That would also mean that you no longer need to mess around with the z-index of the avatar button either, as (as you mentioned in a previous video) elements stack in the third dimension according to DOM order. This approach allows you to SHIFT+TAB back to close the dropdown if you need to, but won't interrupt the flow of regular, expected tab ordering.
Hey! Keyboard users usually use escape to close controls like this, as per the WCAG guidelines for menu buttons: www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html The close button doesn't need to be tabbable, it's all still controllable via the keyboard the way users expect.
Sometimes there should be an ability to give multiple likes because this video really deserves it. Hands down one of the best ways to teach css and tailwind as well.
I added to my knowledge of HTML, CSS and Tailwind and just fell in love with Vue from this series
this man is underrated, I like your way of explanation and how do you go through details, thanks a lot
Adam, thank you for the tutorial. Please, push this project to GitHub and provide links to subscribers.
Thank you for all this great content, I really appreciate it. You really deserve more subscriber's and views.
You save my day bro
for Vue 3 you need to npm install --save mitt
I think that removing the tab-index for the close background "button" isn't a great idea in general... Most keyboard user's are familiar with the idea of using SHIFT+TAB to jump back to the last link they were on, as a way of "undo" for their previous keystroke.
It's not much of a big deal, but you say about creating a button for the full-screen fill to be semantically correct, but then disregard people who navigate solely by keyboard, and might not think to use the escape key.
A better solution would've been to simply move the full-screen close button up an element, so that it's the first child in the wrapper. That would also mean that you no longer need to mess around with the z-index of the avatar button either, as (as you mentioned in a previous video) elements stack in the third dimension according to DOM order.
This approach allows you to SHIFT+TAB back to close the dropdown if you need to, but won't interrupt the flow of regular, expected tab ordering.
Hey! Keyboard users usually use escape to close controls like this, as per the WCAG guidelines for menu buttons: www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
The close button doesn't need to be tabbable, it's all still controllable via the keyboard the way users expect.
It works, thanks
Tailwind and your videos made me a better CSS developer!
The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt
And when we click in account settings for example how we hide this dropdown completely please?
Wow. Adam simple thing, yet there is lots of tactics.
What about adding @blur="isOpen = false" on the main button instead of adding a fixed button.
Why doesn't that work for me?
I use "Sublime text."
Mind blowing explanation 🤯 thank you so much for the video!!
I think the simplicity of adding a dropdown just sold me on Vue...as it is, I'm already sold on Tailwind and used it in multiple projects...
Wow, an awesome and production ready functionality. The use of the background button was really awesome.. thanks for the effort
This playlist is AWESOME! Thanks Adam!
Awesome 😎 click away effect