Sébastien Cevey theefer

Web Components Resources

Specs / standardization

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

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Given a complex dep graph, produce the defined output whilst demonstrating the following capabilities:

Intelligent watch. When building a Sass file, e.g. main.scss, the build tool should rebuild if I change any of the files in the dependency graph (e.g. main.scss using Sass’ @import to pull in foo.scss))
Piping source maps. E.g.: main.js -> uglify -> concat with foo.js -> bar.js. The output file, bar.js, should have a source map that maps back to main.js
Caching. E.g.: main.js -> uglify -> concat with foo.js -> bar.js. Since the last build, foo.js has changed but main.js has not. The build tool should re-use the previous uglify result.

The build tool can be reviewed by the config necessary for achieving the above. Perhaps you could achieve all of these with the naïvest of build tools, but in my opinion, the best tool will have the simplest result: a demonstration of all of the above without any config.

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

	#! /usr/bin/env bash

	# Author: Damien Cassou
	#
	# This is the script I use to build Emacs packages for Ubuntu. These
	# packages are uploaded to
	# https://launchpad.net/~cassou/+archive/emacs/. Each package is
	# either build from a Debian package or from
	# http://emacs.naquadah.org/.

	#! /bin/bash

	x=`identify -format "%w" $1`
	y=`identify -format "%h" $1`
	data=`openssl base64 < $1 \| tr -d '\n'`
	type=`file --mime-type -b $1`

	echo "display:block;
	font:0/0 a;
	color:transparent;

	require(['common/modules/interactive/loader', 'common/$'], function (Interactive, $) {

	// remove the incumbent interactive
	$('.interactive').empty();

	// set the data- attribute to a boot module
	$('.interactive').attr('data-interactive', 'http://path/to/boot.js');

	// initialise the interactive
	new Interactive(document.querySelector('figure.interactive'), document, guardian.config).init();