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 August 10, 2023 04:37 — forked from itsjavi/scriptloader.js
Simple promise-based script-loader
View demo.js
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
View 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 October 29, 2022 12:13
Largest Contentful Paint - Puppeteer
View lcp.js
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const Good3G = {
'offline': false,
'downloadThroughput': 1.5 * 1024 * 1024 / 8,
'uploadThroughput': 750 * 1024 / 8,
'latency': 40
};
@addyosmani
addyosmani / log.md
Created March 13, 2020 22:30
Generate markdown notes for github releases
View log.md

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
View lazyload.html
<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
View links.md
@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.
View functional-utils.js
// 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
View 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
View workbox.md

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()