Skip to content

Instantly share code, notes, and snippets.

Eric Bidelman ebidel

Block or report user

Report or block ebidel

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
ebidel / gist:d9c591d77b4c2b68c347
Created Aug 1, 2014
navigator.getBattery() read time
View gist:d9c591d77b4c2b68c347
var div = document.querySelector('div');
setInterval(function() {
var t0 =;
navigator.getBattery().then(function() {
ebidel / gist:0e3ed2f9bb5f1ae9583d
Last active Aug 29, 2015
Which is faster? <iframe style="display:none"> or <iframe><body style="display:none"></iframe>?
View gist:0e3ed2f9bb5f1ae9583d

Blink aborts computing styles on descendants of display:none nodes. If the inside of the iframe has <body style="display:none">, you make remove recalc style, no layout, no painting. <iframe style="display:none"> still does all that work because it's another document and the display:none effect does not transcend into the other document.

ebidel / gist:3723292
Created Sep 14, 2012
Beer Goggles bookmarklet
View gist:3723292'grayscale(0.5) blur(3px)';return false;
ebidel / example.html
Last active Nov 29, 2015
Polymer 0.5: reference an external <template> and use it for data binding
View example.html
<!--,output -->
<script src=""></script>
<script src=""></script>
<link rel="import" href="templates.html" id="templates">
<polymer-element name="foo-bar">
ebidel / imports_timing.js
Last active Mar 24, 2016
HTML Imports Resource Timing performance
View imports_timing.js
// Know how fast your HTML Imports are.
// - doesn't show sub-import resources.
var imports = document.querySelectorAll('link[rel="import"]');
[], function(link) {
var entries = performance.getEntriesByName(link.href);'=== HTML Imports perf ===');
entries.forEach(function(e) {
console.log(, 'took', e.duration, 'ms');
ebidel / unused-html-imports-bookmarket.js
Last active Jul 31, 2016
Bookmarklet to help prune unnecessary HTML Imports loaded on a page.
View unused-html-imports-bookmarket.js
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=[]'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);{return;}).filter(function(name){var blacklist=_temporalUndefined;blacklist=['dom-template','array-selector','custom-style'];return(_temporalAssertDefined(blacklist,'blacklist',_temporalUndefined)&&blacklist).indexOf(name)==
ebidel / gist:3723309
Created Sep 14, 2012
Spotlight bookmarklet
View gist:3723309
// Save this in a bookmarklet and click it on a page:
javascript:(function(){function d(a,c){"circle("+a+"px, "+c+"px, "+b+"px)"}var b=90;window.addEventListener("mousemove",function(a){d(a.pageX,a.pageY)});window.addEventListener("mousewheel",function(a){if(a.shiftKey){a.preventDefault();var c=a.wheelDeltaY;b+=-c;b=0<c?Math.max(90,b):Math.min(b,window.innerHeight/2);d(a.pageX,a.pageY)}})})();
// Or paste this in the console and mouse over the page.
// SHIFT+mousewheel scroll makes the circle bigger/smaller.
(function() {
var radius = 90; // px
ebidel / ce.js
Created Feb 24, 2017
Custom elements bootup perf
View ce.js
'use strict';
customElements.define('x-hello', class extends HTMLElement {
static get observedAttributes() {
return ['name'];
constructor() {
attributeChangedCallback(attrName, oldVal, newVal) {
ebidel / index.html
Created Sep 16, 2016
<card-swiper> custom element - demonstrates the usage of the v1 polyfills.
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>How to use the Custom Elements v1 + Shadow DOM v1 polyfills</title>
body {
font-family: sans-serif;
ebidel / deep_find_all_elements.js
Last active Sep 22, 2017
Find all nodes used on the page, deep within v0 and v1 shadow DOM.
View deep_find_all_elements.js
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
* Convenience method finding all the DOM child nodes of a parent,
* includibg those within shadow roots. By default, all children
* under `<body>` will be returned. The parent node can be overridden
* by passing the `selector` param.
You can’t perform that action at this time.