Use Client Hints to Eliminate Content Layout Shift

Learn how to eliminate CLS using client hints in the Epic Stack.

Enhance User Experience with Real-Time File Upload Progress Updates in Remix | andrekoenig.de

Learn how to implement real-time file upload progress updates to enhance the user experience with Remix. Keep users informed about the progress of their file uploads in real-time for a smoother and more engaging experience.

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

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

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

The Remix Philosophy is not Just for Remix | Ken Snyder | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Ken_Snyder_remix_philosophy Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Remix Demo - Shopping List ➤ https://github.com/kensnyder/remix-demo-shopping-list Chapters 0:00 intro 0:22 preamble 0:31 what we'll cover 0:48 about ken 1:27 why should you care? 2:02 let's create a real remix app 13:18 try it on github 13:27 outlet 14:20 more complex forms 16:29 philosophy: embrace server/client model 17:21 bundles 18:13 single page app 18:39 remix app 20:10 server & runtime adapters 20:41 official list 21:23 work with web foundations 21:43 standards 23:09 request, response 23:48 fetch loves requests & response 24:26 headers 25:28 url search params 26:13 traditional react components 27:11 more traditional react page 27:46 ...or just use remix 28:07 work without js 30:11 demo without js 31:15 roadmap and future flags 31:43 roadmap highlights 32:47 future flags 34:08 applying the philosophy outside remix 35:11 we chose a new mindset 36:14 hello shoreline 36:26 thank you

Learn Remix. Create Better Websites. Get Hired. | Zero To Mastery

Learn Remix from scratch. Take your coding skills & career to the next level by building better websites with the hottest web framework based on React.

Redirecting from a resource route

Use redirect routes to redirect users to the right place. Implement dynamic next/previous buttons. Send users back to onboarding or login pages.

Remix v2.2 Leverages New Core Netlify Primitives

Hosting your Remix sites and applications on Netlify just got even better thanks to a number of new capabilities in our core platform and updated integrations which unleash the features in the latest version of Remix. Learn how you can use advanced cache control, streaming, custom local dev servers, and more.

Remix 🚚 Vite: Migrating Remix apps to Vite ⚡️

Vite announcement blog post 👉 https://remix.run/blog/remix-heart-vite Migration guide 👉 https://remix.run/docs/en/dev/future/vite Vite announcement discussion 👉 https://www.youtube.com/watch?v=qyo5of7EDjY 0:00 - Migrating the default template 2:19 - Migrating the Express template 5:11 - Migrating the Indie Stack

Upload Images: Supabase & Remix Integration

Effortlessly upload images using Supabase and Remix; set up, create client-side uploader, and manage server-side uploads with this guide

Discover Vite Remix Exploration

Introducing Remix v2.2.0: lightning-fast Vite integration, plugins, and better developer experience. Elevate projects and discover new potential!

Remix com serverless

Nessa postagem vamos aprender como fazer o deploy de uma aplicação Remix no serverless.

Ship an app with Remix

Learn this popular React framework by building and deploying your own Work Journal app.

Remix ❤️ Vite: Introducing the new Remix Vite Plugin

Try it out the new plugin for yourself using a minimal server npx create-remix@latest --template remix-run/remix/templates/unstable-vite Or a custom Express server npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express Learn more at https://remix.run/docs/future/vite 00:18 Initialize the project 00:39 HMR + HDR 03:08 MDX routes 05:29 Importing SVGs 07:36 Conclusion

Remix ❤️ Vite

Today we’re announcing that unstable support for Vite is available in Remix v2.2.0!

jjhiggz/elysia-remix-demo

I think this demo shows why elysia and remix are actually a pretty nice technological matchup

Integration testing Remix apps with Vitest, Typescript & Docker

Master integration testing for Remix apps using Vitest, TypeScript, Docker, and real databases, with adaptable techniques for any JS app like Next.js

I'll take you through the Remix tutorial - Code Autopilot

The tutorial says 30m, but it took me about 80m, not including editing time. #remix #react * * * Nikos Katsikanis LTD Director/Producer: Visit https://nikoskatsikanis.com for more information. Check out "The Nikos Show" on my main channel: https://www.youtube.com/@NikosKatsikanis

Why I Won't Use Next.js

From the perspective of web standards to concerns about increasing complexity, Kent C. Dodds shares his opinions on why he won't use Next.js.

How to Upload Images in a Remix Application by sergiodxa

The blog of sergiodxa

Containerizing and Deploying a Production Remix App | Cycle.io | The LowOps Container Orchestration Platform

Containerizing and deploying a production Remix application on the LowOps platform Cycle.

Creating a multitenant SaaS service with Turso, Remix, and Drizzle - Turso Blog

Building a multitenant SaaS website where each user gets their own Turso database by leveraging Turso’s numerous database offering.

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

Embedding Remix in Directus

