Bruno Ramires brunormferreira

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

Effective Engineer - Notes

By Edmond Lau
Highly Recommended 👍
http://www.theeffectiveengineer.com/

What's an Effective Engineer?

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

	const wait = time => new Promise(
	res => setTimeout(() => res(), time)
	);

	wait(200)
	// onFulfilled() can return a new promise, `x`
	.then(() => new Promise(res => res('foo')))
	// the next promise will assume the state of `x`
	.then(a => a)
	// Above we returned the unwrapped value of `x`

	const double = n => n.points * 2;

	const doubleMap = numbers => numbers.map(double);

	console.log(doubleMap([
	{ name: 'ball', points: 2 },
	{ name: 'coin', points: 3 },
	{ name: 'candy', points: 4}
	])); // [ 4, 6, 8 ]

	const curry = fn => (...args) => fn.bind(null, ...args);

	const map = curry((fn, arr) => arr.map(fn));

	const join = curry((str, arr) => arr.join(str));

	const toLowerCase = str => str.toLowerCase();

	const split = curry((splitOn, str) => str.split(splitOn));

	const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

	const fn1 = s => s.toLowerCase();
	const fn2 = s => s.split('').reverse().join('');
	const fn3 = s => s + '!'

	const newFunc = pipe(fn1, fn2, fn3);
	const result = newFunc('Time'); // emit!

	const initialState = 0;
	const reducer = (state = initialState, data) => state + data;
	const total = [0, 1, 2, 3].reduce(reducer);
	console.log(total); // 6

	var accounts = [
	{ name: 'James Brown', msgCount: 123 },
	{ name: 'Stevie Wonder', msgCount: 22 },
	{ name: 'Sly Stone', msgCount: 16 },
	{ name: 'Otis Redding', msgCount: 300 } // Otis has the most messages
	];

	// get sum of msgCount prop across all objects in array
	var msgTotal = accounts.reduce(function(prev, cur) {
	return prev + cur.msgCount;

	.cursor {
	cursor: url("cursor.png") 0 0, pointer; /* Legacy */
	cursor: url("cursor.svg") 0 0, pointer; /* FF */
	cursor: -webkit-image-set(url("cursor.png") 1x, url("[email protected]") 2x) 0 0, pointer; /* Webkit */
	}


	/*
	##Device = Desktops
	##Screen = 1281px to higher resolution desktops
	*/

	@media (min-width: 1281px) {

	/* CSS */