Skip to content

Instantly share code, notes, and snippets.

Johan Brook brookback

Block or report user

Report or block brookback

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
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;
View buttons.css
/*
BUTTONS
----------------------------------------------------------------*/
.btn {
--background: theme('colors.blue-60');
--text: #fff;
--text-hover: #fff;
--text-active: #e4e4e4;
--focused: color(theme('colors.blue-70'));
View fetch-figma-colors.js
/*
* This script fetches all color styles from a Figma team/document.
*
* Dependencies:
*
* - node-fetch
*
* Due to a limitation in the Figma /styles endpoint, we need to use a
* document for actually using the colors in a color grid 🙄That's why
* we're both fetching from /styles and /files below.
View form.tsx
import React from 'react';
interface Props {
onAddTodo: (newDescription: string) => void;
}
export const MyForm = (props: Props) => {
const handleSubmit = (evt) => {
evt.preventDefault();
You can’t perform that action at this time.