Chrome Dev Summit 2018 Highlights


Google hosted their 6th annual Chrome Dev Summit conference this past week and there were many cool, announcements, talks, demonstrations and updates for us developers to sink our teeth in to. In case you don’t know, Chrome Dev Summit is an annual conference hosted by Google where chrome engineers, advocates, lead developers gather to present to us all the latest updates of modern web development. I wasn’t able to attend the actual event (shocking I know) but I did spend a couple of nights this week working through the hours of footage uploaded from the conference. I figured that I would compile a list, in no particular order of some of the developments I thought really stood out. If you want to deep dive you can find all the talks uploaded on the Google Chrome Developers Channel.

Portals & Web Packaging

The first thing that really grabbed my attention from the Day One Keynote was an introduction to two new additions to the web platform which aim to make traversing web pages more seamless. Taken separately Web Packaging is a feature that allows for an encrypted digital signature to be applied to a page. The aim of this signature is to verify the pages original domain. This is a handy feature as I guess it will help reduce the amount of sites that are scraped and redistributed. Then you have Portals, which are essentially an iframe like HTML element used to preview another webpage. This coupled with web packaging creates a seamless transition to the previewed page, once clicked. This isn’t exactly mindblowing, as there are other methods of achieving similar effects but it definitely seems like it would make the web feel more instant, and make such fuinctionality more readily available.

Web.dev

In an effort to help developers keep up with all the new features introduces to the web platform a new educational site web.dev was also announced. Now this will be a very useful resource for develpopers going forward, but it was also a clever way to push the idea of .dev domain names... I like how Google puts a lot of emphasis on promoting all the aspects of what they feel makes for a better web here. It seems like a genuinely great reference point for everything to do with performance, security, accessibility etc. I haven’t had the time to have a proper dig through here yet, but I am definitely excited to check it out.

Visbug

Closing off the first day Keynote, was the announcement and demonstration of a browser extension called Visbug. As a developer with a growing interest in design this was a really interesting tool to see in action. Essentially an overlay for the browser, Visbug provides similar functionality to the likes of Figma and Adobe XD where you can not only adjust the styling of DOM elements as if they were layers in a design, but you also have access to a range of auditing tools. Say you want a quick overview of the styling rules of your homepage billboard? Simply select the Inspect Tool and hover over it. Visug will provide a tooltip containing all the rules of that element. Looking to get a quick overview of how certain elements are performing in terms of accessibility? E.g Contrast ratio, aria values, alt tags, just select the Accessibility Tool and hover. Really Simple. As they mention in the talk there are an abundance of extensions out there with these single features, but having them all in the one place is incredibly useful, I am really looking forward to messing around with this more.

Visbug Toolbar

Squoosh

During a presentation on keeping complex javascript apps nice and snappy, Squoosh.app, a really cool image compression PWA was demoed. Not only is this a useful application, but it’s a particularly great example of how blazingly fast modern javascript applications can be. It's interesting to note Web Assembly coupled with JavaScript was used to deal with the image encoding aspect of this application. Then the actual bundle was built using Preact and Webpack. On top of that we were shown a couple of very clever tricks that managed wo widdle this application down to an insanely tiny package size. I seriously recommend checking this talk out if you are looking to build a PWA anytime soon.

Lighthouse Updates

Lighthouse is a pretty commonly used tool by now. Introduced in 2017 it started as a humble auditing tool for several webpage metrics, performance, SEO, Accessibility, PWA features and best pracitces. Google have vastly improved on this over the last year or so and have tightened up on how they rate each of these metrics. As they put it, they are simply “raising the bar” in what they look for in a modern website.

Page Speed

Speaking of Lighthouse, the Pagespeed Insights tool which provides a very similar function to Lighthouse saw a pretty big update as well. When lighthouse came along it became clear that both tools were providing pretty different results when testing a web page which caused a little bit of confusion among the dev community. Thankfully this hasn’t fallen on deaf ears and Google have now updated Pagespeed insights so that it’s running lighthouse as it’s engine. This means that there will me much more consistent results when testing web pages going forward. This also meant that the Page Speed Insights API has also seen an update, which now makes lighthouse testing utilities available for use in third party applications. Happy to say, that this site still scores pretty well despite the changes

Page Speed Results

Houdini APIs

Surma everybody's favourite developer advocate showed up on stage during the conference to give us an update on the State of Houdini. Houdini if you don’t know is a project being brought to life by a group of engineers from a wide range of companies including Apple, Mozilla, and of course Google. The project itself is an effort to expose underlying aspects of the CSS engine for use by developers, giving the developer more direct control over CSS as a whole. Though it’s still very early days for Houdini there is great progress being made. During his talk Surma, builds on the already existing hype by showing exactly how Houdini is currently structured, and how worklets (not workers) are used to make APIs like the Paint API accessible to the developer.

Virtual Scroller

In a talk given by Gray Norton an update was given to the state of adding virtual scroller to the web platform. If you’re unfamiliar, the concept of virtual scrolling is the practice of only loading DOM nodes that are needed in the viewport in an effort to increase performance. A typical example would be scrolling through a contacts list on your phone. By default on the web, the entire list of contacts will be loaded before you start scrolling, with a virtual scroller only the items that need to be displayed on the screen would be loaded.

This would obviously be a pretty substantial performance win for the web. Gray goes onto cover how virtual scrolling is a fundamental concept in native mobile development, and how there are current methods of implementing virtual scrollers on the web via frameworks like React and Vue, but accurately describes the developer experience as having to “jump through hoops”, rather than having the option to implement a virtual scroller “front and center”. Though it’s still pretty early on in the project, Gray gives an awesome overview of the problems faced by his team, and also those yet to come. I highly recommend checking out the talk.

In Review

Overall the Summit left me excited. We are left with some new tools to play around with, some new standards to adhere to, and the promise of new technology coming down the pipeline, which aims to make the web an even more robust platform to work on. I genuinely cannot wait to see the strieds to be made in the coming years. Thanks for taking the time to read this, do you have any thoughts on the summit, anything you agree/disagree with here? Feel free to reach out and let me know!

Before we get started...

This website uses cookies to ensure you get the best possible experience. By clicking the button below you give direct consent to receive cookies from this site.

*You can change your mind at any time. Learn More