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 / gist:2964a01cd33a1186ce601838d4159fe4
Last active December 8, 2021 20:24
NextJS/webpack bundle chunking
What's the best way to prevent large components from a tree shakeable library from being bundled
together in a common bundle by webpack/next's default strategy?
Thread at https://twitter.com/ebidel/status/1467938411772219393.
# Example
## Page1.ts
```
@ebidel
ebidel / explainer.md
Last active June 22, 2021 07:58
PWA Manifest `display_override: ['minimal-ui ]` vs `display: minimal-ui` on Chrome Android
@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 / 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 / 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 / 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 / lighthouse_api_rest_example.js
Last active February 18, 2021 23:48
Lighthouse API REST example
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
const url = require('url');
const URL = url.URL;
const fetch = require('node-fetch');
const API_KEY = '<YOUR API KEY>';
@ebidel
ebidel / findall_elements_deep.js
Last active August 9, 2021 20:05
Finds all elements on the page, including those within shadow dom.
/**
* @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 / coverage.js
Last active April 27, 2024 04:13
CSS/JS code coverage during lifecycle of page load
Moved to https://github.com/ebidel/puppeteer-examples
@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>