Building Better Websites with Remix

Michael Jackson

Full Stack Components

Remix Fundamentals

Don't Solve Problems, Eliminate Them

Server-side Auth with Remix, Prisma, and the Web Platform

Kent C. Dodds

Avoiding CSRF with Remix 

Lee Rowlands

Back to the Roots With Remix

Alex Korzhikov

Your Personal Remix!

Facundo Giuliani

Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands

Simeon Griggs

How Remix and Prisma Make Frontend Devs Fullstack

Sabin Adams

Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals

Jeff Everhart

Localizing Your Remix Website

Harshil Agrawal

Let’s Remix to Localize Content!

Arisa Fukuzaki

Scaling Up with Remix and Micro Frontends

Adrien Baron

Remix Architecture Patterns

Andre Landgraf

React Remixed

Daniel Afonso

Remix: Embracing Web Standards to Redefine Modern Web Development

Building High-Performance Online Stores with Shopify Hydrogen and Remix

Alexandra Spalato

Remixing How We Give

Sergio Xalambri

Remix Persistence With DynamoDB

Brian LeRoux

Remixing a Symfony

Emily Kauffman

How to Solve Real-World Problems with Remix

Remix Flat Routes – An Evolution in Routing

Michael Carter

The New Frontier: E-Commerce at the Edge 

Michael Bromley

Demystifying Web Accessibility

Josefine Schaefer

Building a Realtime App with Remix and Supabase

Jon Meyers

Build and Launch a personal blog using Remix and Vercel

Robert Pop

Modern Approaches for Creating Extremely Fast Websites

Brad Westfall

Fire-side chat on Remix

Chance Strickland

Pavlik Kiselev

Javascript Optional: Modern React Applications That Work Without JS

Konstantin Lebedev

Remix Conf Europe

Remix Conf Europe 2022

Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.

This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.

Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example). In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

React Advanced

React Advanced Conference 2021

Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit Remote Edition

React Summit Remote Edition 2021

Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!

React Summit US

React Summit US 2023

Have you ever tried browsing your favorite websites with JS disabled in your browser? It can feel like cutting a lifeline for the internet. Instead of welcoming user-friendly interfaces you’re faced with a blank wall that says “please enable JavaScript“ in the center of it. But it doesn’t have to be that way. In this talk, we’ll explore techniques for building modern web applications that can remain functional in a JS-free environment, and provide a full experience when JS is turned on.

React Advanced Conference 2023

Discover the power of Remix, a groundbreaking full-stack framework that embraces web standards to redefine modern web development.As developers grapple with complex tools and frameworks, creating performant and maintainable applications becomes increasingly challenging.What if there's a solution that leverages core web principles to streamline development? Enter RemixIn this talk, learn how Remix harnesses web standards, such as URLs, Fetch API, HTML, and HTTP caching, to elevate developer and user experiences, ultimately empowering you to become a better developer!

React Summit

React Summit 2023

In this talk is focused on performance-optimizations and standards-based approaches to achieving the fastest version of your site that you can have. We'll also talk about modern tooling and frameworks like Remix which help make your site fast with very little effort.

React Day Berlin

React Day Berlin 2022

Have you ever wished to have a flexible approach to localize your content to scale easily? Join my talk, and I'll show you multiple strategies to translate and localize your content with Remix. I'll share with you flexible dynamic route options from Remix to generate localized content in a practical way, including a headless approach demo and how to scale your solution in the future. Let’s “Remix” to localize your content!

Remix is the best React framework for working with the second most important feature of the web: forms. (Anchors are more important.) But building forms is the fun part: the tricky part is what happens when a web consumer submits a form! Not the client side validation logic but the brass tacks backend logic for creating, reading, updating, destroying, and listing records in a durable database (CRUDL). Databases can be intimidating. Which one to choose? What are the tradeoffs? How do I model data for fast queries? In this talk, we'll learn about the incredibly powerful AWS DynamoDB. Dynamo promises single-digit millisecond latency no matter how much data you have stored, scaling is completely transparent, and it comes with a generous free tier. Dynamo is a different level of database but it does not have to be intimidating.

React and the JavaScript ecosystem seems to be constantly changing. Wherever we look, there are new libraries and frameworks. These new tools always lead to learning concepts that are often non-transferable knowledge. What if I told you that by learning standard web APIs, relearning the web, and getting a bunch of transferable knowledge, you can also start using a fantastic new addition to the React ecosystem: Remix!

