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
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
};
@vincentriemer
vincentriemer / plugin.js
Last active Dec 7, 2018
rollup-plugin-netlify-modulepreload
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
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, {
useRef,
useEffect,
forwardRef,
useImperativeMethods
} from "react";
You can’t perform that action at this time.