This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
body.loading #splash { | |
opacity: 1; | |
} | |
#splash { | |
position: absolute; | |
top: 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
body.loading #splash { | |
opacity: 1; | |
} | |
#splash { | |
position: absolute; | |
top: 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Know how fast your HTML Imports are. | |
// crbug.com/505279 - doesn't show sub-import resources. | |
var imports = document.querySelectorAll('link[rel="import"]'); | |
[].forEach.call(imports, function(link) { | |
var entries = performance.getEntriesByName(link.href); | |
console.info('=== HTML Imports perf ==='); | |
entries.forEach(function(e) { | |
console.log(e.name, 'took', e.duration, 'ms'); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ES6 meta programming ??? | |
// The more complex form of ES6 template strings are called | |
// "tagged" template strings. In short, they allow you to | |
// pass the final evaluated string to a function for further | |
// processing. This allows for some interesting things. For example: | |
// | |
// get`https://api.github.com/repos/${org}/${repo}/issues?sort=${sort}`; | |
// | |
// _could_ make a network request and return a Promise with the result |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// An `Object.observe()` "polyfill" using ES6 Proxies. | |
// | |
// Current `Object.observe()` polyfills [1] rely on polling | |
// to watch for property changes. Proxies can do one better by | |
// observing property changes to an object without the need for | |
// polling. | |
// | |
// Known limitations of this technique: | |
// 1. the call signature of `Object.observe()` will return the proxy | |
// object. The original object needs to be overwritten with this return value. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javascript:(function(){(function printStats(){var loadTimes=window.chrome.loadTimes();firstPaint=loadTimes.firstPaintTime*1000;firstPaintTime=firstPaint-(loadTimes.startLoadTime*1000);console.info('First paint took',firstPaintTime,'ms');console.info('Load took',performance.timing.loadEventStart-performance.timing.navigationStart,'ms');var instances=0;if(parseFloat(Polymer.version)<1){instances=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).length;}else{instances=Polymer.telemetry.instanceCount;}console.info('Custom element instances:',instances);var reflectCount=0;if(Polymer.telemetry){console.info('=== Properties set to reflectToAttribute ===');Polymer.telemetry.registrations.forEach(function(el){for(var prop in el.properties){if(el.properties[prop].reflectToAttribute){console.log(el.is+'.'+prop);reflectCount++;}}});}else{console.info('=== Properties set to reflect ===');Polymer.elements.forEach(function(el){for(var |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Watch accesses/sets on a DOM element property. | |
function watchPropsOn(el) { | |
return new Proxy(el, { | |
get(target, propKey, receiver) { | |
//return Reflect.get(target, propKey, receiver); | |
console.log('get', propKey); | |
return el[propKey]; | |
}, | |
set(target, propKey, value, receiver) { | |
console.log('set', propKey, value); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javascript:(function(){'use strict';var _temporalUndefined={};function _temporalAssertDefined(val,name,undef){if(val===undef){throw new ReferenceError(name+' is not defined - temporal dead zone');}return true;}(function(){'use strict';var els=_temporalUndefined;var allCustomElements=_temporalUndefined;var polymerRegisteredElements=_temporalUndefined;var diff=_temporalUndefined;function isCustomEl(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}els=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return isCustomEl(el);}).map(function(el){return el.getAttribute('is')||el.localName;});allCustomElements=new Set(_temporalAssertDefined(els,'els',_temporalUndefined)&&els);polymerRegisteredElements=Polymer.telemetry.registrations.map(function(el){return el.is;}).filter(function(name){var blacklist=_temporalUndefined;blacklist=['dom-template','array-selector','custom-style'];return(_temporalAssertDefined(blacklist,'blacklist',_temporalUndefined)&&blacklist).indexOf(name)== |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Convenience for dynamically loading an HTML Import. | |
* | |
* This method creates a new `<link rel="import">` element with | |
* the provided URL and appends it to the document to start loading. By default, | |
* it loads async to not blocking rendering. | |
* | |
* @param {string} href The URL to load. | |
* @param {boolean} opt_async True if import should be async. Default: true. | |
* @return {Promise(HTMLLinkElement, Error)} A promise that resolves with the |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
'use strict'; | |
// First paint perf. | |
if (window.chrome && window.chrome.loadTimes) { | |
const getFP = function() { | |
let load = chrome.loadTimes(); | |
let fp = (load.firstPaintTime - load.startLoadTime) * 1000; | |
return Math.round(fp); | |
}; |