A review of how we're using Remix at Daffy.org to change the way people give to charities. We'll talk about why we decided to use Remix, how we've used it and migrated from our previous frontend application and some patterns and libraries we have developed internally.

Here and there, people talk about "Personalization". Content creators, marketers, designers, and product owners evaluate the possibilities and alternatives to handle custom scenarios while offering powerful experiences to the users. And we, the developers, have some ways to help with that. Let's talk about personalization, the benefits, the challenges, and how we can manage and offer personalized experiences in our Remix projects.

In this talk I'll explore the evolution of e-commerce infrastructure from traditional co-located servers to the new frontier of serverless and edge computing, and how modern developer tools like Remix and Vendure fit in.

In late 2020, I ran a Lighthouse test on a simple content page on Harvie, our farm management platform and Symfony app, and received a performance score of 31/100. The JavaScript bundle, the API requests, the database lookups, even with minimal UI to render, had a baseline score in the thirties! Along with customer feedback, this helped to catalyze a renewed commitment to performance at Harvie. Through numerous discussions, we walked through each step of page load, from networking to rendering, and identified where we could improve. After a year of rewrites and upgrades, our remaining detriment to overall performance was our frontend. We had been converting our Symfony twig templates into React SPA components and fell into the common problem of creating "request waterfalls", while our user had to stare at a loading screen. We needed a change, and for us, that was Remix. In this talk, I'll walk you through our team's journey with performance and how Remix has become a natural progression of that.

Accessibility is a decisive tool to make the internet a more inclusive place, it is absolutely crucial and despite the popular belief that only a small user group is affected, it benefits every single one of us. After a brief introduction, we will dive into practical tools to create more accessible websites and test for the most common web accessibility issues. Let's make the web more inclusive, one page at a time!

Remix gives developers the power to write their frontend and backend code in one unified location and language, which drops the fullstack barrier significantly for frontend devs and newer developers. The remaining piece, however, is the database. Throw Prisma into the mix and you've got a powerful fullstack experience with a very low learning curve. In this talk, we'll take a look at the amazing developer experience you get when you combine the two.

Remix provides amazing flexibility and can be deployed anywhere where JavaScript is running. But how does Remix fit into the bigger application landscape of an organization? Remix provides great utility, but how to best take advantage of it? What things should be handled inside of Remix, and what things are better off done elsewhere? Should we use the express adapter to add a WebSocket server or should that be a standalone microservice? How will enterprise organizations integrate Remix into their current stacks? Let’s talk architecture patterns! In this talk, I want to share my thoughts about how to best integrate Remix into a greater (enterprise) stack.

React Summit 2022

One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.

i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.

Remix 'Data Writes' go back to the basics of the web when it comes to form submissions. But therein lies a trap if you're not careful - Cross site request forgery (CSRF) can rear its head. In this session we'll explore what CSRF is. How it can be exploited and what you can do to make sure your Remix application isn't vulnerable.

Node Congress

Node Congress 2022

In this talk, we'll get a live coded demo of building custom hand-rolled authentication. When you have the right tools (and we do), authentication can be quite simple and secure. This is more (and better) than just: "Install this library and you're good to go." When we're done we'll have our own auth code that can evolve with our ever-changing requirements without a need to learn some library-specific APIs. We'll be leveraging the Web Platform the way it was meant to be done to give us simple and secure server-side authentication for the web. You can check the slides for Kent's talk <a href="https://slides.com/kentcdodds/server-side-auth-with-remix-prisma-and-the-web-platform">here</a> as well as <a href="https://github.com/kentcdodds/node-congress-auth">demo code</a>. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it? Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- <a href="https://nodejs.org/en/download/" target="_blank">Preinstall Node.js, npm</a>- We prefer to use VSCode, but also cloud IDEs such as <a href="https://codesandbox.io/" target="_blank">codesandbox </a>(other IDEs are also ok)

- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others

In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts. What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually. Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts

Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™? Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster? At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions

I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation

Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website. Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps

Supabase and Remix make building fullstack apps easy. In this workshop, we are going to learn how to use Supabase to implement authentication and authorization into a realtime Remix application. Join Jon Meyers as he steps through building this app from scratch and demonstrating how you can harness the power of relational databases!

#remix