Skip to content

Instantly share code, notes, and snippets.

View kentcdodds's full-sized avatar
🤓
working hard to make the world better with software

Kent C. Dodds kentcdodds

🤓
working hard to make the world better with software
View GitHub Profile
@ryanflorence
ryanflorence / $post.edit.tsx
Last active March 9, 2022 22:50
The Anatomy of a Remix Route
/**
* The Anatomy of a Remix Route
*/
import { parseFormBody, json, redirect } from "@remix-run/data";
import {
Form,
useRouteData,
usePendingFormSubmit,
preload,
} from "@remix-run/react";

Route Transition API

Definitions

The goal of the route transition API is to enable suspense-like transition in React Router without using Suspense (much like v1).

On location changes, React Router will continue to send down the old location, activating pending hooks for loading states and optimistic UI, and wait for your Route's preloading hooks to resolve before sending down the new location and updating your app.

This enables you to declare data dependencies on your routes, allowing your route elements to expect data and not need to manage their own loading states.

@kentcdodds
kentcdodds / README.md
Last active November 29, 2023 11:39
user-package-stats

user-package-stats

I was poking around trying to figure out all the packages I have access to publish and got curious. So I write this little script to determine the download stats for all the packages I have publish access to.

Feel free to try it yourself. Just change the username passed to getUserDownloadStats.

By default, the stats are sorted by their average daily downloads (descending). That should give you an idea of the most "popular" package of a given user relative to how long that package has been around.

You can use it with npx like so:

meta
title
Mutations with Actions and Form | Remix

import { Link } from "react-router-dom";

Mutations with Actions and <Form>

Data mutations in Remix are built on top of two fundamental web APIs: `` and HTTP. We then use progressive enhancement to enable optimistic UI, loading indicators, and validation feedback--but the programming model is still built on HTML forms.

@kentcdodds
kentcdodds / README.md
Last active April 1, 2023 12:45
Book Stitcher. Combine multiple mp3 files into a single MP3 file with metadata (for chapters etc.). It's great for audiobooks.

Book Stitcher

This is just something I hacked together to create an audiobook file out of CD audio files (complete with chapter marking metadata!)

Works great when used in combination with https://github.com/kentcdodds/podcastify-dir

npx https://gist.github.com/kentcdodds/e07f9106c63cc13a75adb0157700eb5b ./path-to-sorted-mp3s
@iansu
iansu / README.md
Last active March 1, 2021 08:40
Create React App 4.0 Alpha Testing

Create New App

JavaScript Template

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

@kentcdodds
kentcdodds / add-discord-role.js
Last active August 21, 2021 16:29
An example of how you can add a role to a user with discord.js
const Discord = require('discord.js')
// your bot token
const token = 'NzM4MDk2NjA4NDQwNDgzODcw.XyG8CA.RbwIBFnAbrRDYOlTdLYgG_T4CMk'
const discordUsername = 'example#1234'
const roleToAdd = 'Cool Person'
const guildName = 'Your Guild Name'
function deferred() {
let resolve, reject
@kentcdodds
kentcdodds / fix-feedback-links.js
Last active December 3, 2020 20:43
I use this to automatically fix links in my react workshops. (This one's only for the testing-react-apps repo because those markdown files aren't rendered in a UI, the normal one is at https://gist.github.com/kentcdodds/436a77ff8977269e5fee39d9d89956de)
@kentcdodds
kentcdodds / fix-links.js
Last active April 19, 2021 17:05
I use this to automatically fix links in my react workshops
@kentcdodds
kentcdodds / package.json
Last active March 27, 2024 02:39
setup script for my workshops
{
"name": "workshop-setup",
"version": "1.0.0",
"description": "This is the common setup script for most of my workshops",
"bin": "./setup.js"
}