Trek Glowacki trek

I. Create a Middleman project with middleman-ember-template

$ middleman init hello --template=ember

II. Install ember.js package

$ bower install ember

Prevent transition when a form is half filled out

If you've filled out some fields in a navigate elsewhere, either via a back button, URL change, or linkTo transition, there should be a way to intercept that transition and make the user confirm they want to perform the transition.

Answer

Use routeTo handler on form route. Bubble the event if user confirms navigation.

Delayed "Twitter" transition, regardless of URL navigation / transitionTo

ember issues

update docs that use {{#each controller}} to {{#each model}} and/or explain the difference.
assert errors or log debug info when templates reference undefined attributes in development
need larger project examples of ember in live use for a production application. docs are inconsistent and too shallow on scope
Horrible gotchya: Passing a second argument to {{render}} creates a new controller (like {{control}} would) rather than reusing the existing one (without warning or documentation). This makes perfect sense once you understand it, but there's no indication that this is happening except that properties you set on the controller are missing. I'd love a developer mode that tells you everything Ember is generating silently for you (controllers, routes, new instances, missing attributes, etc)
defining a route with nothing in it is not the same as the auto generated one (it overwrites the default setupController or model?). No ideas why.
attributes absolutely need a readOn

ES6 -> CJS Tranpilation for UMD

ES6 and AMD require paths are raw, you can make them mean whatever you want, but by default mean baseUrl+path. In npm the paths are relative to the file calling require if the path starts with a directory separater, if there is no separator it looks in node_modules. For example:

// looks in node_modules
// we'll call this a "vendor require"
var handlebars = require('handlebars');
// looks relative to this file

Bower Import

Goal

To be able to install a package from bower and require it into your application with AMD (or ES6 module syntax if using and ES6 to AMD transpiler). For now it is a separate library to be used as a bower postintall script but the hope is to get it into bower by default.

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.

manager	dist	manifest	export	ignore	include	entry
npm	npm	package.json	cjs	.npmignore		#main
bower	git	bower.json	umd	#ignore		#main
component	git	component.json	umd		#files	#main
spm	git	package.json#spm	umd	.spmignore	#output	#main
packagist	git	composer.json	umd
ender	npm	package.json	cjs	.npmignore		#ender
dojo	???	package.json#dojoBuild	umd			#dojoBuild
jspm	npm/git	package.json#jspm	any	#ignore	#files	#main

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

	/* normal flexbox */
	.flexbox .flex-container {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	}
	.flexbox .flex-container.vertical {
	display: -webkit-flex;
	display: -moz-flex;