Make a currency component. Format inputs on blur instead of while typing. Use locale formatting. Provide currency info with React Context.

The minimum set of typescript knowledge to be effective at product development with React

Use React PDF to generate PDFs using React Components.

Avoid re-using route loaders. Create dedicated API routes to serve external clients.

useEffect data fetching is hard to write well. Handle errors, loading states, and race conditions. Or, use a loader.

Create your own route convention. Use a custom glob pattern. Add layouts automatically, or prepend an optional language segment.

Implement role based authorization in Remix. Hard-code your permissions if possible. Store them in the database if they have to be updated dynamically.

Use Conform's parseWithZod to handle nested arrays and objects in form data. Repeat the same input name for arrays. Use dot notation for objects. Use `array[index].property` for arrays of objects.

Use environment variables to store single API keys, or put them in the database for advanced workflows. Use time-limited keys and scope them to specific permissions.

Use zod schemas for each request body. Give each component its own schema. Use discriminated unions to combine them in your actions.

Use zod schemas to track search params. Give each component its own schema. Merge them together in your loader.

Fly is a managed container platform with first class support for Postgres databases. Create a database. Allocate an IP address. Get a connection string.

Cloudflare doesn't use Node.js. Use wrangler as your dev server. Use .dev.vars instead of .env. Make sure you set up wrangler.toml correctly.

Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with Postgres on Cloudflare.

Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with SQLite.

Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with Cloudflare D1.

Use formdata for progressive enhancement and json for a better developer experience. Parse request bodies based on their content type, and parse fetchers read pending requests.

How to use svg sprite icons in a React app. Use Sly CLI to download icons from the command line. Use svg-icons-cli to build the icons into a type-safe spritesheet.

The useFetcher hook is the most powerful tool in the Remix toolbox. Submit data in one component, and display the status of the request in another. Turn fetchers into custom hooks that you can use anywhere in your app.

Create a clearEmptyParams function that removes empty query parameters from URLs by throwing a response.

Serialize existing parameters to hidden fields in a form. Exclude parameters that should be overwritten.

Use query parameters to implement server-side pagination with Remix. Create a rolling pagination component that shows the current page along with a few pages before and after it, like Google Search.

Upload images to a third-party service in the background, then display them as thumbnails before the form is submitted. Use drafts for cross-device persistence.

Hydration errors can be caused by dates, ad blockers, browser extensions, invalid HTML, 3rd party scripts, CSS in JS libs, character encoding, IDs, and more

Learn how to generate social preview images for your website with Remix and Tailwind. Use Vercel's Satori package with Remix for dynamic open graph images. Fetch fonts from Google automatically.

Should you host your Remix app on a serverless provider like Vercel, Fastly, Netlify, Cloudflare, or AWS Lambda? Or a long-lived server like Fly, Render, Railway, or DigitalOcean? This guide will help you choose the right hosting option for your app.

Add VS Code snippets to insert common Remix functions. Use import/no-duplicates to merge imports. Customize it to fit your project.

Use redirect routes to redirect users to the right place. Implement dynamic next/previous buttons. Send users back to onboarding or login pages.

Create a filter bar that stores its state in the URL. Use the OData query string format to parse and serialize the filters. Create a custom hook to manage the filter state.

Use OData to create a flexible query language for your database. Give your users pre-made queries or let them construct their own.

Write logical components that don't prescribe styles. Avoid manipulating children. Use React Context to provide state to nested components.

Use the useRouteLoaderData hook to access loader data from any component. Export a custom hook to make it easier to use. Use useMatches to find the ID of the route you want.

Use the asChild pattern for composition. Get the right types on each component. Merge props together. Use tailwind-merge for classnames.

A helper function to create a context and hook to share a useState hook.

Set up a simple in-memory cache to reduce load on your API. Use lru-cache and cachified to make it easy.

How to use svg sprite icons in a React app. Create a single svg file that contains all the icons and use a React component to display a specific icon by referencing its id. Use Sly CLI to download icons from the command line.

Save forms automatically with useDebounceFetcher. Make a reusable Input component. Compatible with Conform.

Use Conform to validate your forms serverside. Show errors on the client. Use Zod to generate your form schema.

Prisma is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with SQLite.

Write a Zod schema to typecheck your environment variables. Crash the app if any are missing. Add type definitions to process.env.

Import a file to get its hashed path in the build directory. Fetch the file in a resource route and return it as a response.

