Skip to content

Instantly share code, notes, and snippets.

Building dope stuff

Vincent Riemer vincentriemer

Building dope stuff
Block or report user

Report or block vincentriemer

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
vincentriemer / usePersistedState.js
Created Aug 6, 2019
My take on a type-safe usePersistedState hook, leveraging React suspense/concurrent-mode, DOM custom events, and the kv-storage builtin module.
View usePersistedState.js
* @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 Sep 9, 2019
"Safe Area Inset" value tracking (most immediately useful with iPhone X) via React context & hooks.
View SafeAreaInsets.js
* @flow
import * as React from "react";
type SafeAreaInsetsContextType = $ReadOnly<{|
top: number,
left: number,
right: number,
View instyle.js
* @flow
opaque type Ruleset = { [string]: string | number };
type CreateInput = {
[styleName: string]: CSSProperties
vincentriemer / VideoProgressSlider.js
Created Jul 21, 2019
The current (WIP) implementation of chonkit's video progress slider.
View VideoProgressSlider.js
* @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 Jun 13, 2019
React PixelRatio Context & Hook
View PixelRatio.js
// @flow
import * as React from "react";
function processPixelRatio(input: ?number): number {
return input ?? DEFAULT_PIXEL_RATIO;
// matchMedia feature detection
vincentriemer /
Created May 5, 2019
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:
# $ ./ [INPUT_FILE]
# NOTE: The output directory is defined in the script (below) because I use this script with Hazel
# START CONFIGURATION ==================
vincentriemer / Player.jsx
Created Apr 14, 2019
Player code for my Apple Music clone
View Player.jsx
// @flow
import * as React from "react";
import {
vincentriemer / iphone-frame-overlay-app.js
Created Jan 20, 2019
Video iPhone Frame Overlay Web App Prototype
View iphone-frame-overlay-app.js
import React, { Component, useCallback, useState, useRef } from "react";
import "./App.css";
const imgUrl = require("./assets/iPhone-XS-Portrait-Space-Gray.png");
const fullSize = {
width: 1325,
height: 2616
vincentriemer / plugin.js
Last active Dec 7, 2018
View plugin.js
import * as path from "path";
import * as fs from "fs";
export default function netlifyModulePreload(config) {
return {
name: "netlify-modulepreload",
generateBundle(outputOptions, bundle) {
const { publicRoot, entries } = config;
const { dir, format } = outputOptions;
vincentriemer / react-virtual-scroller.tsx
Created Dec 3, 2018
React wrapper around the <virtual-scroller /> web component
View react-virtual-scroller.tsx
// Global import to register <virtual-scroller /> custom element
// This should be replaced with a layered import once it is introduced into browsers
import "virtual-scroller/src/virtual-scroller";
import React, {
} from "react";
You can’t perform that action at this time.