In this mad-science experiment, we combine the Directus CMS with the Remix framework in a single package that enjoys the features of both.

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

Server-side pagination with Remix

Use query parameters to implement server-side pagination with Remix. Create a rolling pagination component that shows the current page along with a few pages before and after it, like Google Search.

btomaj/shopify-app-template-remix-testing

Remix Love: Reasons and Passion

Remix.run revolutionizes web development with simplicity, flexibility, and seamless integration, improving project setup, deployment, and migration

How to Redirect with Search Param in Remix by sergiodxa

The blog of sergiodxa

How to Access the Loader Data in Remix by sergiodxa

The blog of sergiodxa

Remix Austin Meetup - 10/04/23

This Remix Austin meetup took place at the H-E-B Digital & Favor Eastside Tech Hub in Austin, TX on October 4th. We had a great speaker! remixaustin.com repo: https://github.com/remix-austin/remixaustin-com Strapi Remix Starter: https://github.com/PaulBratslavsky/strapi-remix-starter 01:49 Brooks Lybrand - Upgrading remixaustin.com to v2 28:55 Paul Bratslavsky - How I use Remix and Strapi to Prototype Ideas Fast 46:22 Announcements Upgrading remixaustin.com to v2 — Brooks Lybrand Remix v2 recently launched! Let's walk through what an upgrade looks like by upgrading our very own website How I use Remix and Strapi to Prototype Ideas Fast — Paul Bratslavsky I have many ideas for Saas products. They are all always bad, but I still need to try them out. Knowing this about myself, I wanted to figure out the quickest way to go from 0 to 1. In this talk, I will share how I use Strapi ( headless CMS ) with Remix. - Some of the benefits - Prototype fast - Separate content from the presentation layer - Developers and content managers can work in parallel - Small team or tight schedule - Project budget - Need a pre-build admin to manage content - Lots of content to manage I will showcase some code examples of Remix projects with Strapi and how you can go from 0 to 1. There are many great Remix stacks out there, and in this talk I will be sharing mine. Want to attend future Remix Austin meetups? Join our group to be notified of future events: https://www.meetup.com/remix-austin

Hydrogen: Shopify’s headless commerce framework

Build performant ecommerce faster with Shopify’s React-based framework for developing custom storefronts. Built-in Oxygen hosting makes deployment easy.

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.

Accessible, Typesafe, Progressively Enhanced Modern Web Forms

Learn how to use modern tools that offer the best user and developer experience for web forms.

Level Up Your React Game with Remix, Prisma, & Supabase Postgres DB

Ready to supercharge your React app development with Remix? Learn how to create a server-rendered app with the Remix Stacks, Prisma, and Supabase.

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

Build a server-side filter UI with Remix

Create a filter bar that stores its state in the URL. Use the OData query string format to parse and serialize the filters. Create a custom hook to manage the filter state.

How to Abort Async Calls Inside Remix Loaders and Actions by sergiodxa

The blog of sergiodxa

Transforming Form Data into Sessions: A Deep Dive into Zod and Conform

Learn how to use Zod and Conform to validate and transform form data into sessions

Global Types for Typed Remix Apps

Optimize Remix.run apps with global types for smooth version transitions, runtime changes, and easy updates using a single declaration file

URL based database filtering with OData

Use OData to create a flexible query language for your database. Give your users pre-made queries or let them construct their own.

sergiodxa/remix-on-bun

Remix v2

The second major release of Remix is stable today.

I might be enjoying Remix more than Next

📘 T3 Stack Tutorial: https://1017897100294.gumroad.com/l/jipjfm 🤖 SaaS I'm Building: https://www.icongeneratorai.com/ ✂️ Background Cutter: https://www.backgroundcutter.com/ 💬 Discord: https://discord.gg/4kGbBaa 🔔 Newsletter: https://newsletter.webdevcody.com/ 📁 GitHub: https://github.com/webdevcody 📺 Twitch: https://www.twitch.tv/webdevcody 🤖 Website: https://webdevcody.com 🐦 Twitter: https://twitter.com/webdevcody

rolanday/remix-next-auth-unocss

Dark Mode with Remix: Key Lessons

When it comes to achieving the best user experience, Remix is undeniably the ideal tool. Here are some valuable insights I acquired in my pursuit of delivering exceptional user experiences through Dark Mode.

Remix meetup September 🍃, Thu, Sep 21, 2023, 5:00 PM | Meetup

Remix Copenhagen meetup returns in September with a series of talks, this time hosted by **raffle.ai 🔎** We will meet at 17:00 and the first talk will be "The 20 minute i

Handling type-safe toast notifications with zod in Remix applications

As development paradigms on the web are starting to shift from classic SPA's to the server/client model of Remix and Next app directory new challenges arise that weren't here before, one of those is handling toast notifications. In this article I wil...