#20 Moulton x Jacob Paris – Remix Community Newsletter
Hey folks, it's Jacob Paris with some fantastic news
I'm excited to announce I've taken over as curator of Moulton, the Remix community newsletter formerly written and run by Nicolas Kleiderer.
- For those who don't know me, I have been writing a lot about Remix, including tips, tutorials, libraries, and examples over at jacobparis.com
- For those who don't know Moulton, it's a newsletter talking about everything new in the Remix community, including tips, tutorials, libraries, and examples.
Naturally, this felt like a perfect fit, so when Nicolas offered to let me take the helm I jumped at the opportunity.
If you've previously subscribed to my personal Remix newsletter, I've moved you over automatically. It's the same content here, but now I get to share what everyone else has been up to too!
Before we get into the community bits, let's look at where Remix is right now.
What's new with Remix?
Remix has recently launched v1.19 and is in the final stages of preparing the official v2 release. All of the v2 features are available as feature flags
- A faster dev server
- A simpler flat file routing convention
- Unified error boundaries (no more distinction between ErrorBoundary and CatchBoundary)
- Small changes to the format of headers, the meta function, capitalizing things like
method="POST", etc
You can enable these flags now to migrate your app. When v2 is released, all you'll have to do is upgrade the packages and remove the flags from your remix.config.js file.
Once v2 is released, the Remix team will publish their RFCs and plans for the future of Remix in their Github Discussions, and as those experiments are iterated on and released, they'll be enabled for early adoption and migration with this same future flag model.
Featured 🔥 Deploy Remix ANYWHERE with Hono
This amazing new package from Sergio Xalambrí replaces the traditional Express server with Hono, an ultra-fast, edge-first, cross-platform web framework.
Once your Remix app is running with Hono, you can deploy it to anywhere that supports a Javascript runtime, whether that's a Node, Deno, (maybe Bun??) a serverless lambda function, a Cloudflare Worker running V8, one of Fastly's WASM workers — all with minimal code changes.
Hono also supports middleware, so if you want to intercept the requests to modify security policies, auth sessions, etc, there's a new place to do that.
https://github.com/sergiodxa/remix-hono
🔥 Remix has Dev Tools now
This brilliant library by Alem Tuzlak lets you add a panel to your Remix app with a powerful tools for developing your app.
It will visually show you the route boundaries for your nested layouts, let you inspect the data returned by loaders or sent to actions, and a bunch of other cool features.
github.com/Code-Forge-Net/Remix-Dev-Tools
🔥 Add analytics to your Remix app with Metronome v6
Erick Tamayo has been hard at work on Metronome, an analytics platform for Remix apps.
You can track the invocations, timing, and errors of all of your actions and loaders. It's a great way to get live feedback on how your app is performing in the wild.
🔥 FlyCD enters public beta
There are a ton of Remix apps running on Fly.io, but one feature it's missing is git-based deployments. Sure, you can set up a Github Action, but you miss out on the nice UI experience that so many other hosts provide out of the box
Peter Mbanugo's FlyCD fills that gap. You get preview deployments on each pull request (with badges and links directly in the PR), and a dedicated dashboard to access and delete each new preview environment.
📄 Autosaving form inputs with Conform
As much as users LOVE filling out forms (they're like quizzes but I know all the answers), they HATE losing data.
Years ago they may have blamed themselves for forgetting to save, but in today's day and age, enough apps persist changes automatically that they expect it.
Use a submit hook to save each input automatically and remember: debounce while typing, but not on blur.
jacobparis.com/content/remix-form-autosave
🔥 Support 2FA with @epic-web/totp
With the help of the Remix community, Kent C Dodds has been hard at work on the Epic Stack and we all get to reap the benefits.
This library lets you generate and verify 2FA TOTP codes, as well as produce a URL your users can scan to add your 2FA code to their authentication device or password manager.
You can take that URL, generate a QR Code, and let users scan it with their phone to add to their authenticator app.
📄 SVG Sprite icons in React
The Epic Stack has adopted this approach for generating an SVG spritesheet with all the icons your app needs. It's fast, type-safe, cacheable, and suitable for apps with dozens to small hundreds of icons.
- Add svg files to a folder
npm run build:icons- Get an
<Icon name="" />component with autocomplete/typechecking based on the icons you have available.
Bonus: I built Sly, an open source CLI tool to add SVG icons right into your project, and it currently supports Radix, Lucide, HeroIcons, and SimpleIcons, with an open PR to add BlueprintJS icons too.
jacobparis.com/content/svg-icons
🔥 Custom themes for your shadcn components
The shadcn/ui project has been taking the web dev community by storm with its beautiful components, but more importantly, its distribution method. The components end up as part of your codebase rather than your dependencies, so you can customize them to your heart's content.
Michael Carter built a tool to generate a custom shadcn compatible theme automatically. All you have to do is pick your primary, secondary, accent, and gray colors, and the tool will do the rest.
github.com/kiliman/shadcn-custom-theme
🔥 Define your routes in JSON or JSX
From Matt Brophy comes a new routing convention that lets you specify your routes in raw JSON, all in the remix.config.js file.
If you want an experience more like React Router, it also supports a JSX based syntax
github.com/brophdawg11/remix-json-routes#readme
📺 Create a full stack real-time messaging app
Youtuber Jan Marshal has put out a video tutorial showing how to build a chat messaging app with Remix, using Server Sent Events to push new messages to the client in real time.
📄 Strongly type Remix route IDs
With a little bit of code-gen, you can print all the routes in your project to a TS file to get autocompletion and error checking for all of your links, hooks, and form actions.
sergiodxa.com/tutorials/strongly-type-remix-route-ids
📄 Essential Error Handling
What do Remix's ErrorBoundaries actually catch, and where should you put them?
Should you throw form validation errors or return them?
This guide from OtivDev covers many of the cases where you might throw errors in an app and suggests best practices for handling them.
otiv.dev/blog/essential-remix-error-handling
📺 Use native View Transitions for app-like navigations
At Remix Austin, Colby M White gave a talk on how to integrate the web platform's new native View Transition API into Remix
🔥 Type-safe dates, maps, and custom types from your loaders
Data needs to be serialized before the server can send it to the client. For that reason, returning a date from your loader means it will be a string on the client.
Remix TypedJSON provides new json() and useLoaderData() hooks that serialize and deserialize these values properly, so you can return a Date from your loader and use it as a Date on the client.
Now, it also supports custom types, so no matter what data you end up working with, you can get full type safety over the wire.
github.com/kiliman/remix-typedjson
📄 Set up a server cache for your backend
Using the amazing cachified package, you can wrap any Promise with a cache layer that supports TTL and stale-while-revalidate refetching.
jacobparis.com/content/server-cache
📄 Sync text input with URLSearchParam in Remix
If you're fetching data on user input, like in a search input, you can use React 18's new useDeferredValue to sync it to the URL without triggering a refetch on every character
sergiodxa.com/tutorials/sync-text-input-with-urlsearch-params-in-remix
Remix Community Meetups
There are active Remix meetups all around the world. If you're interested in meeting other Remix users, learning more about the framework, or just hanging out with some cool folks, check out one of these meetups.
- 🇺🇸 Lehi, Utah
- 🇮🇳 Pune, India
- 🇬🇧 London, UK
- 🇺🇸 New York City
- 🇧🇷 Säo Paulo, Brasil
- 🇺🇸 Austin, Texas
- 🇺🇸 San Francisco, California
- 🇮🇱 Tel Aviv, Israel
- 🇲🇽 Mexico City, Mexico
- 🇩🇰 Copenhagen, Denmark
- 🇿🇦 Johannesburg, South Africa
- 🇸🇪 Uppsala, Sweden
- 🇨🇷 San Jose, Costa Rica
🔥 Special shout out to remix.guide
Edmund Hung has been maintaining remix.guide, a collection of tutorials, guides, and examples for Remix. If you're looking for Remix resources, this is the place to go.
This is not a one-way conversation
On behalf of the whole Remix community, I’m really glad to have you here, and I want to hear from you.
If you find something cool you'd like featured, or have questions you'd like answered, that's what I'm here for. Just hit reply and let me know.
Thanks for reading!
— Jacob Paris
