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 / 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 / sw_caching_size.js
Last active Jul 1, 2019
Print service worker cache sizes and overall bytes cached.
View sw_caching_size.js
/**
* @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 Jun 16, 2019
Feature detect ES modules: both static import and dynamic import()
View feature_detect_es_modules.js
<!--
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 Jan 17, 2019
Smooth scroll page
View smoothscroll.js
(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 Feb 24, 2017
Custom elements bootup perf
View ce.js
'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 Sep 22, 2017
Find all nodes used on the page, deep within v0 and v1 shadow DOM.
View deep_find_all_elements.js
/**
* @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 Sep 16, 2016
<card-swiper> custom element - demonstrates the usage of the v1 polyfills.
View index.html
<!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 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 / template_vs_innerhtml.html
Last active Sep 11, 2017
Fastest way to create shadow DOM (.innerHTML vs. <template>)
View template_vs_innerhtml.html
<!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 Jun 28, 2019
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y
View fancy-tabs-demo.html
<script>
function execPolyfill() {
(function(){
// CustomElementsV1.min.js v1 polyfill from https://github.com/webcomponents/webcomponentsjs/tree/v1/src/CustomElements/v1.
/*
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
You can’t perform that action at this time.