Each year Google run a Chrome Developer Summit for a couple days highlighting what they've been working on in Chrome & what's available back to us as designers & developers.
One big takeaway from it all was focusing on the user.
This phrase came up a couple times but all subjects in this years talks were centered around improving the end user experience.
An emphasis on ways to help measure real user performance bottlenecks & improve the users experience / journey on your site.
Here's a few of my personal highlights from the Chrome Dev Summit:
- VisBug
Bringing a more design familiar tool to testing changes on a site, you can use VisBug to inspect elements of the page, change their text, font sizes, colours and position.
Also you can use it to drag in an image onto the page to replace another image.
Download for Chrome here: https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc/
This is also demo'd towards the end of the keynote: https://www.youtube.com/watch?v=zPHyxvPT0gg -
Web.dev
A new web design learning & improvements site focusing on latest best practice and ease of learning. Topics include: performance & speed, security, SEO, accessibility & much more.
Check this out here: https://web.dev/learn -
Google's new image compressor app:
To demo some of the new features available, Google have released a new Image compression app, useful for optimising your websites images quickly.
https://squoosh.app/ -
Native lazy loading for images:
On some sites, large lists of images are "lazy loaded" in only when the user scrolls to them. This feature is now coming directly to browsers so all sites can benefit from this.
Here's a write up of how this works: https://calibreapp.com/blog/2018-08-16-native-lazy-load/ -
A few hidden away devtools panels are super useful such as the layers panel.
Though not newly announced, these tools are very useful, found in devtools, under the 3 dots to the top right and then more tools, tools like the layers panel offer fantastic debugging access, such as a way to see the layers built up on a page, especially useful for debugging effects that have elements offscreen.
Here's a video showing this off in more detail:
https://www.youtube.com/watch?v=6je49J67TQk -
Reporting API
A way to detect deprecations, feature policies, network errors, crashes, csp & interventions from the page to a central reporting service.
https://developers.google.com/web/updates/2018/07/reportingobserver
https://www.youtube.com/watch?v=igHvSUrLqXc -
Virtual scroller
Many web experiences involve large lists of data, such as feeds on social networks, but also tables of data or lists of products. Handling large lists in browsers can be slow even on the latest modern hardware, but virtual scroller is a way to solve this that's being brought directly into the web platform.
Check it out here: https://twitter.com/ChromiumDev/status/1062433100804702208
Full video: https://www.youtube.com/watch?v=UtD41bn6kJ0 -
AMP & Progressive web apps
Many of the talks focused on improvements to AMP & Progressive Web Apps tech.
If you're interested in these, I suggest taking a look through the videos available: https://www.youtube.com/user/ChromeDevelopers/videos -
Actor model
Focusing on JS developement, the Actor model is from the 70s that's actually a great fit for the web today.
Learn more about this here: https://www.youtube.com/watch?v=Vg60lf92EkM -
AR & VR for web improvements
The web is pushing AR & VR further to be smarter and more available to all users, this fascinating talk shows off the possibilities available today & tomorrow.
https://www.youtube.com/watch?v=ylz2EbWueKw
All the videos are already available to watch on the Google Chrome Developers YouTube channel:
