Skip to content

Instantly share code, notes, and snippets.

Avatar

Kevin Suttle kevinSuttle

View GitHub Profile
@kevinSuttle
kevinSuttle / CustomStoryWrapper.jsx
Created Aug 1, 2019
Storybook docs - Custom Story wrapper
View CustomStoryWrapper.jsx
// @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';
View diff.md
-oldCode
+newCode
@kevinSuttle
kevinSuttle / .hyper.js
Last active Apr 24, 2018
Hyper config
View .hyper.js
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 Oct 13, 2017
Buildstamp banner
View banner.html
<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 Oct 12, 2016
Webpack auto-injecting banner into each file
View webpack.banner.js
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})}
View webpackfile.js
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 Sep 28, 2016
Hyperterm config
View .hyperterm.js
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 Aug 10, 2016
Current list of global top level domains
View gTLDs.txt
// taken from http://www.iana.org/domains/root/db
.aaa
.aarp
.abarth
.abb
.abbott
.abbvie
.abc
.able
.abogado
@kevinSuttle
kevinSuttle / README.md
Last active Aug 10, 2016
Atom speed test snippet
View README.md

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
View PropsComposition.js.flow
/* @flow */
type ButtonProps = {
onClick: () => void,
type: 'button' | 'reset' | 'submit',
design: 'primary' | 'secondary' | 'page' | 'tooltipInfo' | 'tooltipDocs',
onFocus: () => void,
onmouseover: () => void,
onmouseout: () => void,
className:string,