Bruno Ramires brunormferreira

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

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

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/

	{
	// http://eslint.org/docs/rules/

	"ecmaFeatures": {
	"binaryLiterals": false, // enable binary literals
	"blockBindings": false, // enable let and const (aka block bindings)
	"defaultParams": false, // enable default function parameters
	"forOf": false, // enable for-of loops
	"generators": false, // enable generators
	"objectLiteralComputedProperties": false, // enable computed object literal property names


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

	@media (min-width: 1281px) {

	/* CSS */

	.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 */
	}

	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;

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

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