addyosmani

(function(window, document) {
    'use strict';
    
    // π.js, because passy.

    // Adapted from console images by Adrian Cooney
    /**
     * Since the console.log doesn't respond to the `display` style,
     * setting a width and height has no effect. In fact, the only styles
     * I've found it responds to is font-size, background-image and color.

addyosmani

Maintenance releases

• https://github.com/addyosmani/timing.js/releases/tag/v1.0.3
• https://github.com/addyosmani/critical/releases/tag/v0.5.1
• https://github.com/addyosmani/backbone-fundamentals/releases/tag/v1.2.0
• https://github.com/addyosmani/polymer-filters/releases/tag/v0.1.1
• https://github.com/addyosmani/oust/releases/tag/v0.2.3
• https://github.com/addyosmani/essential-js-design-patterns/releases/tag/v1.6.1
• https://github.com/addyosmani/es6-tools (updated, we don't tag releases on this)
• https://github.com/addyosmani/todomvc-backbone-es6

addyosmani

This let's me git clone a template repo, cd into and fire up a new template in my editor of choice:

$ clone starter # clones https://github.com/addyosmani/starter (a personal boilerplate)

$ clone h5bp html5-boilerplate # get me HTML5 Boilerplate

$ clone angular angular-seed # same for AngularJS seed

$ clone polymerlabs seed-element # same for a new Polymer element

addyosmani

Composition

On an architectural level, the way we craft large-scale applications in JavaScript has changed in at least one fundamental way in the last four years. Once you remove the minutia of machinery bringing forth data-binding, immutable data-structures and virtual-DOM (all of which are interesting problem spaces) the one key concept that many devs seem to have organically converged on is composition. Composition is incredibly powerful, allowing us to stitch together reusable pieces of functionality to "compose" a larger application. Composition eschews in a mindset of things being good when they're modular, smaller and easier to test. Easier to reason with. Easier to distribute. Heck, just look at how well that works for Node.

Composition is one of the reasons we regularly talk about React "Components", "Ember.Component"s, Angular directives, Polymer elements and of course, straight-up Web Components. We may argue about the frameworks and libraries surrounding t

addyosmani

<nav role='navigation' class="main-nav" id="main-nav">
  <ul id="main-nav-list">
    <li>
      <a href="#">
          THE WORKSHOP
      </a>
    </li>
    <li>
      <a href="#">
          2013 SCHEDULE

addyosmani

<nav role='navigation' class="main-nav" id="main-nav">
  <ul id="main-nav-list">
    <li>
      <a href="#">
        <div>
          THE WORKSHOP
        </div>
      </a>
    </li>
    <li>

addyosmani

{
    "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

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

Tools that read through a directory, stream or tree and create an Application Cache manifest for you.

AppCache is still a douche but luckily there are tools available to take the pain out of generating your initial manifest files:

• Grunt: grunt-manifest is currently the de facto option, but the project lead is looking for a new maintainer. In light of that grunt-appcache is an alternative in case you're looking for more active support.
• Gulp: gulp-manifest is inspired by grunt-manifest and has a similar set of options.
• Broccoli: broccoli-manifest brings manifest file compilation based on trees.

Do review what is generated. As with any automation tooling, be careful that what is being generated is what you actually intend on being cached. I generally rel

addyosmani

React vs. Object.observe()

Object.observe() and React are actually aimed at solving different problems. If we're going to mention React, I would say..

"Facebook are also exploring how to improve performance when building non-trivial apps via their framework, React. React provides a virtual DOM with rendering capabilities that avoid excessive layout thrashing (when JavaScript writes then reads from the DOM multiple times causing reflows). React batches such reads and writes to keep things fast. In a typical webapp we might heavily interact with the DOM, which is expensive to update. React prefers to avoid mutating the DOM directly, instead building a virtual DOM where it can handle updating the real DOM to match."

Milliseconds

"In a test, dirty checking took 40 milliseconds compared to Object.observe’s 1 to 2 minutes. In other words, Angular became 20 to 40 times faster while using Object.observe." should read "Object.observe's() 1 to 2 milliseconds"