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-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

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-10-18

v2.1.0 Remix Experimental View Transitions API

Brooks shows off the new experimental View Transition API in Remix v2.1.0 Release Notes πŸ‘‰ https://github.com/remix-run/remix/releases/tag/remix%402.1.0 unstable_viewTransition API πŸ‘‰ https://remix.run/docs/2.1.0/components/link#unstable_viewtransition Matt Brophy's React Router Demo πŸ‘‰ https://github.com/brophdawg11/react-router-records Chapters 00:00 Introduction 02:41 Remix.run blog example 05:29 Transitioning specific elements 13:24 Accessibility and prefers-reduced-motion Learn more at https://remix.run

others / podcasts.google.com2023-01-24

PodRocket - A web development podcast from LogRocket - Remix in 2023 with Michael Jackson

In this episode, Michael Jackson joins us to talk about Remix joining Shopify! We cover topics like Hydrogen (the Shopify stack for headless commerce), the future of Remix, and more! Links https://remix.run https://github.com/remix-run https://twitter.com/remixrun https://twitter.com/mjackson https://discord.com/invite/xwx7mMzVkA https://www.youtube.com/remixrun https://www.linkedin.com/in/mjijackson https://podrocket.logrocket.com/remix-run Tell us what you think of PodRocket We want to hear from you! We want to know what you love and hate about the podcast. What do you want to hear more about? Who do you want to see on the show? Our producers want to know, and if you talk with us, we’ll send you a $25 gift card! If you’re interested, schedule a call with us (https://podrocket.logrocket.com/contact-us) or you can email producer Kate Trahan at kate@logrocket.com (mailto:kate@logrocket.com) Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers! What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Michael Jackson .

others / www.youtube.com2022-08-04

Kent C. Dodds @ ReactNext 22 - Stream Away the Wait

ReactNext 2022 www.react-next.com Israel's Annual React & React-Native conference Powered by EventHandler ----------------------------------------- Stream Away the Wait: When implementing the design of a user interface, we often finish before remembering that not everyone's running the app's services locally on their device. There's going to be network latency, long running database queries, and large datasets that can slow down the experience. We can and should do everything we can to speed things up, but not all of this is within our control. This means we need to start thinking about pending states. But pending UI is terrible. In this talk, Kent will walk us through building a pending experience that is quite delightful. Ultimately taking advantage of React 18's new streaming APIs and a soon-to-be-released API in Remix to give a top-notch user and developer experience. Prepare to have your mind blown. ----------------------------------------- Kent C. Dodds: Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and Remix. ----------------------------------------- #javascript #reactjs #programming #software #development #softwaredevelopment

others / www.youtube.com2022-06-06

"Remix Conf 2022 Keynote" by Michael Jackson at #RemixConf πŸ’Ώ

Michael will kick the inaugural Remix Conference off! Speaker bio: Michael Jackson is the CEO and co-creator/co-founder of Remix. He is the co-author of React Router and a prolific contributor to open source. He is the creator of unpkg.com and gets a kick out of discussing distributed system design as much as he enjoys front-end architecture. Michael lives in Carlsbad, CA with his wife, two boys, and two girls. Learn more at https://remix.run/conf/2022/speakers/michael-jackson

others / www.youtube.com2022-06-01

When To Fetch: Remixing React Router - Ryan Florence

Recorded live at Reactathon 2022. Learn more at https://reactathon.com When To Fetch: Remixing React Router We've learned that fetching in components is the quickest way to the worst UX. But it's not just the UX that suffers, the developer experience of fetching in components creates a lot of incidental complexity too: data fetching, data mutations, busy spinners, optimistic UI, error handling, form state, network race conditions, user event interruptions, and all the code that holds it together gets pretty difficult! As we've built Remix, we've gotten a lot of practice leaning on React Router's nested route abstraction to solve all of these problems all at once. Now, millions of React Router apps in production can get the same benefits because we've moved the responsibility of knowing When To Fetch into React Router itself! About Ryan Florence Ryan is the co-founder of Remix, co-creator of React Router, and co-founder of React Training. Event production and post-production by EventLoop. Let's build your conference brand, or take it to the next level. info@eventloop.app

