When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}
#!/usr/bin/env sh | |
# Download lists, unpack and filter, write to stdout | |
curl -s https://www.iblocklist.com/lists.php \ | |
| sed -n "s/.*value='\(http:.*=bt_.*\)'.*/\1/p" \ | |
| xargs wget -O - \ | |
| gunzip \ | |
| egrep -v '^#' |
// create context with no upfront defaultValue | |
// without having to do undefined check all the time | |
function createCtx<A>() { | |
const ctx = React.createContext<A | undefined>(undefined) | |
function useCtx() { | |
const c = React.useContext(ctx) | |
if (!c) throw new Error("useCtx must be inside a Provider with a value") | |
return c | |
} | |
return [useCtx, ctx.Provider] as const |
import * as React from 'react'; | |
const useIsFirstRender = (): boolean => { | |
const isFirst = React.useRef(true); | |
if (isFirst.current) { | |
isFirst.current = false; | |
return true; | |
} else { |
import { useEffect, useState } from "react"; | |
type UseTextSelectionReturn = { | |
text: string; | |
rects: DOMRect[]; | |
ranges: Range[]; | |
selection: Selection | null; | |
}; | |
const getRangesFromSelection = (selection: Selection): Range[] => { |