Skip to content

Instantly share code, notes, and snippets.

shilman /
Last active Jul 19, 2021
Storybook Docs Typescript Walkthrough

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript
robert-stuttaford / build.clj
Last active Aug 1, 2018
Basic nREPL / cljs compile / cljs repl / figwheel script for use with clj cli command: `clj build.clj TASK`
View build.clj
(require '[ :as api]
'[clojure.string :as string]
'[figwheel-sidecar.repl-api :as figwheel]
'[figwheel-sidecar.components.nrepl-server :as figwheel.nrepl])
(def source-dir "src")
(def compiler-config
{:main 'app.main
:output-to "target/app.js"
View 0

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

Head Over Heels for Snapshot Testing

Tests are interesting, because you're trying to test code. But to write tests, you have to write code. Who tests the tests? For tests to be worth it you need to be sure that for each line of code you add, the value being added is more than the liability.

Value > Liability

Because belive me, tests are a liability. First, they are code that

View preact.go
// Package preact provides bindings to the preact library.
package preact
import ""
var preact = js.Global.Get("preact")
// Attrs of an element.
type Attrs map[string]interface{}
bendc / randomInterval.js
Created Mar 9, 2017
rAF-based random interval
View randomInterval.js
const randomInterval = (() => {
const random = (min, max) => Math.random() * (max - min) + min;
return (callback, min, max) => {
const time = {
total: random(min, max)
const tick = now => {
if ( <= now - time.start) {
time.start = now;
tkh44 / Animation.jsx
Last active Feb 5, 2020
react-router v4 animated with data-driven-motion
View Animation.jsx
import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, matchPath } from 'react-router-dom'
import { Motion } from 'data-driven-motion' //
const WOBBLY_SPRING = { stiffness: 200, damping: 15, precision: 0.1 }
const AnimationExample = () => (
View App.js
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import { Route, Link, Redirect } from './Zero'
const paths = [ 'one', 'two', 'three' ]
class App extends Component {
render() {
developit / components.js
Created Feb 22, 2017
vdom agnostic components
View components.js
import preact from 'preact';
import createFoo from './foo';
import createBar from './bar';
export const Foo = createFoo(preact);
export const Bar = createBar(preact);
madox2 / vim_eslint_fix.vim
Created Oct 12, 2016
Function which runs eslint --fix and saves the buffer. It is mapped to :W command
View vim_eslint_fix.vim
function ESLintFix()
silent execute "!./node_modules/.bin/eslint --fix %"
edit! %
command W call ESLintFix()