The second day of the Google I/O 18 consisted of several talks including Web Assembly, Polymer, Chrome Dev Tools, Flutter and Artificial Intelligence.
Let's dive in to know what's new and the improvements that have been made to the web!
What's new in Chrome DevTools
There is a new shortcut, Ctrl + F, that will pull up a new search sidebar in the Network pane of Chrome DevTools. With this search sidebar, you can search through headers and their values.
The Performance panel has been improved to provide flame charts for every process. The charts show the total work each process does. You need to make sure Site Isolation for Chrome is enabled by heading to
chrome://flags#enable-site-per-process and activating it.
The Security panel now provides the ability to show the certificate transparency information of a secure website.
The Sources Panel has a Network tab. The Network tab is now called the Page tab.
Do It Yourself Artificial Intelligence
Google introduced the AIY Kits: a series of open source projects that include hardware and software tools, showcasing on-device artificial intelligence.
With AIY Kits, users can use artificial intelligence to make human-to-machine interaction more like human-to-human interactions.
"With AIY Kits, users can use artificial intelligence to make human-to-machine interaction more like human-to-human interactions."
The first open source project is the Voice Kit. The speech recognition ability in this kit allows you to add voice recognition to assistive robots, talk to control devices such as light bulbs and replace physical buttons on household appliances and consumer electronics.
Google analyzes a lot of sites and has learned over time how to make them extremely fast. The Web Performance made easy talk by Eva and Addy Osmani showed how to fix common web performance bottlenecks and take advantage of the latest browser APIs to improve loading experience.
- New Lighthouse Web Performance Audits
- Optimizing Caching Strategies - Cache as many resources as possible efficiently.
- Remove unnecessary bytes and don't send things twice - Optimize Caching strategies. Cache as many resources as possible.
- Eliminate unnecessary downloads.
- Don't serve unoptimized or unnecessary images to your users.
- Help browsers deliver critical resources.
- Have a Web Font Loading Strategy.
Google announced a new experimental browser feature called
Priority Hints. It allows you to specify the importance of a resource like so:
<img src="kit.png" importance="high" >
<link rel="preload" as="style" href="theme.css" importance="low">
The browser loads the resources with high importance first before the others.
Addy Osmani announced Guess.js, a toolkit for enabling data-driven user-experiences on the Web.
It provides the following shown in the diagram below:
Read more about Guessjs
With Web Assembly, software like AutoCAD and Complex3 have created complex but fast UI web experiences.
Check out some updates from my developer friend, Ire Aderinokun, that attended other sessions below.
With the Accessibility Object Model we can create accessible elements from previously inaccessible elements like canvas!— Ire Aderinokun (@ireaderinokun) May 9, 2018
You can use the AOM to create elements that don't exist in the DOM, but that can be interacted with assistive technology 🔥#io18 pic.twitter.com/8gWHYh2S9x
The new :focus-visible pseudoclass will only apply when a user is focusing via a keyboard or other assistive tech (or if a user opts in)— Ire Aderinokun (@ireaderinokun) May 9, 2018
This will allow us to have more visible focus styles for users that need it and less obvious ones for mouse users 👏🏾#io18 pic.twitter.com/sMeRpc5oId
Auth0 provides a platform to authenticate, authorize, and secure access for applications, devices, and users. Security and development teams rely on Auth0's simplicity, extensibility, and expertise to make identity work for everyone. Safeguarding more than 4.5 billion login transactions each month, Auth0 secures identities so innovators can innovate, and empowers global enterprises to deliver trusted, superior digital experiences to their customers around the world.
Google I/O, Day 2 was amazing. I was able to attend a few critical sessions as seen above. Looking forward to the #Day3.
If you were around for #GoogleIO - Day 2, let me know the announcements and talks that inspired you in the comment section. 😃