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 / 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
http://www.apache.org/licenses/LICENSE-2.0
@ebidel
ebidel / gist:3723292
Created Sep 14, 2012
Beer Goggles bookmarklet
View gist:3723292
javascript:document.body.style.webkitFilter='grayscale(0.5) blur(3px)';return false;
@ebidel
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){document.body.style.webkitClipPath="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
ebidel / Web Components Resources.md
Last active Nov 4, 2018
List of resources related to Web Components
View Web Components Resources.md
@ebidel
ebidel / highlight_custom_elements.js
Last active Apr 8, 2017
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 / gist:d9c591d77b4c2b68c347
Created Aug 1, 2014
navigator.getBattery() read time
View gist:d9c591d77b4c2b68c347
http://jsbin.com/zibaraju/1/edit
<div></div>
<script>
var div = document.querySelector('div');
setInterval(function() {
var t0 = performance.now();
navigator.getBattery().then(function() {
@ebidel
ebidel / unregistered_custom_elements.bookmarklet.js
Last active Apr 9, 2018
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/ *');allCustomElements=Array.prototype.slice.call(allCustomElements).filter(function(el){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
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
ebidel / example.html
Last active Nov 29, 2015
Polymer 0.5: reference an external <template> and use it for data binding
View example.html
<!-- http://jsbin.com/rageqilava/1/edit?html,output -->
<script src="http://www.polymer-project.org/webcomponents.min.js"></script>
<script src="http://www.polymer-project.org/polymer.min.js"></script>
<link rel="import" href="templates.html" id="templates">
<polymer-element name="foo-bar">
<template>
You can’t perform that action at this time.