others / www.youtube.com2022-05-25

Shipping to the Edge: Kent C Dodds

Recorded live at Reactathon 2022. Learn more at https://reactathon.com Shipping to the Edge The landscape of the web has evolved drastically since the first website was published to the World Wide Web in 1991. Over the years, the pendulum has swung from servers rendering HTML to JavaScript-heavy clients and now it's swinging toward something more in the middle.What about the web today is enabling us to overcome the shortcomings of the web of the past? In this talk, we'll get a little peak into the history of each of these stages of the web and what that means for anyone building on the web platform in the future. About Kent C. Dodds Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and React. Event production and post-production by EventLoop. Let's build your conference brand, or take it to the next level. info@eventloop.app

others / www.youtube.com2022-05-24

CSS Approaches in Remix

Let's dive into different CSS approaches in Remix! We will look at styling your Remix application in three different ways while analyzing different implications. These considerations include performance, developer experience, and scalability. See how to leverage Remix and CSS to create amazing experiences for your users. Speaker Bio: I am currently a freelance full-stack developer with experience in developing JavaScript applications in a variety of frameworks. I am passionate about web development and have recently been building different projects using Remix. I am also getting a master's degree in information systems at BYU. Outside of development, my wife and I just had our first child. We enjoy playing board games and reading numerous (mainly fantasy) books. Follow Noah: https://twitter.com/jnoahjohnson Repo: https://github.com/jnoahjohnson/remix-css Learn more at https://remix.run

others / www.youtube.com2022-05-23

Remix Conf 2022

Edited videos available on this playlist: https://www.youtube.com/playlist?list=PLXoynULbYuEC36XutMMWEuTu9uuh171wx Learn more at https://remix.run/conf/2022 Chat at https://rmx.as/discord 00:00:00 Starting title 00:40:00 Michael Jackson keynote 01:10:00 Henri Helvetica on webpage test 01:35:00 Shaundai Person on remix as browser framework 01:54:45 Erik Rasmussen on state machines 02:45:15 Anthony Frehner on Remixing Hydrogen 02:59:50 Ryan Dahl on deno + remix 03:21:40 Nick Small on remix-three 03:29:20 Erick Tamayo on web vitals 03:38:00 Scott Smerchek on stale-while-revalidate 03:43:25 Lunch 05:55:00 Vic Vijavakumar on social good with low code 06:07:51 Ben Wishovich on remix + rust 06:15:10 Greg Brimble on Full Stack Fast: Data on the Edge 06:24:00 Arisa Fukuzaki on ui + ux 06:48:10 Daniel Weinmann on remix-forms 07:06:30 Jon Jensen on incremental remix 08:00:00 Sarah Dayan on search with algolia + remix 08:24:00 Dennis Beatty on switching to remix at neighbor 08:45:00 Closing Notes

others / www.youtube.com2022-05-23

Can I Build and Deploy a Remix Site in 5 Minutes? by Ian Sutherland

Can I build and deploy a Remix site in 5 minutes? Let's find out! In this talk I will attempt to build a basic Remix site with a couple of pages and deploy it to a cloud provider. Will I succeed in setting a web development record or fail spectacularly? Speaker Bio: Ian is a full stack software developer, open source maintainer and speaker. He's currently the head of Developer Experience at Neo Financial, the maintainer of Create React App and a member of the Node.js team. You can find him on Twitter and GitHub @iansu. Follow Ian: https://twitter.com/iansu Code: https://github.com/iansu/remix-fan-club Learn more at https://remix.run

others / egghead.io2022-05-20

Up and Running with Remix

