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 / feature_detect_es_modules.js
Last active Nov 4, 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 / sw_caching_size.js
Last active Oct 31, 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 / fancy-tabs-demo.html
Last active Oct 17, 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
@ebidel
ebidel / handle_file_upload.php
Created Apr 18, 2012
Uploading files using xhr.send(FormData) to PHP server
View handle_file_upload.php
<?php
$fileName = $_FILES['afile']['name'];
$fileType = $_FILES['afile']['type'];
$fileContent = file_get_contents($_FILES['afile']['tmp_name']);
$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);
$json = json_encode(array(
'name' => $fileName,
'type' => $fileType,
'dataUrl' => $dataUrl,
@ebidel
ebidel / template_vs_innerhtml.html
Last active Oct 7, 2019
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 / lazyimages_demos_test.js
Last active Oct 1, 2019
Testing lazy loaded image libraries
View lazyimages_demos_test.js
/**
* Copyright 2018 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
@ebidel
ebidel / dom-property-watcher.js
Created Sep 12, 2015
DOM property watcher using ES6 proxies.
View dom-property-watcher.js
// 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 / findall_elements_deep.js
Last active Aug 24, 2019
Finds all elements on the page, including those within shadow dom.
View findall_elements_deep.js
/**
* @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 / Web Components Resources.md
Last active Aug 22, 2019
List of resources related to Web Components
View Web Components Resources.md
@ebidel
ebidel / coverage.js
Last active Aug 13, 2019
CSS/JS code coverage during lifecycle of page load
View coverage.js
Moved to https://github.com/ebidel/puppeteer-examples
You can’t perform that action at this time.