paulirish

// everyone's new favorite closure pattern:
(function(window,document,undefined){ ... })(this,this.document);

// when minified:
(function(w,d,u){ ... })(this,this.document);

// which means all uses of window/document/undefined inside the closure 
// will be single-lettered, so big gains in minification.

// it also will speed up scope chain traversal a tiny tiny little bit.

padolsey

// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
//     ie === undefined
// If you're in IE (>=5) then you can determine which version:
//     ie === 7; // IE7
// Thus, to detect IE:
//     if (ie) {}

cowboy

This is now an actual repo:

https://github.com/cowboy/jquery-tiny-pubsub

paulirish

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];

there4

{
    // --------------------------------------------------------------------
    // JSHint Configuration, Strict Edition
    // --------------------------------------------------------------------
    //
    // This is a options template for [JSHint][1], using [JSHint example][2]
    // and [Ory Band's example][3] as basis and setting config values to
    // be most strict:
    //
    // * set all enforcing options to true

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

LittleCoding

{#
/**
 * @file
 * Get the current URL path via Drupal 8 route name and twig function.
 */
#}
<a href="{{ url('<current>') }}">Current page</a>

shospodarets

const puppeteer = require('puppeteer');

(async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
// Adjustments particular to this page to ensure we hit desktop breakpoint.
    page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1});

    await page.goto('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});

5t3ph

*[class],
*[id] {
  position: relative;
  outline: 2px dashed red;
}

*[class]::before, *[class]::after,
*[id]::before,
*[id]::after {
  position: absolute;