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 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();
@brookback
brookback / fetch-figma-color-styles.js
Created Feb 25, 2019
Call with `FIGMA_PERSONAL_TOKEN node fetch-figma-color-styles.js`
View fetch-figma-color-styles.js
/*
* This script fetches all color styles from a Figma team/document.
*
* 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.
*
* For now, you need to input the page and team IDs, as well as the file keys.
* The team ID is in the Figma URL of your team, and the file key is the long
* string in the full URL of a Figma file. The page ID is visible in the JSON
View feedback.md

Allmänt

  • Tycker body-texten ska ha en brunare/jordigare ton. För mycket svart nu.
  • Har du provat med centerjusterad text i sektionen "Komplement, eller helt ny garderob"?
  • Tycker du kan blåsa upp rubriken i hero lite. Låt den ta lite plats! Kontrast! Tycker iofs du kan förstora alla rubriker nu när jag ser resten. Låt dem även ha samma fadeade ton som huvudrubriken.

Random/copy

  • Lite newb med gmail-adress.
  • Ingen spacing mellan hyphen i telefonnummer
@brookback
brookback / settings.json
Created Sep 20, 2018
Johan's VS Code settings
View settings.json
{
"javascript.showUnused": false,
"typescript.showUnused": false,
"telemetry.enableTelemetry": false,
"atomKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": false,
"editor.tabSize": 2,
"workbench.startupEditor": "newUntitledFile",
"editor.fontFamily": "Fira Mono, Menlo, Monaco, 'Courier New', monospace",
You can’t perform that action at this time.