Wilson Page wilsonpage

Enjoys creating beautiful experiences. Whatever it takes to get there.

wilsonpage / HydrateScope.tsx

Last active November 17, 2022 09:40

React SSR hydration boundary

	import { cloneElement, FC, ReactNode, useRef } from 'react';

	import { getAppHasHydrated } from '../MyApp';

	export interface HydrateScopeProps {
	hydrate: boolean;
	render: () => JSX.Element \| ReactNode;
	}

	const IS_SERVER = !process.browser;

wilsonpage / swr.ts

Last active October 15, 2024 15:36

An implementation of stale-while-revalidate for Cloudflare Workers

	export const CACHE_STALE_AT_HEADER = 'x-edge-cache-stale-at';
	export const CACHE_STATUS_HEADER = 'x-edge-cache-status';
	export const CACHE_CONTROL_HEADER = 'Cache-Control';
	export const CLIENT_CACHE_CONTROL_HEADER = 'x-client-cache-control';
	export const ORIGIN_CACHE_CONTROL_HEADER = 'x-edge-origin-cache-control';

	enum CacheStatus {
	HIT = 'HIT',
	MISS = 'MISS',
	REVALIDATING = 'REVALIDATING',

wilsonpage / app.js

Created November 18, 2020 12:01

How to create a performance measurement that shows on devtools timeline

	performance.mark('myMark-start');

	// your code

	performance.mark('myMark-end');
	performance.measure('myPerfMarker', 'myMark-start', 'myMark-end');

wilsonpage / copyToClipboard.ts

Created September 8, 2020 09:57

	import { isIos } from '~/lib/device/utils';

	const fallback = (text: string) => {
	const textarea = document.createElement('textarea');

	// create textarea
	textarea.value = text;

	// ios will zoom in on the input if the font-size is < 16px
	textarea.style.fontSize = '20px';

wilsonpage / BackgroundImage.tsx

Created August 1, 2020 17:26

	import { useRef, CSSProperties } from 'react';

	import withSpacing, { WithSpacingProps } from '~/lib/hocs/withSpacing';
	import useTestIdAttr from '~/lib/hooks/useTestIdAttr';
	import { getAspect } from './utils';
	import { ImageProps } from '.';

	interface BackgroundImageProps extends ImageProps, WithSpacingProps {
	gradient?: string;
	borderRadius?: number \| string;

wilsonpage / MyComponent.js

Created July 28, 2020 09:48

	const useFoo = () => {
	const [bar, setBar] = useState(false);
	const [baz, setBaz] = useState(false);

	// should not trigger MyComponent to re-render
	useEffect(() => {
	setTimeout(() => setBar(true), 1000);
	}, []);

	// should trigger MyComponent to re-render

wilsonpage / index.html

Last active September 19, 2019 14:12

Detect if a core script failed to load

	<html>
	<head>
	…
	</head>
	<body>
	…
	<script type="text/javascript">
	window.addEventListener('error', function(error) {
	if (error.target instanceof HTMLScriptElement) {
	const script = error.target;

wilsonpage / checksumProject.sh

Created August 9, 2019 13:25

Checksum a project

tar --exclude=node_modules -cf - . | md5sum

wilsonpage / copyToClipboard.js

Created August 9, 2019 13:21

iOS Safari copy to clipboard

	const fallback = (text) => {
	const isIos = navigator.userAgent.match(/ipad\|iphone/i);
	const textarea = document.createElement('textarea');

	// create textarea
	textarea.value = text;

	// ios will zoom in on the input if the font-size is < 16px
	textarea.style.fontSize = '20px';
	document.body.appendChild(textarea);

wilsonpage / spotify-markets.json

Last active October 18, 2020 11:30

A JSON list of all Spotify markets (ISO 3166-1) as per https://www.spotify.com/us/select-your-country/