oh wow i was just facing this issue where the form data was not resetting even after I closed the dialog and i was wondering why and right then i came across your video thank you so much much love! really loved the tips from your tailwind conf too!
Great tutorial, very informative! Even more impressed with your code editing skills, probably the fastest I've ever seen in a tutorial and keeps everything moving fast and not wasting any time. The folding, multiple cursors, using abbreviations for autocomplete, etc. is on another level. I'm kind of medium skill with Vim bindings, and I would love to know your tips for moving as fast as you do!
Just watched your course on egghead. Really inspired by your teaching style. Your skills are amazing. I wish to become like you someday. Thanks for another upload.
Great video! loved the fieldset and the button spinner trick! So simple! I feel like an idiot for using getBoundingClientRect to measure my button and correctly place the spinner without the button size changing lol
Awesome content as usual 🤝. I'm curious on how you select multiple occurrences of the word content at 17:12 while using vim motions. Also it would be helpful if you could make a short videos about all your vim motions/shortcuts that you use regularly inside vs-code.
Thanks! That's using VSCode's built-in "Add Selection To Next Find Match" which by default is mapped to +D. So I type `v` at the beginning of the word to go into visual mode, `e` to move to the end of the word, then +D to get the next occurrence of "content". Then I press `c` for vim's change text and start typing. Thanks for asking about tips, it's good to hear what people want + this is my most popular request by far. Am definitely planning on making some content for it soon!
wow you are impressive, everything I have imagined you have been able to do with React, Tailwind and Framer motion, but are you capable of creating a slider menu ?, like the WhatsApp sliders menus I tried, but I fail miserably hahah
It is cool to learn about Radix & tailwind, but we really need a tutorial on how you setup and use your code editor! You seem extreeemely efficient while coding, how do you do that *_*
I wish I'd learned about this disabled fieldset trick before. Great content! By the way is that Dracula Pro or some custom theme that I just can't seem to find? 😅
Great demo, putting it to good use. Just an FYI - if you forget to add the keyframes to the css and leave the animations styles - closing the dialog doesn't work - wasted so much time looking at everything else!
Hey Sam, great video as always. Im struggling to find a way to have my custom component which is not a Radix UI to use accent color or other theme within each scope
I always wondered, is there any performance penalty when using a component like "Dialog" inside of another component that is looped through. In this case, it makes each card have its own modal dialog... Vs if dialog is outside of looped component and data in the dialog is coming from an reactive state that the "edit action" would set. Can you clarify for me, I always did the latter in my projects.
No penalty, when the dialog is closed the content/portal/overlay components aren't rendered. It's one of the main benefits of Radix's API, that you can co-locate it right where you need it!
@@samselikoff Understood. Would you know if this would be same for HeadlessUI? Loving Radix Primitives and using it always with React, but with Vue... I have to go with HeadlessUI. Asking, cause having it nested within a component it belongs to, simplifies many things.
@@dvlden I'd have to look at the Vue code but I'm guessing it does exactly the same thing, the React version of Headless UI does use portals and is also fine to render in a loop 👍 In general you shouldn't worry about how many elements are rendered, modern frameworks are very fast and designed to handle that sort of thing well so you can focus on staying productive!
Is it okay to animate Dialogs with Framer Motion? I use Framer Motion in many aspects of the app and I'd like to stay consistent. Are there any flaws of doing so?
For simple animations keyframes are great! I like Framer Motion for my own projects because it works on any component + the spring physics are great. I like keeping things in one paradigm usually too so even for simple stuff I tend to default to FM.
@@zlatkoiliev8927 For the first few minutes after an upload, youtube only has 360p available. This is due to how long it takes to render the other HD elements
That little trick with `fieldset` and `group` is very very cool - I'll definitely need to keep a note of that. Thanks :)
oh wow i was just facing this issue where the form data was not resetting even after I closed the dialog and i was wondering why and right then i came across your video thank you so much much love! really loved the tips from your tailwind conf too!
Great tutorial, very informative! Even more impressed with your code editing skills, probably the fastest I've ever seen in a tutorial and keeps everything moving fast and not wasting any time. The folding, multiple cursors, using abbreviations for autocomplete, etc. is on another level. I'm kind of medium skill with Vim bindings, and I would love to know your tips for moving as fast as you do!
It's a thing of beauty, isn't it? He mentioned doing a video on this at some point, I hope we get to see it soon!
@samselikoff - man, we definitely need a video on this, also on the entire editor setup 🙏
the power of vim
I'd love a video or even a ebook/course on this! I'd happily pay for pre-configured VS Code set-up (plugins, keybinds etc) to get faster with these
Just watched your course on egghead. Really inspired by your teaching style. Your skills are amazing. I wish to become like you someday.
Thanks for another upload.
You are a natural teacher.
Man your content is so consistently high quality!
Bang! Another quality upload! At this rate, I gotta buy some quality proof armor because I'm being overwhelmed here. Thanks, Sam!
Thanks, the tip for dismiss the dialog helped a lot!
You are a living legend mate!
Being watching your videos for years now. Keep it up!
Your content is priceless. Thank you very much.
fieldset bit was pretty neat sam. Overall really loved the video and it's pacing.
More Radix / Framer content please! Thank you! ❤
Love the fieldset trick!
Woah.. Didn't know about the event.currenttarget trick for form events. Also, your vim chops are buttery smooth.
Wow, didn't know you could retrive form data just like that. Great tip.
Great video! loved the fieldset and the button spinner trick! So simple! I feel like an idiot for using getBoundingClientRect to measure my button and correctly place the spinner without the button size changing lol
amazing as always! 🔥🔥
Really slick!! 🔥
Greate video! As always. I think this could be the perfect scenario where XState can be used.
Awesome content as usual 🤝.
I'm curious on how you select multiple occurrences of the word content at 17:12 while using vim motions.
Also it would be helpful if you could make a short videos about all your vim motions/shortcuts that you use regularly inside vs-code.
Thanks! That's using VSCode's built-in "Add Selection To Next Find Match" which by default is mapped to +D. So I type `v` at the beginning of the word to go into visual mode, `e` to move to the end of the word, then +D to get the next occurrence of "content". Then I press `c` for vim's change text and start typing.
Thanks for asking about tips, it's good to hear what people want + this is my most popular request by far. Am definitely planning on making some content for it soon!
@@samselikoff I'll definitely try it out, thanks.
Looking forward to your next video.
great video!
Thank you it was very help ful
=
Awesome!!!
Hey, please upload your video daily i really like it
Dependency inversion... noice!
8:16 fieldSet
wow you are impressive, everything I have imagined you have been able to do with React, Tailwind and Framer motion, but are you capable of creating a slider menu ?, like the WhatsApp sliders menus
I tried, but I fail miserably hahah
Great 💪
I've been using Framer Motion for animation dialogs, had no idea radix had support for unmounting animations out of the box xD
Guru 🧘🏼❤
It is cool to learn about Radix & tailwind, but we really need a tutorial on how you setup and use your code editor! You seem extreeemely efficient while coding, how do you do that *_*
I wish I'd learned about this disabled fieldset trick before. Great content!
By the way is that Dracula Pro or some custom theme that I just can't seem to find? 😅
Great demo, putting it to good use. Just an FYI - if you forget to add the keyframes to the css and leave the animations styles - closing the dialog doesn't work - wasted so much time looking at everything else!
What is that rename plugin you used?
What is this sorcery shortcut which capitalises the setter function on the useEffect?!!
Hey Sam, great video as always. Im struggling to find a way to have my custom component which is not a Radix UI to use accent color or other theme within each scope
Great. Do you have any resource to make a "offcanvas" using the radix dialog package?
But that wont make you able to close the modal with the deafult close X button on the top right?
I always wondered, is there any performance penalty when using a component like "Dialog" inside of another component that is looped through. In this case, it makes each card have its own modal dialog...
Vs if dialog is outside of looped component and data in the dialog is coming from an reactive state that the "edit action" would set.
Can you clarify for me, I always did the latter in my projects.
No penalty, when the dialog is closed the content/portal/overlay components aren't rendered. It's one of the main benefits of Radix's API, that you can co-locate it right where you need it!
@@samselikoff Understood. Would you know if this would be same for HeadlessUI? Loving Radix Primitives and using it always with React, but with Vue... I have to go with HeadlessUI. Asking, cause having it nested within a component it belongs to, simplifies many things.
@@dvlden I'd have to look at the Vue code but I'm guessing it does exactly the same thing, the React version of Headless UI does use portals and is also fine to render in a loop 👍 In general you shouldn't worry about how many elements are rendered, modern frameworks are very fast and designed to handle that sort of thing well so you can focus on staying productive!
nice tutorial, but i just wonder what will be the best way to handle validation? i would like to hear some suggestions guys
Is it okay to animate Dialogs with Framer Motion? I use Framer Motion in many aspects of the app and I'd like to stay consistent. Are there any flaws of doing so?
Do you have any advice in mind for when to use CSS keyframes versus reaching for a package like framer motion?
For simple animations keyframes are great! I like Framer Motion for my own projects because it works on any component + the spring physics are great. I like keeping things in one paradigm usually too so even for simple stuff I tend to default to FM.
❤
Dialog must be outside the list right?
why do you use let instead of const
Vscode theme?
Why 'let' instead of 'const' ?
Use Svelte instead ❤
why is the quality that bad?!?
hm not sure, what do you mean? is it not playing in hd?
@@samselikoff no it was 360 just a moment ago, maybe something was wrong with youtube
@@zlatkoiliev8927 For the first few minutes after an upload, youtube only has 360p available. This is due to how long it takes to render the other HD elements