Nick Pruitt nerdpruitt

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

I'm having trouble understanding the benefit of require.js. Can you help me out? I imagine other developers have a similar interest.

From Require.js - Why AMD:

The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order"

I don't quite understand why this methodology is so bad. The difficult part is that you have to manually order dependencies. But the benefit is that you don't have an additional layer of abstraction.

	(function (root, factory) {
	if ( typeof define === 'function' && define.amd ) {
	define([], factory(root));
	} else if ( typeof exports === 'object' ) {
	module.exports = factory(root);
	} else {
	root.myPlugin = factory(root);
	}
	})(typeof global !== 'undefined' ? global : this.window \|\| this.global, function (root) {

	(function (root, factory) {
	if ( typeof define === 'function' && define.amd ) {
	define([], factory(root));
	} else if ( typeof exports === 'object' ) {
	module.exports = factory(root);
	} else {
	root.myPlugin = factory(root);
	}
	})(typeof global !== "undefined" ? global : this.window \|\| this.global, function (root) {

	/* Polyfill indexOf. */
	var indexOf;

	if (typeof Array.prototype.indexOf === 'function') {
	indexOf = function (haystack, needle) {
	return haystack.indexOf(needle);
	};
	} else {
	indexOf = function (haystack, needle) {
	var i = 0, length = haystack.length, idx = -1, found = false;

	/*
	Older email clients and (some) webmail clients (Gmail!) will apply
	this rule. Some clients (like older Lotus Notes) don't
	support background-color on links, so I didn't want white
	links on a white background.
	*/
	a.button {
	background-color: #FFFFFF;
	color: #d9286b;
	}