Recent Articles
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…
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…
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…
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.…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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,…
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…
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…
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…
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.…
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…
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…
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…
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…
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…
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…