Bleeding Edge Web: May 2019

News From the Bleeding Edge

— Brian Moeskau (@bmoeskau)

How I Used CSS & JS to Remodel a Condo

— Corey Butler (@goldglovecb)

Make Your React App Progressive

— Cullen Tsering

Housekeeping

• Speakers and sponsors always wanted (edgeATX.org for details)
• Don't forget your parking validation
• Omni hotel bar (downstairs) after meetup

Browser Pop Quiz

Last check: April 18, 2019:

74	66	18	12.1

Browser Pop Quiz

As of May 16, 2019:

74	66	18	12.1

Next Browser Updates

• Firefox 67: May 21
• Chrome 75: June 4
• Edge Next: "Coming soon" (beta available for Win 10)
• Safari 13: September? ¯\_(ツ)_/¯

Chromium Edge + IE

• Edge will offer "IE Mode"
• Will use the IE rendering engine transparently
• Single UI, settings, history, etc.
• Will standalone IE finally go away for real?

React libraries

React Boilerplate 4.0 — Released April 18th

• Hooks, Suspense (lazy loading)
• enzyme → react-testing-library
• Immutable → Immer

Create React App 3.0 — Released April 22th

• Hooks, TypeScript linting

Svelte 3.0

Cybernetically enhanced web apps

• Released April 22nd
• No virtual DOM — Compiles to vanilla JS
• "Truly reactive" with no complex state management
• Boilerplate-free components
• Learn more about the philosophy behind it

Node.js 12.0

• Released April 23rd
• Upgraded to V8 7.4: perf boost, plus async stack traces
• TLS 1.3 by default (faster and more secure)
• Better ES6 module support
• Improved native modules, worker threads, heap management
• Still on Node 6? Time to upgrade!

Electron 5.0

• Released April 23rd
• Progress toward promisifcation
• Multiple BrowserViews in a BrowserWindow
• Access to macOS system colors
• Includes a few minor breaking changes!

Babylon.js 4.0

Brings powerful, beautiful, simple, and open 3D to the web

• Released April 30th
• WebGL-based graphics engine
• Improved physics engine (cool demo)
• New visual scene inspector
• Codebased moved to ES6 modules, up to 80% smaller payloads

.NET 5

• Announced May 6th
• .NET Core 3.0 → .NET 5
• Targets: Win / Linux / OSX / iOS / Android / tvOS / WASM / more...

Designing for Dark Mode

Implementing dark mode is easy, but designing for it is less so.

• OSX is pushing dark mode with Mojave
• Here is a great overview of things to consider
• Choosing your "dark" color, typography, consistency

Designing for Dark Mode

This is an emerging Level 5 Media Query standard:

@media (prefers-color-scheme: dark) {
  /* dark mode styles */
}

• Possible values: light, dark, or no-preference
• Supported today in Safari 12.1
• Slated for Chrome 76 & Firefox 67
• Here's a React-specific tutorial

Docker Hub Hacked

• Occurred on April 25th
• 5% of user accounts accessed (~190k)
• Leaked usernames, hashed passwords and source repo tokens
• If you were affected they should have contacted you
• Periodic reminder: Don't Reuse Passwords!

Front-end Dev Handbook 2019

A guide that everyone can use to learn about the practice of front-end development

• Current / best-in-class tool recommendations
• Read Chapter 0 for a 2018 recap + 2019 preview

Googlebot Goes Evergreen

• Googlebot is now based on Chromium 74
• It supports 1000+ new features
  • ES6 syntax
  • WebComponent APIs (Shadow DOM, custom elements)
  • IntersectionObserver (for image lazy-loading)

GitHub Package Registry

Safely publish and consume packages within your organization or with the entire world

• Publish private packages to use across your projects
• Global CDN, integrated auth, managed permissions
• Supports npm, Docker, Maven, NuGet, RubyGems
• Currently in beta and on a waitlist

JS + Web Audio Pedalboard

• Interactive Demo / Video Demo
• Nice overview of how the effects were built

React95

Windows95 UI components for your modern React apps

• Github repo / Storybook

Thanks!

https://edgeATX.org/slides

Brian Moeskau (@bmoeskau)