What is Remix? > Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. > -- remix.run But that summary only scratches the surface. Remix has great mental models, is extremely fast, and has a plethora of components and features that will make your life easier and web apps perform better. And in this course, you'll be learning how to take full advantage of what Remix has to offer. You will learn by building a full-featured blog with a database, authentication, CRUD operations, user roles, and more! If you want to read more about why should give Remix a chance, give Kent's blog post, Why I Love Remix, a read! Check out this repo to see the project code for this course

others / www.youtube.com2022-05-19

How to Speak with Remix by Andre Landgraf

Remix is a full stack web framework but how "full stack" can we make it? Voice user interfaces have seen substantial growth in adoption and popularity over the past years. Unfortunately, there hasn't been much visible effort to apply the latest advancements in web development (frontend development) to the field of voice UIs. I created react-ssml-dom to apply the component-based approach to voice UIs. It was a fun project and I was able to create a small Google Assistant action using React to render SSML! Now, a few years later, Remix is out and has changed the way I develop for the web! What if we could use Remix to also render voice applications? Or full stack web and voice apps? Speaker Bio: Hey there! I am a Software Engineer from Germany with a background in Information Systems. I am currently doing my master's degree in Computer Science in Palo Alto, CA! I love to develop web and voice apps. Sometimes I also study for my degree. On the weekends, I hike, watch Marvel, or listen to Syntax.fm. Please find me on Twitter or the Remix Discord server and get in touch! Follow Andre: https://twitter.com/AndreLandgraf94 Learn more at https://remix.run

others / www.youtube.com2022-05-19

Purge Per Route by Brooks Lybrand

Love or hate Tailwind, one thing it gets right is only shipping the CSS _you_ use. However, you still have to ship your **entire** site's CSS, no matter how big it gets or what page the user is on. Love or hate Remix (wait, who hates Remix?), one thing it does best is only shipping the CSS each _page_ needs. Remix also removes stylesheets when you navigate away, which avoids clashing styles and class names. What if we could combine these two features? In this talk I will show you how to generate only the CSS _you_ use, while shipping no more CSS than each _page_ needs? Speaker bio: Hi, my name is Brooks Lybrand and I work as Web Engineer for the best grocery store in the world (okay, at least in Texas): H-E-B! I specialize in building proof of concepts, evaluating tools, and creating highly interactive, data-rich applications. I am passionate about exploring new ideas and technologies, discovering how they can better other's lives, and guiding people to these solutions. When I'm not coding, I love spending time with his wife and dogs, camping, playing board games, and pretending I know what I'm talking about when it comes to coffee and beer. Brooks Lybrand's Twitter: https://twitter.com/BrooksLybrand Repo: https://github.com/brookslybrand/purge-per-route Statechart representation of logic: https://stately.ai/registry/editor/105a41c2-1cd9-41a9-a27a-324c71bfb735

others / www.youtube.com2022-05-19

Migrating a Rails & React SPA to Remix by Diogo Biazus

Maintaining a stack with multiple programming languages can drastically increase the cognitive load of a team. Unifying the frontend and the backend under a single language has always been a tantalizing prospect. With Remix this becomes an achievable goal, however, migrating without a big rewrite is always challenging, while migrating with a big rewrite is often disastrous. This is the story of how we are planning a migration feature by feature, using an integrated authentication system that works on both our Rails backend and on the Remix server. We also disastrous leveraged resource routes to proxy the old application and integrate everything under the same domain, making the back and forth between legacy and rewritten features seamless. Speaker bio: Diogo Biazus has been a software developer since the late 90s. Since then, he has also worked as an open-source contributor, conference organizer, PostgreSQL instructor and consultant, systems integrator (yay, EDI!), "the DevOps guy", and team lead. He has contributed to PostgREST (https://github.com/PostgREST/postgrest) and published PostgreSQL tools such as postgres-websockets (https://github.com/diogob/postgres-websockets), postgres-copy (https://github.com/diogob/postgres-copy), and hasql-notifications (https://github.com/diogob/hasql-notifications). He now focuses on improving DX at Seasoned. Diogo Biazus' GitHub: https://github.com/diogob Repo: https://github.com/SeasonedSoftware/remix-migration