Skip to content

Instantly share code, notes, and snippets.

Avatar

Eric Bidelman ebidel

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 Nov 3, 2020
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 / 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
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 / 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 => {...});
Demo: http://jsbin.com/tilisaledu/1/edit?html,output
Thanks to @_gsathya, @kevincennis, @rauschma, @malyw for the help.
-->
@ebidel
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
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
http://www.apache.org/licenses/LICENSE-2.0
@ebidel
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 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 / app.html
Last active Apr 23, 2020
Fast Polymer app loading - optimized for first render, progressively enhanced lazy loading
View app.html
<!DOCTYPE html>
<html>
<head>
<style>
body.loading #splash {
opacity: 1;
}
#splash {
position: absolute;
top: 0;
You can’t perform that action at this time.