Kai Gittens kaidez

Files would be laid out as follows ... obviously this is a little contrived :)

grunt.js
app/
  index.html
  js/
    foo.js
    runner.js
 tests/

Web Components Resources

Specs / standardization

W3C Introduction to Web Components - explainer/overview of the technologies

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

	var BaseObject = {
	create: function create() {
	var instance = Object.create(this);
	instance._construct.apply(instance, arguments);
	return instance;
	},

	extend: function extend(properties, propertyDescriptors) {
	propertyDescriptors = propertyDescriptors \|\| {};

	/*
	* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
	* Better handling of scripts without supplied ids.
	*
	* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
	*/

	(function(doc, script) {
	var js,
	fjs = doc.getElementsByTagName(script)[0],

	<?php if (WP_THEME_DEBUG) { ?>
	<script>
	var require = {
	baseUrl: '<?php echo get_template_directory_uri(); ?>/js/',
	paths: {
	'jquery': 'libs/jquery-1.7.2.min',
	'jquery.mousewheel': 'libs/jquery.mousewheel'
	},
	shim: {
	'jquery.mousewheel': ['jquery']

	// You can have multiple optional arguments, but only if the arguments
	// can be distinguished from one another (in this example, by type)

	function optionalUnambiguous(myString, myNumber) {
	if (typeof myString === 'number') {
	myNumber = myString;
	myString = null;
	}
	if (myString == null) { myString = 'default'; }
	if (myNumber == null) { myNumber = 0; }