Bleeding Edge Web

Bleeding Edge Web: September 2015


News from the Bleeding Edge

— Brian Moeskau (@bmoeskau)

An Overview of Ember

— Jeffrey Biles (@jeffreybiles)

Lightning Talks

Thanks to our venue sponsor:

Capital Factory

Thanks to our food sponsor:

Enola Labs

Thanks to our swag sponsor:

The Frontside

News from the
Bleeding Edge


Browser Pop Quiz

Last version check — August 2015:

Chrome Firefox Opera Edge Safari
44 40 31 1 (?) 8

Browser Pop Quiz

As of September 22, 2015:

Chrome Firefox Opera Edge Safari
1 (?)
13 *

Chrome 45

Release notes

ES2015: "Fat arrow" functions

// Concise syntax
let square = x => x * x;
console.log(square(10)); // 100
// Auto binding of `this` to lexical scope
let counter_es6 = function() {
  this.seconds = 0;
  setInterval(() => this.seconds++, 1000);

Chrome 45

ES2015: Array methods (and TypedArray)

Array.from('hello'); // ["h", "e", "l", "l", "o"]
Array.of('hello'); // ["hello"]
[0, 1, 2, 3, 4].fill(5); // [5, 5, 5, 5, 5]
['brian', 'corey'].find(function(item, index, array) {
  return item.startsWith('b') ? item : null;
}); // 'brian'

Chrome 45

ES2015: Object.assign

Copies the values (of all enumerable own properties) from one or more source objects to a target object.
// Merge multiple objects
Object.assign({foo: 0}, {bar: 1}); // {foo: 0, bar: 1}
// Ovrewrite equal keys
Object.assign({hello: 0}, {hello: 1}); // {hello: 1}
// Clone an object
let obj = { person: 'Brian'};
let clone = Object.assign({}, obj); // {person: 'Brian'}

Chrome 45

Additional changes:

Firefox 41

Release notes

Firefox 41

Screenshot node

Firefox 41

Copy image as data url

Opera 32

Release notes

Safari 8

(Safari 9 is coming soon...)

Edge 13

Edge versioning overview

✩ To be precise:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10547

Edge 13

Already working with third parties to reflect v.13

Edge 13

As of today Edge is at 80% ES2015 compatibility. This is amazing.

Edge 13

So what actually changed? Lots of stuff!

A few highlights...

Edge 13

HTML5 <template> element (part of Web Components)

<div id="items_list"></div>

<template id="items">
  <span class="item"></span>

Edge 13

HTML5 <picture> element & srcset sizes attribute

  <source srcset="medium.jpg 1000w, large.jpg 2000w">
  <img src="small.png">

Edge 13

HTML5 <a [download]> attribute

<a href="docs/some-doc-v.1.2.txt"

Libraries &

Notable Releases

Office UI Fabric

The front-end framework for building experiences for Office and Office 365

Open-sourced (MIT) on Github (whaa?)

Node 4.0.0

Node 4.0.0

Contains V8 (JS engine) — same version as current Chrome

Translation: ES2015 out of the box!

  • block scoping
  • classes
  • typed arrays
  • generators
  • promises
  • arrow functions
  • template strings
  • Map, Set, etc.

Node 4.0.0

Node 4.0.0

Node is now following semver (sorta)

All x.0 releases stable, but only even releases will get long-term support

Node 4.0.0

Oh yeah, by the way...

Node 4.1.0 was released Sep 17th :)

Node 4.0.0

Is this interesting to you?

Keep an eye out for next month's meetup...

And now for something completely different...

ECMAScript now on Github

This release marks the beginning of ECMAScript's journey toward version 2016.

Great rundown of the new ES versioning scheme

ECMAScript now on Github

Uses Ecmarkup (custom HTML superset)

  <img src="figure.png">
  <emu-caption>Example figure</emu-caption>


Angular Remote Conf

Virtual conference on Angular and other JS/Node topics

Camp Grounded

Where Grownups Go to Unplug, Get Away, and Be Kids Again.


Brian Moeskau — @bmoeskau

Bleeding Edge Web