Тёмный

Remixing Toast Notifications (feat. Andre Landgraf) 

Remix
Подписаться 20 тыс.
Просмотров 4,9 тыс.
50% 1

Опубликовано:

 

13 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 32   
@salisuwada3467
@salisuwada3467 9 месяцев назад
@andre's book on Remix is a breath of fresh air. Started reading it 2 days ago and I've read more than half of the book. The book covers essential aspects of the framework that are missing from the docs
@andrelandgraf1398
@andrelandgraf1398 9 месяцев назад
Really appreciate the great feedback! Very glad you like it! 😊
@planetmall2
@planetmall2 9 месяцев назад
This is fantastic please keep going with these videos.
@meowmesh
@meowmesh 9 месяцев назад
I just learn this technique in Kent's epic dev workshop and first time it was little confusing then it just blown my mind that how this things work. Never I have imagined I would handle toast in server side like this. remix is really awesome
@dagoacarralero5080
@dagoacarralero5080 9 месяцев назад
Awesome flash session 😂 Just a little note, light themes afford more contrast for viewers.
@ReactTipsWithBrooks
@ReactTipsWithBrooks 9 месяцев назад
Haha can't win! If we do light people complain, if we do dark people complain 😅 Noted though, I'll probably intermix some light themes in every once in a while. Maybe just randomize it each episode 😉
@DrewLytle
@DrewLytle 9 месяцев назад
Two of my favorite humans 🙌!!!
@DEV_XO
@DEV_XO 9 месяцев назад
Great collab guys! 🙌
@SinhNguyen-tz6us
@SinhNguyen-tz6us 9 месяцев назад
wow, I have been finding this since I started to exploring Remix few months ago. Thank you so much.
@BrunoBonamin
@BrunoBonamin 9 месяцев назад
Thanks for the great content, we've been doing this for a while but seeing you guys chat over it helped me improve the API so my code is now much shorter and cleaner. I also got a deeper understanding of it. One piece of feedback, please use a smaller screen resolution with bigger text! It's really hard to read the code unless I'm on a big screen, and the youtube limit of 1080p makes it barely readable. Thanks!
@yarapolana
@yarapolana 9 месяцев назад
I really enjoy the new videos on the many ways to use Remix and the depth of knowledge of the people you bring. Two feedbacks: 1- The title on youtube already reflects what the video is about so no need to add the banner as well on the video since it “eats up” the already small code presentation. 2- The codebase does not reflect what was on the video, just the base code for it, if that was intended you could make it clearer.
@ReactTipsWithBrooks
@ReactTipsWithBrooks 9 месяцев назад
Thanks for the kind words and feedback! 1. Noted, I'm still trying to figure out the best layout. I don't want to cut off any of my screen recording, but unfortunately to keep our faces up there I have to scale the screen down just a bit. So basically theirs a blank space either way that I need to fill with something, so I figured a title at least keeps the context for folks viewing in full screen. I'm open if you have another suggestion on what to put down there! 2. Yep, good point, thanks! That code is the starting point, not the finished product we built together. I'll update the description to reflect this
@yarapolana
@yarapolana 9 месяцев назад
@@ReactTipsWithBrooksAs someone who studied videography as well I feel that I can’t give advice on editing, everyone is unique in their own way, except when it comes to the code, the font needs to be a bit bigger😂 And I totally understand on the whitespace, dont be afraid to zoom in on your faces.
@ReactTipsWithBrooks
@ReactTipsWithBrooks 9 месяцев назад
@@yarapolana Thanks so much for the tips! I'll definitely be sure to bump the font size more in future recordings (hopefully the next one is already good). I'll play around with zooming in on our faces a bit more too to see if I can squeeze some more room. Thanks again!
@MerthanMerter
@MerthanMerter 4 месяца назад
why not just run; headers.set('Set-Cookie', await commitSession(session)); headers.set('Set-Cookie', await destroySession(session)); in order? is there a specific reason?
@C0ntenTT
@C0ntenTT 9 месяцев назад
Could also use server actions to achieve same result.
@abhaykumar9806
@abhaykumar9806 7 месяцев назад
How?
@abhaykumar9806
@abhaykumar9806 7 месяцев назад
I am using radix-ui to create the toasts and they have a duration prop to dismiss the toasts? How should I update the toast cookie in that case where I dont have a close button?
@abhaykumar9806
@abhaykumar9806 7 месяцев назад
Note: I don't want to submit a form programmatically with timeouts on a component level
@ReactTipsWithBrooks
@ReactTipsWithBrooks 7 месяцев назад
I would use useSubmit to submit a post request to clear the cookie after the duration or when the toast unmounts
@detoyz1
@detoyz1 9 месяцев назад
Great video, thanks guys! One question - wouldn't it be easier and more web-like just using the query params? So when redirecting from success action we just append query params to url with toast data. Or am I missing something here, like remix doesn't know how to pop then query params after displaying a toaster message?
@ReactTipsWithBrooks
@ReactTipsWithBrooks 9 месяцев назад
Yep, that could work too, thought it's not necessarily more web-like than using a cookie (cookies have been around for quite a while and are very web-like). The reason I personally wouldn't take that approach is because you have a lot more fiddling to do with the query params. You'll need to remove the query params once the notification is dismissed, and if there are other query params you do want you need to make sure they stick around. A bigger problem though is if someone shares the link with the query param, now anyone who goes to that link is going to see a random toast notification, which would probably be pretty confusing. You could protect against this by looking up the session information for the user, but then at that point you're already back in cookie land essentially.
@C0ntenTT
@C0ntenTT 9 месяцев назад
that's a bad, working approach
@ReactTipsWithBrooks
@ReactTipsWithBrooks 9 месяцев назад
@@C0ntenTT Are you replying to me or OP? In either case, would you care to elaborate why you think it's a bad approach?
@C0ntenTT
@C0ntenTT 9 месяцев назад
@@ReactTipsWithBrooks Replying to OP, not you. and the reason is exactly what you mentioned
@detoyz1
@detoyz1 9 месяцев назад
Thanks for elaborative answer here! Much appreciated@@ReactTipsWithBrooks
@sethdavis512
@sethdavis512 9 месяцев назад
🍪🍪🍪
@yarapolana
@yarapolana 9 месяцев назад
Is it possible to achieve the same result using SSE?
@ReactTipsWithBrooks
@ReactTipsWithBrooks 9 месяцев назад
Yep, you could definitely use SSE. Personally I think that'd be a bit of overkill just for a simple toast notification. You'd also have to setup a unique channel for each user, since you don't want to share the notification to multiple users accidentally. You'd also likely want to cleanup the emitter as soon as you're done using it, since a toast notification is generally pretty fire-and-forget. If you had a stream of notifications/messages you want to give a user, then SSE might make sense in that case
@yarapolana
@yarapolana 9 месяцев назад
@@ReactTipsWithBrooksYou are right and after some more digging not all browsers are compatible so SSE is not worth all that engineering. Thank you for answering. Didn’t know you had a personal channel I just subscribed 🎉
@ReactTipsWithBrooks
@ReactTipsWithBrooks 9 месяцев назад
Thanks @@yarapolana! I'm not super active on it at the moment, hopefully will get back to it more at some point
Далее
Cookies in Remix
13:19
Просмотров 10 тыс.
Дежавю, прескевю и жамевю!
00:59
Просмотров 568 тыс.
Searching IndexedDB in Remix
18:22
Просмотров 7 тыс.
Remix Dev Tools (feat. Alem Tuzlak)
1:43:51
Просмотров 2,8 тыс.
Decrease Next.js Docker Image Size 15x
5:36
Просмотров 18 тыс.
Roadmap Planning #12
1:07:31
Просмотров 4,5 тыс.
Session cookies in Remix
24:57
Просмотров 8 тыс.
Roadmap Planning #9
1:01:11
Просмотров 3,6 тыс.
From React To HTMX
40:01
Просмотров 327 тыс.
Prefetching Links in Remix
10:29
Просмотров 6 тыс.
Build a retro gaming app - Web Dev Challenge S1E2
27:29