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 / 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 / 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
<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 / 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
@ebidel
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 http://ted.mielczarek.org/code/mozilla/bookmarklet.html
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
ebidel / index.html
Created Feb 15, 2018
<responsive-element> custom element for enabling container/element queries
View index.html
<!-- based on https://twitter.com/ebidel/status/933496242272747520 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><responsive-element></title>
<link rel="stylesheet" href="styles.css">
</head>
@ebidel
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 => {...});
Demo: http://jsbin.com/tilisaledu/1/edit?html,output
Thanks to @_gsathya, @kevincennis, @rauschma, @malyw for the help.
-->
@ebidel
ebidel / polymer-perf-bookmarklet.js
Last active Jul 2, 2019
Polymer performance numbers bookmarklet
View polymer-perf-bookmarklet.js
javascript:(function(){(function printStats(){var loadTimes=window.chrome.loadTimes();firstPaint=loadTimes.firstPaintTime*1000;firstPaintTime=firstPaint-(loadTimes.startLoadTime*1000);console.info('First paint took',firstPaintTime,'ms');console.info('Load took',performance.timing.loadEventStart-performance.timing.navigationStart,'ms');var instances=0;if(parseFloat(Polymer.version)<1){instances=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).length;}else{instances=Polymer.telemetry.instanceCount;}console.info('Custom element instances:',instances);var reflectCount=0;if(Polymer.telemetry){console.info('=== Properties set to reflectToAttribute ===');Polymer.telemetry.registrations.forEach(function(el){for(var prop in el.properties){if(el.properties[prop].reflectToAttribute){console.log(el.is+'.'+prop);reflectCount++;}}});}else{console.info('=== Properties set to reflect ===');Polymer.elements.forEach(function(el){for(var
You can’t perform that action at this time.