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

My Experience Building nvm-windows in Go — Corey Butler (@goldglovecb)
Building a Go Imaging Server — Ted Patrick (@__ted__)

Thanks to our venue sponsor:

Capital Factory

Thanks (again) to our beverage sponsor:

Thanks to our food sponsor:

News from the
Bleeding Edge

Browser
Update

Browser Pop Quiz

Last version check — February 24, 2016:


48	44	35	14	9

Browser Pop Quiz

As of March 23, 2016:


48 49	35 36	44 45	14	9 9.1 (!)

Chrome 49 / Opera 36

Release Notes

Both based on Chromium 49
Lots of new ES2015 and CSS features
Enhanced Web Audio support
Lots of other stuff!

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:

Modifying object instance behavior
API enforcement & validation
Profiling, logging, access control
Middleware-style AOP programming

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)

Enables dynamic property values at runtime
Reduces clutter and code duplication
Similar to SASS / LESS 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

Audio Output Devices API support
Event.timeStamp now has 5 microsecond resolution
Native smooth scrolling
Note: the Geolocation API now requires HTTPS
Lots of other stuff

Firefox 45

Release Notes

Developer tools improvements
CSS Grid enhancements, no longer "experimental"
ES2015 Class syntax now enabled by default
WebGL and Service Worker improvements
Support for the text-emphasis CSS property
Lots of other stuff

Edge 14

Build 14291 Release Notes

Added preview support for the VP9 video format

Open, royalty-free video codec (developed by Google)
Offers reduced bitrate and better compression
Supported in Chromium and Firefox

Safari 9.1

Holy crap, a non-trivial minor version bump!

Release Notes

Support for HTML5 <picture>
CSS Variable support added (as in Chromium)
Gesture event (pinch, rotation) support on OSX
Lots of web inspector improvements
A few other things

Safari 9.1

Fast-Tap on iOS

No more 350ms tap delay in mobile Safari!

Automatic on any page with
width=device-width or user-scalable=no
Opt-in per element via CSS touch-action property
Mobile Chrome has supported this since version 32!

Safari 9.1

Safari's standards support has been... unimpressive

According to the Kangax ES2015 compatibility table:

Safari 7 (Oct 2013): 10%
Safari 8 (Oct 2014): 21%
Safari 9 (Oct 2015): 53%

Safari 9.1

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

Safari 9.1

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

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

Safari 10

Coming in October 2016
Will become the most standards-compliant browser available

Developers will rejoice!

Well, until we start looking at ESNext...

Libraries &
Frameworks

Notable Releases

React 15.0 (RC)

Released March 7
Version jumped from 0.14 → 15.0
Major internal changes, some breaking
Dropped IE8 support

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?

Azer wrote a separate library called kik

left-pad

So why is that interesting?

Azer wrote a separate library called kik
On Tuesday someone from Kik.com threatened him to get the name

left-pad

So why is that interesting?

Azer wrote a separate library called kik
On Tuesday someone from Kik.com threatened him to get the name
npm Inc. sided with Kik.com and transferred ownership to them

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

Free to attend
Audience: WP developerss / designers
Fri, April 8, 8am - evening
At Vuka in South Austin

AngelHack Austin 2016

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

$10 to attend, prizes for winners
Audience: developers, designers and entrepreneurs
Sat, April 9, 9am - Sun, April 10, 5pm
At MakerSquare in downtown Austin

Austin TechBreakfast

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

Free to attend
Audience: developers, designers and entrepreneurs
Thu, April 14, 8am - 9:30am
At Capital Factory

OpenStack Summit

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

$450-900 to attend
Audience: Anyone interested in cloud computing
Thu, April 24-29
At Austin Convention Center

OSCON 2016

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

$$$ to attend
Audience: developers
May 16-17 (tutorials) & 18-19 (conference)
At Austin Convention Center
OSCON Kids Day on Sunday, May 15

MVP MIX

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

$75+ to attend ($20 discount with code "Meetup")
Audience: .NET developers
May 27-28
At Addison Convention Center (Dallas)

Thanks!

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

http://edgeATX.github.io/slides

Brian Moeskau — @bmoeskau

Bleeding Edge Web