Andrew Rota andrewrota

Prerequisites

Homebrew
Python 2.7
Git

Graphite

Install Cairo

There's an issue with cairo 14.x that results in the axis fonts on the graphs being HUUUUUGE. Downgrading to 12.6 helps:

Usage:

To create a new branch that is up-to-date with the remote master:

$ ws 123

Creates the branch issue123

Hang on, I'm not saying flux is dead, or that redux isn't amazing.

Okay ...

Most everybody is familiar with flux by now:

User Interaction --event data-->
  Action Creator --action-->
 Dispatcher --payload--&gt;

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

NativeScript LiveSync with Console Output with iOS Simulator

NativeScript LiveSync does not currently emit console output (via console.log()) via the CLI:

$ tns livesync ios --emulator —watch

There's a couple of ways to make this work. In both cases, you'll need the hash for the iOS simulator/device you're targeting:

$ instruments -s devices

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	// Promise.all is good for executing many promises at once
	Promise.all([
	promise1,
	promise2
	]);

	// Promise.resolve is good for wrapping synchronous code
	Promise.resolve().then(function () {
	if (somethingIsNotRight()) {
	throw new Error("I will be rejected asynchronously!");

	var active = false;

	function changeRefer(details) {
	if (!active) return;

	for (var i = 0; i < details.requestHeaders.length; ++i) {
	if (details.requestHeaders[i].name === 'Referer') {
	details.requestHeaders[i].value = 'http://www.google.com/';
	break;
	}

	var React = require('react');

	class AutoBindingComponent extends React.Component {
	constructor(props) {
	super(props);

	for (var property in this) {
	if (this.hasOwnProperty(property) && typeof this[property] === 'function') {
	this[property] = this[property].bind(this);
	}

	/**
	* What is it:
	* Require an image relative to a base image folder and include @2x if it's a retina screen.
	* Works with webpack and only requires one image path (as opposed to react-retina-image,
	* which requires specifying both regular and @2x paths). Depends on npm package 'is-retina'
	* and node's 'path'
	* Usage:
	* import requireRetina from './require_retina.js'; // this file
	* <img src={requireRetina('your_image.png')} />
	*/