Thank you very much for adjusting the font in your editor! The previous font with the dark symbols on the dark background was impossible to read for the visually impaired or on devices that might not have the greatest contrast. Really appreciate it
You went all ninja with the debugging corner. Could you share what you used to open the webpage on multiple device emulators and how you sent the same events to all at once?
i open the local dev server on each device/browser, then browsersync (which is what's running the static file server) sends events, scrolls and stuff to each connected client.
I came here to ask the same question. I’m going to implement a similar “debugging corner” on my projects. I wonder if I can be ultra lazy and figure out a way to get Alfred or Raycast to open up each browser for me … hmm.
Awesome series, would love to see one about a good looking and accessible autocomplete. Like a webshop where an autocomplete shows an image, price, sku and title. Keep up the great work!
Thanks for starting to respect low-motion correctly. Past efforts at low motion didn't actually remove motion. Cross-fading is fine. Even swelling slightly is fine since brightness/opacity changes have a perceptual / psychovisual size change. Doing it wrong: speeding up as a way to respect low-motion is absolutely wrong, including instantly appearing and disappearing, especially where that results in instant displacement of other elements. So thanks for getting it right this time around and I hope others learn from your example.
@@MahdiAlKhalaf The primary purpose of reduced motion is to accommodate people with PDST and Epilepsy for whom flashing and startling/unexpected movements can trigger adverse health effects. So yeah, having things instantly appear is problematic for both groups. Cross-fading is a good mitigation, since it presents low contrast changes over time, esp for things like timer-activated popups. If you can spend some time talking with people in these groups about their experiences and how it affects them, that can help you as a design professional, and as a friend. There's a surprisingly large number of people in both groups. There's also other people for whom it is just a preference. The CSS spec disrespects the people with the actual need by using the "prefers-" nomenclature.
It's a shame you can't use the inert attribute yet, looks like Chrome 102 has planned support for the masses. The polyfill looks like more trouble than it's worth currently.
Thank you so much, this is really kool. The part that i found very confusing at the beginning is that i don’t even know there’s a HTML tag called `dialog`, until I saw the source code. Well you learn something new everyday. Is there a place you can get updated on what’s the new released tags every week or month?
Hey, This is a great informative video. Thanks for sharing with us. I'm just curious to know how did you do this debugging corner? I wanna know how to run the project on multiple devices, and browsers and keep them in sync together.
Oh my god, this looks amazing! Thank you! ----> Question: How would you implement closing the dialog on using the Android Back Button? It is the most common form of errors for my users that they expect that to close a dialog and they instead navigate away from the page. I saw you used a hash trick for your side nav. Any reason you chose not to use that here?
Really good challenge and was interesting to watch and got several ideas from this. Just one question though, how will you go about handling scroll of background page. (one which you are talking about at #3:26)
@@iqalzr I use browsersync as the project server and it does all the sync work browsersync.io/ command line usage: `npx browser-sync start --server 'dist' --no-open`
Thank you. A few small thing, the large dialog was horizontally centered but the small dialog was off centered a bit. Also, does Dialog do the centering or do you have to add CSS for that? Are Dialog tags always modal? Did you figure a way to add a mouse down outside click to dismiss?
small dialog has custom javascript to position itself near where it was invoked 👍🏻 light dismiss was added yes: web.dev/building-a-dialog-component/#adding-light-dismiss
very valid concern/criticism! i also will be combining them and will be normalizing the project structure for each so they can be consumed in 1 way. stay tuned!
Interesting to watch but a suggestion, please don't use any css frameworks or css libraries in the source code. Plain css is not that hard to use and it easier to then adapt.
Thank you very much for adjusting the font in your editor! The previous font with the dark symbols on the dark background was impossible to read for the visually impaired or on devices that might not have the greatest contrast.
Really appreciate it
This narration is so cool, relaxed, calm and natural that makes you happy and web development like the easiest thing in the world.
thanks!
The slide-fade in and then the fade out animations looks so goood!
thanks!
I really enjoy this series of videos. I literally always learn something new when watching them!
Awesome. I have to say that I have battled a little bit with the dialog element in the past so this comes very handy.
Thank you Adam :)
This was so fun to watch and made me excited to play with this Dialog Element
I never heard about open-props before. This looks really useful.
You went all ninja with the debugging corner. Could you share what you used to open the webpage on multiple device emulators and how you sent the same events to all at once?
i open the local dev server on each device/browser, then browsersync (which is what's running the static file server) sends events, scrolls and stuff to each connected client.
I came here to ask the same question. I’m going to implement a similar “debugging corner” on my projects. I wonder if I can be ultra lazy and figure out a way to get Alfred or Raycast to open up each browser for me … hmm.
This right here is gold. Thanks man! Awesome video too
Thank you so much, Adam.
Love what you do. Thank you man.
Awesome series, would love to see one about a good looking and accessible autocomplete. Like a webshop where an autocomplete shows an image, price, sku and title. Keep up the great work!
Thanks for starting to respect low-motion correctly. Past efforts at low motion didn't actually remove motion. Cross-fading is fine. Even swelling slightly is fine since brightness/opacity changes have a perceptual / psychovisual size change. Doing it wrong: speeding up as a way to respect low-motion is absolutely wrong, including instantly appearing and disappearing, especially where that results in instant displacement of other elements. So thanks for getting it right this time around and I hope others learn from your example.
Thanks for the information
I didn't expect instant transitions to violate reduced motion
@@MahdiAlKhalaf The primary purpose of reduced motion is to accommodate people with PDST and Epilepsy for whom flashing and startling/unexpected movements can trigger adverse health effects. So yeah, having things instantly appear is problematic for both groups. Cross-fading is a good mitigation, since it presents low contrast changes over time, esp for things like timer-activated popups. If you can spend some time talking with people in these groups about their experiences and how it affects them, that can help you as a design professional, and as a friend. There's a surprisingly large number of people in both groups. There's also other people for whom it is just a preference. The CSS spec disrespects the people with the actual need by using the "prefers-" nomenclature.
Amazing!! I always finds awful to implement manually modals and dialogs in React, now i will be using this native feature!
Hi, can you provide specs how you was able to setup all browsers at once and sync them?
I love this series.
can you make an episode on complex modals?
It's a shame you can't use the inert attribute yet, looks like Chrome 102 has planned support for the masses. The polyfill looks like more trouble than it's worth currently.
very good video !
Thank you so much, this is really kool. The part that i found very confusing at the beginning is that i don’t even know there’s a HTML tag called `dialog`, until I saw the source code. Well you learn something new everyday. Is there a place you can get updated on what’s the new released tags every week or month?
Follow me on Twitter or keep watching this show! There arent a ton of tags coming out these days, but is being developed for Chromium.
Hey, This is a great informative video. Thanks for sharing with us.
I'm just curious to know how did you do this debugging corner? I wanna know how to run the project on multiple devices, and browsers and keep them in sync together.
Oh my god, this looks amazing! Thank you! ----> Question: How would you implement closing the dialog on using the Android Back Button? It is the most common form of errors for my users that they expect that to close a dialog and they instead navigate away from the page. I saw you used a hash trick for your side nav. Any reason you chose not to use that here?
Interesting to see the implementation but I always used the Dialog from material-ui react and it worked great 😅
Article is 404, but the video and source code are amazing
a tutorial about seting up the debugging corner would be great.
See my comment above, I explain how to do it
@@drp_bear where?
Video bagus banget dan penjelasan yang sangat jelas
Did you find that intro track from Stranger Things? ;)
i think in the lr-td mode the "choose file" button above the filename display would make the dialog look a bit more symmetric oO
offtopic question… what do you use for the Android Emulator? 🤔
Android Studio has decent emulators you can install now 👍🏻
Really good challenge and was interesting to watch and got several ideas from this.
Just one question though, how will you go about handling scroll of background page.
(one which you are talking about at #3:26)
blog post has the deets! web.dev/building-a-dialog-component/#scroll-containment
@@AdamArgyleInk perfect. didn't know there are blog posts as well.
Thank you 😊
Hello mate, really nice content. I’ve been wondering how you check for the mobile viewport just like that? Could you tell me the name of the app?
I’m interested in building the set of connected devices like this. Could you point me to a material or library that I can look into? thank you
Its probably polypane or something similar
it's just installed browsers and installed emulators/simulators. download each browser and download Xcode and Android Studio for the emulators.
then, how can you apply an action simultaneously on all devices? Thank you.
@@iqalzr I use browsersync as the project server and it does all the sync work
browsersync.io/
command line usage: `npx browser-sync start --server 'dist' --no-open`
Thank you. A few small thing, the large dialog was horizontally centered but the small dialog was off centered a bit. Also, does Dialog do the centering or do you have to add CSS for that? Are Dialog tags always modal? Did you figure a way to add a mouse down outside click to dismiss?
small dialog has custom javascript to position itself near where it was invoked 👍🏻
light dismiss was added yes: web.dev/building-a-dialog-component/#adding-light-dismiss
How on earth do you make the avatar lip sync so seemless! I need to do the same thing with an avatar that’s “speaking” an mp3 file from OpenAI tts
Have you tried open it on ipad safari? Open remove dialog, minimize safari and then go back to it - the layout is broken🤷♂
Can you have a dialog inside a dialog?
Is dvb unit implemented in chrome only as of now?
it's not, that's why i had the fallback 👍🏻
web.dev/building-a-dialog-component/#responsive-dialog-sizing
Can the "re-focus the opening button" feature be disabled?
hm, I don't know!
Im trying to put all your components together is a sort of template, but struggling since some use postcss and open-props
very valid concern/criticism! i also will be combining them and will be normalizing the project structure for each so they can be consumed in 1 way. stay tuned!
@@AdamArgyleInk I like the sound of that!
Interesting to watch but a suggestion, please don't use any css frameworks or css libraries in the source code.
Plain css is not that hard to use and it easier to then adapt.
❤😂😢😅😢😂😊😊😊