Bleeding Edge Web: January 2018

News From the Bleeding Edge

— Brian Moeskau (@bmoeskau)

Noding a Blockchain

— Kyle Simpson (@getify)

Housekeeping

Announcements

Thanks to our venue:

Browser Pop Quiz

Last check — November 14, 2017:

62	57	16	11

Browser Pop Quiz

As of January 24, 2018:

62 63	57 58	16	11

Chrome 63

Released Dec 7 — Release Notes

Dynamic module imports

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  });
});

Chrome 63

Async iterators and generators

// Regular iterator:
for (const item of thing) {
  // ...
}
// Async iterator:
for await (const item of asyncThing) {
  // ...
}

Babel can transpile this today!

Chrome 63

Custom over-scroll behavior

• Override the CSS overscroll-behavior property
• Provide custom pull-to-refresh behavior
• Other custom swipe nav actions

Firefox 58

Released Jan 23 — Release Notes

Recap: Massive "Quantum" update in 57

• New UI (Photon)
• New multi-process architecture
• 2x faster performance
• 30% less memory consumption

To learn more check out our November overview

Firefox 58

Streaming Compilation of wasm!

First, a quick review of wasm:

• wasm === the file format of WebAssembly
• Near-native performance in the browser without plugins
• Safe (operates in the sandbox)
• Can be a compiler target for multiple languages

Firefox 58

Streaming Compilation of wasm!

Why is this so cool?

• Baseline compiler is up to 15x faster than before
• Compiles faster than networks today can deliver code
• Code executes immediately on download completion

This changes the cost of loading WebAssembly to be more like decoding an image than loading JavaScript.

Firefox 58

Off-Main-Thread Painting

Huge performance boost to UI rendering

• Added a paint-specific thread to parallelize rastering
• Improves FPS by up to 30%

Parcel

Blazing fast, zero configuration web application bundler

• Fast, multicore webpack alternative
• HTML / JS / CSS / static file batteries included
• Auto-transforms via Babel, PostCSS, etc
• Auto-code splitting via dynamic import() syntax

The Joy Compiler

Translate idiomatic Go into concise Javascript that works in every browser

• A fast, open source 1:1 Go to JS compiler
• Use Go's types and static analysis tooling
• Soon: React support, ES3 output, more

Stimulus

A modest JavaScript framework for the HTML you already have

• By the Basecamp folks
• Simple "HTML augmentation" library, no DOM creation
• Add DOM attributes and simple controller functions
• Sort of like nicely-structured jQuery

Find out more or walk through some examples.

Spectre + Meltdown

They exploit critical vulnerabilities in modern processors to leak passwords and sensitive data.

• They affect virtually all modern computing devices
• The WebKit team wrote up a useful explainer

Spectre + Meltdown

Here's a FAQ that should slightly concern you:

Am I affected by the vulnerability?
Most certainly, yes.

Can I detect if someone has exploited them against me?
Probably not. The exploitation does not leave any traces in traditional log files.

Can my antivirus detect or block this attack?
While possible in theory, this is unlikely in practice.

Has Meltdown or Spectre been abused in the wild?
We don't know.

Spectre + Meltdown

Good News

• There are patches available for most major systems—update today!

Bad News

• Spectre exploits "speculative execution"
• The patch can slow processors by 10-50%. D'oh!

A11y Validation Hack

Touch Bar Sudo Hack

Carbon

Create and share beautiful images of your source code

• Type (or drop a file) into the online editor
• Configure the look and feel, then download your image

Thanks a Million, Jon Skeet!

• First person to hit 1,000,000 reputation on Stack Overflow
• Answered over 34,000 questions since 2008
• SO marked the milestone with a nice blog post

WebGL Elastic Man

You can always count on Adult Swim to entertain

Thanks!

http://edgeATX.github.io/slides

Brian Moeskau (@bmoeskau)