Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Addy Osmani addyosmani

🎯
Focusing
View GitHub Profile
@addyosmani
addyosmani / README.md
Last active Jan 29, 2023 — 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 / workbox.md
Last active Jan 26, 2023
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 / preprocessing.md
Last active Jan 17, 2023
JavaScript preprocessing/precompilation
View preprocessing.md

Problem: How can we preprocess JavaScript (at build-time or on the server-side) so engines like V8 don't have to spend as much time in Parse? This is a topic that involves generating either bytecode or a bytecode-like-abstraction that an engine would need to accept. For folks that don't know, modern web apps typically spend a lot longer in Parsing & Compiling JS than you may think.

  • Yoav: This can particularly be an issue on mobile. Same files getting parsed all the time for users. Theoretically if we moved the parsing work to the server-side, we would have to worry about it less.
  • One angle to this problem is we all ship too much JavaScript. That's one perspective. We could also look at preprocessing.
  • We've been talking about this topic over the last few weeks a bit with V8. There were three main options proposed.
    1. Similar to what optimize-js does. Identify IIFEs and mark them as such so the browser and VMs heuristics will catch them and do a better job than today. optimize-js only tackles IIFE bu
@addyosmani
addyosmani / ember-serviceworker.md
Last active Jan 15, 2023
Ember Service Worker support
View ember-serviceworker.md

Ember.js currently doesn't have baked in support for Service Worker. They want this and there's an ember-cli RFCS thread discussing strategies however a number of tooling efforts exist to help fill in this gap today.

Note: you can of course just write vanilla Service Worker code for your Ember.js apps and that will work just fine. This doc tracks tooling and libraries that lower the friction for getting this setup

Service Worker Libraries

These static resource precaching and runtime caching libraries are lower-level than Broccoli, but can be used directly

@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 / package.json
Last active Nov 29, 2022
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 / limitLoop.js
Last active Nov 15, 2022
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
@addyosmani
addyosmani / lazyload.html
Last active Nov 8, 2022
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 / lcp.js
Last active Oct 29, 2022
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 / captureCalls.js
Created May 6, 2013
captureCalls.js - captureCalls('document.getElementById') to show a stack trace for document.getElementById on its every call. By NK.
View captureCalls.js
(function() {
/**
* @param {Object|Function|string} object
* @param {string} methodName
*/
window.captureCalls = function captureCalls(object, methodName) {
var path = '';
if (typeof methodName == 'undefined') {