Tutorials
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.com2024-02-14

Internationalizing Remix Vite apps: Adding i18n | Remix Done Right Pt. 3

Welcome back to the "Remix Done Right" series! In this episode, we'll delve into the world of internationalization (i18n) in Remix Vite projects. Join me as I show you how to seamlessly integrate i18n into your Remix applications. ๐Ÿ› ๏ธ What You'll Learn in Part 3: Setting Up i18n: Learn the intricacies of configuring internationalization in Remix Vite projects, ensuring smooth localization of your web apps. Language Switcher: Implement a language switcher to empower users to seamlessly toggle between different language options. Translating Content: Dive into translating content within your application, from static text to dynamic data, ensuring a fully localized user experience. ๐Ÿš€ Get Ready to Remix: Follow along and code with us as we lay the foundation for a globally accessible Remix application with robust internationalization support. Whether you're new to i18n or a seasoned developer, this tutorial is designed to be beginner-friendly yet packed with advanced insights. ๐Ÿ”— Resources and Links: GitHub Repo: https://github.com/AlemTuzlak/remix-ecommerce Remix Documentation: https://remix.run/docs/en/main Vite Documentation: https://vitejs.dev/ ๐Ÿ‘ Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. ๐Ÿ“Œ Stay Connected: Twitter: https://twitter.com/AlemTuzlak59192 GitHub: https://github.com/AlemTuzlak โฑ๏ธ Timestamps: 00:00 - Intro 00:39 - Basic setup and overview 01:21 - Revealing entry files 02:00 - entry.client setup 02:20 - Adding everything we need 03:26 - Adding our first language file 04:06 - Adding resources file 05:45 - Modifying entry.server 08:02 - Modifying the root.tsx file 10:35 - Adding our first translation 10:46 - Fixing a Vite specific error with remix-i18n 11:14 - Our first demo 11:50 - Adding another language 12:37 - Making our resources type-safe 15:22 - Adding a language switcher 15:44 - Final demo 16:17 - Outro ๐Ÿ”– Tags: Remix framework, Vite, Remix Vite, internationalization, i18n, web development, frontend development, Remix tutorial, coding tutorial, i18n tutorial, Remix Vite tutorial, web app localization, i18n setup, language switcher, translating content, developer tools, open source, coding community.

others / www.youtube.com2024-02-05

Project Setup with Remix and Vite | Remix Done Right: Part 1

Remix Done Right Series - Part 1: Project Setup with Remix and Vite Welcome to the first installment of our "Remix Done Right" series! In this episode, we dive into the essential steps of setting up the foundation for our Remix app using Vite. Get ready to embark on a journey of creativity and coding as we create a powerful remix application from scratch. ๐Ÿ› ๏ธ What You'll Learn in Part 1: Project Setup: We guide you through the process of setting up a basic project structure using Remix and Vite, ensuring a solid foundation for your app. Remix Development Tools Installation: Learn how to install and configure Remix development tools to streamline your workflow and enhance the development experience. Plugin Integration: Discover the power of plugins as we add some essential ones to supercharge your Remix app development. Tailwindcss: Learn how to install tailwindcss in Remix and use it to style your projects. ๐Ÿš€ Get Ready to Remix: Follow along and code with me as we lay the groundwork for an exciting and feature-rich Remix application. Whether you're a seasoned developer or just starting, this series is designed to be beginner-friendly and packed with valuable insights. ๐Ÿ”— Resources and Links: Remix Documentation: https://remix.run/docs/en/main Vite Documentation: https://vitejs.dev/ Remix Development Tools: https://github.com/Code-Forge-Net/Remix-Dev-Tools ๐Ÿ‘ Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. ๐Ÿ“Œ Stay Connected: Twitter: https://twitter.com/AlemTuzlak59192 GitHub: https://github.com/AlemTuzlak โฑ๏ธ Timestamps: 00:00 - Intro 01:23 - Installing a fresh Remix.run project 01:52 - Remix Vite vs old Remix bundler rant 04:12 - Initialing the project 05:02 - Going over what we initialized 05:33 - Modifing our Vite config & adding remix-development-tools 06:54 - tsconfig.json overview 08:49 - Looking at our application with remix dev tools 09:31 - Adding tailwindcss to the project 12:08 - Overview of app with tailwind 12:29 - Adding remix dev tools plugins 14:32 - Our first plugin overview 15:40 - Adding the icons plugin 16:58 - Outro & info on the part 2

