Skip to content

Instantly share code, notes, and snippets.

View kevinSuttle's full-sized avatar

Kevin Suttle kevinSuttle

View GitHub Profile
@kevinSuttle
kevinSuttle / CustomStoryWrapper.jsx
Created August 1, 2019 16:46
Storybook docs - Custom Story wrapper
// @flow
/** @jsx jsx */
import * as React from 'react';
import {jsx} from '@emotion/core';
import {ThemeProvider} from 'emotion-theming';
import {Flexbox, Grid} from '../primitives';
import {darkTheme, lightTheme} from '../theme';
@kevinSuttle
kevinSuttle / diff.md
Created September 5, 2018 14:33
GFM Diff Syntax
-oldCode
+newCode
@kevinSuttle
kevinSuttle / .hyper.js
Last active April 24, 2018 15:16
Hyper config
module.exports = {
config: {
updateChannel: "stable",
fontSize: 18,
fontFamily:
'"Fira Code", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
fontWeight: "normal",
fontWeightBold: "bold",
cursorColor: "#80cbc4",
cursorAccentColor: "#000",
@kevinSuttle
kevinSuttle / banner.html
Last active October 13, 2017 20:35
Buildstamp banner
<div id="build-banner">
<small>This buildstamp was generated on <time id="buildstamp-time">{{ buildstampTime }}</time></small>
<section id="github-data">
<h2>GitHub</h2>
<dl id="latest-commit-data">
<dt>Commit hash:</dt>
<dd><a href="https://github.com//{{ORG}}/{{REPO}}/commit/{{ commitHash }}"><data id="git-commit_hash">{{ commitHash }}</data></a></dd>
<dt>Commit message:</dt>
@kevinSuttle
kevinSuttle / webpack.banner.js
Created October 12, 2016 16:50
Webpack auto-injecting banner into each file
const pkg = require('./package.json');
const moment = require('moment');
const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
const timeStamp = moment().format('LLLL');
const banner = `
Generated on ${timeStamp} - ${localTimeZone}
Description: ${pkg.description}
Package: ${pkg.name}
Version: v${pkg.version}
Contributors: ${pkg.contributors.map(function(contributor){ return contributor})}
@kevinSuttle
kevinSuttle / webpackfile.js
Created September 20, 2016 14:34
I just want Sass
const webpack = require('webpack');
const path = require('path');
var customProperties = require("postcss-custom-properties");
var cssApply = require('postcss-apply');
var autoprefixer = require('autoprefixer');
module.exports = env => {
if (!env) env = {}
const addPlugin = (add, plugin) => add ? plugin : undefined;
@kevinSuttle
kevinSuttle / .hyperterm.js
Last active September 28, 2016 20:12
Hyperterm config
module.exports = {
config: {
// default font size in pixels for all tabs
fontSize: '21',
// font family with optional fallbacks
fontFamily: 'Input Mono, Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
// terminal cursor background color (hex)
cursorColor: '#f4d300',
@kevinSuttle
kevinSuttle / gTLDs.txt
Created August 10, 2016 14:59
Current list of global top level domains
// taken from http://www.iana.org/domains/root/db
.aaa
.aarp
.abarth
.abb
.abbott
.abbvie
.abc
.able
.abogado
@kevinSuttle
kevinSuttle / README.md
Last active August 10, 2016 14:54
Atom speed test snippet

Using the above HTML snippet:

  1. select <span class="domain tld">
  2. ⌘F to 'Find'
  3. Click the 'Find' button
  4. Select 'Find' in the file menu
  5. Choose 'Select All'
  • The Atom app does not always report 'Not Responding' on OSX. Though sometimes you do see this: Atom not responding
/* @flow */
type ButtonProps = {
onClick: () => void,
type: 'button' | 'reset' | 'submit',
design: 'primary' | 'secondary' | 'page' | 'tooltipInfo' | 'tooltipDocs',
onFocus: () => void,
onmouseover: () => void,
onmouseout: () => void,
className:string,