Skip to content

Instantly share code, notes, and snippets.

Avatar
⚛️
Reacting

Charis Theo charisTheo

⚛️
Reacting
View GitHub Profile
@charisTheo
charisTheo / create-webpack-react-app.sh
Last active Dec 17, 2020
A script for a quick React + Babel + Webpack (ejected) project setup
View create-webpack-react-app.sh
#!/bin/sh
if [ -z "$1" ]
then
echo ""
echo "Please enter a directory for your new project"
echo "ex: create-webpack-react-app my-new-react-project"
exit 1 # Exit script after printing help
fi
View dynamic-imports-next-fusion.js
/* Next.js example */
import dynamic from 'next/dynamic'
// import ReactPlayer from 'react-player' -> instead of this line
const ReactPlayer = dynamic(() => import(/* webpackChunkName: "ReactPlayer" */ 'react-player'))
/* Fusion.js example */
import { split } from 'fusion-react'
const ReactPlayer = split({ load: () => import(/* webpackChunkName: "ReactPlayer" */ 'react-player' )})
@charisTheo
charisTheo / measure-navigation-timings.js
Created Dec 4, 2020
Measure navigation timings using the Performance Observer
View measure-navigation-timings.js
const entries = ["largest-contentful-paint", "navigation", "paint"];
entries.map(entry => {
const po = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.toJSON());
}
});
po.observe({type: entry});
})
View visionexpress.com.accessibility-lh-report.json
{
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36",
"environment": {
"networkUserAgent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse",
"hostUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36",
"benchmarkIndex": 1342.5,
"credits": {
"axe-core": "3.5.5"
}
},
View log-layout-shifts.js
new PerformanceObserver((list) => list.getEntries().map(console.log)).observe({type: 'layout-shift', buffered: true})
@charisTheo
charisTheo / commons.68eb068330040392a11a.js-Source-Map-Explorer.html
Last active Nov 30, 2020
Used source-map-explorer to generate the following map created from https://assets.grandvision.io/gb-visionexpress/_next/static/chunks/commons.68eb068330040392a11a.js and commons.68eb068330040392a11a.js.map files
View commons.68eb068330040392a11a.js-Source-Map-Explorer.html
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="data:text/css;base64,LyogVmVuZG9yZWQgZnJvbSBodHRwczovL2dpdGh1Yi5jb20vcm1taC93ZWJ0cmVlbWFwL2Jsb2IvOWZhMGMwNjZhMTBlYTQ0MDJkOTYwYjBjNmMxYTQzMjg0NmFjN2ZjNC93ZWJ0cmVlbWFwLmNzcyAqLwoKLndlYnRyZWVtYXAtbm9kZSB7CiAgLyogUmVxdWlyZWQgYXR0cmlidXRlcy4gKi8KICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgb3ZlcmZsb3c6IGhpZGRlbjsgICAvKiBUbyBoaWRlIG92ZXJsb25nIGNhcHRpb25zLiAqLwogIGJhY2tncm91bmQ6IHdoaXRlOyAgLyogTm9kZXMgbXVzdCBiZSBvcGFxdWUgZm9yIHpJbmRleCBsYXllcmluZy4gKi8KICBib3JkZXI6IHNvbGlkIDFweCBibGFjazsgIC8qIENhbGN1bGF0aW9ucyBhc3N1bWUgMXB4IGJvcmRlci4gKi8KCiAgLyogT3B0aW9uYWw6IENTUyBhbmltYXRpb24uICovCiAgdHJhbnNpdGlvbjogdG9wICAgIDAuM3MsCiAgICAgICAgICAgICAgbGVmdCAgIDAuM3MsCiAgICAgICAgICAgICAgd2lkdGggIDAuM3MsCiAgICAgICAgICAgICAgaGVpZ2h0IDAuM3M7Cn0KCi8qIE9wdGlvbmFsOiBoaWdobGlnaHQgbm9kZXMgb24gbW91c2VvdmVyLiAqLwoud2VidHJlZW1hcC1ub2RlOmhvdmVyIHsKICBiYWNrZ3JvdW5kOiAjZWVlOwp9CgovKiBPcHRpb25hbDogRGlmZmVyZW50IGJhY2tncm9
View logThirdPartyScripts.js
"\n\n"+[...new Set([...$$('script')].filter(e => !e.src.includes(document.location.hostname) && e.src !== "" && !e.src.includes('cloudfront') ).map( e => new URL(e.src).host))].join(' ')+"\n\n";
@charisTheo
charisTheo / hidden-images-quick-check.js
Last active Feb 12, 2021
Paste this code inside Dev Tools' Console and run it to get any hidden images that have been downloaded, if there are any on the page.
View hidden-images-quick-check.js
var AllImgs = [... document.getElementsByTagName('img') ];
var hiddenImgs = [];
AllImgs.map(e => {
if (
(e.clientHeight === 0 && e.currentSrc !== "") &&
(e.getAttribute("loading") !== "lazy") &&
!(typeof window.lazySizes === "object" && e.classList.contains("lazyload"))
) {
hiddenImgs.push(e);
}
@charisTheo
charisTheo / webpagetest-measure-nav-times-with-prefetch
Created Sep 11, 2020
Use the script to measure navigation times throughout a user funnel (ex: Amazon) while prefetching each next page. Use the textbox in Script (tab) > Enter Script.
View webpagetest-measure-nav-times-with-prefetch
navigate https://www.amazon.co.uk/
setEventName LoadProductListingPage
navigate https://www.amazon.co.uk/s?k=sofa&ref=nb_sb_noss
setEventName ClickOnProduct
execAndWait var h=document.createElement("link");h.rel="prefetch";h.as="document";h.href="https://www.amazon.co.uk/Leisure-Zone-Ottoman-Furniture-Footstool/dp/B07XP25JDT/ref=mp_s_a_1_1_sspa";document.head.appendChild(h);
clickAndWait title=product-image
setEventName AddToCart
@charisTheo
charisTheo / webpagetest-measure-nav-times
Created Sep 11, 2020
Use the script to measure navigation times throughout a user funnel (ex: Amazon). Use the textbox in Script (tab) > Enter Script.
View webpagetest-measure-nav-times
navigate https://www.amazon.co.uk/
setEventName LoadProductListingPage
navigate https://www.amazon.co.uk/s?k=sofa&ref=nb_sb_noss
setEventName ClickOnProduct
clickAndWait title=product-image
setEventName AddToCart
clickAndWait id=add-to-cart-button