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 / 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 / index.html
Created February 15, 2018 06:15
<responsive-element> custom element for enabling container/element queries
<!-- 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 / unused-html-imports-bookmarket.js
Last active March 16, 2020 03:45
Bookmarklet to help prune unnecessary HTML Imports loaded on a page.
javascript:(function(){'use strict';var _temporalUndefined={};function _temporalAssertDefined(val,name,undef){if(val===undef){throw new ReferenceError(name+' is not defined - temporal dead zone');}return true;}(function(){'use strict';var els=_temporalUndefined;var allCustomElements=_temporalUndefined;var polymerRegisteredElements=_temporalUndefined;var diff=_temporalUndefined;function isCustomEl(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}els=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return isCustomEl(el);}).map(function(el){return el.getAttribute('is')||el.localName;});allCustomElements=new Set(_temporalAssertDefined(els,'els',_temporalUndefined)&&els);polymerRegisteredElements=Polymer.telemetry.registrations.map(function(el){return el.is;}).filter(function(name){var blacklist=_temporalUndefined;blacklist=['dom-template','array-selector','custom-style'];return(_temporalAssertDefined(blacklist,'blacklist',_temporalUndefined)&&blacklist).indexOf(name)==
@ebidel
ebidel / template_vs_innerhtml.html
Last active October 7, 2019 09:50
Fastest way to create shadow DOM (.innerHTML vs. <template>)
<!doctype html>
<html>
<head>
<title>What's the fastest way to create shadow DOM</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 3em;
font-family: "Roboto", sans-serif;
@ebidel
ebidel / lazyimages_demos_test.js
Last active October 1, 2019 14:47
Testing lazy loaded image libraries
/**
* 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 / 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 / reporting_observer.js
Created July 19, 2018 23:42
Using a ReportingObserver to watch for deprecation warnings on page.
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
// Drop this in the DevTools console:
(new ReportingObserver((reports, observer) => {
console.warn('This page is using deprecated APIs or features:');
const deprecations = reports.map(report => {
@ebidel
ebidel / smoothscroll.js
Last active January 17, 2019 02:22
Smooth scroll page
(function() {
const scroller = document.scrollingElement || document.body;
// Smooth scrolls to the bottom of the page.
window.smoothScrollPage = (y = scroller.scrollHeight) => {
scroller.style.scrollBehavior = 'smooth';
scroller.scrollTop = y;
scroller.style.scrollBehavior = '';
};
@ebidel
ebidel / abort.js
Created September 27, 2018 18:17
Aborting Promises/fetch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Abort promises</title>
</head>
<body>
<button class="download">download</button>
<button class="abort">abort</button>
@ebidel
ebidel / ce_highlight.js
Last active July 5, 2018 20:14
Continuous custom element higlighter
// Continuously higlights the custom elements on the page. This is useful
// if new custom elements are lazy loaded later on or you have a SPA
// that uses other elements.
// CE finding code from: https://gist.github.com/ebidel/4bdbe9db55d8a775d0a4
(function() {
let cache = [];
function highlightCustomElements() {