Oops, I accidentally made our website faster by switching to Remix
We migrated our site to a new hosting provider, and with it a new React framework. We expected the site to run a little slower. Our tests proved otherwise.
We migrated our site to a new hosting provider, and with it a new React framework. We expected the site to run a little slower. Our tests proved otherwise.
Curious about the future of React Router v7 and Remix.run? Watch this video for a detailed explanation of what's to come! Learn about the exciting updates and improvements in store for these popular tools. 🔗 Resources and Links: The article: https://remix.run/blog/merging-remix-and-react-router Remix package RFC: https://github.com/remix-run/remix/discussions/7823 Single-fetch RFC: https://github.com/remix-run/remix/discussions/7640 👍 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/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ⏱️ Timestamps: 00:00 - Intro 00:08 - Going over the announcement 01:22 - Why this makes sense in depth explanation 04:29 - Going through the rest of the article. 07:35 - Remix package RFC 10:45 - Remix Single Fetch RFC 14:47 - Remix future TL:DR 15:09 - The future of the packages and the great transition 17:15 - Outro 🔖 Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, Vite
Challenges, learnings, and scripts — still not done yet 😰
A case study on how Shopify rapidly built a web version of their popular iOS/Android app Shop with Remix
We go into what Remix.run is exactly, how it works under the hood and how it improves your DX and makes your users fall in love with your website. 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/ 00:00 - Introduction to Remix.run 02:08 - How does Remix operate on a server 06:30 - Server framework deep dive 09:08 - Browser framework overview 11:17 - Outro
Remix is a full-stack framework with seamless backend-frontend integration, fewer states, and web standards emphasis
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
Introducing Remix v2.2.0: lightning-fast Vite integration, plugins, and better developer experience. Elevate projects and discover new potential!
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.
This is an uncontroversial opinion for people using Remix, but it needs to be said: The loader API is the best thing about Remix. Some background: A loader is a custom defined function that is responsible for "loading" all of the data that is required to render a route. It's
Remix.run revolutionizes web development with simplicity, flexibility, and seamless integration, improving project setup, deployment, and migration
📘 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
Remix is a fantastic framework but it's not without its issues. Here are some of my struggles after building a few different projects with it.
Speaker Bio: Ryan Florence has been obsessed with UX since using an Intellivision. https://remix.run/conf/2023/speakers/ryan-florence Speaker Bio: Michael Jackson, the author or Remix, not the pop star. https://remix.run/conf/2023/speakers/michael-jackson Learn more at https://remix.run
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
I will discuss some of the things we've built at LinkedIn with Remix, why we chose it over other alternatives, our incremental migration story and how Remix is enabling us to ship faster & more ambitious web UIs for our users. Whether your an indie hacker, working at startup or large company, and are interested in moving to Remix, this talk is for you. Speaker Bio: Clifford Fajardo is a full-stack software engineer at LinkedIn where he works on infrastructure tools.He has worked at both startups and other large companies, including Salesforce. In his spare time you might find Clifford contributing to open source, hiking trails in the Bay Area, or eating at his favorite pizza shop: Bronco Billy's Pizza. He has a twin brother and is a proud Nicaraguan-American 🇳🇮 https://remix.run/conf/2023/speakers/clifford-fajardo
An exploration of how using MDX with Remix enhances the Markdown authoring experience, unlocks an ecosystem of tools to improve accessibility, and enables developers to craft more customized content experiences. This talk will walk through multiple ways MDX can be incorporated into a Remix site and provides examples of leveraging MDX to strengthen the usability and accessibility of content. Speaker Bio: Monica Powell is a software engineer who is passionate about making contributing to open-source more approachable, creating technology to elevate people, and building community. You can find her developing educational technology as a Senior Software Engineer at Newsela, teaching web development, and contributing to open-source projects. GitHub recognized her as an inaugural GitHub Star based on her involvement in the tech community. https://remix.run/conf/2023/speakers/monica-powell
Using Remix to create a stand alone API is simple, fast and really fun! In just a couple minutes you can stand up a super straight forward API. This can let folks dip their toe into the wonderful world of remix without rewriting their front end. Speaker Bio: Shane Walker is a self-taught developer with a passion for learning new things and watching them come to life. From his first “Hello World” app, he was hooked. He is invigorated by solving problems in code. https://remix.run/conf/2023/speakers/shane-walker
As any Remixologist will tell you, modern web apps are just pages/links/forms layered in spinners/latency/jank. If that's true, we should use Remix and web fundamentals everywhere to build better experiences! But what about highly interactive apps with streaming data and visualizations? Just how far should we push the envelope? Let's find out! In this talk, we'll implement a multi-user musical instrument with Remix, (ab)using things like: - Forms and FormData - Web Audio - Browser history - Progressive enhancement - Full stack components - Response and Server-sent events Speaker Bio: Jon Jensen is a Senior Software Engineer at Netflix working to improve the developer experience for other UI engineers. Previously he worked at Amazon and Instructure, working on all things software-y. In his spare time he's usually in the mountains, playing Minecraft with his kids, or following the Red Food Truck around Salt Lake City. https://remix.run/conf/2023/speakers/jon-jensen
Most of the time our API calls work, so why don’t assume that they’ll do and provide a seamless experience? Optimistic UI means to simulate a positive response from the server before receiving one. This talk will introduce examples of optimistic UIs, highlight their benefits, and provide guidance on incorporating them into our applications. Speaker Bio: Giovanni Benussi has been a full-stack developer for more than 12 years. He started working on Ruby on Rails, eventually working on new features, maintenance, and scalability for the framework. Nowadays he works primarily with React. https://remix.run/conf/2023/speakers/giovanni-benussi
The Remix Form and Action have drastically simplified our forms. While it's easy to validate form data on the server, people have always been searching for a good client-side form validation solution. What if we could use the platform to implement simple client-side validation without adding another dependency? In this talk, we'll explore how to utilize the Constraint Validation API to provide a modern form validation experience in Remix. Speaker Bio: Edmund Hung is a senior web developer from Hong Kong who works on the global online food-ordering and delivery platform, Delivery Hero. He maintains Remix Guide and is currently building Conform, a form validation library focusing on progressive enhancement. In his spare time, he enjoys cycling and gaming. https://remix.run/conf/2023/speakers/edmund-hung
Backstreet's back. Speaker Bio: Dan is a software engineer on the React team at Meta. https://remix.run/conf/2023/speakers/dan-abramov
Get advanced with `defer` and other Remix features to power a lag-free, web-based native app, without giving up Remix's data loading and mutations on the server. Chasing the dream of write-once/run-anywhere by wrapping your website in a native app shell? Scared that a great Remix website won't feel as snappy as the instant transitions of your old SPA? Fear not—by being smart with `defer` and leveraging the browser platform, you can power a spinner-free website and super-speedy native app from the same routes. Speaker Bio: Oscar Newman is a product and design-focused software engineer working on consumer healthcare experiences at Solv Health, where he has led a team-wide migration to Remix. He's passionate about consumer healthcare and building compelling user experiences. He's dabbled in design systems and front-end tooling, and is terrible at algorithms and most coding interviews. https://remix.run/conf/2023/speakers/oscar-newman
Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts. Speaker Bio: Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts. https://remix.run/conf/2023/speakers/arisa-fukuzaki Note: due to technical difficulties during Arisa's talk at the conference, Arisa was invited to run through her talk again later that evening. This video is that up-to-date version.
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial! Speaker Bio: Christopher Chedeau is the co-creator of React Native and Prettier, and the creator of React Conf, Excalidraw, and Yoga (the layout engine, not the one where you stretch a lot). https://remix.run/conf/2023/speakers/christopher-chedeau
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
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
Have you heard about our new Remix Stacks template the K-pop Stack? It combines Remix, Supabase, Tailwind, and more to give you a note creation app with auth to help jump start your own Remix creation. Check out how to make it your own and get it deployed to fast and free! Repo: https://github.com/netlify-templates/kpop-stack Blog Post: https://www.netlify.com/blog/deploy-your-remix-supabase-app-today!/
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.
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
Learn more at https://remix.run
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