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 / workbox.md
Last active Aug 21, 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()
View jQueryPluginPatterns.js
/*
A (very) WIP collection of optimized/recommended jQuery plugin patterns
from @addyosmani, @cowboy, @ajpiano and others.
Disclaimer:
-----------------------
Whilst the end-goal of this gist is to provide a list of recommended patterns, this
is still very much a work-in-progress. I am not advocating the use of anything here
until we've had sufficient time to tweak and weed out what the most useful patterns
@addyosmani
addyosmani / package.json
Last active Aug 16, 2019
npm run-scripts boilerplate
View package.json
{
"name": "my-app",
"version": "1.0.0",
"description": "My test app",
"main": "src/js/index.js",
"scripts": {
"jshint:dist": "jshint src/js/*.js",
"jshint": "npm run jshint:dist",
"jscs": "jscs src/*.js",
"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",
@addyosmani
addyosmani / README.md
Last active Aug 12, 2019 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger
View README.md

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@addyosmani
addyosmani / contents.md
Created Sep 9, 2018
Put your Webpack bundle on a diet (multi-part series)
View gist:1057989
/**
Code copyright Dustin Diaz and Ross Harmes, Pro JavaScript Design Patterns.
**/
// Constructor.
var Interface = function (name, methods) {
if (arguments.length != 2) {
throw new Error("Interface constructor called with " + arguments.length + "arguments, but expected exactly 2.");
}
this.name = name;
@addyosmani
addyosmani / headless.md
Last active Jul 16, 2019
So, you want to run Chrome headless.
View headless.md

Update May 2017

Eric Bidelman has documented some of the common workflows possible with headless Chrome over in https://developers.google.com/web/updates/2017/04/headless-chrome.

Update

If you're looking at this in 2016 and beyond, I strongly recommend investigating real headless Chrome: https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md

Windows and Mac users might find using Justin Ribeiro's Docker setup useful here while full support for these platforms is being worked out.

@addyosmani
addyosmani / image-decoding.md
Last active Jul 6, 2019
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 / links.md
Last active Jul 5, 2019
this.performance links
View links.md
@addyosmani
addyosmani / flexbox-layout.css
Created Jan 29, 2017
Flexbox layout helper classes
View flexbox-layout.css
/*
Flexbox CSS helpers from the Polymer team. Extracted from https://github.com/PolymerElements/iron-flex-layout for use as just CSS.
Docs: https://elements.polymer-project.org/guides/flex-layout
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
You can’t perform that action at this time.