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 / chromelauncher-puppeteer.js
Last active February 28, 2018 18:29
How to use chrome-launcher to launch chrome, then connect to it using Puppeteer.
Moved to https://github.com/ebidel/puppeteer-examples/blob/master/lighthouse/chromelauncher_puppeteer.js
@ebidel
ebidel / lighthouse_puppeteer_throttling.js
Last active February 28, 2018 18:28
Custom network throttling for Lighthouse Testing using Puppeteer
Now at https://github.com/ebidel/puppeteer-examples/blob/master/lighthouse/throttling.js
@ebidel
ebidel / monitor_internet_connection.js
Last active February 28, 2018 18:32
Puppeteer: monitor status of internet connectivity using headless Chrome
Moved to https://github.com/ebidel/puppeteer-examples/blob/master/monitor_internet_connection.js
@ebidel
ebidel / sw_caching_size.js
Last active November 16, 2022 11:31
Print service worker cache sizes and overall bytes cached.
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
// Prints the bytes cached by service worker. Breaks out each cache
// overall in-memory bytes used by the Cache Storage API for the site.
async function getCacheStoragesAssetTotalSize() {
// Note: opaque (i.e. cross-domain, without CORS) responses in the cache will return a size of 0.
@ebidel
ebidel / feature_detect_es_modules.js
Last active September 4, 2023 13:56
Feature detect ES modules: both static import and dynamic import()
<!--
Complete feature detection for ES modules. Covers:
1. Static import: import * from './foo.js';
2. Dynamic import(): import('./foo.js').then(module => {...});
Demo: http://jsbin.com/tilisaledu/1/edit?html,output
Thanks to @_gsathya, @kevincennis, @rauschma, @malyw for the help.
-->
@ebidel
ebidel / smoothscroll.js
Last active January 17, 2019 02:22
Smooth scroll page
(function() {
const scroller = document.scrollingElement || document.body;
// Smooth scrolls to the bottom of the page.
window.smoothScrollPage = (y = scroller.scrollHeight) => {
scroller.style.scrollBehavior = 'smooth';
scroller.scrollTop = y;
scroller.style.scrollBehavior = '';
};
@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 / 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 / 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 / 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