Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Addy Osmani addyosmani

🎯
Focusing
Block or report user

Report or block addyosmani

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@addyosmani
addyosmani / lazyload.html
Last active May 15, 2019
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 Mar 6, 2019
this.performance links
View links.md
@addyosmani
addyosmani / contents.md
Created Sep 9, 2018
Put your Webpack bundle on a diet (multi-part series)
@addyosmani
addyosmani / functional-utils.js
Created Jan 7, 2018 — 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);
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 May 27, 2019
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()
@addyosmani
addyosmani / image-decoding.md
Last active Oct 12, 2018
Image Decoding in Blink
View image-decoding.md

Image Decoding in Blink / Chrome (true as of M62)

Blink decodes off the main thread for image elements and for CSS styles (an image as an element's background style, for example). Moving the decode to the compositor thread (or the compositor worker thread pool?) does free-up the main thread to work on other tasks. We call this deferred decoding. With deferred decoding, the decode work remains on the critical path for presenting a frame to the display, so it can still cause animation jank.

The HTMLImageElement.decode() API should help with the jank problem. Also deferred decoding does not work with SVG image resources. There are still cases where decoding images happens synchronously on the main thread: 2D canvas drawImage() and createPattern(), and WebGL texture uploads.

@addyosmani
addyosmani / minify-detect.js
Created Aug 15, 2017
Detecting unminified code
View minify-detect.js
// https://hg.mozilla.org/mozilla-central/rev/2f9043292e63
// Used to detect minification for automatic pretty printing
const SAMPLE_SIZE = 30; // no of lines
const INDENT_COUNT_THRESHOLD = 20; // percentage
function isMinified (str) {
let isMinified;
let lineEndIndex = 0;
let lineStartIndex = 0;
let lines = 0;
@addyosmani
addyosmani / bytecode.md
Last active Mar 17, 2018
Thoughts on precompiling JS bytecode for delivery through a server/CDN
View bytecode.md

Some quick thoughts on https://twitter.com/dan_abramov/status/884892244817346560. It's not ignorant at all to ask how browser vendors approach performance. On the V8 side we've discussed bytecode precompilation challenges a few times this year. Here's my recollection of where we stand on the idea:

JavaScript engines like V8 have to work on multiple architectures. Every version of V8 is different. The architectures we target are different. A precompiled bytecode solution would require a system (e.g the server or a CDN) to generate bytecode builds for every target architecture, every version of V8 supported and every version of the JavaScript libraries or bundles bytecode is being generated for. This is because we would need to make sure every user accessing a page using that bytecode can still get the final JS successfully executed.

Consider that if a cross-browser solution to this problem was desired, the above would need to be applied to JavaScriptCore, SpiderMonkey and Chakra as well. It would need to ca

@addyosmani
addyosmani / sites.txt
Last active Dec 13, 2018
Sites using Webpack in production (BigQuery)
View sites.txt
http://www.corral.net/
http://www.arizonasportsfans.com/
http://www.oi.com.br/
http://www.likeable.com/
http://www.nysportsday.com/
http://www.tstllc.net/
http://www.statnews.com/
http://www.springmobile.com/
http://www.folhadeparnaiba.com.br/
http://www.bilibili.com/
You can’t perform that action at this time.