Standard file based routing can lead to spaghetti code. Files should be near where they're used. Use domain driven design to organize your code.

Improve user experience and productivity by making your UI faster. Persist data automatically, debounce saves, and show changes optimistically.

React doesn't like mismatches between client and server rendering. Avoid it by rendering tricky content like dates only on the client. Fade it in for a smooth UI and to avoid layout shift.

Images don't start loading until they appear in the HTML. You can use link tags to start loading them earlier, or use React to show a placeholder until the image loads.

Debouncing helps reduce server load. Create a custom fetcher hook that adds debounce support. Modify the type of useFetcher to support extra features.

Create RPCs by exporting functions from your resource routes. Get full end-to-end type safety and autocompletion. Use custom fetcher hooks to get automatic revalidation, request cancellation, and more.

A custom hook to reset state when a prop changes. Useful for optimistic UI.

Use the Server Timing API to measure the performance of your app and find bottlenecks. I've built a server timing utility function for Remix. Merge the timing info from multiple loaders into a single request.

Remix uses route headers for document requests and loader headers for data requests. Learn how to set both.

Fly is a serverless platform. Learn how to autoscale your Fly apps to zero when they're not in use, and then start them back up immediately on the first request to the app.

Information in the URL can power server-side rendering. Use query params for searches and filters. Use back buttons to close modals. Retain your page number when you refresh.

The useLocalStorageState hook works just like useState, but page navigations and refreshes won't reset it. Use React Suspense to avoid a Flash of Unstyled Content on the first render.

A comparison of the different ways to achieve type-safe data fetching in Next.js, Remix, and tRPC.

Joi, Yup, and Zod all have a similar API, but only one supports static type inference properly.

Stop using framework-default favicons and use an emoji favicon instead. Supported on almost all browsers.

Create a progressively enhanced input field with "edit" and "preview" tabs like GitHub and Stack Overflow. Use Remix's useFetcher hook to render the markdown server-side. Set shouldRevalidate to false to make tab-switching instant.

Add a sense of presence to your app by showing who is on each page. Create a full stack component to control the presence widget. Use event streams to update the presence widget in real time.

Show the user their form submission was complete. For same-page submissions, try the useActionData hook. For cross-page submissions, use cookie session storage.

Longer forms can be broken up into multiple pages. Store the in-progress form data serverside. When they return to a page, re-fill the inputs with the data they've already entered. Use the in-progress data to automatically send them to the right page.

Use Remix's nested routes with react-transition-group and Tailwind CSS to fade between pages.

Browsers have built-in form validation support. You can customize the validation logic and behavior by using the HTML5 Constraints API

A Remix action is an endpoint for POST requests, and all forms will submit to the same action. Add a name and value to your submit button to know which form was submitted, and use that to determine which action to take.

Server-side rendering breaks when the server is in a different timezone than your browser. Make your Remix server timezone agnostic with a timezone offset cookie.

Learn to use just enough React to build dynamic forms without Reinventing the Form by controlling every input. Use Remix to pre-load the form with saved data and to handle the form submission.

Learn how to use BullMQ to queue up background tasks in a Node application.

Improve performance and prevent your application from stalling or crashing by offloading work to a background process.

Learn how to use Remix's Defer API to wait for a BullMQ queued job to complete.

Learn how to stream the progress of a BullMQ job to the client using Remix EventSources.

Use Remix's Defer feature in combination with an EventStream to stream progress updates to the client.

Use Tailwind and React hooks to build a sticky hover effect for buttons and links like the iPad UI

Learn how to develop and deploy multiple Remix apps with an integrated Nx monorepo

Learn how to add data to a Google sheet from a Node.js backend using Google's v4 REST API instead of any libraries. Great for collecting feedback, tracking bugs, or keeping a list of newsletter subscribers.

No other profession has so many candidates who are good at interviews and bad at the job they are interviewing for

There are two things you need to know about in order to write queries

Use HTML anchor tags to add accessible semantic footnotes to your article or webpage

Here's how to a Key to a React Fragment

If your ticket is actually ready to pick up, it'll be completed in half the time. And if the definition of done is clear, development will double in speed again. This is what's needed to get twice the work done in half the time. This is the reason Scrum exists.

An animated stripe checkout using XState and React. This uses the Stripe API and the Stripe Elements tools to create an actual payment.

Here is a bunch of different things you can do with bash

