Bleeding Edge Web

Bleeding Edge Web: March 2015

News from the Bleeding Edge

— Brian Moeskau (@bmoeskau)

Real-world npm

— Corey Butler (@goldglovecb)

Thanks to our sponsors:

Capital Factory

News from the
Bleeding Edge


Browser Pop Quiz

Last version check — February 2015:

Chrome Firefox Opera Safari IE Spartan
40 36 27 8 11 0

Browser Pop Quiz

As of March 25, 2015:

Chrome Firefox Opera Safari IE Spartan
36 27
8 11 0

Chrome Highlights

Version 41

Firefox Highlights

Version 37 (beta)

Shipping next week

As usual, lots of new ES6 features

Details next month... ;)



Version 28

Based on Chrome 41

Not much else to talk about from a dev perspective


Safari & IE

Security updates

Safari IE

Project Spartan

Holy crap, a new browser! From Microsoft!

Announced Jan 21 – will ship with Windows 10

See our slides from last month for details


Project Spartan

Culture change?

One small, but hopeful, example...

background-blend-mode is well supported, with one exception:

Project Spartan

Microsoft on Monday announced a code contribution from Adobe!

Adobe’s Web Platform Team provided its first contribution in the latest build of Windows 10, supplying a feature for CSS gradient midpoints. It allows developers to choose a location between color stops of a CSS gradient and is specified in the CSS images draft... [providing] full support for blend modes.

W3C Specs


ES6 === EcmaScript v6 === === Ecma-262 Edition 6

Next generation of JavaScript (available now)

Release candiates:

Any day now...

Fetch API

Not actually a W3C spec (it's a WHATWG spec)

Aims to improve on the age-old XMLHttpRequest (Ajax) API

Fetch API

fetch("/data.json").then(function (response) {
  if (response.ok) {
    res.json().then(function (data) {
      // use the data!
  else {
    console.log("Response is bad", res.status);
function (err) {
  console.log("Fetch failed!", err);

Currently available in FF 39 (nightly) and Chrome 42 (canary).

Github also provides a polyfill.

Sidebar: W3C vs HTMLWG vs WHATWG

Brief history

Sidebar: W3C vs HTMLWG vs WHATWG


Languages, Frameworks & Tools

React v0.13

Yet another example of why ES6 is so important today!


Tips and

Chrome DevTools: State of the Union 2015

By Addy Osmani, Google Platform Engineer

Tons of performance-related dev tools tips


But the most useful feature...

Subscribe to receive updates when packages change!


Bitovi Open Source Event

Help Bitovi (makers of CanJS, jQuery++, etc.) test the CanJS docs

March 26 (tomorrow), times flexible

A "few hours" of your time, plus get paid!

AngelHack 2015

And now for something completely different...

VIM Adventures

Learning VIM while playing a game

$25 / 6 months access to all levels


Brian Moeskau — @bmoeskau


What is npm?


Simplify the development of applications and tooling

* Note that there is no specification of "Node.js" or "JavaScript". Npm is everywhere.

Why npm Matters?

Why npm Matters?

Here are a few stats:

npm stats

That's nearly 1.2 billion packages downloaded.

Last month.

Where is npm used?

Really? All the things?

Wait, where does Bower fit in?

npm vs. Bower

npm vs Bower


First-time Setup

Only required if you plan to publish a module

  1. Create an account at
  2. Run npm adduser to connect your local config to
  3. Run npm set to configure your standard package.json fields

Typical Project Lifecycle

  1. Run npm init to generate package.json
  2. Develop your module, library, etc.
  3. Use npm install --save[Dev] to add dependencies
  4. Write some unit tests and connect to CI (optional, but recommended)
  5. Update your README, license, etc.
  6. Update the version in package.json
  7. Publish with npm publish
  8. Go to #2


Don't Abuse npm


Research → Build → Test → Publish → Announce

Announce? No fear!


Private Registries

They are real!

It's an evolving ecosystem

Sinopia: Private npm

Tips 'n' Tricks

npm i mymodule // npm install mymodule npm i mymodule -S // npm install mymodule --save npm link // Link to a global module npm update npm // Upgrade your npm installation


"scripts": { "start": "node --harmony index.js", "test": "mocha test" }


npm test npm start

Npm Roadmap Highlights


Corey Butler — @goldglovecb