#26 Conform v1, Epic Web Conf, and Unpic – Remix Community Newsletter
Hey everyone! It's Jacob Paris here with 2024's first issue of Moulton, the Remix Community newsletter.
Featured 🔥 Conform v1 Release
Edmund Hung's Conform is my favourite form validation library and it's just hit v1 with a stabilized API.
- Server-side form validation BEFORE submission
- Zod schema validation for both client and server
- Supports nested objects and arrays in formData
- Automatically applies props (required, aria-describedby) to inputs based on schema
- Works with both Remix and Next.js
https://github.com/edmundhung/conform
📺 Conform upgrade walkthrough with Kent
Since Conform is used heavily in the Epic Stack, Kent has recorded a walkthrough of the upgrade to v1
epicweb.dev/tips/upgrade-to-conform-v1
🚀 Epic Web Conf 2024
On the 11th of April this year, I'll be joining a number of fantastic speakers in Park City Utah to talk about full stack web development.
My talk will be about building High Performance CRUD applications in Remix, but the speaker list is AMAZING and I'm super excited to see what everyone else has to say
🔥 Generate responsive images on Remix with Unpic
Matt Kane's Unpic tool provides a React component that works with image CDNs to create responsive img tags
- full srcset with all image sizes
- modern formats like AVIF and WebP
- supports most CMSs and services like Shopify, Cloudinary, and Unsplash
unpic.pics/blog/responsive-images-on-remix
📺 Developer Experience with Remix Dev Tools
At the Remix Vienna meetup recently, Alem gave a talk on how Remix Developer Tools creates an amazing developer experience when building and debugging apps in Remix
🚀 Trigger v3 announcement
Trigger.dev announces the v3 version of their workflow platform
- No more timeouts, functions can just pause for minutes or weeks and resume
- Tasks will continue to run uninterrupted even through new deploys
- OAuth support for third party services within each task
- new CLI command for running tasks locally during development
They plan to launch the developer preview in March
trigger.dev/blog/v3-announcement
📄 Server-side Rendering Local Dates without FoUC
Three ways to render dates locally without breaking SSR by Fatih Altinok
- inject a script to format dates locally before React touches it
- use client hints to pass the user's locale info to the server
- just suppress the hydration warning and accept the janky UI
blog.6nok.org/server-side-rendering-local-dates-without-fouc
📺 Searching IndexedDB in Remix
Ryan Florence has put together a series of videos to show some caching patterns in Remix, but my favourite of the series is this one.
By the end of the video, he searches "spiderman" triggering 4 network requests for the queries "s", "sp", "spi", and "spid" and by the time he hits the 5th letter, his app has already cached the entire movies database and can do instant searches locally
📄 Create a CRUD with Remix
Sergio shows a copy/pastable set of routes to show a list of items, a single item detail view, as well as two resource routes for editing and deleting items.
sergiodxa.com/tutorials/create-a-crud-with-remix
📄 How to Make Cloudflare Properly Cache a Remix Site
When you make a GET request to a route, Remix returns server-rendered HTML, but for internal navigation, Remix also has a way of fetching the json from the loader directly.
Unfortunately, Cloudflare treats JSON responses as dynamic content regardless of what your cache headers are set to, so if you're hosting your site behind Cloudflare's cache, your data might not be cached the way you expect it to.
johnwhiles.com/posts/cloudflare-remix-cache
📺 Mastering Remix.run Routing
Alem Tuzlak has been killing it with Remix content lately, and one of his latest videos shows a deep dive into Remix's nested routing
📄 Find and remove unused code with Knip
Knip helps remove unused code from your codebase. You can configure your app's entry points and ignoreable files, and then the tool will show which files and functions are just dead code you can remove.
sergiodxa.com/tutorials/find-and-remove-unused-code-with-knip
📄 Create your own CMS with Remix + Xata
Xata is a serverless database platform powered by postgres. This guide shows how to create a custom CMS with Remix
- Create a schema with different column types
- Handle forms in Remix using Form Actions
- Implement Client Side Image Uploads
- Use an AI-powered WYSIWYG Editor
- Implement content-wide search
- Create dynamic content routes with Remix
xata.io/blog/content-management-system-remix-xata
🔥 Remix Adapter for Azure Functions
Since Remix works with the web platform, they don't need to provide first-party integrations for every webhost. Devs can make their own adapters to host wherever they want
Scandinavian Airlines has open sourced their adapter for hosting remix apps on azure functions.
github.com/scandinavianairlines/remix-azure-functions
📄 How to do ISR and advanced caching with Remix
Incremental Static Regeneration (ISR) is a caching technique that updates items in the cache directly when changes are made to their underlying data
Netlify's CDN has some powerful caching tools and they've published a guide on how to implement ISR and some other cache patterns in a Remix app.
developers.netlify.com/guides/how-to-do-isr-and-advanced-caching-with-remix
🔥 Remix Client Cache
This new package from Alem Tuzlak uses Remix's new clientLoader feature to create a customizable client cache API.
- returns data from the client cache while refetching from the loader in the background
- caches in-memory by default, but supports adapters for local and session storage
github.com/Code-Forge-Net/remix-client-cache
📄 JS Cookies vs HTTP Cookies
Cookies are little bits of text that get sent from the browser to the server on every request. While they can be created and saved with javascript, the most secure cookies are only set by the server in response to a request.
Ovi Ispas explains the differences and how to use them in this guide
ovi.is/posts/js-cookies-vs-http-cookies
📄 Prefetch data for Remix Fetcher usage
Remix can prefetch links so the the data is ready the moment the user clicks, but if you're using a fetcher to load data manually, you'll need to do this yourself. You can use the PrefetchPageLinks component to recreate the behaviour for any path.
sergiodxa.com/tutorials/prefetch-data-for-remix-fetcher-usage
🔥 Journal Stack
Abdur-Rahman has put together a Remix stack for building documentation sites with multi-version support
github.com/ShafSpecs/journal-stack
🔥 Remix Auth Strategy for Clerk
Remix Auth is the go-to library for building authentication systems in Remix, and Dan Esteves has published an adapter for using it with the authentication platform Clerk
github.com/danestves/remix-auth-clerk
🇬🇭 Meet the Remix Community in Ghana 🇬🇭
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.
- 🇬🇭 NEW: Accra, Ghana
- 🇺🇸 Lehi, Utah
- 🇮🇳 Pune, India
- 🇬🇧 London, UK
- 🇺🇸 New York City
- 🇧🇷 Säo Paulo, Brasil
- 🇺🇸 Austin, Texas
- 🇺🇸 San Francisco, California
- 🇲🇽 Mexico City, Mexico
- 🇩🇰 Copenhagen, Denmark
- 🇿🇦 Johannesburg, South Africa
- 🇨🇷 San Jose, Costa Rica
- 🇦🇹 Vienna, Austria
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, or join the conversation directly in the Remix Discord
Thanks for reading!
— Jacob Paris
