Skip to content

Instantly share code, notes, and snippets.

View components socket_context context.js
import React, { createContext } from "react";
const SocketContext = createContext({
queueLength: 0,
positionInLine: 0,
export default SocketContext;
View Weird hook stuff
From docs:
“Any function inside a component, including event handlers and effects, “sees” the props and state from the render it was created in.”
so stale closures exist - you have to do like setCount(count => count + 1) to access the 'latest actual state'
if you do like setCount(count + 1) it wont increase because you're using the 'count' from the origional render
from here:
“Effects always “see” props and state from the render they were defined in. That helps prevent bugs but in some cases can be annoying. For those cases, you can explicitly maintain some value in a mutable ref.”

Keybase proof

I hereby claim:

  • I am alexboots on github.
  • I am alexboots ( on keybase.
  • I have a public key ASBarHKUpcZIFw1_DTXUzuy4jEiwdKUtwZnnu200DC3CiQo

To claim this, I am signing this object:

View gist:d055a6d139be48440dc8e7654a6a9c4c
All from here:
run with --strict to catch more stuff
number[] = array of numbers,
also Array<number>
string[] = array of string
any = typescript wont yell at you for anything
let obj: any = { x: 0 };
View Associate country with continent based on country shortcode
// country-by-continent.js
export const NORTH_AMERICA = 'North America'
export const EUROPE = 'Europe'
export const ASIA = 'Asia'
export const AUSTRALIA = 'Australia'
export const SOUTH_AMERICA = 'South America'
export const AFRICA = 'Africa'
export const ANTARCTICA = 'Antarctica'
export const UNCATEGORIZED = 'Uncategorized'
View bulma debug helper
// until 768px
@include mobile {
div {
background: pink;
// from 769px
@include tablet {
alexboots /
Created Sep 22, 2016 — forked from andymatuschak/
A composable pattern for pure state machines with effects (draft v3)

A composable pattern for pure state machines with effects

State machines are everywhere in interactive systems, but they're rarely defined clearly and explicitly. Given some big blob of code including implicit state machines, which transitions are possible and under what conditions? What effects take place on what transitions?

There are existing design patterns for state machines, but all the patterns I've seen complect side effects with the structure of the state machine itself. Instances of these patterns are difficult to test without mocking, and they end up with more dependencies. Worse, the classic patterns compose poorly: hierarchical state machines are typically not straightforward extensions. The functional programming world has solutions, but they don't transpose neatly enough to be broadly usable in mainstream languages.

Here I present a composable pattern for pure state machiness with effects,

View example label edit show stuff
import React from 'react'
import ampersandMixin from 'ampersand-react-mixin'
export default React.createClass({
mixins: [ampersandMixin],
displayName: 'Label',
getInitialState () {
View frontend-auth-template.js
routes: {
'login': 'login',
'logout': 'logout',
'auth/callback?:query': 'authCallback' // :query syntax passes whatever str is passed back to authCallback