Skip to content

Instantly share code, notes, and snippets.

Avatar
🔥
Building dope stuff

Vincent Riemer vincentriemer

🔥
Building dope stuff
View GitHub Profile
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@vincentriemer
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
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
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
vincentriemer / PixelRatio.js
Created Jun 13, 2019
React PixelRatio Context & Hook
View PixelRatio.js
// @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
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
View twitter_encode.sh
#!/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 ==================
@vincentriemer
vincentriemer / Player.jsx
Created Apr 14, 2019
Player code for my Apple Music clone
View Player.jsx
// @flow
import * as React from "react";
import {
View,
StyleSheet,
Image,
Animated,
TouchableOpacity,
Text,
@vincentriemer
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
};
You can’t perform that action at this time.