Skip to content

Instantly share code, notes, and snippets.


Johan Brook brookback

View GitHub Profile
fn main() {
let lol: Option<&str> = Some("lol");
if lol.is_none() {
// do some error handling
// I'd love if `lol` was asserted to be Some("lol")
// below this if clause.
brookback / use-cycling-focus.ts
Created Sep 18, 2020
A React hook for managing focus of elements in a list based on keyboard arrows (up and down).
View use-cycling-focus.ts
import * as React from 'react';
type FocusIndex = number | null;
* A React hook for managing focus of elements in a list based on keyboard
* arrows (up and down). Great for a11y and UX.
* This hook does not deal with the actual imperative `.focus()` part at all.
* It solely calculates the which index in a list which should currently be
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 / Tooltip.tsx
Created Mar 5, 2020
Tooltip.tsx wrapping custom reach-tooltip-modified.tsx.
View Tooltip.tsx
import React, { Fragment, cloneElement } from 'react';
import {
} from './reach-tooltip';
interface Props {
isVisible?: boolean;
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
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.
View .gitconfig
# 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 / 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';