Bleeding Edge Web: April 2018
News From the Bleeding Edge
— Brian Moeskau (@bmoeskau)
— Ted Patrick (@__ted__)
Thanks to our premiere sponsor:
News from the
Bleeding Edge
Browser Pop Quiz
Last check — March 15, 2018:
Browser Pop Quiz
As of April 19, 2018:
Chrome 66
Released April 17th —
Release Notes
The old way:
el.style.padding = 42;
console.log(el.style.padding); // '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
- Typed values === no type conversion bugs
- Arithmetic operations on styles are much easier
- StylePropertyMap has a map-like API (get/set/keys/values)
- Up to ~30% faster performance (no string serialization)
Note: Firefox support in progress, Edge is considering
Chrome 66
The old way:
var success = document.execCommand('copy');
The new way:
navigator.clipboard.writeText('Some text')
.then(() => {
console.log('Success');
})
Chrome 66
- Does not block the page
- Has a well-defined permissions model
- Note: Only supported on pages served via HTTPS
Chrome 66
- Muted autoplay is always allowed
- Autoplay with sound is only allowed based on defined rules *
- Top frames can delegate autoplay permissions to iframes
* Largely goverened by the Media Engagement Index
Chrome 66
- CSS Paint API (efficient image rendering to canvas)
- autocomplete supported on TextAreas and Selects
- String trimStart and trimEnd available
- And some handy DevTools updates
Languages, Libraries &
Frameworks
Released... this week?
- TypeScript 2.7+
- Web Component support
- Material UI
- New compiler and rendering engine
- And more...
- Server-side rendering support
- Aurelia UX improvements
- Web Component export support
- Native state management (ala redux)
- Lots of integrated tooling
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
- Deletes your FB cookies and logs you out
- Next visit to FB loads it into a special blue tab
- Sandboxes your FB activity to the container to limit tracking
- Note: FB buttons and sharing may not work in other tabs
1.1.1.1
The fastest, privacy-first consumer DNS service
Announced on April 1st by Cloudflare
- It's free and private (no hosting or gov't interest)
- Supports both DNS-over-TLS and DNS-over-HTTPS
- It's really fast
Install it today in 2 minutes
Aka "WebAuthn"—Moving toward a future without password strings!
- Enable external devices to pass credentials via USB, Bluetooth or NFC
- Biometric inputs also supported
- Much easier, phishing-resistant authentication
- As of April 10th it is a WC3 candidate recommendation
- Supported in latest FF, coming soon in Chrome and Edge.
Check out the developer resources.
Upgrade from Node 4.x
Just a little PSA—Node v4.x End-of-life is April 30th!
- Current LTS version is 8.x
- No more updates, including security!
- It's a lot slower!
- You're missing lots of nice features
PWAs on iOS 11.3
As of last month Progressive Web Apps are supported on iOS
- Install native-ish apps directly (no app store)
- Access camera, geolocation, sensors, and other native APIs
- Lots of drawbacks too, but great for some use cases
Here's a comprehensive overview
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:
- I. The Front-End Practice
- II. Learning Front-End Development
- III. Front-End Development Tools
Also available as a downloadable e-book
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!
- Same basic topics: principles, "code smells", testing, etc.
- Switching examples from Java to JavaScript
- Publishing it "web-first" targeting Fall 2018
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.
Thanks!
←
→
/
#
