Bleeding Edge Web

edgeATX.github.io/slides

edgeatx.slack.com
[email protected]

Bleeding Edge Web: March 2016

Announcements

News from the Bleeding Edge

— Brian Moeskau (@bmoeskau)

Go: A Practical Start Guide

— Jud White (@judson_white) - slides / code

Lightning Talks

Thanks to our venue sponsor:

Capital Factory

Thanks (again) to our beverage sponsor:

Thanks to our food sponsor:

VestU.com

News from the
Bleeding Edge

Browser
Update

Browser Pop Quiz

Last version check — February 24, 2016:

Chrome Opera Firefox Edge Safari
48 44 35 14 9

Browser Pop Quiz

As of March 23, 2016:

Chrome Opera Firefox Edge Safari
48
49
35
36
44
45
14 9
9.1 (!)

Chrome 49 / Opera 36

Release Notes

Chrome 49 / Opera 36: Highlights

ES2015 default function param values

function foo (msg = 'hello') {
  console.log(msg);
}
foo(); // 'hello'

Chrome 49 / Opera 36: Highlights

ES2015 destructuring syntax

let a, b, rest;
[a, b] = [1, 2];
// → a = 1; b = 2

[a, b, ...rest] = [1, 2, 3, 4, 5];
// → a = 1; b = 2; rest = [3, 4, 5]

{a, b} = { a: 1, b: 2 };
// → a = 1; b = 2

Chrome 49 / Opera 36: Highlights

ES2015 Proxies / Reflection

Proxies enable us to trap or intercept all of the operations on a target object and modify how this target operates.

Example use cases:

Chrome 49 / Opera 36: Highlights

ES2015 Proxies / Reflection

var birthDateValidator = {
  set: function(obj, prop, value) {
    if (prop === 'birthDate' && value < 21) {
      throw new RangeError('Under age!');
    }
    obj[prop] = value;
  }
};

var person = new Proxy({}, birthDateValidator);

person.birthDate = 1980;
console.log(person.birthDate); // 1980
person.yearOfBirth = 2001; // Throws exception

Chrome 49 / Opera 36: Highlights

CSS Custom Properties (aka CSS Variables)

Chrome 49 / Opera 36: Highlights

CSS Custom Properties (aka CSS Variables)

:root {
  --primary-color: blue;
  --spacing: 10;
}
.heading {
  color: var(--primary-color);
  margin-top: calc(var(--spacing) * 1px);
  margin-bottom: calc(var(--spacing) * 2px);
}

Check out this demo

Chrome 49 / Opera 36: Highlights

Firefox 45

Release Notes

Edge 14

Build 14291 Release Notes

Added preview support for the VP9 video format

Safari 9.1

Holy crap, a non-trivial minor version bump!

Release Notes

Safari 9.1

Fast-Tap on iOS

No more 350ms tap delay in mobile Safari!

Safari 9.1

Safari's standards support has been... unimpressive

According to the Kangax ES2015 compatibility table:

Safari 9.1

However, if you look at the latest WebKit...

Safari 9.1

Safari 9.1

WebKit nightlies now support 98% of ES2015! What?!

So, here's my (hopeful) prediction...

Safari 10

Developers will rejoice!

Well, until we start looking at ESNext...

Libraries &
Frameworks

Notable Releases

React 15.0 (RC)

Notable Releases

Express 5.0

Initial tracking issue opened July 14, 2014

Lots of steady activity, and then a few weeks ago...

Notable Releases

Express 5.0

This happened:

Notable Releases

Express 5.0

Doug Wilson, repo maintainer, just quit. D'oh.

Full back story here

Future unclear...

left-pad

An open source project by a guy named Azer

Here's the entire code:

function leftpad (str, len, ch) {
  str = String(str);
  var i = -1;

  if (!ch && ch !== 0) ch = ' ';
  len = len - str.length;

  while (++i < len) {
    str = ch + str;
  }
  return str;
}

left-pad

So why is that interesting?

left-pad

So why is that interesting?

left-pad

So why is that interesting?

left-pad

So why is that interesting?

left-pad

In response, Azer decided to unpublish kik from npm.

left-pad

In response, Azer decided to unpublish kik from npm.

Plus all 250+ of his other projects, including left-pad.

left-pad

left-pad was fetched from npm 2.5 million times last month

It's a dependency of Node, Babel and thousands of other key projects

Stuff started
breaking

left-pad

Overview of the saga here

Azer's explanation and Kik.com's take

It was fixed quickly (npm restored left-pad manually)

But lots of things left to think about...

Wow, that
was kind of
depressing

Cute Break

In Case You
Missed It

How to Deploy Software

By Zach Holman of Github fame

Comprehensive overview of the deployment landscape

Required reading if you deploy software!

And now for something completely different...

Twilio Tutorial Site

Unique annotated code walkthroughs

Specific to Twilio's libraries, but great inspiration anyway

NPlayM

Play a Space-Invaders-like game while you're installing your node_modules!

Because... space invaders

Upcoming
Events

do_action: WP Charity Hackathon

Spend one day building WordPress sites for 10 deserving non-profits

AngelHack Austin 2016

Build a technology that will have a positive impact on the world, people, or environment

Austin TechBreakfast

At this monthly breakfast get-together techies, developers, designers, and entrepreneurs learn from their peers through show & tell style presentations

OpenStack Summit

The most important gathering of IT leaders, telco operators, cloud administrators, app developers and OpenStack contributors building the future of cloud computing.

OSCON 2016

Explore what's new in open source languages, tools, and techniques

MVP MIX

It's a 2-day training in .Net, HTML5, JavaScript, EcmaScript, Web API and REST, Sharepoint, and other awesome technologies

Thanks!

http://www.meetup.com/bleeding-edge-web/

http://edgeATX.github.io/slides

Brian Moeskau — @bmoeskau

Bleeding Edge Web

/

#