Skip to content

Instantly share code, notes, and snippets.

@tomhicks
tomhicks / useTaskQueue.ts
Created January 11, 2021 11:41
React Hook for queueing and processing async tasks sequentially
function useTaskQueue(params: {
shouldProcess: boolean
}): {
tasks: ReadonlyArray<Task>
isProcessing: boolean
addTask: (task: Task) => void
} {
const [queue, setQueue] = React.useState<{
isProcessing: boolean
tasks: Array<Task>
@tomhicks
tomhicks / timePerFrame.ts
Last active April 9, 2024 16:42
Aggregate function calls or named code blocks over a single frame. Like console.time/timeEnd but aggregated across many calls.
/* eslint-disable import/no-unused-modules */
/**
Usage:
// logs out the calls per frame, mean time, etc, under "myFunction"
const myFunction = instrumentPerFrame(function myFunction() {...});
// pass the name as the first parameter to wrap around methods and give them a name.
@tomhicks
tomhicks / plink-plonk.js
Last active March 18, 2024 02:23
Listen to your web pages
let mode: "idle" | "dragging" = "idle"
const dragHandler: InteractionHandler = {
onDragStart(gesture, app) {
if (intersection(gesture.elementsUnderCursor, app.selectedElements).size) {
mode = "dragging";
}
},
onPointerMove(gesture) {
// ignore pointer-moves when we haven't started dragging
@tomhicks
tomhicks / InternalLink.tsx
Created July 24, 2020 11:09
Strongly-typed NextJS internal links
@tomhicks
tomhicks / ChakraColorModeComponents.tsx
Created August 7, 2022 10:35
SSR colorMode in Next.js with ChakraUI
import {ChakraProvider, useColorMode} from "@chakra-ui/react"
import {Html} from "next/document"
import React from "react"
type ColorMode = "light" | "dark"
export function ChakraThemedHtmlComponent(props: {
colorMode: ColorMode
children: React.ReactNode
}) {
return (
@tomhicks
tomhicks / promiseSequencer.ts
Last active July 5, 2022 08:50
Lets you continually push to a "stream" of promises, to be notified of their resolution/rejection, with the guarantee that the resolved values will be emitted in order, skipping any that come back out of order.
type PromiseSequencer<T> = {
/**
* Add a promise to the end of the queue. When this promise resolves, you
* may be notified via onLatest, assuming that no later promise has resolved
* in the meantime.
*/
push(promise: Promise<T>): void;
/**
* Remove all promises from the queue. Any promises in the queue can still
@tomhicks
tomhicks / useScreenShare.ts
Created March 17, 2021 11:20
How splitting useEffect calls simplifies code, and reduces bugs
// ATTEMPT 1 - everything in one useEffect
React.useEffect(() => {
if (screenVideoTrack) {
createScreenShareOffer()
} else {
// 🐞 called before share, on mount
revokeScreenShareOffer()
}
// 🐞 called even if screen was never shared
@tomhicks
tomhicks / sweep-swoop.js
Last active December 10, 2021 10:02
Listen to your web pages
const audioCtx = new window.AudioContext();
const oscillator = audioCtx.createOscillator();
oscillator.connect(audioCtx.destination);
oscillator.type = "sine";
let numItems = 0
oscillator.frequency.setValueAtTime(
1,
audioCtx.currentTime
@tomhicks
tomhicks / node-svm.cc
Created February 20, 2020 17:50
Node 12 node-svm fix
#include "node-svm.h"
#include "training-worker.h"
#include "prediction-worker.h"
#include "probability-prediction-worker.h"
using v8::FunctionTemplate;
using v8::Object;
using v8::String;
using v8::Array;