Blog

Writing from 2021

A quick recap of books and articles I wrote this year

Optimize Core Web Vitals with Lighthouse and DevTools

Today, we will cover some of the tools the Lighthouse & DevTools teams in Chrome worked on to help identify how your site can improve on the Core Web Vitals

A Performance Heads-Up Display (HUD) for Chrome

Introducing a new Performance Heads-Up Display (HUD) to Chrome and Chrome for Android

React Server Components

React Server Components aim to enable modern UX with a server-driven mental model. In this post I will share some notes I took while catching up on the latest RFC and talk aroun...

The Import On Interaction Pattern

Tip: Lazy-load non-critical resources when a user interacts with UI requiring it. Your page may contain code or data for a component or resource that isnt immediately necessary....

Incremental Migrations

Incremental migrations are excellent for updating large legacy projects. Migrate a small piece at a time with lower risk then gradually do the rest.

The JavaScript Self-Profiling API

Measuring costly JavaScript with the JavaScript self-profiling API

Faster Web App Delivery with PRPL

PRPL is a pattern for structuring and serving web applications and Progressive Web Apps with an emphasis on improved app delivery and launch performance.

Emulate vision deficiencies in DevTools

Emulate vision deficiencies in to see how users who experience color blindness or blurred vision might see your site.

Visualize Data Structures in VSCode

VSCode Debug Visualizer is a VSCode extension that allows you to visualize data structures in your editor

Fast page labelling in Chrome for Android

Chrome on Android will begin to highlight high-quality user experiences on the web, starting with Fast page labelling of fast links via the link context-menu.

Preload late-discovered Hero images faster

If you are optimizing Largest Contentful Paint, preload can be a game-changer for speeding up late-discovered hero images and resources, loaded via JavaScript.

Infinite Scroll without Layout Shifts

Learn how to implement infinite scrolling for long lists without causing surprising layout shifts.

Native lazy-loading for iframes is here!

Native lazy-loading for iframes is now supported in Chrome and Chromium browsers

We've improved image lazy-loading in Chrome!

We improved image lazy-loading in Chrome! The new thresholds for when we lazy-load images offer much better data-savings, are closer to JavaScript lazy-loading libraries and are...

Optimize for Core Web Vitals

Introducing the Web Vitals Chrome Extension

Modern Touch-Friendly Design

What (not) to Prefetch/Prerender

This post outlines a number of edge-cases we have encountered while developing libraries like Quicklink. We believe most of these edge-cases apply equally to efforts leveraging...

Working Remotely During COVID-19

Some tips and guidance for working remotely during the COVID-19 pandemic.

Automatically open Chrome DevTools in each new tab

You can automatically open Chrome DevTools in each new tab

Web Performance Recipes With Puppeteer

This guide has recipes for automating Web Performance measurement with Puppeteer.

Profiling React.js Performance

This guide looks at measuring React component render performance with the React Profiler API, measuring interactions with React's new experimental scheduler and measuring custom...

Modern UX metrics on WebPageTest

This tip covers how to measure modern UX metrics on WebPageTest using the Custom Metrics feature.

Future-proofing your Software Engineering career

Practical strategies for engineering careers in the future

The 70% problem: Hard truths about AI-assisted coding

A field guide and why we need to rethink our expectations

User-centric engineering

Engineering with user empathy is the foundation of great products

There is no right time. Just time and what you do with it.

How to thrive in imperfect conditions

Comparison is the thief of joy

Navigating comparison with mindfulness

Focus on what you can control

Actionable advice for empowerment

10 lessons from 12 years at Google

My lessons learned along the way.

Grow your influence like a leader, not a boss

Extending your influence past your immediate circle isn't as straightforward as you'd like to hope. But there are a few strategies you can employ to help.

How to build an effective technical strategy

Building a tech strategy requires a lot of moving parts. Learn about what routes to take and whether decisions should be top-down.

How to keep up with tech trends and upskill sustainably

With so many developments in the tech world it's difficult to keep up. Here are some strategies to stay on top of your upskilling.

Navigating competing priorities as an engineer

How can you prioritize when everyone's ask is an urgency and you don't have time to fit it all in?

Managing the chaos of context switching

It's time to examine the good, the bad, and the very ugly elements of context switching. Even better, we'll take a look at some strategies for managing it.

Focus on outcomes over outputs

Software engineering teams should focus on outcomes over outputs to deliver the best user and business value.

What makes an effective software engineer?

Being a good software engineer is not necessarily the same as being an effective one. Here, Google's Addy Osmani identifies the ten key traits of effective software engineers.