Skip to content

Instantly share code, notes, and snippets.

View ebidel's full-sized avatar

Eric Bidelman ebidel

5.1k followers · 1 following
View GitHub Profile
@ebidel
ebidel / handle_file_upload.php
Created April 18, 2012 03:23
Uploading files using xhr.send(FormData) to PHP server
<?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 July 30, 2020 07:29
Using xhr.responseType='document' with CORS
<!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 September 14, 2012 17:10
Beer Goggles bookmarklet
javascript:document.body.style.webkitFilter='grayscale(0.5) blur(3px)';return false;
@ebidel
ebidel / gist:3723309
Created September 14, 2012 17:14
Spotlight bookmarklet
// 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 October 12, 2024 17:10
List of resources related to Web Components
@ebidel
ebidel / highlight_custom_elements.js
Last active June 13, 2022 21:35
Bookmarklet for highlight custom elements on a page
// 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 August 1, 2014 03:45
navigator.getBattery() read time
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 May 30, 2019 19:17
Logs any custom elements on a page that are not registerd (e.g. missing an HTML import)
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 August 29, 2015 14:07
Which is faster? <iframe style="display:none"> or <iframe><body style="display:none"></iframe>?

Blink aborts computing styles on descendants of display:none nodes. If the inside of the iframe has , you make remove recalc style, no layout, no painting. 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 May 1, 2021 15:42
Polymer 0.5: reference an external <template> and use it for data binding
<!-- 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>