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 / gist:3581825
Last active Aug 8, 2018
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 / gist:3723292
Created Sep 14, 2012
Beer Goggles bookmarklet
View gist:3723292'grayscale(0.5) blur(3px)';return false;
ebidel / gist:3723309
Created Sep 14, 2012
Spotlight bookmarklet
View gist:3723309
// Save this in a bookmarklet and click it on a page:
javascript:(function(){function d(a,c){"circle("+a+"px, "+c+"px, "+b+"px)"}var b=90;window.addEventListener("mousemove",function(a){d(a.pageX,a.pageY)});window.addEventListener("mousewheel",function(a){if(a.shiftKey){a.preventDefault();var c=a.wheelDeltaY;b+=-c;b=0<c?Math.max(90,b):Math.min(b,window.innerHeight/2);d(a.pageX,a.pageY)}})})();
// Or paste this in the console and mouse over the page.
// SHIFT+mousewheel scroll makes the circle bigger/smaller.
(function() {
var radius = 90; // px
ebidel / Web Components
Last active Aug 22, 2019
List of resources related to Web Components
View Web Components
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 / gist:d9c591d77b4c2b68c347
Created Aug 1, 2014
navigator.getBattery() read time
View gist:d9c591d77b4c2b68c347
var div = document.querySelector('div');
setInterval(function() {
var t0 =;
navigator.getBattery().then(function() {
ebidel / unregistered_custom_elements.bookmarklet.js
Last active May 30, 2019
Logs any custom elements on a page that are not registerd (e.g. missing an HTML import)
View unregistered_custom_elements.bookmarklet.js
javascript:(function(){function isUnregisteredCustomElement(el){if(el.constructor==HTMLElement){console.error("Found unregistered custom element:",el);return true;}return false;}function isCustomEl(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}var allCustomElements=document.querySelectorAll('html /deep/ *');{return isCustomEl(el);});var foundSome=false;for(var i=0,el;el=allCustomElements[i];++i){if(isUnregisteredCustomElement(el)){foundSome=true;}}if(foundSome){alert('Oops: found one or more unregistered custom elements in use! Check the console.');}else{alert('Good: All custom elements are registered :)');}})();
ebidel / gist:0e3ed2f9bb5f1ae9583d
Last active Aug 29, 2015
Which is faster? <iframe style="display:none"> or <iframe><body style="display:none"></iframe>?
View gist:0e3ed2f9bb5f1ae9583d

Blink aborts computing styles on descendants of display:none nodes. If the inside of the iframe has <body style="display:none">, you make remove recalc style, no layout, no painting. <iframe style="display:none"> still does all that work because it's another document and the display:none effect does not transcend into the other document.

ebidel / example.html
Last active Nov 29, 2015
Polymer 0.5: reference an external <template> and use it for data binding
View example.html
<!--,output -->
<script src=""></script>
<script src=""></script>
<link rel="import" href="templates.html" id="templates">
<polymer-element name="foo-bar">
You can’t perform that action at this time.