Justin Woo justinwoo

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.

Clojure Destructuring Tutorial and Cheat Sheet

(Related blog post)

Simply put, destructuring in Clojure is a way extract values from a datastructure and bind them to symbols, without having to explicitly traverse the datstructure. It allows for elegant and concise Clojure code.

Vectors and Sequences

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

	{-# LANGUAGE BangPatterns #-}
	{-# LANGUAGE DeriveGeneric #-}
	{-# LANGUAGE FlexibleContexts #-}
	{-# LANGUAGE FlexibleInstances #-}
	{-# LANGUAGE GADTs #-}
	{-# LANGUAGE GeneralizedNewtypeDeriving #-}
	{-# LANGUAGE OverloadedStrings #-}
	{-# LANGUAGE OverlappingInstances #-}
	{-# LANGUAGE KindSignatures #-}
	{-# LANGUAGE ScopedTypeVariables #-}

	/! normalize.css v2.1.3 \| MIT License \| git.io/normalize /

	/* ==========================================================================
	HTML5 display definitions
	========================================================================== */

	/**
	* Correct `block` display not defined in IE 8/9.
	*/

	#!/bin/sh

	# check for where the latest version of IDEA is installed
	IDEA=`ls -1d /Applications/IntelliJ\ * \| tail -n1`
	wd=`pwd`

	# were we given a directory?
	if [ -d "$1" ]; then
	# echo "checking for things in the working dir given"
	wd=`ls -1d "$1" \| head -n1`


	<html>
	<head>
	<title>Test</title>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://fb.me/react-0.5.1.js"></script>
	<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
	</head>

	(ns om-data.core
	(:require [om.core :as om :include-macros true]
	[om.dom :as dom :include-macros true]
	[datascript :as d]))

	(enable-console-print!)

	(def schema {})
	(def conn (d/create-conn schema))