Yesterday I headed to the “Web in 2023” / “Meet the Chrome Team” event at the Google office in Berlin. I Just wanted to briefly share some of my highlights of new things, but also things that have already been around, and some people might just not know about.
The event itself was very well organized. I appreciated that they kept the talks short and to the point. Also, shout out to Barry Pollard, who was not only a great host, but also very knowledgeable and affable when we chatted.
Google was a very generous host and provided free drinks (including wine & beer), as well as a nice-looking food buffet.
Chrome DevTools
- You can use the “coverage” panel to see how much of a JS file is used. For example, loading a page you may notice that something like 50% of the code is actually unused. Of course, page load itself is not the whole story, you can also capture coverage over a timeframe. This can be used to find potentially unused JS and CSS code that could be split into separate bundles.
- In the “recorder” tab you can record interactions, replay them, and even measure/profile them! They can also be exported as JSON or puppeteer scripts.
- You probably already know that you can set breakpoints in the Source tab. But did you know there are three types of breakpoints? There are also conditional breakpoints, where you can halt only if a given JS expression evaluates to true. And also, forget about
console.log– there are “log” points, which log an expression in a certain line to the console, without having to touch the code.
CSS & UI
- subgrids can be used for more advanced layouts, where children need to align to the grid of a parent
- container queries are like media queries, but they relate not to the screen size, but to the parent container. Handy for some responsive designs.
- There is a proposal for CSS anchor positioning, which in the future hopefully finally makes all custom tooltip code obsolete. In pure CSS it allows you to anchor any element’s position to another. There is already a polyfill, based on floating-ui, which I have already been using in some personal projects.
- Also interesting upcoming HTML APIs: popover (will launch in Chrome in February) and selectmenu – a completely customizable select menu, i.e. to implement dropdowns without JavaScript.
Forms, Accessibility
- remember to use input
typeandautofillproperties properly to make users’ life easier - There’s an interesting accessibility learning site at web.dev/learn/accessibility
- Also there’s a new form troubleshooter extension that helps finding accessibility issues with forms
Security
- passkeys are already a thing (supported across ecosystems, e.g. iPhone and Chrome browser) that provide a passwordless signup/signin for users. The credentials are automatically synced across devices (e.g. from your Android phone to Chrome on your laptop, or from iOS to macOS). This makes it super easy for users to sign up without having to worry about passwords. The APIs are available, it’s just something that needs to be implemented by websites.
- They talked again about the deprecation of 3rd party cookies. Right now it seems like the timeline for that was moved back to the end of 2024. But it will come eventually. Before that the Privacy Sandbox APIs are supposed to somehow replace that, and those will soon start to be available for testing.
Performance
- Interaction to Next Paint (INP) measures how long it takes an app to respond to user input with a paint. This is the newest metric but not yet part of Core Web Vitals, but it may be in the future.
- Long tasks (JavaScript blocks that execute for more than 50ms) can be a problem. Chrome profiler can be used to spot those. A solution is to break them up by explicitly yielding, see web.dev/optimize-long-tasks for more.
- They recommend to monitor performance of the app for end-users by using a library like https://github.com/GoogleChrome/web-vitals and process them yourself, or use a third party service for RUM – Real User Monitoring.
- If the site you’re working happens to be in something like the 6 million most visited sites in the internet, you can also use the Chrome User Report to get some performance metrics without measuring anything yourself.
I have more to share about performance specifically from the Performance Now conference I attended at the end of last year, so stay tuned.