Skip to content

Instantly share code, notes, and snippets.


Eric Bidelman ebidel

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 Nov 3, 2020
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 / findall_elements_deep.js
Last active Oct 30, 2020
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 / 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 / feature_detect_es_modules.js
Last active Oct 12, 2020
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 / object-observe-proxy-polyfill.js
Last active Jul 30, 2020
Object.observe() polyfill using ES6 Proxies (POC)
View object-observe-proxy-polyfill.js
// An `Object.observe()` "polyfill" using ES6 Proxies.
// Current `Object.observe()` polyfills [1] rely on polling
// to watch for property changes. Proxies can do one better by
// observing property changes to an object without the need for
// polling.
// Known limitations of this technique:
// 1. the call signature of `Object.observe()` will return the proxy
// object. The original object needs to be overwritten with this return value.
ebidel / gist:3581825
Last active Jul 30, 2020
Using xhr.responseType='document' with CORS
View gist:3581825
<!DOCTYPE html>
Copyright 2012 Eric Bidelman
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
ebidel / highlight_custom_elements.js
Last active Jul 28, 2020
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 / app.html
Last active Apr 23, 2020
Fast Polymer app loading - optimized for first render, progressively enhanced lazy loading
View app.html
<!DOCTYPE html>
body.loading #splash {
opacity: 1;
#splash {
position: absolute;
top: 0;
You can’t perform that action at this time.