Skip to content

Instantly share code, notes, and snippets.

@brigand
brigand / promiseMap.js
Created Feb 17, 2021
A slow async/await version of promiseMap
View promiseMap.js
async function promiseMap(array, mapper, concurrency) {
const promises = [];
const results = Array.from({ length: array.length });
const drainOne = async () => {
const [pj, { index, resolved, rejected }] = await Promise.race(promises.map((p, pi) => p.then((v) => [pi, v])));
promises.splice(pj, 1);
if (resolved) {
results[index] = resolved[0];
@brigand
brigand / .js
Last active Sep 1, 2020
domOn, domOnce
View .js
function domOn(subject, eventName, handler, options = false) {
// This function is useless except in the case domOn(x, 'e', f); domOn(x, 'e', f); is run
// where cleanup can remove the distinct 'inner' function from each call, instead of both 'f' listeners.
function inner(event) {
return handler.call(this, event);
}
subject.addEventListener(eventName, inner, options);
const cleanup = () => subject.removeEventListener(eventName, inner, options);
@brigand
brigand / .js
Created Dec 17, 2019
Concept for flexible pattern matching in ES6
View .js
import match, { matches, Instance, TypeOf, PropEq, Eq, Check, Index } from '@brigand/unnamed-match-thing';
// Simple matching.
// Note that this is an object literal, so all of these need to
// return something with a toString, and match needs to convert that
// back to the pattern. This implies we need to store Eq('production') in
// module level storage and somehow avoid leaking memory for every pattern ever used.
// Something every toString called here allocates the pattern, and when match() is called
// it can claim all patterns before it (since the toString calls run before match()), removing
// them from the global storage, and then execute the patterns.
@brigand
brigand / README.md
Last active Nov 14, 2019
A gist npm package for using @types/stripe-v3
View README.md

To install, add this gist as a dependency, and @types/stripe-v3 as a dev dependency.

yarn add --dev @types/stripe-v3
yarn add https://gist.github.com/955eafd92692f4ba54d50d447cef6327.git

Or with npm

@brigand
brigand / a.example.md
Last active May 28, 2019
A react hook for an enum-like interface to async data
View a.example.md

Simple example where .match is used to render in one of three states.

function User({ id }) {
  const state = usePromise(() => get('/api/user', { id }), [id]);
  
  return (
    <div className={css.root}>
      {state.match({
@brigand
brigand / .js
Last active Apr 11, 2019
react-router - clicking a link again refreshes data
View .js
import useReactRouter from 'use-react-router';
function UserPage({ match }) {
const [user, setUser] = React.useState(null);
const { history } = useReactRouter();
// If on /user/123 and you click a link to /user/123, history.length will be
// increased by 1, causing the effect to run again
React.useEffect(() => {
let cancel = false;
@brigand
brigand / 1.example.js
Last active Mar 26, 2019
The `useLocationState` hook gives a `React.useState`-like interface to updating the HTML5 History API location state.
View 1.example.js
function Foo() {
const [count, setCount] = useLocationState('Foo', 0);
return (
<div>
<button onClick={() => setCount(c => c + 1)}>Clicks: {count}</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
@brigand
brigand / example.js
Last active Feb 27, 2019
React Hook 'useDebounced' for debouncing event handlers
View example.js
function Foo({ onClick }) {
let handler = useDebounced(onClick, { delay: 1000, leading: true });
return <button onClick={handler}>Click me</button>;
}
View image.js
import React, { Component } from 'react';
import styled from 'styled-components';
const Figure = styled.figure`
height: 0;
margin: 0;
background-color: #efefef;
position: relative;
padding-bottom: ${props => props.ratio}%;
`;
@brigand
brigand / .md
Created Dec 30, 2018
Issues with the KM Resizer Tool (post here!)
View .md

Issues with the KM Resizer Tool

It's a tiny project, so please leave any error reports as comments here.