Published on www.youtube.com
others / www.youtube.com2022-01-11

How to Debug Remix loaders and actions in VS Code

This video shows how to configure VS Code to debug your Remix loaders and actions. NOTE: You can now use the `debugger` statement instead of the external `debug()` function. I tried this before, but it didn't work. Not sure why it works now. You still can't set a breakpoint inside a route module, but you can add `debugger` statement and it will break there. You can then step through your code. I will be re-recording this video with this new info. Get the launch configuration here: https://rmx.fyi/debug

others / www.youtube.com2021-12-24

Remix Run - Introduction to HTTP Caching

HTTP Caching is a web fundamental every web developer should eventually learn. The quickest way to a slow website is to not understand caching and ofc, the best way to make your website fast is to take advantage of it. In this video we'll explain the basics of HTTP caching, how web browsers respond to it, and how CDNs take advantage of it, by building a bare-bones Node.js server and then quickly see how to specify caching headers in a Remix App.

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

"Working with Nested Routes and Parameterized Routes" by Aaron Saunders at #RemixConf πŸ’Ώ

We will walk through a simple demonstration of a remix application using nested routes and parameterized routes. The use of nested routes helps me with component design and separation when architecting an application. Parameterized routes / Dynamic Routes contain state information that can through the parameters that are defined on the route. This provides powerful flexibility when designing your app and app's components. Putting the two together in an simple solution to be a reference when you build something amazing. Speaker bio: Aaron is an Information Technology Strategist, Thought Leader, and Diversity and Inclusion Trailblazer - Founder & CEO of Clearly Innovative. He believes technology and in his case coding is an enabler and an equalizer. Aaron has focused a large part of his career training and developing individuals who want to get into tech but cannot find the opening; through the apprenticeship program he ran at Clearly Innovative, teaching web and mobile development at Howard University, and the free technical videos on his Youtube Channel he just want to help others get a seat at the table of tech and innovation. Learn more at https://remix.run/conf/2022/speakers/aaron-k-saunders

others / www.youtube.com2022-03-15

Remix Authentication Using Remix-Auth Package

Remix Authentication Using Remix-Auth Package #remix #remixrun #reactjs This is a walkthrough of a sample application using the remix-auth package which is a passport-like framework for simplifying authentication of your remix application using specific packaged strategies. In this example, I am using the Form Strategy to show a simple login flow Remix Playlist - https://buff.ly/3GuKVPS ------------------------------------------------------------------------------ πŸ’° Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Chapters --------------- 00:00 - Intro, What is Remix Auth 01:20 - Sample App Flow 03:10 - Walking through the code 04:10 - Checking if a user is authenticated, in protected pages 04:42 - Getting session information from the authenticator, in protected pages 05:30 - Logging out, session cleanup 06:10 - Getting Errors when logging In 06:50 - Logging In using the authenticator 08:10 - Setting Up The Authenticator 09:59 - Throwing Errors When Authenticating, Returning Successful Session Info 12:10 - Why this is awesome 13:10 - App Flow Review 16:01 - Redirecting from the login page if a session already exists 18:28 - Wrap Up Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Remix Auth - https://github.com/sergiodxa/remix-auth Remix Auth Form Strategy - https://github.com/sergiodxa/remix-auth-form Source Code - https://github.com/aaronksaunders/remix-auth-form-strategy Remix Playlist - https://buff.ly/3GuKVPS #reactremix #remixrun #authentication #remixauth #remixformstrategy #reactjs

others / www.youtube.com2022-01-31

Creating An Authentication Flow Using Remix and Supabase Tutorial

Creating An Authentication Flow Using Remix and Supabase Tutorial #remix #supabase #reactjs Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. Simple application showing authentication flow and session management using react remix and supabase See Part Two where we cover file upload and writing records to Supabase - https://youtu.be/ySQcGc9NICo Timestamps -------------------- 00:00 What's Covered In The Tutorial 02:15 Application Feature Walkthru 03:19 Looking At Code Starting With index.js, Covering Actions & Loaders Sessions 07:38 Managing Sessions in Authentication Session Using Remix 08:40 Logging In A User In Supabase and Creating the Session 12:18 Creating A New User Account In Supabase and Creating A Session 14:40 Running The Project 15:13 Using Remix Server 15:34 Configuring Environment With .env 16:16 Running Remix App and Verifying Data In Supabase 18:02 Final Thoughts ------------------------------------------------------------------------------ πŸ’° Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Supabase Documentation - https://supabase.com/ Source Code - https://github.com/aaronksaunders/supabase-remix-auth Supabase Playlist - https://youtu.be/MVy46MGmfOQ #reactremix #remixrun

