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 / 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('-');
@ebidel
ebidel / gist:2964a01cd33a1186ce601838d4159fe4
Last active December 8, 2021 20:24
NextJS/webpack bundle chunking
What's the best way to prevent large components from a tree shakeable library from being bundled
together in a common bundle by webpack/next's default strategy?
Thread at https://twitter.com/ebidel/status/1467938411772219393.
# Example
## Page1.ts
```
@ebidel
ebidel / findall_elements_deep.js
Last active August 9, 2021 20:05
Finds all elements on the page, including those within shadow dom.
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
/**
* Finds all elements on the page, inclusive of those within shadow roots.
* @param {string=} selector Simple selector to filter the elements by. e.g. 'a', 'div.main'
* @return {!Array<string>} List of anchor hrefs.
*/
@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 / explainer.md
Last active June 22, 2021 07:58
PWA Manifest `display_override: ['minimal-ui ]` vs `display: minimal-ui` on Chrome Android
@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
@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 / lighthouse_api_rest_example.js
Last active February 18, 2021 23:48
Lighthouse API REST example
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
const url = require('url');
const URL = url.URL;
const fetch = require('node-fetch');
const API_KEY = '<YOUR API KEY>';