Skip to content

Instantly share code, notes, and snippets.

View addyosmani's full-sized avatar
🎯
Focusing

Addy Osmani addyosmani

🎯
Focusing
View GitHub Profile
@addyosmani
addyosmani / demo.js
Last active April 1, 2024 09:19 — forked from itsjavi/scriptloader.js
Simple promise-based script-loader
const loader = new loadScript();
loader.load([
'//apis.google.com/js/client:platform.js?onload=startApp',
'//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.3/dropbox.min.js'
]).then(({length}) => {
console.log(`${length} scripts loaded!`);
});
@addyosmani
addyosmani / custom-metrics.js
Created April 3, 2020 16:49
custom-metrics.js
[lcp]
const po = new PerformanceObserver(() => {});
po.observe({type: 'largest-contentful-paint', buffered: true});
const lastEntry = po.takeRecords().slice(-1)[0];
return lastEntry.renderTime || lastEntry.loadTime;
[cls]
const po = new PerformanceObserver(() => {});
po.observe({type: 'layout-shift', buffered: true});
return po.takeRecords().reduce((val, entry) => val + entry.value, 0);
@addyosmani
addyosmani / lcp.js
Last active March 26, 2024 00:09
Largest Contentful Paint - Puppeteer
const puppeteer = require('puppeteer');
const Good3G = {
'offline': false,
'downloadThroughput': 1.5 * 1024 * 1024 / 8,
'uploadThroughput': 750 * 1024 / 8,
'latency': 40
};
const phone = puppeteer.KnownDevices['Nexus 5X'];
@addyosmani
addyosmani / log.md
Created March 13, 2020 22:30
Generate markdown notes for github releases

git log --pretty=format:"* %s" v0.0.8..v0.1.0 > changelog.md

@addyosmani
addyosmani / lazyload.html
Last active November 8, 2022 11:00
Native image lazy-loading with a cross-browser fallback
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
<script>
// Select all images with the class "lazyload"
const images = document.querySelectorAll("img.lazyload");
// Check if the browser supports the "loading" attribute
if ('loading' in HTMLImageElement.prototype) {
// If so, we'll update all <img src> to point to the data-src instead
images.forEach(img => {
img.src = img.dataset.src;
@addyosmani
addyosmani / links.md
Last active February 14, 2023 05:27
this.performance links
@addyosmani
addyosmani / contents.md
Created September 9, 2018 21:14
Put your Webpack bundle on a diet (multi-part series)
@addyosmani
addyosmani / functional-utils.js
Created January 7, 2018 20:32 — forked from bendc/functional-utils.js
A set of pure ES2015 functions aimed to make functional JavaScript more idiomatic.
// Examples at https://gist.github.com/bendc/9b05735dfa6966859025#gistcomment-1370485
// array utils
// =================================================================================================
const combine = (...arrays) => [].concat(...arrays);
const compact = arr => arr.filter(Boolean);
@addyosmani
addyosmani / preact.md
Created September 9, 2017 00:25
react-preact.md

Working with a React codebase and want to use Preact? Ideally, you should use preact and preact-compat for your dev, prod and test builds. This will enable you to discover any interop bugs early on. If you would prefer to only alias preact and preact-compat in Webpack for production builds (e.g if your preference is using React DevTools and enzyme), make sure to thoroughly test everything works as expected before deploying to your servers.

@addyosmani
addyosmani / workbox.md
Last active January 20, 2024 16:14
Workbox recipes

Workbox runtime caching recipes

Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:

importScripts('workbox-sw.prod.v1.3.0.js');
const workbox = new WorkboxSW();

// Placeholder array populated automatically by workboxBuild.injectManifest()