others / www.youtube.com2022-06-07

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration #remix #aws #authentication Walkthrough a code sample of integrating AWS Amplify with a Remix Application. We show how to implement complete authentication flows to your application with minimal boilerplate. We then make a database query using the AWS Appsync API to retrieve data. This video does not walkthrough setting up an aws amplify environment, there are plenty of videos cover that already, this just shows how to using remix with that environment Chapters --------------- 00:00 Introduction 01:18 Quick Application Demo 03:28 Changes In Root.jsx 04:29 Changes to Index.jsx, redirecting when not authenticated 05:28 Login.jsx, using AWS Amplify Authenticator Component 06:50 Using a Fetcher to Submit Credential Tokens to Create Session Cookie 07:47 In Session.Server.ts managing the session cookie 08:22 Loading Data Using AppSync API with credentials saved in Session Cookie 10:44 Using Client Side SDK to Get User Information 11:29 Signout using client SDK and clear server session information 12:14 Review Pattern Source Code -------------------- - https://github.com/aaronksaunders/amplify-remix-todos-1 Documentation Links ---------------------------------- Remix Cookie Package - https://remix.run/docs/en/v1/api/remix#cookies AWS Amplify Web Client SDK - https://docs.amplify.aws/cli/start/install/ AWS Amplify Node SDK - https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-nodejs.html AWS Amplify UI Components - https://ui.docs.amplify.aws/react/components/authenticator Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com

others / www.youtube.com2022-12-09

Remix Crash Course 2023 (React Framework)

Remix is an amazing React framework that vastly simplifies the process of building fullstack React web apps. With this crash course, you'll learn how Remix allows you to seamlessly blend frontend and backend code into each other. Besides crucial essentials like project setup, routing and styling you'll also learn how to fetch and submit data, and how to integrate backend code into your React application. πŸ‘‰ If you want to learn more about this awesome React framework, you can explore my full course "Remix - The Practical Guide": https://acad.link/remix (a huge discount will be applied automatically). πŸ‘‰ Learn more about React.js itself with my bestselling "React - The Complete Guide" course: https://acad.link/reactjs Code attachments: https://github.com/academind/remix-practical-guide-course-resources/tree/main/Code/02%20Essentials Join our Academind Community on Discord: https://academind.com/community Check out all our other courses: https://academind.com/courses ---------- β€’ Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts β€’ Follow @maxedapps and @academind_real on Twitter β€’ Follow @academind_real on Instagram: https://www.instagram.com/academind_real β€’ Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

others / www.youtube.com2022-05-19

Why you should lift component state up to the URL

"How can I sync component state with the URL?" This is one of the most common questions I see asked in the React community, and in this video we're going to learn why trying to synchronize state between your React app and the URL is a bad idea – and the right way to address this issue. - 0:00 – Intro - 2:04 – Implementing sorting in React - 17:06 – First attempt at shareable URLs: Synchronizing React state - 20:17 – Fundamental problem with first attempt - 21:43 – Second attempt at shareable URLS: Hoist state out of React - 29:13 – Outro Links: πŸ‘‰ Demo: https://2022-05-16-hoisting-state-to-url.vercel.app πŸ§‘β€πŸ’» Source on GitHub: https://github.com/samselikoff/2022-05-16-hoisting-state-to-url/blob/main/app/routes/index.jsx πŸ’… Table component from Tailwind UI: https://tailwindui.com/components/application-ui/lists/tables#component-7b5a46e74e475708d966ca31716f1771

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-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.com2021-12-24

Remix Run Speedrun - Pokemon

