adactio

'use strict';

// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/

(function() {

    // Update 'version' if you need to refresh the cache
    var staticCacheName = 'static';
    var version = 'v1::';

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

paulirish

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

ericelliott

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

p3t3r67x0

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

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

kovshenin

<?php
/*
 * Plugin Name: Oh noes, not another SEO plugin!
 * License: GPLv3 http://www.gnu.org/copyleft/gpl.html
 */
add_filter( 'wp_title', function( $title ) {
        if ( is_singular() ) $title .= ' &mdash; ' . get_bloginfo( 'name' );
        if ( is_archive() ) $title = sprintf( ' Archives: %s &mdash; %s', $title, get_bloginfo( 'name' ) );
        if ( is_home() ) $title = sprintf( '%s &mdash; %s', get_bloginfo( 'name' ), get_bloginfo( 'description' ) );
        if ( is_search() ) $title = sprintf( 'Searching for: %s &mdash; %s', get_search_query( true ), get_bloginfo( 'description' ) );