Built with typescript
others / www.youtube.com2024-03-15

Understanding the Steps of Migrating Your Remix App to Vite.js

Remix 2.7 introduced official Vite support, making it ideal to migrate our Remix Apps to Vite. In today's episode, we'll step by step migrate a base Remix App to Vite. 00:00 Introduction 00:14 Step 1: Setup Vite 00:40 Step 2: HMR & HDR 00:58 Step 3: TypeScript Integration 01:26 Step 4: Migrating Remix App Server 02:00 Step 5: Path Aliases 02:26 Step 6: Remove @remix-run/css-bundle 03:00 Step 7: Enabling TailwindCSS 03:24 App Migration (Remix + Vite)

others / www.youtube.com2023-05-17

"Web beyond the edge" by Igor Minar & Nevi Shah at #RemixConf 2023 💿

Edge computing is increasingly being adopted by web developers these days to improve UX and decrease latency of their applications. Cloudflare Workers, Deno Deploy, Netlify Edge Functions, and Vercel Edge Functions, all have made edge computing available to developers of full stack applications. With this adoption new architectural patterns and anti-patterns for building web applications have emerged. In this talk we’ll cover how developers can utilize edge computing to build full-stack applications and what are the strengths and weaknesses of this approach. We’ll also look into the future — beyond the edge, and explore how thinking of the network as the computer will fundamentally change the architecture of web applications in order to make building planet-scale applications accessible to everyone. Speaker Bio: Nevi Shah is a Product Manager at Cloudflare. She works on Cloudflare Pages and Cloudflare D1. https://remix.run/conf/2023/speakers/nevi-shah Speaker Bio: Igor Minar is a software engineer at Cloudflare and co-creator of AngularJS, Angular, and Karma. He has spent the last 15 years helping developers by building infrastructure, APIs, and tooling for the Web. Igor built some of the biggest web development communities during his time at Google. He collaborated with the TypeScript team to bring type-checking and better tooling to developers, as well as browser vendors to design and improve web APIs. He has also worked to establish pragmatic best practices in the web ecosystem by creating conventional commits and many evergreen libraries. https://remix.run/conf/2023/speakers/igor-minar

others / www.youtube.com2023-05-17

"Next gen HMR in Remix" by Pedro Cattori at #RemixConf 2023 💿

How does Remix update your browser in dev? It's more than just watch mode, live reload, or even HMR. Let's dive into how Remix offers a world-class dev experience. Speaker Bio: Pedro Cattori is a software engineer on the Remix team at Shopify. He lives in Washington, D.C. He works on the Remix compiler, dev server, TypeScript integration, and writing algorithms that the rest of the team pretends to understand and prefers to never look at. https://remix.run/conf/2023/speakers/pedro-cattori

others / www.youtube.com2023-05-17

"When things go wrong, get errors right!" by Glenn Reyes at #RemixConf 2023 💿

When we build web applications, pretty much always the fun part of it is the happy path: That everything works! But what if something goes wrong? It’s so easy to oversee all the error instances which naturally leads to not covering them well enough. Let’s discuss challenges about errors and explore patterns and tools that can help us make better user experiences when things go wrong. Speaker Bio: Glenn is a software engineer, tech speaker and workshop instructor with a passion for building innovative products and beautiful user interfaces using cutting edge web technologies and open source software such as React, GraphQL and TypeScript. Aside from tech, you’ll find him either traveling, on a road bike or playing the guitar. https://remix.run/conf/2023/speakers/glenn-reyes

others / www.youtube.com2023-01-19

Call Remix Loaders on demand with useRevalidator

Remix Loaders are a great way to fetch data server-side before rendering the page. As of v1.10.0, you can use the useRevalidator hook to call these loaders whenever you want. In this video, Jon Meyers demonstrates how this can be paired with Supabase Auth and the onAuthStateChange hook to keep the UI in sync with the user's signed in state. GitHub repo: https://github.com/dijonmusters/remix-revalidation-on-demand To learn more about building an app with Remix and Supabase, check out this entirely free egghead course: https://egghead.io/courses/build-a-realtime-chat-app-with-remix-and-supabase-d36e2618?af=9qsk0a In this course we build a realtime chat application and learn about: 🍪 managing sessions with cookies using the Supabase Auth Helpers 🏢 fetching data server-side 🧙‍♀️ generating TypeScript definitions with the Supabase CLI ⏱️ merging realtime updates with loader data 00:00 Introduction 01:10 Creating Remix app 02:07 Adding a loader function 03:00 Empty action hack 05:33 Calling active loaders with useRevalidator 06:23 Creating a Supabase project 08:25 Instantiating a Supabase client 10:55 Implementing Supabase Auth 13:37 Revalidating data onAuthStateChange 15:10 Summary Other helpful resources 📜 Blog article: https://jonmeyers.io/blog/call-remix-loaders-on-demand-with-userevalidate 👇 Get more from Jon 👇 Twitter: https://twitter.com/jonmeyers_io Blog: https://jonmeyers.io/blog

others / egghead.io2022-12-16

Build a Realtime Chat App with Remix and Supabase

Supabase is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes. We will learn about: loaders and actions in Remix querying and mutating data with Supabase authentication with GitHub authorization with RLS merging client and server state with realtime events deploying a Remix app to Vercel This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

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!

Show more