JamesBliss

import { useCallback, useEffect, useState } from "react";

type FetchState<T> = {
  data: T | null;
  isLoading: boolean;
  error: Error | null;
  isCached: boolean;
  refetch: () => void;
};

JamesBliss

import { useEffect, useState } from "react";

type UseCookieReturnType = {
  cookie: string | undefined;
  setCookie: (value: string, days?: number) => void;
};

const useCookie = (cookieName: string): UseCookieReturnType => {
  const getCookie = (name: string): string | undefined => {
    const value = `; ${document.cookie}`;

JamesBliss

:root {
    --linear-in: linear(0, 1);
    --linear-out: linear(0, 1);
    --linear-in-out: linear(0, 1);
    --power0-in: linear(0, 1);
    --power0-out: linear(0, 1);
    --power0-in-out: linear(0, 1);
    --quad-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 );
    --quad-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086, 0.8593, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1 );
    --quad-in-out: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%, 0.2477, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987, 0.875 75%, 0.9297, 0.9687, 0.9922, 1 );

JamesBliss

// zod schema
z.object({
    // valid if string or:
    optional: z.string().optional(), // field not provided, or explicitly `undefined`
    nullable: z.string().nullable(), // field explicitly `null`
    nullish: z.string().nullish(), // field not provided, explicitly `null`, or explicitly `undefined`
});

// type
{

JamesBliss

import z from "zod";

export async function safeFetch<T>(
  schema: z.Schema<T>,
  input: RequestInfo,
  init?: RequestInit
): Promise<T> {
  const response = await fetch(input, init);

  if (!response.ok) {

JamesBliss

import type {SanityClient} from '@sanity/client'
import {v5 as uuidv5} from 'uuid'

import {buildCollectionDocumentId, commitCollectionDocument} from './sanityOps'

import type {ShopifyDocumentCollection} from './storageTypes'
import {SHOPIFY_COLLECTION_DOCUMENT_TYPE, UUID_NAMESPACE_COLLECTIONS} from './constants'
import {DataSinkCollection} from './requestTypes'
import {idFromGid} from './requestHelpers'

JamesBliss

#Heading 1 ##Heading 2 ###Heading 3 ####Heading 4 #####Heading 5 ######Heading 6

---

Paragraph

JamesBliss

// 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.

JamesBliss

Linear Interpolation Functions

const lerp = (x, y, a) => x * (1 - a) + y * a;
const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));
const invlerp = (x, y, a) => clamp((a - x) / (y - x));
const range = (x1, y1, x2, y2, a) => lerp(x2, y2, invlerp(x1, y1, a));

JamesBliss

React => measuring a DOM node

Your first instinct will be to use a useRef which can be a good solution, although an object ref doesn’t notify us about changes to the current ref value. This means when the ref.current changes you will not see the updated value.

Solution 1.

Use a callback ref (this example is taken from the react hooks FAQ) This is a super simple and pretty nice solution for one-off measurements.