#10: Galvanized
startled into sudden activity; stimulated.
Remix's new type-safety features galvanized developers into creating quality applications, faster.
Remix 1.6.5 Brings Type Safety Over the Wire
I'm very excited about this release. As much as I love zod and TypeScript, it felt like a chore to write interfaces or schemas for all actions and loaders. Of course, zod is still a great way to ensure forms and other inputs are correctly formatted. But when you use a type-safe API like Prisma for most of your data, this new feature really dries up your app's types. That is unless you are in the "explicitly type all the things" camp.
If you'd like to check out the technical considerations that went into this feature, there's a great write-up in the decisions folder of the Remix repo.
Documentation is a bit light at the moment, but the team is vigorously typing to update the examples in the documentation and the Remix Stacks.
Articles and Resources
A Look At Remix And The Differences With Next.js - If you're trying to explain Remix to people who use words like "SSG" and "ISR", this article by Facundo Giuliani explains Remix in a way they'll probably understand. Hopefully, in the future, we'll be able to talk about Remix without referencing other popular frameworks, but right now, we might as well take advantage of the "Next.js" keyword to trick people to use Remix.
Build a Movie Emoji Quiz App with Remix, Fauna, and Clerk - This tutorial is pretty self-descriptive! The team at Clerk showcases how you can build an app with their authentication platform alongside a modern database offering.
Call Kent Podcast - Kent hosts a unique podcast where he answers your questions, sometimes about Remix. Here are some Remix-related episodes to check out: Servers + Databases + Remix, Using GraphQL in Remix Loader Functions, Using Remix with a Custom Backend, and Isolate FE and BE apps vs Remix Full Stack (a follow up on the custom backend discussion)
Create a simple cookie with Remix - This article by Jon Meyers provides an overview of cookies in Remix with code examples.
Remix Streaming Docs - This bit of unreleased documentation in the deferred branch of Remix is an interesting read if you'd like to learn more about the upcoming streaming support. Also, Jacob put together a code demo of the upcoming deferred feature.
Featured Projects
fontme - MapleLeaf created a utility site that allows you to export Google Fonts to a folder with the .woff2 and CSS files. This allows you to easily vendor your fonts into your application which improves privacy and may even help the site load faster.
SST - SST, a framework extending the AWS CDK, has just added a RemixSite construct. This construct makes it easy to build and deploy a Remix app to AWS.
remix-monorepo - A very simple package that helps with configuring Remix to compile and watch changes that happen anywhere in a monorepo.
remix-superson - While Remix's new support for inferred types allows for end-to-end type-safety, it still relies on JSON. This means that your dates will become strings over the network. Kiliman shows how you can use superjson to rehydrate the JSON strings back into their original object.
remix-bossa-nova-stack - The Remix Stack with Clerk authentication, Supabase database, Chakra UI, testing, linting, and more.
chakra-remix-stack-blues-edge - Remix stack built on EdgeDB and styled in Chakra UI
remix-blocks - Ready-to-use Remix + Tailwind CSS routes and components.
conform - A form validation library built on top of the Constraint Validation API to ensure your form conforms to the DOM.
remix-bun - A little demo Jacob Ebey put together to try Remix on the Bun runtime.
👋 Hey you. Yes, you. I know you're making cool stuff with Remix. Why not send it to me? Reply to this email or message @readmoulton on Twitter with links to your videos, articles, projects, etc. Shameless self-promotion is encouraged!
Upcoming Events
Remix Bay Area meets on July 26th. Clifford Fajardo is presenting "Seeing is Believing: Web Apps Before & After Remix." This event is available to watch online.
Remix Austin meets on July 28th. Jake Ruesink is scheduled to present "Ecommerce with MedusaJS + Remix."
Remix Utah meets on August 8th. Ryan Allred is scheduled to present "I can't believe it's not Styled Components - Building a Styled Components clone in Remix that works without client side JavaScript and does not double render on the server."
Building Better Web Apps with Remix - At CascadiaJS 2022, Chance Strickland will be hosting a workshop where you can learn to build modern and responsive user interfaces with Remix. This workshop takes place on Friday, Sept 2nd at Sunriver Resort in Sunriver, Oregon, USA.
Get Back to Web Basics with Remix - Donavan West will be presenting this talk at React New York Conference on September 9th at Brooklyn Bowl in Brooklyn, NYC, USA.
Kent is hosting two Remix workshops with Frontend Masters: Remix Fundamentals on August 2nd and Advanced Remix on August 3rd. You can attend online or in person in Minneapolis, MN, USA. It looks like you'll need a Frontend Masters subscription to watch.
Fast Backends for Faster Frontends - Chance Strickland is presenting this talk at DevReach on September 12th.
Hype & Teasers
At the @remix_run Utah meetup tonight, I demoed progressive enhancement with remix-todomvc.fly.dev and @JLarky pulled it up on this phone [see link for photo] and it freaking works and I think that's just awesome. That's what progressive enhancement is all about!
@remix_run #deferred type inference is a thing. Give it a run in the latest experimental
0.0.0-experimental-2d985459eor via the NPM tagdeferred
💿 Remix + React 18 Protip:
Enable time-slicing with
React.startTransitionto prevent hydration from blocking the main thread for too long for those users who immediately scroll.❌ Jank!
💯 PageSpeed Insights Load Performance
