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 / 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 / visibly.js
Created August 3, 2011 12:44
Cross-browser Page Visibility API polyfill
/*!
* isVis - v0.5.5 Aug 2011 - Page Visibility API Polyfill
* Copyright (c) 2011 Addy Osmani
* Dual licensed under the MIT and GPL licenses.
*/
(function () {
window.visibly = {
b: null,
q: document,
@addyosmani
addyosmani / README.md
Last active February 18, 2024 21:11 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

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 / commonjs.module-boilerplate.js
Created August 20, 2011 22:51
commonjs-module-boilerplates
/*
Courtesy of Sitepen
*/
/*
First, let’s look at very lightweight, but powerful boilerplate, an adapter that will let you write a module for both AMD and CommonJS standard module systems, using AMD style dependency declarations. This combination allows us to create modules that can be used both in browser and server environments:
*/
@addyosmani
addyosmani / 7.js
Created September 20, 2011 15:27
1.7 Preview
/*
Dave Methvin, Rick Waldron, Corey Frang, Timmy Willison and a handful of other developers working with the jQuery project have been hard at work this week landing a number of new features into jQuery core. The project is currently preparing to roll out version 1.7 of the popular library sometime during October.
Whilst patches and other commits are still being landed, I thought it would be interesting to take you through some of the new features you can expect to see in jQuery 1.7 through live examples. All of these can be played around with using our up-to-the minute version of jQuery (git or 'edge' as it's sometimes referred to) and should be cross-browser compatible.
The first feature to land that I've been quite excited about has been support for registering jQuery as a CommonJS-compatible asynchronous module. This is something that wouldn't have been possible without the dedication of RequireJS author James Burke, who was responsible for much of the work that went into the commit.
*/
@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()
@addyosmani
addyosmani / package.json
Last active January 18, 2024 21:31
npm run-scripts boilerplate
{
"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 / jQueryPluginPatterns.js
Created August 31, 2011 18:02
jQuery Plugin Patterns
/*
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 / codereview.md
Created August 25, 2011 12:11
Lessons from a JavaScript code review

#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 / limitLoop.js
Last active September 23, 2023 03:37
Limit the frame-rate being targeted with requestAnimationFrame
/*
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