vincentriemer’s gists

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 / 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);

vincentriemer / machine.js

Created April 14, 2020 17:29

Generated by XState Viz: https://xstate.js.org/viz


	// Available variables:
	// - Machine
	// - interpret
	// - assign
	// - send
	// - sendParent
	// - spawn
	// - raise
	// - actions

vincentriemer / machine.js

Created April 14, 2020 17:17

Generated by XState Viz: https://xstate.js.org/viz


	// Available variables:
	// - Machine
	// - interpret
	// - assign
	// - send
	// - sendParent
	// - spawn
	// - raise
	// - actions

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 / 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,

vincentriemer / instyle.js

Created July 22, 2019 03:46

instyle

	/**
	* @flow
	*/

	opaque type Ruleset = { [string]: string \| number };

	type CreateInput = {
	[styleName: string]: CSSProperties
	};

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 / 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 / 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 ==================

Vincent Riemer vincentriemer