Great video. Deep enough to understand how optimistic ui on Remix works... It would be nice if you could show how to handle errors on optimistic ui as well. Thanks.
Hi Sam - Yet another great video. Nothing less can be expected from this channel.. You always try to explain it very nicely and easy to understand. Thanks for doing it. Appreciate it. Also wanted to say here that all your demo UI looks really sleek and thought-after... how do you come up with these project ideas and nice clean UI.. perhaps a video on how to approach a project from concept to final would be good to get some insights please. Thank you
Thanks for the kind words! The best advice for getting better at the design side of UI is to practice + recreate well-designed interfaces. Build up your taste over time and focus on the details. Refactoring UI helped me a lot here! I also spend about an hour in the Remix course on redesigning the Work Journal covering some design best practices along the way: buildui.com/courses/ship-an-app-with-remix/mobile-redesign Maybe I'll add some videos here on the topic if folks are interested!
The useFetcher singleton approach has its applications. E.g.: When clicking a like button, you don't want it to send all the requests, you want just the last input.
Hey, in your future videos, is it possible to show your keypresses on screen? Recently started learning vim motions and the way you navigate the text is beautiful. Maybe could get some tips from just watching you code.
Reassigning entries just kinda broke my mind. Of course you should be able to do it, the entries would be reassigned when the data from the backend comes anyway, but somehow the push to always use const made it unintuitive for me.
Good idea! Remix feels more stable to me at the moment, but I really like both frameworks. I'm really excited about Server Components + Server Actions in Next.js, but the current caching defaults feel complicated. Maybe I will make a video talking about it!
Hi Sam, great video as usual. I have some quetions: - How will you do optimistic UI when there is error? (like network error or 4xx error when POST) - Instead of optimistic UI, what If I want to show a toast to inform the user, how will you do it? Currently I'm thinking of using the session but it seem too much for me. Thanks in advanced.
I think I'll have to make a follow-up to show how to do error handling since plenty of folks are interested in it! For the Toast I would use Radix Toast (or one of the other headless UI libraries), I actually just shared a code demo for one here: buildui.com/recipes/animated-toast. You'd need to call the showToast method whenever you want one to show up. Shouldn't need the session. In your example, when do you a toast to show up? After each item is saved, or after all pending items are saved?
@@SinhNguyen-tz6us You're welcome! In that case you should be able to just call the `showToast()` method from the recipe I linked to after you call `submit()` on the form! You can also use a library like React Hot Toast if you don't need as much control over styling/position/animation.
Nope, assuming your backend (1) has standard validation logic against creating records with duplicate IDs (uniqueness constraint on the database), and (2) doesn't expose any sensitive information based on the client knowing a record's ID (which is typically covered by auth logic in loaders/actions already, since exposing resource IDs is a common way to build web apps)!
The reason ID is needed in the video is because it is needed to render the edit link. If you make the edit link render conditionally, you don't need to ID in advance. The revalidation will take care of eventually producing the ID.
@@gamehelp16with UUIDs this has a VERY slim case of happening were talking 2+ quintillion records for it to even have a chance of happening (according to Wikipedia)
I have to say, I find doing optimistic UI in remix not that fun for more complex stuff than this. It feels like trying to shave down a square peg to fit in a round hole.
Yep, Dracula with a few tweaks to match slate-900 from Tailwind. Just threw it up in a gist: gist.github.com/samselikoff/7a79b5363f87b838b88025ba992835c5
fewer characters to type :P also overreacted.io/on-let-vs-const/ but really I could care less, I might switch to const soon just so it's not a distraction
High Quality content. Keep the remix coming.
I'd often get tripped up by the useFetcher API in Remix. This helped deepen my understanding.
thank you Sam!
Remix is such an amazing framework kudos for the project
Great video. Deep enough to understand how optimistic ui on Remix works... It would be nice if you could show how to handle errors on optimistic ui as well. Thanks.
Seriously one of the best learning videos I have seen. I really appreciate this.
Thanks for the lesson, Sam. Great content as usual.
Great tutorial on Optimistic UI and fetchers, thanks.
Hi Sam - Yet another great video. Nothing less can be expected from this channel.. You always try to explain it very nicely and easy to understand. Thanks for doing it. Appreciate it. Also wanted to say here that all your demo UI looks really sleek and thought-after... how do you come up with these project ideas and nice clean UI.. perhaps a video on how to approach a project from concept to final would be good to get some insights please. Thank you
Thanks for the kind words! The best advice for getting better at the design side of UI is to practice + recreate well-designed interfaces. Build up your taste over time and focus on the details. Refactoring UI helped me a lot here! I also spend about an hour in the Remix course on redesigning the Work Journal covering some design best practices along the way: buildui.com/courses/ship-an-app-with-remix/mobile-redesign
Maybe I'll add some videos here on the topic if folks are interested!
Thank you kindly Sam
The useFetcher singleton approach has its applications. E.g.: When clicking a like button, you don't want it to send all the requests, you want just the last input.
Great video as usual, Sam!
Hey, in your future videos, is it possible to show your keypresses on screen? Recently started learning vim motions and the way you navigate the text is beautiful. Maybe could get some tips from just watching you code.
yuppp🎉
You are a beast sir
Reassigning entries just kinda broke my mind. Of course you should be able to do it, the entries would be reassigned when the data from the backend comes anyway, but somehow the push to always use const made it unintuitive for me.
I think const is overused :) Local reassignment is extremely handy (and safe) in JS!
Sam could you make a video about Why remix? I saw in some of your videos you use remix. Is it better than Next.js?
Good idea! Remix feels more stable to me at the moment, but I really like both frameworks. I'm really excited about Server Components + Server Actions in Next.js, but the current caching defaults feel complicated. Maybe I will make a video talking about it!
@@samselikoff thanks. That would be great because there is little information on Remix
A lot going on there. Remix = good.
How to revert back if data failed to save in database?
How do you handle optimistic UI in case of a failure, say a network error?
Was thinking of making a follow-up if enough folks asked this - sounds like it might be worth it!
Hi Sam, great video as usual. I have some quetions:
- How will you do optimistic UI when there is error? (like network error or 4xx error when POST)
- Instead of optimistic UI, what If I want to show a toast to inform the user, how will you do it? Currently I'm thinking of using the session but it seem too much for me.
Thanks in advanced.
I think I'll have to make a follow-up to show how to do error handling since plenty of folks are interested in it!
For the Toast I would use Radix Toast (or one of the other headless UI libraries), I actually just shared a code demo for one here: buildui.com/recipes/animated-toast. You'd need to call the showToast method whenever you want one to show up. Shouldn't need the session. In your example, when do you a toast to show up? After each item is saved, or after all pending items are saved?
@@samselikoff wow, thanks for your reply. In my example, I want to show the toast after each item is saved.
@@SinhNguyen-tz6us You're welcome! In that case you should be able to just call the `showToast()` method from the recipe I linked to after you call `submit()` on the form! You can also use a library like React Hot Toast if you don't need as much control over styling/position/animation.
@@samselikoff Thank you, again.
remix vs next js what is diffrent
What happens if the server returns an error? Will the item stays in the list or will it be removed?
I think I'll make a quick follow-up to address it!
What's about redirect from action? Otherwise if you click back button you'll post again. And especially if no JS you should redirect to revalidate
Are there any security concerns by letting the client side determine the id of the entries?
Nope, assuming your backend (1) has standard validation logic against creating records with duplicate IDs (uniqueness constraint on the database), and (2) doesn't expose any sensitive information based on the client knowing a record's ID (which is typically covered by auth logic in loaders/actions already, since exposing resource IDs is a common way to build web apps)!
The reason ID is needed in the video is because it is needed to render the edit link. If you make the edit link render conditionally, you don't need to ID in advance. The revalidation will take care of eventually producing the ID.
@@samselikoff Do you have any tips on how to handle if a collision in the ID were to ever happen?
@@gamehelp16with UUIDs this has a VERY slim case of happening were talking 2+ quintillion records for it to even have a chance of happening (according to Wikipedia)
I have to say, I find doing optimistic UI in remix not that fun for more complex stuff than this. It feels like trying to shave down a square peg to fit in a round hole.
Can you give us the code link, repo to this project!
What's that vscode theme? Looks like a bit darker Dracula theme😯
Thx.
Yep, Dracula with a few tweaks to match slate-900 from Tailwind. Just threw it up in a gist: gist.github.com/samselikoff/7a79b5363f87b838b88025ba992835c5
@@samselikoff❤
Great video, but i still don't understand why people use let over const 😐
fewer characters to type :P
also overreacted.io/on-let-vs-const/
but really I could care less, I might switch to const soon just so it's not a distraction
Is this debate still a thing? It doesn't matter what you use as long as you're not using var.
Serious question, is it tough for you to give tutorials for things that Ember could do 40 years ago? I'm digging Remix over Next for sure.
Haha there are def some places where Remix is still catching up but overall I'm liking working with lower-level tools these days
please more next.js & framer motion
👍 what framer motion stuff do you want to see?