Nick Sheffield nicksheffield

nicksheffield / gist:c9acb9962ce31cb6a0eb435c5be41f6f

Created December 6, 2024 13:22

react 19 no-build

	<script type="module">
	// https://react.dev/blog/2024/04/25/react-19-upgrade-guide#umd-builds-removed
	import React from "https://esm.sh/react@19/?dev"
	import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"
	...
	</script>

nicksheffield / getNestedItems.ts

Created March 20, 2023 02:29

turn flat structure into nested structure

	type Item = {
	id: string
	parentId: string \| undefined
	}

	type NestedItem = Item & {
	children: NestedItem[]
	}

	const getNestedItems = (items: Item[], parentId: string \| undefined = undefined) => {

nicksheffield / react.tsx

Last active January 23, 2023 05:29

react awaitable imperative modal paradigm

	import * as React from 'react'

	export type ModalResolveFn<T = unknown> = (answer?: T) => void

	// the shape of a modal definition. A unique id and an element
	export interface ModalDefinition<T> {
	id: string
	element: React.ReactNode
	handleClose: ModalResolveFn<T>
	}

nicksheffield / react.tsx

Last active January 23, 2023 05:26

react imperative modal paradigm

	import * as React from 'react'

	// the shape of a modal definition. A unique id and an element
	interface ModalDefinition {
	id: string
	content: React.ReactNode
	}

	type AddModalFn = (def: ModalDefinition) => void
	type RemoveModalFn = (id: string) => void

nicksheffield / gist:8fc6f3341a831b2944c1c2157b062ed8

Created December 29, 2022 06:24

clientX, clientY explanation

	clientX/Y: 0,0 is top left of the browser window (under the toolbar/bookmarks bar)
	offsetX/Y: 0,0 is top left of clicked element
	screenX/Y: 0,0 is top left of monitor/display
	pageX/Y: 0,0 is top left of page content, including scroll

nicksheffield / example.ts

Created October 31, 2022 09:42

Typed keyof output

	const obj = {
	str: 'hello',
	num: 1,
	bool: true
	}

	type MiscObject = typeof obj

	const fun = <T extends keyof MiscObject>(key: T): MiscObject[T] => {
	return obj[key]

nicksheffield / gist:81cff2e6d57409a5ac185aed077e1f2b

Created September 26, 2021 22:04

get positional string from number, ie: first, second, third, thirteenth, twentieth, twenty-first etc

nicksheffield / useAutoFocus.ts

Created April 21, 2021 23:21

do auto focus on an html input more reliably in react

	import { useEffect, useRef } from "react"

	const useAutoFocus = (enabled: boolean) => {
	const ref = useRef<HTMLElement>()

	useEffect(() => {
	if (ref.current && enabled) {
	setTimeout(() => ref.current?.focus(), 100)
	}
	}, [enabled])

nicksheffield / timeslots-generator.js

Created February 17, 2020 02:49

Generate an array of time slots from a beginning to an end, skipping forward a certain amount of time each time

	import { isBefore, setHours, setMinutes, setSeconds, addMinutes, setMilliseconds } from 'date-fns'

	const setTime = (x, h = 0, m = 0, s = 0, ms = 0) => setHours(setMinutes(setSeconds(setMilliseconds(x, ms), s), m), h)

	const from = setTime(new Date(), 9)
	const to = setTime(new Date(), 17)
	const step = (x) => addMinutes(x, 30)

	const blocks = []
	let cursor = from

nicksheffield / deriveEnumFlags.js

Last active February 10, 2020 02:53

derive enum flags