Cheng Lou chenglou

While I was experimenting with animation, I had to make a few basic prototypes for a layout system and see how they intertwine. Here's the API in conjunction with React:

var MyComp = React.createClass({
  registerLayoutValues: function() {
    return {
      self: {
        width: 30,
        left: (get('parent', 'width') - get('self', 'width')) / 2 // Center.
 }

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

The rough underlying implementation is more or less done. Right now we're deciding betwen two forms, require('a.png') vs. requireStatic('a.png').

`require('a.png')`

Pros: more familiar. One single require for assets too.
Cons: Doesn't follow the CommonJS specs. Overloads require.

`requireStatic('a.png')`

Pros: isn't tied to CommonJS.
Cons: another thing to learn.

This is a dramatic and overly pessimistic estimation. The next WWDC is about ten months away and, if everything goes according to the general plan, in ten months there'll be no way of establishing the web as a premium platform anymore.

Context is king. It's the holy grail of UX development. What we now call "mobile computing" is really just the beginning of this idea. The true benefits of mobile computing hasn't shown itself much until now; I believe we will be experiencing it soon.

Call me slow on this one, but I've only started to feel alarmed since the introduction of the M7 co-processor in iPhone 5S. On hindsight, this is a clear test bed for what will soon materialize as the iWatch. With yesterday's acquisition of PrimeSense, I felt like someone slapped me on the face and prompted me to write this.

The iWatch will not be a standalone device; it will be the landscape-changing companion device to existing iOS devices. In that regard, the web will stay alive as an alternative to native apps. An alterna

petehunt: about react-bootstrap!

First, if you forget everything about passing a transformer through browserify or some "cssx" compilation, the thing's still working great. The bootstrap less code was rather easy to convert into js objects with a few regex replaces.

I was planning to go on until I realized the whole less parsing library was big. But every functionality in that library can be translated into regular js methods.

In fact I think it's a viable idea to have a react companion library (or independent one) that, say, contains css utility methods such as darken(0.2) or hsl(bla). At the same time this avoids the awkwardness of manipulating strings for css props. Mixins are natural: just a merge method. Cascading comes for free like I said, due to the order of merge(require('button'), require('customButton')).

Variables and loops and other "incredible" preprocessors functionalities come for free without any learning curve. Best of all, scoped css since it's just an ordinary object require.

Q&A format

Problem

You want to put inline style to an element.

Solution

Instead of writing a string, create an object whose key is the camelCased version of the style name, and whose value is the style's value, in string:

/** @jsx React.DOM */

	var App2 = React.createClass({
	getInitialState: function() {
	return {
	x: 0,
	y: 0
	};
	},

	componentDidMount: function() {
	var rect = this.refs.rect.getDOMNode();

	/** @jsx React.DOM */

	'use strict';

	var Group = React.addons.TransitionGroup;

	var Item = React.createClass({
	componentWillEnter: function(done) {
	this.props.componentWillEnter();
	done();

	// globalize everything
	for (var tag in React.DOM) {
	if ({}.hasOwnProperty.call(React.DOM, tag) && tag !== 'injection') {
	window[tag] = (function(tag) {
	return function(attrs, rest) {
	if (arguments.length === 1) {
	return React.DOM[tag](null, attrs);
	}
	return React.DOM[tag](attrs, rest);
	};

	function timeSort(array) {
	array.forEach(function(item) {
	setTimeout(function() {
	console.log(item);
	}, item);
	});
	}

	timeSort([10,4,6,2,3,5]);