Official
others / www.youtube.com2024-01-01

Optimistic Drag and Drop

Tying all of the previous Trellix Singles together, this videos shows how you can build something as complex as optimistic Drag and Drop with the simple primitives of Remix. Explore the full code here πŸ‘‰ COMING SOON 00:00 - Overview 00:46 - Drag and Drop implementation 05:45 - UX before optimistic UI 06:52 - Board state implementation 07:45 - Adding optimistic drag and drop 11:42 - UX with optimistic UI 12:28 - Canceling fetches with fetcher keys Learn more at https://remix.run

others / www.youtube.com2024-01-01

Optimistic Add

Learn how to leverage useSubmit and useFetchers to handle the complex use case of optimistically updating multiple forms without a single useState or useEffect. Explore the full code here πŸ‘‰ COMING SOON 00:00 - Overview 02:14 - Before optimistic UI 04:16 - Using useSubmit 06:47 - Update data with pending items 09:45 - Get pending items with useFetchers 15:54 - Add pending items to data 17:50 - Demoing optimistic UI 18:26 - Auto scroll with flushSync 21:15 - Review Learn more at https://remix.run

others / www.youtube.com2024-01-01

Creating Records

This video brings everything together from the first 9 videos to allow authenticated users to create a new board and automatically see their new board once it's created. This is the loader, component, action trifecta that makes Remix so powerful. Explore the full code here πŸ‘‰ COMING SOON 00:00 - Overview 01:31 - Setting up a Remix Action 02:24 - Validating the form data 05:08 - Creating a new board 05:27 - Essential vs. incidental complexity Learn more at https://remix.run

others / www.youtube.com2023-12-19

Redirecting Logged in Users

Like protecting routes from unauthenticated users, sometimes you also want to redirect authenticated users away from other routes. This video shows you the best way to handle redirecting a users from the root of Trellix to the "home" route. Explore the full code here πŸ‘‰ COMING SOON 00:00 - Overview 00:19 - Redirecting from the root route (❌) 02:11 - Redirecting from the index route (βœ”οΈ) 03:44 - Demoing redirecting logged in users 04:44 - Remix in the future: middleware Learn more at https://remix.run

others / www.youtube.com2023-12-16

Cookies in Remix

A cookie is a small piece of information that your server sends someone in a HTTP response that their browser will send back on subsequent requests. In this Single we explore how to create, write, and read cookies to manage user authentication. Explore the full code here πŸ‘‰ COMING SOON 00:00 - Overview 00:39 - Scaffolding a createAccount function 03:20 - Creating a cookie 04:14 - Writing the cookie 05:30 - Cookie attributes explained 09:03 - Reading the cookie 11:22 - Review Learn more at https://remix.run

others / www.youtube.com2023-12-01

Remixing Toast Notifications (feat. Andre Landgraf)

Andre teaches Brooks how to build a toast notification system in Remix using Cookies. Full Stack Web Development with Remix πŸ‘‰ https://a.co/d/5BmioFi Repo (initial setup) πŸ‘‰ https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/15-advanced-session-management/bee-rich/solution Learn more about Andre πŸ‘‰ https://github.com/andrelandgraf 00:00 - Introductions 06:33 - Setting up the project 12:53 - Client-side toast notifications 19:37 - Server-side toast notifications 28:00 - Cookie-driven toast notifications (diagram) 37:15 - Cookie-driven toast notifications (code) 1:10:30 - Progressively enhanced toast notifications 1:15:15 - Concluding thoughts Learn more at https://remix.run

others / www.youtube.com2023-11-17

Server-Sent Events in Remix (feat. Moishi Netzer)

Moishi Netzer teaches Brooks how to implement server-sent events in Remix! Repo πŸ‘‰ https://github.com/moishinetzer/remix-live-loader Server-sent events docs πŸ‘‰ https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events Learn more about Moishi πŸ‘‰ https://github.com/moishinetzer 00:00 - Introductions 02:44 - Walkthrough of the app 08:50 - Setting up server-sent events 27:18 - Adding multiple listeners 39:14 - Live Chat 52:40 - Final thoughts Learn more at https://remix.run

others / www.youtube.com2023-11-22

Roadmap Planning #7

- Public roadmap πŸ‘‰ https://github.com/orgs/remix-run/projects/5/views/1 - RFCs πŸ‘‰ https://github.com/remix-run/remix/discussions/categories/official-rfcs - "Open Development" blog post πŸ‘‰ https://remix.run/blog/open-development 00:00 - Introduction and recap 01:27 - Bundle Shredding 🎸 for Lambda/Serverless Architecture 06:55 - RFC: React Elements and Promises as loader / action data 39:40 - Client Data 47:53 - Remix SPA Target 54:53 - Vite update (Q&A) 57:17 - unstable_parseMultipartFormData (Q&A) 1:00:15 - Middleware (Q&A) Learn more at https://remix.run

others / www.youtube.com2023-11-22

Remix Dev Tools (feat. Alem Tuzlak)

Alem teaches Brooks how to use Remix Forge and the Remix Dev Tools Remix Forge πŸ‘‰ https://marketplace.visualstudio.com/items?itemName=CodeForge.remix-forge Remix Dev Tools πŸ‘‰ https://github.com/Code-Forge-Net/Remix-Dev-Tools Learn more about/sponsor Alem πŸ‘‰ https://github.com/AlemTuzlak 00:00 - Introductions 03:55 - Setting up the project 06:43 - Remix Forge 20:51 - Setting up the Remix Dev Tools 33:37 - Exploring the "Settings" tab 41:47 - Exploring the "Routes" tab 52:13 - Exploring the "Active page" tab 1:11:04 - Exploring the "Errors" tab 1:24:17 - New Vite plugin 1:33:46 - Remix Dev Tools plugins 1:36:19 - Remix Dev Tools enhanced logging 1:41:44 - Final thoughts Learn more at https://remix.run