Avraam Mavridis AvraamMavridis

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

Installing V8 on a Mac

Prerequisites

Install Xcode (Avaliable on the Mac App Store)
Install Xcode Command Line Tools (Preferences > Downloads)
Install depot_tools
- $ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
- $ nano ~/.zshrc
- Add path=('/path/to/depot_tools' $path)

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	// polyfill for event.offsetX/offsetY
	// Firefox is the only browser that doesn't support it (IE has since 4)
	(function() {
	var evt = document.createEvent('MouseEvent');
	if (evt.offsetX === void 0) {
	Object.defineProperties(MouseEvent.prototype, {
	'offsetX': {
	get: function() {
	return this.layerX - this.target.offsetLeft;
	}