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?

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

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

paulirish

// ==UserScript==
// @name Use Markdown, sometimes, in your HTML.
// @author Paul Irish <http://paulirish.com/>
// @link http://git.io/data-markdown
// @match *
// ==/UserScript==


// If you're not using this as a userscript just delete from this line up. It's cool, homey.

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

// find all elements with a z-index and indicate what they are.
// uses css outline which is not supported in IE <8

function contrast(color){ return '#' + 
   (Number('0x'+color.substr(1)).toString(10) > 0xffffff/2 ? '000000' :  'ffffff'); 
}

jQuery('*')
    .filter(function(){ return $(this).css('zIndex') !== 'auto'; })
    .each(function(){

paulirish

# Build arguments for the gn build
# You can set these with `gn args out/Default`
#   ( and they're stored in src/out/Default/args.gn )
# See "gn args out/Default --list" for available build arguments

# component build, because people love it
is_component_build = true

# release build, because its faster
 is_debug = true

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

/*



  .d  dP"Yb       dP"Yb  88""Yb       .d   .d      dP"Yb  88""Yb       .d oP"Yb.     888888 88  88 88 88b 88  dP""b8 .dP"Y8 
.d88 dP   Yb     dP   Yb 88__dP     .d88 .d88     dP   Yb 88__dP     .d88 "' dP'       88   88  88 88 88Yb88 dP   `" `Ybo." 
  88 Yb   dP     Yb   dP 88"Yb        88   88     Yb   dP 88"Yb        88   dP'        88   888888 88 88 Y88 Yb  "88 o.`Y8b 
  88  YbodP       YbodP  88  Yb       88   88      YbodP  88  Yb       88 .d8888       88   88  88 88 88  Y8  YboodP 8bodP' 

88     88     888888    db    88""Yb 88b 88 888888 8888b.      888888 88""Yb  dP"Yb  8b    d8 

paulirish

// @license http://opensource.org/licenses/MIT
// copyright Paul Irish 2015


// Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
//   github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values

// if you want values similar to what you'd get with real perf.now, place this towards the head of the page
// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed