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 / README.md
Last active Jun 15, 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 / pwas.md
Last active Jun 12, 2019
💄💋 Progressive Web Apps across popular frameworks that I have written or contributed significantly to
View pwas.md

React HN (Universal rendering, Offline caching, optimisations)

React + Webpack application using the PRPL pattern

@addyosmani
addyosmani / headless.md
Last active Jun 6, 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 / 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()
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
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 / codereview.md
Created Aug 25, 2011
Lessons from a JavaScript code review
View codereview.md

#Lessons From A JavaScript Code Review

I was recently asked to review some code for a new JavaScript application and thought I might share some of the feedback I provided as it includes a mention of JavaScript fundamentals that are always useful to bear in mind. Code reviews are possibly the single biggest thing you can do to improve the overall quality of your solutions and if you're not actively taking advantage of them, you're possibly missing out on bugs you haven't noticed being found or suggestions for improvements that could make your code better.

##Challenges & Solutions

Code reviews go hand-in-hand with maintaining strong coding standards. That said, standards don't usually prevent logical errors or misunderstandings about the quirks of a programming language. Even the most experienced developers can make these kinds of mistakes and code reviews can greatly assist with catching them.

Often the most challenging part of code reviews is actually finding an experienced developer you trust to complete

@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 / 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);
@addyosmani
addyosmani / limitLoop.js
Last active May 4, 2019
Limit the frame-rate being targeted with requestAnimationFrame
View limitLoop.js
/*
limitLoop.js - limit the frame-rate when using requestAnimation frame
Released under an MIT license.
When to use it?
----------------
A consistent frame-rate can be better than a janky experience only
occasionally hitting 60fps. Use this trick to target a specific frame-
rate (e.g 30fps, 48fps) until browsers better tackle this problem
You can’t perform that action at this time.