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


Tools that read through a directory, stream or tree and create an Application Cache manifest for you.

AppCache is still a douche but luckily there are tools available to take the pain out of generating your initial manifest files:

  • Grunt: grunt-manifest is currently the de facto option, but the project lead is looking for a new maintainer. In light of that grunt-appcache is an alternative in case you're looking for more active support.
  • Gulp: gulp-manifest is inspired by grunt-manifest and has a similar set of options.
  • Broccoli: broccoli-manifest brings manifest file compilation based on trees.

Do review what is generated. As with any automation tooling, be careful that what is being generated is what you actually intend on being cached. I generally rel


React vs. Object.observe()

Object.observe() and React are actually aimed at solving different problems. If we're going to mention React, I would say..

"Facebook are also exploring how to improve performance when building non-trivial apps via their framework, React. React provides a virtual DOM with rendering capabilities that avoid excessive layout thrashing (when JavaScript writes then reads from the DOM multiple times causing reflows). React batches such reads and writes to keep things fast. In a typical webapp we might heavily interact with the DOM, which is expensive to update. React prefers to avoid mutating the DOM directly, instead building a virtual DOM where it can handle updating the real DOM to match."


"In a test, dirty checking took 40 milliseconds compared to Object.observe’s 1 to 2 minutes. In other words, Angular became 20 to 40 times faster while using Object.observe." should read "Object.observe's() 1 to 2 milliseconds"

View designer.html
1 2 3 4 5 6 7 8 9
<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-menu/core-submenu.html">
<polymer-element name="my-element">
View deep.js
1 2 3 4 5 6 7 8 9
This POC sample uses CSS transform which you can install from
Save this to deep.js and just run via node
var css = __dirname + '/vendor/bootstrap.css';
var target = __dirname + '/dist/bootstrap-deep.css';
View LICENSE.txt
1 2 3 4 5 6 7 8 9 10
Copyright (C) 2014 ADDY OSMANI <>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.

Deprecated. See for the latest version.

Unit Testing Polymer Elements

Note: this guide is a work-in-progress and will be added to the Polymer docs when it's ready. We have updated <seed-element> to include unit tests and this guide has been moved to Google docs. Expect a version on the Polymer site before the end of September.

After spending days working on your <super-awesome> Polymer element, you’re finally ready to share it with the rest of the world. You add the code for using it to your demo, iterate on it over time and come back to it one day when..uh oh. The demo broke because something has gone horribly wrong. Suddenly, <super-awesome> isn’t starting to look so great. Now you’re stuck trying to backtrack through your commit log to figure out how you broke the code. You’re not going to have a fun time.

If you’ve been working on the front-end for a while, even if you haven’t really played with Polymer elements before, this s

View array.prototype.fill.js
1 2 3 4 5 6 7 8 9 10
if ( ![].fill) {
Array.prototype.fill = function( value ) {
var O = Object( this );
var len = parseInt( O.length, 10 );
var start = arguments[1];
var relativeStart = parseInt( start, 10 ) || 0;
var k = relativeStart < 0
? Math.max( len + relativeStart, 0)
: Math.min( relativeStart, len );
Something went wrong with that request. Please try again.