Alex Krolick alexkrolick

The introduction to Reactive Programming you've been missing

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Hi Zach :D

Modals are funny beasts, usually they are a design cop-out, but that's okay, designers have to make trade-offs too, give 'em a break.

First things first, I'm not sure there is such thing as a "simple" modal that is production ready. Certainly there have been times in my career I tossed out other people's "overly complex solutions" because I simply didn't understand the scope of the problem, and I have always loved it when people who have a branch of experience that I don't take the time

Strictly Frameworks

Mobiledoc - github.com/bustle/mobiledoc-kit - framework to build editors with a standardized JSON structure
ShareDB - github.com/share/sharedb - framework to sync any JSON document using operational transforms, add real-time collaborative editing to anything else
Bangle.dev - github.com/bangle-io/bangle.dev - toolkit built for building editors, based on prosemirror

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

Moved to Shopify/graphql-design-tutorial

	[merge]
	keepBackup = false
	tool = p4merge
	[mergetool "p4merge"]
	cmd = /Applications/p4merge.app/Contents/Resources/launchp4merge "\"$PWD/$BASE\"" "\"$PWD/$REMOTE\"" "\"$PWD/$LOCAL\"" "\"$PWD/$MERGED\""
	keepTemporaries = false
	trustExitCode = false
	keepBackup = false
	[diff]
	tool = p4merge

	const I = x => x
	const K = x => y => x
	const A = f => x => f (x)
	const T = x => f => f (x)
	const W = f => x => f (x) (x)
	const C = f => y => x => f (x) (y)
	const B = f => g => x => f (g (x))
	const S = f => g => x => f (x) (g (x))
	const S_ = f => g => x => f (g (x)) (x)
	const S2 = f => g => h => x => f (g (x)) (h (x))

	# Installation
	#
	# MacOS
	#
	# mkdir ~/.zsh
	# brew install zsh-syntax-highlighting zsh-completions
	# touch ~/.zshrc
	# touch ~/.profile
	#
	# Paste this file into `~/.zshrc`

	[alias]
	last = log -1 HEAD
	unstage = reset HEAD --
	undo = reset --soft HEAD^
	stash-all = stash save --include-untracked
	ss = stash-all
	a = add --patch
	aa = add .
	amend = commit --amend
	c = commit

	const DumbComponent = (props) => {
	return (<div />);
	}