Skip to content

Instantly share code, notes, and snippets.

View vincentriemer's full-sized avatar

Vincent Riemer vincentriemer

View GitHub Profile
@vincentriemer
vincentriemer / relay.mjs
Created December 9, 2021 18:21
Example script for query persistence w/ the new relay compiler in a way that can easily be run in CI
import { execa } from "execa";
import * as path from "path";
import { fileURLToPath, pathToFileURL } from "url";
import express from "express";
import bodyParser from "body-parser";
import * as crypto from "crypto";
import * as fs from "fs/promises";
const urlencodedParser = bodyParser.urlencoded();
@vincentriemer
vincentriemer / keyeventmanagement.js
Last active February 12, 2021 16:55
Listening/Reporting when keys are being held in vanilla JS
function registerKeyHoldEvent(key, onChange) {
const handleKeyDown = (evt) => {
if (evt.key === key) {
onChange(true);
document.removeEventListener("keydown", handleKeyDown);
const handleKeyUp = (evt) => {
if (evt.key === key) {
onChange(false);
document.removeEventListener("keyup", handleKeyUp);
registerKeyHoldEvent(element, key);
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@vincentriemer
vincentriemer / usePersistedState.js
Created August 6, 2019 15:06
My take on a type-safe usePersistedState hook, leveraging React suspense/concurrent-mode, DOM custom events, and the kv-storage builtin module.
/**
* @flow
*/
import * as React from "react";
import { unstable_createResource } from "react-cache";
import * as Scheduler from "scheduler";
import { StorageArea } from "std:kv-storage";
// Creates a ref that tracks the latest value of the argument passed to it
@vincentriemer
vincentriemer / SafeAreaInsets.js
Last active September 9, 2019 16:10
"Safe Area Inset" value tracking (most immediately useful with iPhone X) via React context & hooks.
/**
* @flow
*/
import * as React from "react";
type SafeAreaInsetsContextType = $ReadOnly<{|
top: number,
left: number,
right: number,
/**
* @flow
*/
opaque type Ruleset = { [string]: string | number };
type CreateInput = {
[styleName: string]: CSSProperties
};
@vincentriemer
vincentriemer / VideoProgressSlider.js
Created July 21, 2019 18:29
The current (WIP) implementation of chonkit's video progress slider.
/**
* @flow
*/
import VisuallyHidden from "@reach/visually-hidden";
import instyle from "instyle";
import * as React from "react";
import { Focus } from "react-events/focus";
import { Drag } from "react-events/drag";
import { Press } from "react-events/press";
@vincentriemer
vincentriemer / PixelRatio.js
Created June 13, 2019 07:27
React PixelRatio Context & Hook
// @flow
import * as React from "react";
const DEFAULT_PIXEL_RATIO = 1;
function processPixelRatio(input: ?number): number {
return input ?? DEFAULT_PIXEL_RATIO;
}
// matchMedia feature detection
@vincentriemer
vincentriemer / twitter_encode.sh
Created May 5, 2019 02:08
Script to encode videos optimized for Twitter with ffmpeg. NOTE: Read through the entire script before running and modify to your needs, as it is currently configured for my own environment
#!/usr/bin/env bash
set -e
# usage:
# $ ./encode.sh [INPUT_FILE]
#
# NOTE: The output directory is defined in the script (below) because I use this script with Hazel
# START CONFIGURATION ==================