Skip to content

Instantly share code, notes, and snippets.

View ebidel's full-sized avatar

Eric Bidelman ebidel

5k followers · 1 following
View GitHub Profile
@ebidel
ebidel / fancy-tabs-demo.html
Last active March 8, 2024 23:08
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
<style>
body {
margin: 0;
}
/* Style the element from the outside */
/*
fancy-tabs {
margin-bottom: 32px;
@ebidel
ebidel / download_chrome41.js
Last active February 14, 2024 01:56
For when you need to test your site in Google Search (Chrome 41).
/**
* Copyright 2018 Google Inc. All rights reserved.
*
* 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
*
* Unless required by applicable law or agreed to in writing, software
@ebidel
ebidel / mo_vs.proxy.js
Last active December 31, 2023 12:24
MutationObserver vs. Proxy to detect .textContent changes
<!--
This demo shows two ways to detect changes to a DOM node `.textContent`, one
using a `MutationObserver` and the other using an ES2015 `Proxy`.
From testing, a `Proxy` appears to be 6-8x faster than using a MO in Chrome 50.
**Update**: removing the `Proxy` altogether speeds up the MO to be inline with the Proxy.
This has something to do with how the browser queues/prioritizes Proxies over MO.
@ebidel
ebidel / coverage.js
Last active September 24, 2023 10:25
CSS/JS code coverage during lifecycle of page load
Moved to https://github.com/ebidel/puppeteer-examples
@ebidel
ebidel / feature_detect_es_modules.js
Last active September 4, 2023 13:56
Feature detect ES modules: both static import and dynamic import()
<!--
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 / 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 / Web Components Resources.md
Last active February 27, 2023 22:04
List of resources related to Web Components
@ebidel
ebidel / dom-property-watcher.js
Created September 12, 2015 17:01
DOM property watcher using ES6 proxies.
// 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 / sw_caching_size.js
Last active November 16, 2022 11:31
Print service worker cache sizes and overall bytes cached.
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
// Prints the bytes cached by service worker. Breaks out each cache
// overall in-memory bytes used by the Cache Storage API for the site.
async function getCacheStoragesAssetTotalSize() {
// Note: opaque (i.e. cross-domain, without CORS) responses in the cache will return a size of 0.
@ebidel
ebidel / wcr_lazyload.html
Created January 21, 2016 18:56
How to use the WebComponentsReady when lazy loading the webcomponents.js polyfills (http://jsbin.com/dihasa/edit?html,output)
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<!-- <script src="webcomponentsjs/webcomponents-lite.min.js"></script> -->
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>