Skip to content

Instantly share code, notes, and snippets.

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
View kit.log
[2021-11-18 18:49:03.381] [info] Protocols Prepared
[2021-11-18 18:49:03.386] [info] Tray created
[2021-11-18 18:49:03.389] [info] Shortcuts Assigned
[2021-11-18 18:49:03.398] [info] Prompt window created
[2021-11-18 18:49:03.399] [info] Tick started
[2021-11-18 18:49:03.399] [info] Kit.app is ready...
[2021-11-18 18:49:03.406] [info] SHORTCUTS DB CHANGED: /Users/kentcdodds/.kit/db/shortcuts.json
[2021-11-18 18:49:03.411] [info] Registered CommandOrControl+; to /Users/kentcdodds/.kit/main/index.js
[2021-11-18 18:49:03.412] [info] Registered CommandOrControl+Alt+Control+C to /Users/kentcdodds/.kenv/scripts/cloudinary-upload.js
[2021-11-18 18:49:03.413] [info] Registered CommandOrControl+Alt+Control+O to /Users/kentcdodds/.kenv/scripts/daily-story.js
@kentcdodds
kentcdodds / jokes.md
Created Nov 22, 2021
Headers and caching section removed from the Remix Tutorial because it was too long.
View jokes.md

Headers and Caching

Caching is a big subject and it can get pretty complicated. Luckily, the browsers have done all the really hard work for us and we just need to #useThePlatform.

There are three types of caches you'll likely deal with in Remix applications:

  1. Application-level caches that you implement in your own code.
  2. Browser caches you can control through the Cache-Control header.
  3. CDN caches you also can control through the Cache-Control headers.
@kentcdodds
kentcdodds / session.server.ts
Created Nov 18, 2021
Authentication in Remix applications
View session.server.ts
import * as bcrypt from "bcrypt";
import { createCookieSessionStorage, redirect } from "remix";
import { db } from "./db.server";
export type LoginForm = {
username: string;
password: string;
};
View scroll-restoration.tsx
import * as React from 'react'
import {useLocation} from 'react-router-dom'
import {useTransition} from '@remix-run/react'
import {useBeforeUnload} from 'remix'
import {useSSRLayoutEffect} from './misc'
let firstRender = true
let positions: {[key: string]: number} = {}
const SESSION_STORAGE_KEY = 'kody_scroll_positions'
@kentcdodds
kentcdodds / cell.tsx
Created Oct 18, 2021
A real-world example of the prop getters pattern
View cell.tsx
function Cell({
value,
row: {values: user},
column: {id: propertyName},
}: {
value: string
row: {values: User}
column: {id: string}
}) {
@kentcdodds
kentcdodds / output
Created Sep 21, 2021
esbuild failure logs (full logs)
View output
<--- Last few GCs --->
[31642:0x7f9d20008000] 105486 ms: Mark-sweep 4036.6 (4130.1) -> 4029.6 (4136.2) MB, 4756.1 / 0.1 ms (average mu = 0.356, current mu = 0.022) allocation failure scavenge might not succeed
[31642:0x7f9d20008000] 110156 ms: Mark-sweep 4045.6 (4136.4) -> 4038.4 (4144.9) MB, 4559.2 / 0.1 ms (average mu = 0.223, current mu = 0.024) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 0x1040ea3a5 node::Abort() (.cold.1) [/Users/kentcdodds/n/bin/node]
2: 0x102dc5869 node::Abort() [/Users/kentcdodds/n/bin/node]
3: 0x102dc59df node::OnFatalError(char const*, char const*) [/Users/kentcdodds/n/bin/node]
4: 0x102f44347 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/kentcdodds/n/bin/node]
5: 0x102f442e3 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/kentcdodds/n/bin/node]
View new-post.js
// Menu: New Post
// Description: Create a new blog post
// Author: Kent C. Dodds
// Shortcut: command option control p
// Twitter: @kentcdodds
const dateFns = await npm('date-fns')
const prettier = await npm('prettier')
const YAML = await npm('yaml')
const slugify = await npm('@sindresorhus/slugify')
@kentcdodds
kentcdodds / tag.js
Created Aug 9, 2021
Tag subscribers of a ConvertKit sequence with a tag
View tag.js
const fetch = require('make-fetch-happen').defaults({
cacheManager: './node_modules/.cache/make-fetch-happen',
})
// add a .env file that has this in it:
// CONVERT_KIT_API_KEY=some_api_key
// CONVERT_KIT_API_SECRET=some_api_secret
require('dotenv').config()
const {CONVERT_KIT_API_KEY, CONVERT_KIT_API_SECRET} = process.env
@kentcdodds
kentcdodds / most-popular-posts.ts
Created Jul 30, 2021
Prisma is awesome. I love this!
View most-popular-posts.ts
@kentcdodds
kentcdodds / cachified.ts
Last active Aug 28, 2021
Turn any function into a cachified one. With forceFresh support and value checking (for when the data type changes). This uses redis, but you could change it to use whatever you want.
View cachified.ts
type CacheMetadata = {
createdTime: number
maxAge: number | null
expires: number | null
}
function shouldRefresh(metadata: CacheMetadata) {
if (metadata.maxAge) {
return Date.now() > metadata.createdTime + metadata.maxAge
}