Skip to content

Instantly share code, notes, and snippets.

View ebidel's full-sized avatar

Eric Bidelman ebidel

5k followers · 1 following
View GitHub Profile
@ebidel
ebidel / gist:d9c591d77b4c2b68c347
Created August 1, 2014 03:45
navigator.getBattery() read time
http://jsbin.com/zibaraju/1/edit
<div></div>
<script>
var div = document.querySelector('div');
setInterval(function() {
var t0 = performance.now();
navigator.getBattery().then(function() {
@ebidel
ebidel / gist:0e3ed2f9bb5f1ae9583d
Last active August 29, 2015 14:07
Which is faster? <iframe style="display:none"> or <iframe><body style="display:none"></iframe>?

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

@ebidel
ebidel / gist:3723292
Created September 14, 2012 17:10
Beer Goggles bookmarklet
javascript:document.body.style.webkitFilter='grayscale(0.5) blur(3px)';return false;
@ebidel
ebidel / imports_timing.js
Last active March 24, 2016 19:21
HTML Imports Resource Timing performance
// 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');
});
});
@ebidel
ebidel / gist:3723309
Created September 14, 2012 17:14
Spotlight bookmarklet
// Save this in a bookmarklet and click it on a page:
javascript:(function(){function d(a,c){document.body.style.webkitClipPath="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
ebidel / ce.js
Created February 24, 2017 20:06
Custom elements bootup perf
'use strict';
customElements.define('x-hello', class extends HTMLElement {
static get observedAttributes() {
return ['name'];
}
constructor() {
super();
}
attributeChangedCallback(attrName, oldVal, newVal) {
@ebidel
ebidel / index.html
Created September 16, 2016 03:06
<card-swiper> custom element - demonstrates the usage of the v1 polyfills.
<!DOCTYPE html>
<html>
<head>
<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>
<style>
body {
font-family: sans-serif;
@ebidel
ebidel / deep_find_all_elements.js
Last active September 22, 2017 18:45
Find all nodes used on the page, deep within v0 and v1 shadow DOM.
/**
* @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.
@ebidel
ebidel / load_import.js
Last active November 11, 2017 00:13
Helper method to imperatively load an (async) HTML import
/**
* 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
@ebidel
ebidel / demo_polymer.html
Last active November 24, 2017 10:11
Custom Element v0 + Shadow DOM v0 example. Vanilla (webcomponents.js polyfill) vs. Polymer.
<html>
<head>
<title>Polymer example</title>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<script>
// Enable native SD if available and lazy register.
window.Polymer = window.Polymer || {
dom: 'shadow',
lazyRegister: 'max',
useNativeCSSProperties: true