Esteban S. Abait eabait

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).

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

Mac OS X GIS Setup

OS X Preferences

# Expand save panel by default
defaults write NSGlobalDomain NSNavPanelExpandedStateForSaveMode -bool true

Converting libraries to Ember CLI addons

In this guide we will cover two main cases:

Ember specific library
vendor library

Ember library

The Ember library will assume that Ember has already ben loaded (higher in the loading order) and thus will assume it has access to the Ember API.

Tools that read through a directory, stream or tree and create an Application Cache manifest for you.

AppCache is still a douche but luckily there are tools available to take the pain out of generating your initial manifest files:

Grunt: grunt-manifest is currently the de facto option, but the project lead is looking for a new maintainer. In light of that grunt-appcache is an alternative in case you're looking for more active support.
Gulp: gulp-manifest is inspired by grunt-manifest and has a similar set of options.
Broccoli: broccoli-manifest brings manifest file compilation based on trees.

Do review what is generated. As with any automation tooling, be careful that what is being generated is what you actually intend on being cached. I generally rel

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.

#The Shadow DOM Diaries

Feature design is hard, and takes time. With time, it doesn't matter how public and consistent you are with communication during design process. In the end, it all will look like a jumbled mess of emails and bug comments. That seems bad. To make things less bad, I decided to start writing these little docs. Here they are. I may add more. Or not. Whatevs.

Sometimes You Need to Build a Larger Thing First looks back at the road we've traveled.

Shadow DOM Evolution outlines the path forward.

Why Do We Only Allow Children in Insertion Points provides a glimpse into the reasoning behind current insertion point design.

Today I had a brief debate on twitter about AMD vs CommonJS, https://twitter.com/TechWraith/status/441387541778808832. It's a debate worth having for sure. But I had to bail out of this one. The thing that annoyed me is that the first argument that people bring up to disquality AMD is "the syntax is too complex". I disagree with this. There are lots of reasons to prefer CommonJS over AMD, but the module authoring syntax is not a very good one. There was also a related statement that AMD authoring introduces more "cognitive overhead". This is absolutely true. But I don't consider this to be synonymous with "complexity" by any means.

So I thought I'd explore some comparable examples. Here's a simple one that was offered up by someone else in the thread. This was on twitter so I can forgive erring on the side of brevity.

AMD

define('myThing', ['some', 'deps'], function (some, deps) {
  //my code
  
 return myThing;

	/*
	* Taken from http://stackoverflow.com/questions/5867534/how-to-save-canvas-data-to-file/5971674#5971674
	*/

	var fs = require('fs');
	// string generated by canvas.toDataURL()
	var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0"
	+ "NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO"
	+ "3gAAAABJRU5ErkJggg==";
	// strip off the data: url prefix to get just the base64-encoded bytes

	/**
	* Transition helper that allows elements to transition from
	* scalar sizes (e.g. "2em") to "auto" (or vice versa). This is useful because
	* browsers either simply do not animate such transitions or do them poorly.
	*
	* Requires your CSS to already have the transition defined. This just allows
	* it to function without much jankiness.
	*
	* Usage:
	*