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 / object-observe-proxy-polyfill.js
Last active July 29, 2021 04:08
Object.observe() polyfill using ES6 Proxies (POC)
// 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.
@ebidel
ebidel / es6-meta-programming.js
Last active May 23, 2018 13:02
"ES6 meta programming" using tagged template strings
// 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
@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 / app.html
Last active May 1, 2021 15:42
Fast Polymer app loading (Promises version) - optimized for first render, progressively enhanced lazy loading
<!DOCTYPE html>
<html>
<head>
<style>
body.loading #splash {
opacity: 1;
}
#splash {
position: absolute;
top: 0;
@ebidel
ebidel / app.html
Last active May 1, 2021 15:42
Fast Polymer app loading - optimized for first render, progressively enhanced lazy loading
<!DOCTYPE html>
<html>
<head>
<style>
body.loading #splash {
opacity: 1;
}
#splash {
position: absolute;
top: 0;
@ebidel
ebidel / example.html
Last active May 1, 2021 15:42
Polymer 0.5: reference an external <template> and use it for data binding
<!-- http://jsbin.com/rageqilava/1/edit?html,output -->
<script src="http://www.polymer-project.org/webcomponents.min.js"></script>
<script src="http://www.polymer-project.org/polymer.min.js"></script>
<link rel="import" href="templates.html" id="templates">
<polymer-element name="foo-bar">
<template>
@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 / unregistered_custom_elements.bookmarklet.js
Last active May 30, 2019 19:17
Logs any custom elements on a page that are not registerd (e.g. missing an HTML import)
javascript:(function(){function isUnregisteredCustomElement(el){if(el.constructor==HTMLElement){console.error("Found unregistered custom element:",el);return true;}return false;}function isCustomEl(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}var allCustomElements=document.querySelectorAll('html /deep/ *');allCustomElements=Array.prototype.slice.call(allCustomElements).filter(function(el){return isCustomEl(el);});var foundSome=false;for(var i=0,el;el=allCustomElements[i];++i){if(isUnregisteredCustomElement(el)){foundSome=true;}}if(foundSome){alert('Oops: found one or more unregistered custom elements in use! Check the console.');}else{alert('Good: All custom elements are registered :)');}})();
@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 / highlight_custom_elements.js
Last active June 13, 2022 21:35
Bookmarklet for highlight custom elements on a page
// Highlights all custom elements on the page.
// 7/31/2016: updated to work with both shadow dom v0 and v1.
// To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html
var allCustomElements = [];
function isCustomElement(el) {
const isAttr = el.getAttribute('is');
// Check for <super-button> and <button is="super-button">.
return el.localName.includes('-') || isAttr && isAttr.includes('-');