paulirish

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

OliverJAsh

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.

addyosmani

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

commuterjoy

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();

ebidel

Web Components Resources

Specs / standardization

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

• Custom Elements
• HTML Imports
• Shadow DOM
• CSS Scoping Module

cantlin

#! /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;

DamienCassou

#! /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/.