Prior to the 14 of January, 2022, before Gitpod included useful information like the repository name in the workspace ID, we got animals and we got colors.

Use `<br>` tags and media queries to break text into smaller paragraphs on smaller screens

If you get the error "parserOptions.project" has been set for @typescript-eslint/parser, you need to add files to the "include" array in your tsconfig.json file.

Simple projects may be able to compile modules using the command line, but if you're trying do anything complicated enough to need plugins, you need to use the ESBuild node modules instead.

A guide explaining different patterns for centering elements in CSS

A series of statecharts representing a contact form

Defeat thermal throttling and speed up your Mac by running the fans sooner

Running custom ESLint rules locally is really easy, so there's lots of room to explore automating rules and guidelines that are important to your project but maybe not anyone else.

CSS provides a media query that allows us to apply certain styles to the screen and certain styles only while printing.

Overfetching is one of the major wastes that disrupts the data supply chain

Guide to designing a login flow for an app

This is a common question that came up

I often think that if we knew why interviewers continue to ask about hoisting, we'd know a lot more about how to conduct better interviews

As long as you know which cases you want to test up-front (for example, you're not trying to generate them after a network request) you can use Jest to batch out multiple cases at once.

If you're new to the professional tech industry, this is where I'd recommend you start

If you're migrating from 1Password to iCloud Keychain, you'll need to export your passwords from 1Password to a plaintext file. This will allow iCloud Keychain to easily import your passwords.

I had a typed array and wanted to remove elements with an empty value, but Array.Filter returns a regular array of regular objects, and the type information about the string unions was lost

The number of states in a system can grow rapidly as features are added. XState allows us to model these easily with parallel state management.

Many-to-many transitions between sibling states can often be 'lifted up' into one-to-one transitions from parent to child

Modelling a set of radio buttons with an null state

Testing your code is essential but get started can be a tough hurdle to overcome

In April 2021, 1Password acquired SecretHub, which means there is now a way to securely store and download text files from a 1Password vault. This is perfect for `.env` files, as vaults can be shared between team members and now also to cloudy development environments.

A guide to HTML for the absolute beignner

A list of elements with optional closing tags in HTML

Void elements are HTML elements that cannot have any content, and cannot have separate closing tags. br, hr, img, and input are some of the most common void elements, but there are many more.

This is a helper script to allow an embedded iframe to communicate with its parent page.

The

An overview of functions and callbacks

An overview of promises, async functions, and await

Samples of JSDoc typing different kinds of functions

An explanation of HTML/CSS positioning concepts followed by a series of example layouts with code

The easiest way to log a user out is to destroy their session on the server

There are four ways to write for-loops and here's how to choose

A post mortem of a load bearing feature request and where the counter-intuitive solution became the correct one

Redux Toolkit simplifies the process of setting up your redux application including building slices, reducers, selectors and thunks. Everything we do in the course is typed with TypeScript to make your application development process as smooth and powerful as possible.

Highlights and notes from Measuring Developer Relations by Swyx

In this course, you'll learn the fundamentals of Supabase. You'll learn how to model complex data using Postgres and SQL, build authentication flows with Oauth, and add real-time data to a Next.js application to build a fully-featured chat application, similar to Discord.

I had a type that acted as a schema, but one implementation only needed a subset of its fields, so I had to find a solution.

A guide explaining the use-cases and differences between a few of React's Hooks

A guide explaining the use-cases and differences between a few of React's Hooks

A guide explaining the use-cases and differences between a few of React's Hooks

When a user submits a form, the browser will send a request to the current route.

I had an API adapter that went one direction, and I wanted to make it go the other direction without losing type information

In this tutorial I'm going to show you how to bootstrap a React project from scratch using NPM and Webpack, integrate Google Login, grab data from the Youtube API, and deploy your code to Netlify

These are a few of my favourite tweets

A singleton is a module that returns the same instance every time it is imported. This is useful for database connections, caches, and external processes. This article shows how to write a singleton module in Typescript.

Tweet intents are links that immediately prompt the user to do something.

The response of the `action` method is available through the `useActionData` hook

This pattern lets you share the layout across many routes, for example both a `/posts` and `/users` route with the same sidebar

File Utils makes it much easier to move, rename, create, or duplicate files

Paste Image makes adding images to code documents a breeze

If you're adding Typescript to a Vue project, you need to do a bit of extra work to make Single File Components load properly into the type system.