Page Inspect

Home — Philip Walton

# Philip Walton

Engineer @ Google

Articles About

# Recent Articles

- September 8, 2024## The State of ES5 on the Web

Should web developers and JavaScript library authors still transpile their code to ES5? This post looks at what the data suggests based on what popular libraries, tools, and…
- December 28, 2022## Dynamic LCP Priority: Learning from Past Visits

Earlier this year, Chrome shipped the new Priority Hints API, which lets developers inform the browser which resources are the most important, such as the LCP image. There's just…
- December 20, 2021## Performant A/B Testing with Cloudflare Workers

I think there's a perception in our industry that A/B testing is super complicated and you really need a tool or service to do it right. And while I'm sure some aspects of A/B are…
- October 6, 2021## My Challenge to the Web Performance Community

Performance optimization should be about making your users happy, not about making your tools happy. And if we really believe that, we should lead by example.…
- January 7, 2020## Smaller HTML Payloads with Service Workers

Many developers know that you can use service workers to cache web pages (and their sub-resources) in order to serve those pages to users when they’re offline. And while this is…
- October 9, 2019## Cascading Cache Invalidation

For several years now, pretty much every article published on caching best practices has recommended the following two things for deploying JavaScript code in production: Add…
- August 20, 2019## Using Native JavaScript Modules in Production Today

Two years ago I wrote about a technique—now commonly referred to as the module/nomodule pattern—that allows you to write ES2015+ JavaScript and then use bundlers and transpilers to…
- March 11, 2019## KV Storage: the Web's First Built-in Module

Chrome is experimenting with two new features that I firmly believe will completely change how we bundle and deploy JavaScript applications in the future (for the better): Built-in…
- September 20, 2018## Idle Until Urgent

A few weeks ago I was looking at some of the performance metrics for my site. Specifically, I wanted to see how I was doing on our newest metric, first input delay (FID). My site…
- July 24, 2018## Page Lifecycle API

If you’re like me, it’s not uncommon for you to have so many tabs open in your browser that you can’t even read all their titles. The problem with this, of course, is all these…
- May 10, 2018## First Input Delay

On the web, a good first impression can make the difference between someone becoming a loyal user and them leaving and never coming back. One of the key ways a site shapes our…
- February 27, 2018## Responsive Components: a Solution to the Container Queries Problem

Container queries is a proposal that would allow web developers to style DOM elements based on the size of a containing element rather than the size of the browser viewport. If…
- December 19, 2017## Why Web Developers Need to Care about Interactivity

Anyone who’s browsed the web on their phone has, at one point or another, experienced this situation: You open a web page and click on something, but nothing happens. You click on…
- September 13, 2017## Deploying ES2015+ Code in Production Today

Most web developers I talk to these days love writing JavaScript with all the newest language features—async/await, classes, arrow functions, etc. However, despite the fact that…
- April 11, 2017## How We Track Pageviews Is All Wrong

All analytics tools I know of track pageviews in a way that—to put it bluntly—simply doesn’t work for a growing number of websites today and is completely incompatible with the…
- February 8, 2017## The Google Analytics Setup I Use on Every Site I Build

Google Analytics is a powerful yet quite complicated tool. And unfortunately, the truth is most people who use it don’t reap its full benefits. There’s a lot of excellent and free…
- December 22, 2016## The Dark Side of Polyfilling CSS

Earlier this year I wrote an article for Smashing Magazine about Houdini, and I called it the “most exciting development in CSS you’ve never heard of”. In the article I argue that…
- September 27, 2016## Loading Polyfills Only When Needed

New JavaScript and HTML features are being introduced all the time that make our lives as developers easier. In many cases, these new features are so helpful we choose to use them…
- August 17, 2016## Untangling Deeply-Nested Promise Chains

If you’ve been writing JavaScript for a while, you’ve probably heard terms like callback hell or the pyramid of doom. When promises were added to JavaScript a few years ago, I…
- July 10, 2016## Learning How to Set Up Automated, Cross-browser JavaScript Unit Testing

We all know how important it is to test our code in multiple browsers. And I think for the most part, we in the web development community do a pretty good job at this—at least when…
- March 24, 2016## Houdini: Maybe the Most Exciting Development in CSS You've Never Heard Of

Earlier this year I had the privileged of attending the CSS Houdini Task Force face-to-face meeting in Sydney, Australia. While there I got to meet many of the Houdini members…
- December 6, 2015## Why I'm Excited About Native CSS Variables

