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 / handle_file_upload.php
Created Apr 18, 2012
Uploading files using xhr.send(FormData) to PHP server
View handle_file_upload.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 / fancy-tabs-demo.html
Last active Sep 11, 2019
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y
View fancy-tabs-demo.html
function execPolyfill() {
// CustomElementsV1.min.js v1 polyfill from
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
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 / 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 / Web Components
Last active Aug 22, 2019
List of resources related to Web Components
View Web Components
ebidel / coverage.js
Last active Aug 13, 2019
CSS/JS code coverage during lifecycle of page load
View coverage.js
Moved to
ebidel / highlight_custom_elements.js
Last active Jul 28, 2019
Bookmarklet for highlight custom elements on a page
View highlight_custom_elements.js
// 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
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 / index.html
Created Feb 15, 2018
<responsive-element> custom element for enabling container/element queries
View index.html
<!-- based on -->
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
ebidel / feature_detect_es_modules.js
Last active Jul 21, 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 => {...});
Thanks to @_gsathya, @kevincennis, @rauschma, @malyw for the help.
ebidel / polymer-perf-bookmarklet.js
Last active Jul 2, 2019
Polymer performance numbers bookmarklet
View polymer-perf-bookmarklet.js
javascript:(function(){(function printStats(){var;firstPaint=loadTimes.firstPaintTime*1000;firstPaintTime=firstPaint-(loadTimes.startLoadTime*1000);'First paint took',firstPaintTime,'ms');'Load took',performance.timing.loadEventStart-performance.timing.navigationStart,'ms');var instances=0;if(parseFloat(Polymer.version)<1){instances=[]'html /deep/ *')).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).length;}else{instances=Polymer.telemetry.instanceCount;}'Custom element instances:',instances);var reflectCount=0;if(Polymer.telemetry){'=== Properties set to reflectToAttribute ===');Polymer.telemetry.registrations.forEach(function(el){for(var prop in{if([prop].reflectToAttribute){console.log('.'+prop);reflectCount++;}}});}else{'=== Properties set to reflect ===');Polymer.elements.forEach(function(el){for(var
You can’t perform that action at this time.