kentcdodds

// Menu: Optical Character Recognition
// Description: Extract text from images
// Author: Kent C. Dodds
// Twitter: @kentcdodds

import '@johnlindquist/kit'
import Tesseract from 'tesseract.js'

const clipboardImage = await clipboard.readImage()

kentcdodds

import type { DataFunctionArgs } from '@remix-run/node'

export async function loader({ request }: DataFunctionArgs) {
	const width = 1280
	const height = 720
	const starfieldSvg = /* html */ `
<svg id="starfield" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" style="background-color:#090909;">
<style>
@keyframes sparkle {
  0% { opacity: 0.3; }

kentcdodds

import { z } from 'zod'

export function preprocessFormData<Schema extends z.ZodTypeAny>(
	formData: FormData,
	schema: Schema,
) {
	const shape = getShape(schema)
	return mapObj(shape, ([name, propertySchema]) =>
		transformFormDataValue(
			getFormValue(formData, String(name), propertySchema),

kentcdodds

[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

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

import * as bcrypt from "bcrypt";
import { createCookieSessionStorage, redirect } from "remix";

import { db } from "./db.server";

export type LoginForm = {
  username: string;
  password: string;
};

kentcdodds

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

function Cell({
  value,
  row: {values: user},
  column: {id: propertyName},
}: {
  value: string
  row: {values: User}
  column: {id: string}
}) {

kentcdodds

<--- 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]

kentcdodds

// 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')