others / www.youtube.com2024-01-08

View transitions with 1 line of code in Remix!?

In this video we go over view transitions in Remix.run, how they work, what you can do with them and we go in depth on granular image transitions between pages. The github repo for the video project: https://github.com/AlemTuzlak/remix-view-transition-pokemon If you wish to support the channel consider subscribing for more content. Twitter: https://twitter.com/AlemTuzlak59192 Github: https://github.com/AlemTuzlak Blog: https://alemtuzlak.hashnode.dev/ Timeline: 00:00 - Intro 00:22 - View transition demo 01:45 - View transitions API in depth explanation 05:01 - Project setup for view transitions in Remix 06:10 - View transitions in 1 LOC 07:52 - Main page with view transitions 08:39 - Granular image transitions with custom names 10:00 - How do granular transitions work in Remix 13:32 - Viewing our granular view transitions 14:25 - Even more granular transitions!! 17:07 - Final demo 17:47 - Outro

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

Setting Up Remix JS with Strapi Headless CMS: Quick Start Guide

Setting Up Remix JS with Strapi Headless CMS: Quick Start Guide In this video, we won't be starting from scratch. Instead, we're diving straight into a finished project from a repository. I'll show you how easy it is to get started with Remix JS and Strapi Headless CMS to jump-start your web development project. So if you are looking for a Free completed web site, give this repo a try. ๐Ÿ” What's Inside: How to pull a project from a repository. Step-by-step guide to get the project up and running on your system. Overview of the project's main features. Why Try This? ๐Ÿ•’ Save time with a ready-made solution. ๐Ÿ”ง Get a feel for Remix and Strapi by exploring a completed project. ๐Ÿ“š Learn without the hassle of setting things up from the beginning. This video is based on Paul's project. We'll go through a Remix and Strapi combination, giving you a clear idea of how to use and tweak it for your own projects. ๐Ÿ“ Links & Resources: Project Repo: https://github.com/PaulBratslavsky/strapi-remix-starter About Strapi: https://strapi.io About Remix: https://remix.run ๐Ÿ—ฃ If this video helps you out or if you've got questions, drop a comment below! If you find this useful, give it a thumbs up ๐Ÿ‘ and don't forget to SUBSCRIBE for more. Let's make web projects easier together! --------------------------------------------------------------------------------------------------------------------- Check out my other videos. --------------------------------------------------------------------------------------------------------------------- Want to see how I use ChatGPT to study? Check out this video. https://www.youtube.com/watch?v=BxRoPAYMDG8 Javascript vs React how soon should you learn it? https://www.youtube.com/watch?v=w8NCk4qMAAs Check out my story and how I got hired? https://www.youtube.com/watch?v=61P0yKsU8yw Check out my first cringe video here. This was one of my first videos. https://www.youtube.com/watch?v=DjYz8-UwS4o

others / www.youtube.com2023-10-05

Upload e Crop de Imagens com Remix JS e Easy Crop. Uso do Shadcn UI Bun com gerenciado de pacotes.

GitHub Repo: https://github.com/RemixJS-Brasil/remix-upload-cropimage Neste vรญdeo, mergulhamos em uma jornada de desenvolvimento web emocionante, onde exploramos como realizar o upload e o recorte de imagens com Remix JS e a eficiente biblioteca React Easy Crop. Alรฉm disso, vamos dar um toque visual de classe ao nosso projeto, utilizando os componentes do elegante Shadcn UI e otimizar nosso fluxo de trabalho com o gerenciamento de pacotes Bun. Prepare-se para aprender a criar uma experiรชncia de usuรกrio excepcional enquanto aprimoramos nossas habilidades de desenvolvimento web.

others / www.youtube.com2023-09-26

Remix v2 Routes Upgrade

This video is walkthrough of a few strategies you can take to migrate from the Remix v1 to v2 route file naming convention - Migration doc: https://remix.run/docs/en/main/start/v2#file-system-route-convention - @remix-run/v1-route-convention: https://www.npmjs.com/package/@remix-run/v1-route-convention - Plopix script: https://gist.github.com/Plopix/58fc3f3be202d9915c466e71077d36a2 - kiliman's flat routes library also has a migration script: https://github.com/kiliman/remix-flat-routes#-migrating-existing-routes - Simple bash script demonstrated in this video: https://gist.github.com/brookslybrand/53ecbcbad0fb7735aa763106536d4ed2