Mathieu Triay MathieuLoutre

ANNOUNCEMENT

I have moved this over to the Tech Interview Cheat Sheet Repo and has been expanded and even has code challenges you can run and practice against!

\

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 led 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't

Moving to ES6 from CoffeeScript

I fell in love with CoffeeScript a couple of years ago. Javascript has always seemed something of an interesting curiosity to me and I was happy to see the meteoric rise of Node.js, but coming from a background of Python I really preferred a cleaner syntax.

In any fast moving community it is inevitable that things will change, and so today we see a big shift toward ES6, the new version of Javascript. It incorporates a handful of the nicer features from CoffeeScript and is usable today through tools like Babel. Here are some of my thoughts and issues on moving away from CoffeeScript in favor of ES6.

While reading I suggest keeping open a tab to Babel's learning ES6 page. The examples there are great.

Punctuation

Holy punctuation, Batman! Say goodbye to your whitespace and hello to parenthesis, curly braces, and semicolons again. Even with the advanced ES6 syntax you'll find yourself writing a lot more punctuatio

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

To harmonize (with G2 curvature) two cubic Bézier curves a0,a1,a2,a3 and b0,b1,b2,b3 where a2, a3 = b0, and b1 are colinear:

First find d = intersection point of line a1--a2 and line b1--b2.
Now find ratios p0 = |a1, a2| / |a2, d| and p1 = |d1, b1| / |b1, b2|.
Determine ratio p = sqrt(p0 * p1)
Now set position of a3 = b0 such that |a2, a3| / |a3, b1| == p.
To do this, set t = p / (p+1).
Adjust the position of a3=b0 so that it sits t of the way between a2 and b1.

Of course, you may prefer to keep the position of a3 because it's the on-curve point. Fine. Instead, compute where a3 should go according to this algorithm, work out the delta between the new position and the current position, and apply that delta to the handles a2 and b1 instead.

	// REFERENCE UNICODE TABLES:
	// http://www.rikai.com/library/kanjitables/kanji_codes.unicode.shtml
	// http://www.tamasoft.co.jp/en/general-info/unicode.html
	//
	// TEST EDITOR:
	// http://www.gethifi.com/tools/regex
	//
	// UNICODE RANGE : DESCRIPTION
	//
	// 3000-303F : punctuation

	/**
	* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
	*
	* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
	* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
	* the height of element `.foo` —which is a full width and height cover image.
	*
	* iOS Resolution Quick Reference: http://www.iosres.com/
	*/

	/* 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)); };

	import React from "react";
	import { render } from "react-dom";

	const ParentComponent = React.createClass({
	getDefaultProps: function() {
	console.log("ParentComponent - getDefaultProps");
	},
	getInitialState: function() {
	console.log("ParentComponent - getInitialState");
	return { text: "" };

	git remote prune origin
	git branch -r --merged master \| egrep -iv '(master\|develop)' \| sed 's/origin\///g' \| xargs -n 1 git push --delete origin