Chrome Dev Summit 2019 tl;dw

If you’re interested in UI:

  • A11y touch and visual refresh — Improve default form elements to Chromium (Both Chrome and Edge).
  • Stability — allow richer visual changes to elements (color picker).
  • Extending functionaliy (custom select items)
  • New components like virtual scroll <display-locking/> and <toggle-switch/>
  • Open UI: a new emerging resource for components knowledge to gather best practices https://open-ui.org/
  • Check the new visual refresh — enable chrome://flags/#form-controls-refresh
  • New awesome CSS properties. All examples are here: https://css-at-cds.netlify.com/
  • New logical properties, for a better intl (LTR, RTL, Vertical RL)
    height => block-size and width => inline-size
    margin-right => margin-inline-start and margin-top => margin-block-start
  • CSS Houdini. Add advanced custom properties and values API to CSS in a performant way using worklets.
  • Create a seamless experience moving between pages for multi-page applications (MPA). It’s like an iframe-like but acts as a first-class citizen when changing URLs.
  • Bridges the gap to native. For example, a popup that takes full screen (product page), prefetching the page structure with periodic background-sync

If you’re interested in client-side web frameworks:

  • “Web frameworks” offers developing high-quality web applications with good defaults and opinionated tooling.
  • Google collaborates with Next.js to enhance it, focusing on performance — split chunks, differential loading, drop polyfills for browser-specific bundles.

If you’re interested in performance:

  • Not all devices and browsers are the same. Some are stronger than others, the network connection has a major effect.
    Build your apps thinking about it — create them in a way adding features according to device and network capabilities (memory, network, CPU).
  • New performance metrics to 2019 for your site benchmark. From FMP (First Meaningful Paint) and FCI (First CPU Idle) to LCP (Largest Contentful Paint), TBT (Total Blocking Time) and CLS (Cumulative Layout Shift).
  • Using the “Google Search Console“ https://search.google.com/search-console to get the maximum from your reports.
  • Stack Pack allows creating custom suggestions to users on how to improve their site (super important for Wix users! [WordPress already have theirs])
  • Lighthouse CI. Run performance tests on every CI run with a dedicated server and dashboard for your results http://bit.ly/lhci
  • Move heavy calculations to WebWorker. It will free your main thread for UI only. We should aim to reduce the load from it in general to support it.
  • It will not necessarily make your apps faster, but it will improve the overall experience, not sticking the main thread.

If you’re interested in user authentication:

  • Improve the way to authenticate by integrating directly with SMS messages for OTPs. Next-generation auth will be based on WebAuthn, using 2FA with public-private keys, creating them with platform authenticators such as biometric and face sensors

If you’re interested in processes:

  • From w3c committee to shipping new features to users. Some will not be eventually shipped based on user feedback but that’s natural. The earlier devs/users are involved in the design, discussions, and implementation. An “intent” (email to the community) is a good way to share the plans.
  • Listen to users
  • Research the problem
  • Design and Prototype
  • Experiment and Iterate
  • Decide if to ship or not

TODO (Didn’t get to summarize…)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store