Is Remix Run more than just hype? Let’s find out by building out a multi-page Pokemon SPA to show you a bunch of the fundamentals: SSR data loading, Navigation, API Routes, page routes and parameters, and more. Code: https://github.com/jherr/remix-speedrun-pokemon Remix Quickstart: https://remix.run/docs/en/v1/tutorials/blog Remix Philosophy: https://remix.run/docs/en/v1/guides/philosophy πŸ‘‰ What's my theme? Night Wolf [black] πŸ‘‰ What's that font? Operator Mono πŸ‘‰ I'm a host on the React Round Up podcast: https://devchat.tv/podcasts/react-round-up/ πŸ‘‰ Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ πŸ‘‰ Discord server signup: https://discord.gg/ddMZFtTDa5 Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel. 00:00 Introduction 00:33 Setup 01:26 Tailwind setup 02:27 Layout configuration 04:12 Setting up Pokemon data 04:50 Creating the index page 06:42 Creating an API route 07:10 useFetcher and Forms 09:10 Implementing a Route 11:33 Adding Breadcrumbs 12:36 How Remix is different 13:15 Remix Actions 14:08 Outroduction #remix #remixRun

others / www.youtube.com2022-09-27

Build A Pet Management System With Remix, Prisma, and Postgres | Real World Database Application

Senior Developer Advocate Austin Gil lives in a neighborhood with many dogs but can never remember their names. In this new video series, Austin builds out an application to track all of his neighborhood pet friends using Remix, Prisma, and Postgres. Welcome to β€œNeighborhood Pet Manager!” Chapters: 0:00 - Introduction 1:11 - Overview of the project 3:58 - Project Setup 6:00 - Configuring Prisma 8:53 - Alternative to Configuring Prisma 10:00 - Another Alternative - Using SQLite 18:40 - Starting to Build the Application 20:48 - Outro & What’s Next New to Linode? Get started here with a $100 credit β†’ https://www.linode.com/akatube The code for this project is available here β†’ https://github.com/AustinGil/npm Learn more about PostgreSQL here β†’ https://www.linode.com/docs/guides/databases/postgresql/ Subscribe to get notified of new episodes as they come out β†’ https://www.youtube.com/linode?sub_confirmation=1 #Remix #Prisma #Postgres #Linode Product: Linode, Akamai, Databases, Austin Gil

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

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

Supabase Happy Hour #15 - Supabase File Storage in Remix

Supabase is an extremely powerful and cheap option for building your next big startup idea. In this series, Jon Meyers, Alaister Young and Tyler Shukert demonstrate how to build a SaaS product using Remix and Supabase πŸ’° This week we dive deep into Supabase File Storage and Remix. We build our own custom upload handler using the experimental `unstable_parseMultipartFormData`, `unstable_composeUploadHandlers` and `unstable_createMemoryUploadHandler` APIs, and define a relationship between our entries and their uploaded files, using the Array column type in PostgreSQL. 00:00 Starting soon 00:50 Introductions 03:17 Supabase Launch Week 10:49 Supabase Hackathon 23:43 Reviewing community PR 34:40 Uploading files in Remix Action 55:30 Array column type in PostgreSQL 01:03:26 Creating signed URLs for private files 01:32:38 Displaying signed URL images in UI 01:57:23 Social links 02:01:01 Thanks for watching GitHub Repo: https://github.com/dijonmusters/happy-days Wanna have a say in what we build? Join us live every Thursday 5pm PT / 8pm ET ⌚️ Follow the Supabase Happy Hour team πŸ™Œ 🦘 Jon Meyers: https://twitter.com/jonmeyers_io 🍣 Tyler Shukert: https://twitter.com/dshukertjr 🐨 Alaister: https://twitter.com/alaisteryoung Resources 🧠 Supabase Launch Week 5 - https://supabase.com/launch-week Supabase Hackathon - https://supabase.com/blog/launch-week-5-hackathon Supabase Gold Cap - https://store.supabase.com/products/gold-supacap Supabase File Storage docs - https://supabase.com/docs/guides/storage Remix Upload Handler docs - https://remix.run/docs/en/v1/api/remix#unstable_parsemultipartformdata Dashibase's Lotion - https://lotion.dashibase.com/ Happy Chat πŸ’¬ Did you miss us building out a multi-platform realtime chat app with Supabase, Next.js and Flutter? Check out this playlist πŸ’― https://www.youtube.com/watch?v=sOSrPDtvvaQ&list=PL5S4mPUpp4OvEgxBhoVxXb5YS1ZAZih2l --- Learn more about Supabase πŸ‘‡ πŸ•Έ Website: https://supabase.com/ πŸŽ₯ YouTube Channel: https://www.youtube.com/c/supabase 🐦 Twitter: https://twitter.com/supabase/ πŸ‘Ύ Twitch: https://www.twitch.tv/supabase_tv πŸ“„ Docs: https://supabase.com/docs ---