A few weeks ago CSS variables—more accurately known as CSS Custom Properties—shipped in Chrome Canary behind the Experimental Web Platform Features flag.\[1\] When Chrome engineer…
- November 1, 2015## Do We Actually Need Specificity In CSS?

Okay, before I start, I want to get one thing out of the way upfront. This article is not a rant about how much I hate specificity. If you want to read an article like that, I’m…
- August 2, 2015## How to Become a Great Front-End Engineer

I recently received an email from a reader of my blog that, for whatever reason, really got me thinking. Here’s what it said: Hi Philip, is it okay to ask how you become a great…
- May 20, 2015## Extending Styles

Last week @simurai wrote a great article discussing the various strategies for contextual styling in CSS. If you haven’t read his article yet, you should—it will give you better…
- March 3, 2015## Side Effects in CSS

It feels like every few days I read about some shiny new way people are writing CSS. Many of these “new” ways are not actually new, they’re variations on one or more well-known…
- January 4, 2015## Normalizing Cross-browser Flexbox Bugs

Way back in September of 2013, while testing my Solved by Flexbox project, I discovered a bug in Internet Explorer 10 and 11 that was preventing my sticky footer from actually…
- December 22, 2014## Measuring Your Site's Responsive Breakpoint Usage

Most web analytics tools will give you a lot of information about your users’ devices. These insights can be extremely useful for measuring trends and are particularly important if…
- May 20, 2014## The Dangers of Stopping Event Propagation

One of the most annoying bugs I’ve ever had deal with happened at my previous company. In one of our apps there was a “what’s new” button in the top left. When you clicked on the…
- April 20, 2014## Stop Copying Social Code Snippets

If you’re a web developer, chances are, at some point, you’ve had to add a social widget to one of your page. Actually, probably more than one. And chances are you didn’t want to…
- April 9, 2014## Implementing Private and Protected Members in JavaScript

Privacy has been a complicated issue throughout JavaScript’s history. While it’s always been possible to meet even the most stringent privacy needs (the myriad of compile-to-js…
- January 20, 2014## How to Find Qualified Developers

Finding a good developer is hard. People constantly complain about how few qualified applicants they receive. They post their job openings to every known listing. They hire…
- December 24, 2013## Interviewing as a Front-End Engineer in San Francisco

A few months ago I started casually looking for front-end gigs in the San Francisco Bay Area. I liked my current job, but I felt I was outgrowing the tech scene in my town. I…
- October 3, 2013## Solved by Flexbox

The first version of philipwalton.com was built using Flexbox way back in 2010 when the syntax was display:box. It only worked in Chrome, Safari, and Firefox and was pretty buggy,…
- August 18, 2013## Decoupling Your HTML, CSS, and JavaScript

Any non-trivial site or application on the Web today will contain a large amount of HTML, CSS, and JavaScript. As the use of the Internet evolves and our dependence on it…
- July 17, 2013## Why I Test Private Functions In JavaScript

Last week I published an article on this blog entitled How to Unit Test Private Functions in JavaScript. The article was well received and even mentioned in a few popular…
- July 8, 2013## How to Unit Test Private Functions in JavaScript

JavaScript's closures provide an excellent way to make variables and functions private, keeping them out of the global scope. This is particularly important in the browser because…
- June 11, 2013## Introducing HTML Inspector

HTML Inspector is a code quality tool to help you and your team write better markup. It’s written in JavaScript and runs in the browser, so testing your HTML has never been easier.…
- March 25, 2013## CSS: Everything is Global and How to Deal With It

Everything in CSS is global. Every line you write has the potential to conflict with every other line. Because of this, CSS is often the hardest part of scaling any Web application…
- February 20, 2013## Dynamic Selectors

When creating a new CSS library or framework, developers typically take one of two approaches with component naming: the Bootstrap approach or the jQueryUI approach. Bootstrap…
- January 24, 2013## Defending Presentational Class Names

Recently, Codrops, an online web design and development blog, published an article I wrote for them entitled: Defending Presentational Class Names. In the article I discuss the use…
- January 17, 2013## The Future of OOCSS: A Proposal

In CSS we often code the same visual components over and over again — even within the same project. It’s embarrassing how many separate times in my career I’ve coded a two-column…
- January 15, 2013## What No One Told You About Z-Index

The problem with z-index is that very few people understand how it really works. It’s not complicated, but it if you’ve never taken the time to read its specification, there are…
- November 16, 2012## CSS Architecture

To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code. You don't use tables, and you pride yourself on using as few…