Skip to content

Instantly share code, notes, and snippets.

@tomhicks
tomhicks / spoingyHeaders.ts
Created June 20, 2019 12:48
Bouncy header helper functions
import {Animated} from "react-native"
export function getSpoingyTransform(
scrollY: Animated.Value,
headerHeight: number,
) {
return [
{
translateY: scrollY.interpolate({
inputRange: [-headerHeight, 0, 1],
import * as React from "react"
import {captureScroll, getSpoingyTransform} from "spoingyHelpers"
import {Animated} from "react-native"
const headerHeight = 300
export default () => {
// use an instance variable if using component classes
const scrollY = React.useRef(new Animated.Value(0)).current
@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
@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 / 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 / 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 / InternalLink.tsx
Created July 24, 2020 11:09
Strongly-typed NextJS internal links
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 / 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.