Bleeding Edge Web: Feb 2019
News From the Bleeding Edge
— Brian Moeskau (@bmoeskau)
HomeAway's Multi-Cloud Traffic Director
— Andrew Hodges & Alex Mays
Thanks to our premiere sponsor:
Swag by Linkerd
A service mesh for Kubernetes and beyond

Housekeeping
- Speakers and sponsors always wanted (edgeatx.org)
- Don't forget your parking validation
- Omni hotel bar (downstairs) after meetup
- Anyone hiring / looking?
News from the
Bleeding Edge
Browser Pop Quiz
Last check: January 17, 2019:
Browser Pop Quiz
As of February 21, 2019:
Chrome 72

Released January 29th —Release Notes (video)
class Counter {
_value = 0; // <-- public field
get value() {
return this._value;
}
increment() {
this._value++;
}
}
Chrome 72

NOTE: Private class fields "in the works"
class Counter {
#value = 0; // <-- *private* field
get value() {
return this.#value;
}
increment() {
this.#value++;
}
}
Chrome 72

- Reference implementation of the new spec
- Fixes Chrome bugs related to setTimeout, postMessage, etc.
console.log(navigator.userActivation)
UserActivation {
hasBeenActive: true
isActive: false
}
Chrome 72

- Simple internationalization of list data
- No need to bundle the Unicode CLDR in JavaScript
const lf = new Intl.ListFormat('en', { type: 'disjunction' });
lf.format(['Frank', 'Christine', 'Flora']);
// 'Frank, Christine, or Flora'
const lf2 = new Intl.ListFormat('zh');
lf2.format(['永鋒', '新宇', '芳遠', '澤遠']);
// '永鋒、新宇、芳遠和澤遠'
Chrome 72

- See first meaningful paint (FMP), DOMContentLoaded and more

Chrome 72

- Enabled Trusted Web App support (app-embedded Chrome)
- Can be released via Google Play
- Sort of like inverse PWAs
Firefox 65

Firefox 65

fetch('https://someExpensiveResource')
.then(response => {
const reader = response.body.getReader();
// read each chunk and do something
})
Firefox 65

- Collapsed framework stack traces
- Pause on XHR/Fetch breakpoints
Edge 18

Switching to Chromium/V8 !!
Bonus: IE

Remember IE?
Enough is enough... Internet Explorer is a compatibility solution.
—Chris Jackson, Microsoft Cybersecurity Lead
Languages, Libraries &
Frameworks
Homebrew 2.0

The missing package manager for macOS
Released February 2
- Now supports Linux and Windows 10!
- Automatic brew cleanup
- Improved option parsing, performance, linking and more
- Dropped OSX Mountain Lion (10.8) and below
Vue 2.6

Released February 4
- New slots syntax and perf improvements
- Async error handling
- Server-side data pre-fetching
- And more!
React 16.8

Released February 6
- "The one with hooks"
- Hooks: functions that let you “hook into” state and lifecycle events
- Basically, composable behavior reuse
- Backwards-compatible
HTML5 Boilerplate 7.0

The web’s most popular front-end template
Released February 8
- Dropped IE 9/10 support
- Documentation revamp
- Improved Webmanifest
- Other smaller improvements
Next.js 8.0

Server-side React framework for apps, sites and more
Released February 11
Bootstrap 4.3

Server-side React framework for apps, sites and more
Released February 11
- New project to automate responsive font sizes
- Other mostly small improvements
- Moving toward v5:
- Switching docs from Jekyll to Hugo
- Dropping jQuery for vanilla JS
Don't Use "Do Not Track"
- Did you know there is a web standard for it?
- Most browsers support it, but most sites ignore it
- Safari 12.1 quietly removed it:
- They call it an "expired standard"
- It's a potential user fingerprinting variable
Facebook Sponsors LetsEncrypt
- 3-year renewal announced February 12th
- Platinum sponsorship == $300k / year!
- FB reports that 38% of HTTPS domains they see use LetsEncrypt
- Everyone should use it!
Galaxy Fold
- Launches April 26th for $1,980
- 4.6-inch phone → 7.3-inch tablet
- Rated for 200k folds

.dev Domains Available
Announced February 19
- Owned by Google (along with .app, .page and others)
- All .dev domains require HTTPS
- Might be a little pricey at the moment
Pure CSS Still Life

NationalPark Typeface
A typeface designed to mimic the National Park Service signs that are carved using a router bit
- It's open source and comes in four weights
- Designed from physical park sign imprints

And now for something completely different...
The Periodic Table of AWS

Animated Emoji URLs
Animate graphical unicode chars in the url bar (examples)
var f = ['🌑', '🌒', '🌓', '🌔', '🌝', '🌖', '🌗', '🌘'];
function loop() {
location.hash = f[Math.floor((Date.now()/100)%f.length)];
setTimeout(loop, 50);
}
loop();
Thanks!
←→ /
#