Skip to content

Instantly share code, notes, and snippets.

Avatar

Johan Brook brookback

View GitHub Profile
View main.rs
fn main() {
let lol: Option<&str> = Some("lol");
if lol.is_none() {
// do some error handling
return;
}
// I'd love if `lol` was asserted to be Some("lol")
// below this if clause.
@brookback
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
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';