vasanthk

git fetch upstream
git checkout mybranch
git merge upstream/master

# if necessary, resolve conflicts and git commit
# ...

git reset --soft upstream/master
git commit -am 'Some cool description for a single commit'
git push -f

vasanthk

App Life Cycles
	- Response
	- Animations
	- Idle
	- Load (XHR, Websockets, HTML imports)

In Chronological Order:
	Load (~1 sec) Initial page load
	Idle (~ 50ms) Lazy load items
	Response (~100ms) On interaction, respond within 100ms

vasanthk

Folder Structure

Motivations

• Clear feature ownership
• Module usage predictibility (refactoring, maintainence, you know what's shared, what's not, prevents accidental regressions, avoids huge directories of not-actually-reusable modules, etc)

vasanthk

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I lead the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can'

vasanthk

'use strict';
// define favorite as a non-writable `constant` and give it the value 7
Object.defineProperties(window, {
  favorite: {
    value: 7,
    enumerable: true
  }
});
// ^ descriptors are by default false and const are enumerable
var favorite = 7;

vasanthk

Get Git log in JSON format

git log --pretty=format:'{%n  "commit": "%H",%n  "abbreviated_commit": "%h",%n  "tree": "%T",%n  "abbreviated_tree": "%t",%n  "parent": "%P",%n  "abbreviated_parent": "%p",%n  "refs": "%D",%n  "encoding": "%e",%n  "subject": "%s",%n  "sanitized_subject_line": "%f",%n  "body": "%b",%n  "commit_notes": "%N",%n  "verification_flag": "%G?",%n  "signer": "%GS",%n  "signer_key": "%GK",%n  "author": {%n    "name": "%aN",%n    "email": "%aE",%n    "date": "%aD"%n  },%n  "commiter": {%n    "name": "%cN",%n    "email": "%cE",%n    "date": "%cD"%n  }%n},'

The only information that aren't fetched are:

• %B: raw body (unwrapped subject and body)
• %GG: raw verification message from GPG for a signed commit

vasanthk

// array utils
// =================================================================================================

const combine = (...arrays) => [].concat(...arrays);

const compact = arr => arr.filter(Boolean);

const contains = (() => Array.prototype.includes
  ? (arr, value) => arr.includes(value)
  : (arr, value) => arr.some(el => el === value)

vasanthk

	tollCountries = phoneNumbers.reduce(function(countries, nums) {
		if(!num.tollFree) {
			countries.push({
				// Push it in whatever format you need it.
			})
		}
		return countries;
	}, [])

vasanthk

import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
import { provide, connect } from 'react-redux';
import thunk from 'redux-thunk';

const AVAILABLE_SUBREDDITS = ['apple', 'pics'];

// ------------
// reducers
// ------------

vasanthk

AutoBinding in React

Just for quicker reference from here

1. ES5 (No class)

var Button = React.createClass({
  handler:function(e){
   ....
  },