* [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…
](/articles/the-state-of-es5-on-the-web/)
* [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…
](/articles/dynamic-lcp-priority/)
* [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…
](/articles/performant-a-b-testing-with-cloudflare-workers/)
* [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.…
](/articles/my-challenge-to-the-web-performance-community/)
* [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…
](/articles/smaller-html-payloads-with-service-workers/)
* [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…
](/articles/cascading-cache-invalidation/)
* [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…
](/articles/using-native-javascript-modules-in-production-today/)
* [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…
](/articles/kv-storage-the-webs-first-built-in-module/)
* [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…
](/articles/idle-until-urgent/)
* [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…
](/articles/page-lifecycle-api/)
* [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…
](/articles/first-input-delay/)
* [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…
](/articles/responsive-components-a-solution-to-the-container-queries-problem/)
* [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…
](/articles/why-web-developers-need-to-care-about-interactivity/)
* [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…
](/articles/deploying-es2015-code-in-production-today/)
* [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…
](/articles/how-we-track-pageviews-is-all-wrong/)
* [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…
](/articles/the-ga-setup-i-use-on-every-site-i-build/)
* [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…
](/articles/the-dark-side-of-polyfilling-css/)
* [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…
](/articles/loading-polyfills-only-when-needed/)
* [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…
](/articles/untangling-deeply-nested-promise-chains/)
* [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…
](/articles/learning-how-to-set-up-automated-cross-browser-javascript-unit-testing/)
* [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…
](/articles/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/)
* [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…
](/articles/why-im-excited-about-native-css-variables/)
* [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…
](/articles/do-we-actually-need-specificity-in-css/)
* [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…
](/articles/how-to-become-a-great-front-end-engineer/)
* [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…
](/articles/extending-styles/)
* [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…
](/articles/side-effects-in-css/)
* [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…
](/articles/normalizing-cross-browser-flexbox-bugs/)
* [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…
](/articles/measuring-your-sites-responsive-breakpoint-usage/)
* [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…
](/articles/the-dangers-of-stopping-event-propagation/)
* [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…
](/articles/stop-copying-social-code-snippets/)
* [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…
](/articles/implementing-private-and-protected-members-in-javascript/)
* [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…
](/articles/how-to-find-qualified-developers/)
* [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…
](/articles/interviewing-as-a-front-end-engineer-in-san-francisco/)
* [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,…
](/articles/solved-by-flexbox/)
* [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…
](/articles/decoupling-html-css-and-javascript/)
* [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…
](/articles/why-i-test-private-functions-in-javascript/)
* [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…
](/articles/how-to-unit-test-private-functions-in-javascript/)
* [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.…
](/articles/introducing-html-inspector/)
* [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…
](/articles/css-everything-is-global-and-how-to-deal-with-it/)
* [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…
](/articles/dynamic-selectors/)
* [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…
](/articles/defending-presentational-class-names/)
* [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…
](/articles/the-future-of-oocss-a-proposal/)
* [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…
](/articles/what-no-one-told-you-about-z-index/)
* [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…
](/articles/css-architecture/)