Skip to content

Instantly share code, notes, and snippets.

Avatar

Wilson Page wilsonpage

View GitHub Profile
@wilsonpage
wilsonpage / HydrateScope.tsx
Last active Feb 25, 2021
React SSR hydration boundary
View HydrateScope.tsx
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
wilsonpage / swr.ts
Last active Mar 26, 2021
An implementation of stale-while-revalidate for Cloudflare Workers
View swr.ts
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
wilsonpage / app.js
Created Nov 18, 2020
How to create a performance measurement that shows on devtools timeline
View app.js
performance.mark('myMark-start');
// your code
performance.mark('myMark-end');
performance.measure('myPerfMarker', 'myMark-start', 'myMark-end');
View copyToClipboard.ts
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';
View BackgroundImage.tsx
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;
View MyComponent.js
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
wilsonpage / index.html
Last active Sep 19, 2019
Detect if a core script failed to load
View index.html
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.addEventListener('error', function(error) {
if (error.target instanceof HTMLScriptElement) {
const script = error.target;
View checksumProject.sh
tar --exclude=node_modules -cf - . | md5sum
@wilsonpage
wilsonpage / copyToClipboard.js
Created Aug 9, 2019
iOS Safari copy to clipboard
View copyToClipboard.js
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
wilsonpage / spotify-markets.json
Last active Oct 18, 2020
A JSON list of all Spotify markets (ISO 3166-1) as per https://www.spotify.com/us/select-your-country/
View spotify-markets.json
[
"AD",
"AR",
"AU",
"AT",
"BE",
"BO",
"BR",
"BG",
"CA",