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

Option 1: Command-line download extension as zip and extract

extension_id=jifpbeccnghkjeaalbbjmodiffmgedin   # change this ID
curl -L -o "$extension_id.zip" "https://clients2.google.com/service/update2/crx?response=redirect&os=mac&arch=x86-64&nacl_arch=x86-64&prod=chromecrx&prodchannel=stable&prodversion=44.0.2403.130&x=id%3D$extension_id%26uc" 
unzip -d "$extension_id-source" "$extension_id.zip"

Thx to crxviewer for the magic download URL.

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;

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'];

paulirish

// Log all DOM mutations to console.

// Modern interpretation of https://github.com/kdzwinel/DOMListenerExtension

observer = new MutationObserver(onMutation);
observerSettings = {
  subtree: true,
  childList: true,
  attributes: true,
  attributeOldValue: true,

paulirish

// ==UserScript==
// @name          UTM param stripper
// @author        Paul Irish
// @namespace     http://github.com/paulirish
// @version       1.2
// @description   Drop the UTM params from a URL when the page loads.
// @extra         Cuz you know they're all ugly n shit.
// @include       http*://*
// ==/UserScript==

paulirish

// see for screenshot:
//     https://twitter.com/paul_irish/status/829090506084749312 

const http = require('http');

function requestHandler(request, response) {
	const headers = {
		'Server-Timing': `
		  sql-1;desc="MySQL lookup Server";dur=100,
		  sql-2;dur=900;desc="MySQL shard Server #1",

paulirish

tell application "Google Chrome"
	
	set tab_list to every tab in the front window
	
	repeat with the_tab in tab_list
		set the_url to the URL of the_tab
		tell application "Safari" to open location the_url
	end repeat
	
end tell

paulirish

I wrote this in early January 2012, but never finished it. The research and thinking in this area led to a lot of the design of Yeoman and talks like "Javascript Development Workflow of 2013", "Web Application Development Workflow" and "App development stack for JS developers" (surpisingly little overlap in those talks, btw).

Now it's June 2013 and the state of web app tooling has matured quite a bit. But here's a snapshot of the story from 18 months ago, even if a little ugly and incomplete. :p

---

In the beginning…

• Intro to tooling

paulirish

containment recap

• none (default)
• layout, paint, style - the easy ones.
  • content === these three
  • bonus benefit of contain: layout -- any pos:fixed children will be relative to it.
• size - harder. the element must define its own size, can't rely on laying out its children.
  • strict === content + size
  • inline-size - dunno? size but for display:inline-ish things?