Skip to content

Instantly share code, notes, and snippets.

Avatar

Johan Brook brookback

View GitHub Profile
View insert-sorted-arr.ts
// tslint:disable no-let
/** Return:
*
* - `< 0` if `a` comes before `b`.
* - `0` if `a` and `b` are equal.
* - `> 0` if `a` comes after `b`.
*/
type Comparator<T> = (a: T, b: T) => number;
@brookback
brookback / Tooltip.tsx
Created Mar 5, 2020
Tooltip.tsx wrapping custom reach-tooltip-modified.tsx.
View Tooltip.tsx
import React, { Fragment, cloneElement } from 'react';
import {
useTooltip,
TooltipPopup,
TooltipProps,
Position,
} from './reach-tooltip';
interface Props {
isVisible?: boolean;
@brookback
brookback / input.css
Created Feb 26, 2020
PostCSS plugin which finds all hex or rgb colors defined on :root, and converts them to Display P3 versions and adds to a @supports rule.
View input.css
:root {
--sans: Quicksand, sans-serif;
--serif: Neuton, serif;
--font-size: 24px;
--lineheight: 1.6;
--spacing: calc(var(--lineheight) * 1rem);
/* Colours */
View christian.js
const easeInOutQuad = (t) => t<.5 ? 2*t*t : -1+(4-2*t)*t
const easeInOutCubic = (t) => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1
const easeInOutQuart = (t) => t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t
const easeInOutQuint = (t) => t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t
// OLIKA FUNKTIONER
@brookback
brookback / query.js
Last active Oct 28, 2019
Conditionally fetching a GraphQL field based on the presence of required variable.
View query.js
/*
This query will crash when run if incoming userId prop is undefined. It's because
it's marked as required for the `user(id)` field. So that will force me to mark it
as required as a variable in my `Foo` client query below.
But I want to *conditionally* include the whole user field if only if userId prop
is a string in the component.
How?!
View .gitconfig
[alias]
# View commits in local branch vs. master
current = !"git log $(git rev-parse --abbrev-ref HEAD) ^master --no-merges"
# View unpushed commits
unpushed = !git log @{u}..HEAD
# View all unpushed commits on all branches
all-unpushed = !git log --branches --not --remotes --oneline
# View latest unpushed commits on all branches
unpushed-branches = !git log --branches --not --remotes --oneline --decorate --simplify-by-decoration
View classNames.ts
type ValidClass = string | number | undefined | null | ObjectClass;
type ObjectClass = {
[key: string]: boolean | undefined;
};
type ClassName = ValidClass | ValidClass[];
/**
* Easier class names management for JSX elements.
@brookback
brookback / index.tsx
Last active Jul 8, 2019
A React component which supports Markdown, emojis, and @mentions.
View index.tsx
import * as React from 'react';
import * as unified from 'unified';
import { useContext } from 'react';
import classNames from '../libs/classNames';
import mentions from './remark-mentions';
import { StateContext } from '..';
import { traverseMentions } from '../traverse-mentions';
import { User } from '../types';
@brookback
brookback / README.md
Last active May 13, 2019
A React hook for getting a single boolean value for when pairs in an array change.
View README.md

useHasChanged

import React, { useState } from 'react';

interface Props {
  text: string;
}

const MyComponent = (props: Props) => {
View app.tsx
import React, { useEffect, useState, useCallback } from 'react';
import { render } from 'react-dom';
import { run } from 'frap';
import xs, { Stream } from 'xstream';
import { useStream } from './util';
import { State, View, startState } from './main.ts';
/** Our 'send' function signature. */
type Send = (event: View) => void;
You can’t perform that action at this time.