This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/usr/bin/env bash | |
set -e | |
# Creates webp / avif images for images that don't already exist and places them in the public folder | |
# This script can take a while to run | |
# Install deps | |
# sudo apt-get install -f webp ffmpeg opusenc | |
# MacOS deps |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Dispatch, | |
SetStateAction, | |
useCallback, | |
useEffect, | |
useState, | |
} from 'react'; | |
const isFunction = (fn: unknown): fn is Function => (typeof fn === 'function'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// One of my new favorite React Hook patternms is to create handler | |
// functions for a custom hook using `React.useMemo` instead of | |
// `React.useCallback`, like so: | |
function useBool(initialState = false) { | |
const [state, setState] = React.useState(initialState) | |
// Instead of individual React.useCallbacks gathered into an object | |
// Let's memoize the whole object. Then, we can destructure the | |
// methods we need in our consuming component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sub, sup { | |
/* Specified in % so that the sup/sup is the | |
right size relative to the surrounding text */ | |
font-size: 75%; | |
/* Zero out the line-height so that it doesn't | |
interfere with the positioning that follows */ | |
line-height: 0; | |
/* Where the magic happens: makes all browsers position |