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
ebidel / app.html
Last active Oct 23, 2017
Fast Polymer app loading (Promises version) - optimized for first render, progressively enhanced lazy loading
View app.html
<!DOCTYPE html>
<html>
<head>
<style>
body.loading #splash {
opacity: 1;
}
#splash {
position: absolute;
top: 0;
@ebidel
ebidel / load_import.js
Last active Nov 11, 2017
Helper method to imperatively load an (async) HTML import
View load_import.js
/**
* 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 Nov 24, 2017
Custom Element v0 + Shadow DOM v0 example. Vanilla (webcomponents.js polyfill) vs. Polymer.
View demo_polymer.html
<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
@ebidel
ebidel / firstpaint.js
Last active Jan 15, 2018
Helper to print first paint time in Chrome
View firstpaint.js
(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 / lighthouse_puppeteer_throttling.js
Last active Feb 28, 2018
Custom network throttling for Lighthouse Testing using Puppeteer
View lighthouse_puppeteer_throttling.js
Now at https://github.com/ebidel/puppeteer-examples/blob/master/lighthouse/throttling.js
@ebidel
ebidel / chromelauncher-puppeteer.js
Last active Feb 28, 2018
How to use chrome-launcher to launch chrome, then connect to it using Puppeteer.
View chromelauncher-puppeteer.js
Moved to https://github.com/ebidel/puppeteer-examples/blob/master/lighthouse/chromelauncher_puppeteer.js
@ebidel
ebidel / monitor_internet_connection.js
Last active Feb 28, 2018
Puppeteer: monitor status of internet connectivity using headless Chrome
View monitor_internet_connection.js
Moved to https://github.com/ebidel/puppeteer-examples/blob/master/monitor_internet_connection.js
@ebidel
ebidel / es6-meta-programming.js
Last active May 23, 2018
"ES6 meta programming" using tagged template strings
View es6-meta-programming.js
// 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 / wcr_lazyload.html
Created Jan 21, 2016
How to use the WebComponentsReady when lazy loading the webcomponents.js polyfills (http://jsbin.com/dihasa/edit?html,output)
View wcr_lazyload.html
<!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 / ce_highlight.js
Last active Jul 5, 2018
Continuous custom element higlighter
View ce_highlight.js
// 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() {
You can’t perform that action at this time.