Skip to content

Instantly share code, notes, and snippets.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@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.
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 / 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 / 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 / InternalLink.tsx
Created July 24, 2020 11:09
Strongly-typed NextJS internal links
@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;
@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