Design, UX & Advanced PWAs highlights (CDS 2020)

00:14 - So we decided to try having Hack Week virtually.

00:19 - So this setup worked surprisingly well. And this virtual conference room became a frequent activity in our team, beyond that Hack Week, especially early on in the work from home journey.

00:34 - Our team is split into different time zones, so we tried to have being in the same room atmosphere for few hours a day when all of us are working together.

00:47 - So how it works, including this video shoot, is that I’m on a video call with producers and directors, screen-sharing camera remote app on my laptop which is connected to my camera, so that they can make sure all of my recording settings are correct.

01:03 - This is how a video gets made these days. In response to COVID-19 pandemic, our team has put together a list of helpful resources in one page, from how to diagnose a performance issue to how to add structural data, so important announcements are properly surfaced on search.

01:22 - (upbeat music) - Houdini is an umbrella term that describes a series of low-level browser APIs, which make it easier for authors to access and extend CSS by hooking into the styling and layout process of the browsers rendering engine.

01:40 - This means that developers now have much more control and power over the styles they write.

01:46 - For example, instead of waiting for a browser to implement an angled borders feature, you can write your own paint worklet, apply it to both borders and clipping, and get an effect just as you would with a rounded border radius.

02:00 - Instead of waiting for a browser to implement masonry you could implement a layout worklet to imitate this browser-based implementation, or you can use an existing one.

02:10 - And beyond worklets, Houdini enables more semantic CSS with the Typed Object Model and enables developers to define advanced CSS custom properties with syntax, default values, and inheritance through the Properties And Values API.

02:23 - To make working with a Paint API and other Houdini worklets a little easier to explore and consume, my team puts together a resource called houdini. how.

02:32 - It’s your all-in-one go-to for CSS Houdini worklets and information, a congregate library and a reference.

02:39 - (soft upbeat music) - We recently launched Bubblewrap, a command-line tool that helps web developers to use their PWA in an Android app.

02:51 - - I just described only the basic flow. Look out for a companion blog post with more details about Play billing for web.

03:00 - It will include details about managing your subscriptions using real-time developer notifications and more information about Google Play Developers API.

03:11 - - We received feedback from developers worried about devices where Chrome is not installed or is not the user’s preferred browser.

03:19 - With Samsung Internet adding support for Trusted Web Activity from version 13 and above, we are happy to say that most browsers on Android now support Trusted Web Activity.

03:30 - (soft upbeat music) - Many of us are already familiar with Stories.

03:37 - They’re always full screen, portrait and immersive.

03:40 - Stories allow readers to tap to go forward and backward and you drag up to open a page attachment.

03:46 - And, of course, Stories allow you to swipe to go to the next story if there is one and so on.

03:51 - Web Stories are web-based version of the popular Stories format that blend video, audio, images, animation, and text to create a dynamic consumption experience.

04:01 - So why should you create Web Stories? One, for creative control.

04:06 - Just like for regular web pages, it’s important to have the right tools at hand to create Web Stories.

04:12 - Tools that help you speed up the content creation process and allow you to achieve better results thanks to visual editing and guidance along the way.

04:20 - (soft upbeat music) - There are three core areas that we hope you’ll focus on in the next year.

04:29 - As the world moved digital, your user’s safety and privacy is more important than ever.

04:34 - We believe that one of the biggest investments that you can make in the next year is to focus on your Core Web Vitals.

04:40 - - We should recognize that the web is a meta-platform, like Flash or Java.

04:44 - The web abstracts over operating systems and frameworks to enable portable content that isn’t locked into a single OS or product.

04:51 - The only way that Chrome team succeeds is if the web as a whole thrives.

04:54 - (bright upbeat music).