addyosmani

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

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

/*

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

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE

 Copyright (C) 2014 ADDY OSMANI <addyosmani.com>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

addyosmani

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

const loader = new loadScript();
loader.load([
    '//apis.google.com/js/client:platform.js?onload=startApp',
    '//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.3/dropbox.min.js'
]).then(({length}) => {
    console.log(`${length} scripts loaded!`);
});

addyosmani

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

/*!
 * 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

/*
  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

/*
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.


*/