Nino's Blog

Google I/O 2019

2019-05-27

If you are a web developer and you are looking to know what’s new and hot in web development, but you don’t have ten hours to watch whole Google I/O conference, look no more. Because here is summary just for you:

1.) Lazy loading

Lazy loading is coming natively to Chrome. The cool thing is that it doesn’t only check how near the current scroll position is, but also the connection speed. It can even work with other browsers with polyfill, by dynamically lazy loading lazy loading (pun intended) library.

<img src="user.jpg" alt="User's avatar" loading="lazy" />
<iframe src="videoplayer.html" loading="lazy"></iframe>

2.) Google fonts support for font-display property

Google fonts now support font-face descriptor font-display by appending display query string.

<link
  href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
  rel="stylesheet"
/>

Here is quick reminder about font-display possible values on CSS tricks.

TL;DR:

Block period Swap period
block Short Infinite
swap Short Infinite
fallback Extremely Short Short
optional Extremely Short None

3.) Pixel density upper limit

Google engineers figured out that DPI higher than two, have no tangible impact on image quality, and, of course, it impacts performance. So they but upper limit (2x) on DPI. Smart thing if you ask me. An exception to this rule is full-screen images.

4.) Third party cookies

Today cookies by default are visible in first party and third party context. SameSite attribute on a cookie provides three different ways to control this behavior. You can choose not to specify the attribute, or you can use Strict or Lax to limit the cookie to same-site requests.

“Chrome 76 introduces a new same-site-by-default-cookies flag. Setting this flag will shift the default behavior of Set-Cookie to apply SameSite=Lax if SameSite value is not provided. That shift is a move towards providing a more secure default and one that makes the intended purpose of cookies clearer to users.”

So in future all cookies by default will be visible only in the first-party context (SameSite=Lax) and developers should mark cookies for a third-party context usage (SameSite=None, also cookies will have to be served over HTTPS).

For more details visit https://web.dev/samesite-cookies-explained

5.) Portals

“Portals are like iframe that you can navigate to” as they take over top level navigation. With Portals content is pre-rendered so users gets a seamless transition experience, with animation! Best way to understand how then work is to see it for youself:

6.) Lighthouse performance budget

Lighthouse makes it easy to set up a performance budget. You create json file like this: budget.json file (there is even an option to define resourceCounts by resourceType)

and decide where you want your results:

lighthouse https://google.com
--budget-path=budget.json
--output=json
--output-path=report.json

6.) Duplex for the web

Last year Google showed us Duplex, a voice assistant, that can make calls on your behalf, like making a restaurant reservation. Now they are bringing it to the web. Assistant will be able to rent a car for you (filing time, date, car choice…) or buy movie tickets.

7.) New APIs

  • Web Perception Toolkit - enables barcodes, text and face detection https://perceptiontoolkit.dev/
  • Native File System access
  • Contacts picker
  • SMS-based auth
  • Web Share
  • Media Controls
  • Any many more in the works (wake lock, WebHID…)

8.) Evergreen crawler

I always wondered why Google crawler got stuck on version 41, but from now on, that won’t be the case. Google crawler will always be on the latest stable version.

9.) PWAs come to desktops

Desktop Progressive Web Apps are now supported on all desktop platforms, including Chrome OS, Linux, Mac, and Windows.


Written by Nino Majder who lives and breaths web development. Follow him on Twitter