Skip to content

Instantly share code, notes, and snippets.

View wilsonpage's full-sized avatar

Wilson Page wilsonpage

401 followers · 5 following
View GitHub Profile
@wilsonpage
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
wilsonpage / swr.ts
Last active February 20, 2024 05:21
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
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
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
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
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
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
wilsonpage / checksumProject.sh
Created August 9, 2019 13:25
Checksum a project
tar --exclude=node_modules -cf - . | md5sum
@wilsonpage
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
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/
[
"AD",
"AR",
"AU",
"AT",
"BE",
"BO",
"BR",
"BG",
"CA",