Rick Harrison rickharrison

Stuff you can do in Canvas JSX files

JSX

function foo(paths) {
  return <svg>{paths}</svg>;
}

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

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.

Interesting part (unmounting & API) is at the end if you're not interested in the rest =).

Stress Tests

This animation proposal is just an attempt. In case it doesn't work out, I've gathered a few examples that can test the power of a future animation system.

Parent is an infinitely spinning ball, and has a child ball that is also spinning. Clicking on the parent causes child to reverse spinning direction. This tests the ability of the animation system to compose animation, not in the sense of applying multiple interpolations to one or more variables passed onto the child (this should be trivial), but in the sense that the parent's constantly updating at the same time as the child, and has to ensure that it passes the animation commands correctly to it. This also tests that we can still intercept these animations (the clicking) and immediately change their configuration instead of queueing them.
Typing letters and let them fly in concurrently. This tests concurrency, coordination of an array of ch

Note: Up to date version now at https://github.com/lukehoban/es6features

ECMAScript 6

Introduction

ECMAScript 6 is the upcoming version of the ECMAScript standard. This standard is targetting ratifcation in December 2014. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now.

See the draft ES6 standard for full specification of the ECMAScript 6 language.

ES6 includes the following new features:

	var Style = React.createClass({
	render: function() {
	var style = assign({}, this.props);
	delete style.children;

	return React.createElement(
	'div',
	{style: style, children: this.props.children}
	);
	}

	var Authenticated = React.createClass({
	statics: {
	willTransitionTo (transition) {
	if (!authenticated()) {
	transition.redirect('login');
	}
	}
	}
	});

	/** @jsx React.DOM */
	function makeStubbedDescriptor(component, props, contextStubs) {
	var TestWrapper = React.createClass({
	childContextTypes: {
	currentPath: React.PropTypes.string,
	makePath: React.PropTypes.func.isRequired,
	makeHref: React.PropTypes.func.isRequired,
	transitionTo: React.PropTypes.func.isRequired,
	replaceWith: React.PropTypes.func.isRequired,
	goBack: React.PropTypes.func.isRequired,

	'use strict';

	var Promise = require('bluebird');
	var knex = require('../../src/db').knex;

	var tables = [
	'organizations',
	'campaigns',
	'donors',
	'pledges',

	var Dialog = React.createClass({
	render: function() {
	// 1) render nothing, this way the DOM diff will never try to do
	// anything to it again, and we get a node to mess with
	return React.DOM.div();
	},

	componentDidMount: function() {
	// 2) do DOM lib stuff
	this.node = this.getDOMNode();

	extension Array {

	func first() -> Element? {
	if isEmpty {
	return nil
	}
	return self[0]
	}

	func last() -> Element? {