Skip to content

Instantly share code, notes, and snippets.

View ebidel's full-sized avatar

Eric Bidelman ebidel

View GitHub Profile
@ebidel
ebidel / template_vs_innerhtml.html
Last active October 7, 2019 09:50
Fastest way to create shadow DOM (.innerHTML vs. <template>)
<!doctype html>
<html>
<head>
<title>What's the fastest way to create shadow DOM</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 3em;
font-family: "Roboto", sans-serif;
@ebidel
ebidel / fancy-tabs-demo.html
Last active March 8, 2024 23:08
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
<style>
body {
margin: 0;
}
/* Style the element from the outside */
/*
fancy-tabs {
margin-bottom: 32px;
@ebidel
ebidel / ce_highlight.js
Last active July 5, 2018 20:14
Continuous custom element higlighter
// Continuously higlights the custom elements on the page. This is useful
// if new custom elements are lazy loaded later on or you have a SPA
// that uses other elements.
// CE finding code from: https://gist.github.com/ebidel/4bdbe9db55d8a775d0a4
(function() {
let cache = [];
function highlightCustomElements() {
@ebidel
ebidel / mo_vs.proxy.js
Last active December 31, 2023 12:24
MutationObserver vs. Proxy to detect .textContent changes
<!--
This demo shows two ways to detect changes to a DOM node `.textContent`, one
using a `MutationObserver` and the other using an ES2015 `Proxy`.
From testing, a `Proxy` appears to be 6-8x faster than using a MO in Chrome 50.
**Update**: removing the `Proxy` altogether speeds up the MO to be inline with the Proxy.
This has something to do with how the browser queues/prioritizes Proxies over MO.
@ebidel
ebidel / wcr_lazyload.html
Created January 21, 2016 18:56
How to use the WebComponentsReady when lazy loading the webcomponents.js polyfills (http://jsbin.com/dihasa/edit?html,output)
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<!-- <script src="webcomponentsjs/webcomponents-lite.min.js"></script> -->
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
@ebidel
ebidel / firstpaint.js
Last active January 15, 2018 07:55
Helper to print first paint time in Chrome
(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);
};
@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 / unused-html-imports-bookmarket.js
Last active March 16, 2020 03:45
Bookmarklet to help prune unnecessary HTML Imports loaded on a page.
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)==
@ebidel
ebidel / dom-property-watcher.js
Created September 12, 2015 17:01
DOM property watcher using ES6 proxies.
// 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);
@ebidel
ebidel / polymer-perf-bookmarklet.js
Last active May 1, 2021 15:42
Polymer performance numbers bookmarklet
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