Bleeding Edge Web


Bleeding Edge Web: April 2018

News From the Bleeding Edge

— Brian Moeskau (@bmoeskau)

<component> Architectures with VueJS

— Ted Patrick (@__ted__)

Thanks to our venue:

Capital Factory

Thanks to our premiere sponsor:

Thanks to our sponsor:

News from the
Bleeding Edge


Browser Pop Quiz

Last check — March 15, 2018:

Chrome Firefox Edge Safari
65 59 16 11.1

Browser Pop Quiz

As of April 19, 2018:

Chrome Firefox Edge Safari
59 16 11.1

Chrome 66

Released April 17th — Release Notes

CSS Typed Object Model

The old way: = 42;
console.log(; // '42' (string)

The new way:

el.attributeStyleMap.set('padding', CSS.px(42));
const padding = el.attributeStyleMap.get('padding');
console.log(padding.value, padding.unit); // 42, 'px'

Chrome 66

CSS Typed Object Model

Note: Firefox support in progress, Edge is considering


Chrome 66

Async Clipboard API

The old way:

var success = document.execCommand('copy');

The new way:

navigator.clipboard.writeText('Some text')
  .then(() => {

Chrome 66

Async Clipboard API


Chrome 66

Media Autoplay Changes

* Largely goverened by the Media Engagement Index


Chrome 66

And More...


Languages, Libraries &

Angular 6.0

Released... this week?


React 16.3

Released March 29th



2018 Q1 Report

Looking for a new framework? You might check it out.


Other Interesting Releases


Facebook Container

Contain your Facebook session—and identity—so it's harder for Facebook to track you around the web.

An official Firefox extension available now

Facebook container

The fastest, privacy-first consumer DNS service

Announced on April 1st by Cloudflare

Install it today in 2 minutes

Web Authentication API

Aka "WebAuthn"—Moving toward a future without password strings!

Check out the developer resources.

Upgrade from Node 4.x

Just a little PSA—Node v4.x End-of-life is April 30th!

Node 4.0.0 Node logo

In Case You
Missed It

PWAs on iOS 11.3

As of last month Progressive Web Apps are supported on iOS

  1. Install native-ish apps directly (no app store)
  2. Access camera, geolocation, sensors, and other native APIs
  3. Lots of drawbacks too, but great for some use cases

Here's a comprehensive overview

Front-End Dev Handbook 2018

Outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2018.

Great survey of the current state-of-the-art in front-end web dev:

  1. I. The Front-End Practice
  2. II. Learning Front-End Development
  3. III. Front-End Development Tools

Also available as a downloadable e-book

HTTP Archive Update

Making it easy for anyone to explore the health of the web as a whole

On March 27th they pushed out an updated, responsive design.

Refactoring, 2nd Edition

Martin Fowler is rewriting his seminal book after 20 years!


And now for something completely different...


Face detection in 200 lines of JavaScript

All processing is client-side, without sending images to a server (demo).

Check out the science behind it if you're interested.

Face detection


Brian Moeskau (@bmoeskau)

Bleeding Edge Web