# Philip Walton Thoughts on web development, open source, software architecture, and the future. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Using modern-web-types to add newer web API types to TypeScript DevFeed: [Using modern-web-types to add newer web API types to TypeScript]() Original publisher: [Read original article]() Published: 2026-09-14T07:22:45Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [TypeScript](), [Web](), [Code](), [Library](), [Web Development](), [view transitions]() Tags: [code](), [libraries](), [library](), [typescript](), [view-transitions](), [web]() ### AI overview The article explains why TypeScript reports errors for newer web APIs that are available in Chrome: its built-in web API libraries require support from at least two browser engines. It introduces modern-web-types, a drop-in replacement using a single-engine support threshold, and describes how to install it for web and worker projects. ### Source excerpt If you've ever written code against a new web API in TypeScript, you've probably seen an error telling you the thing you're using doesn't exist. Turns out, TypeScript intentionally doesn't support all new APIs, but there's an easy fix. ## The State of ES5 on the Web DevFeed: [The State of ES5 on the Web]() Original publisher: [Read original article]() Author: For library authors Published: 2024-09-08T15:18:32Z Content type: article Language: en Sources: [Philip Walton]() Topics: [JavaScript](), [legacy](), [Web Development](), [polyfill](), [Code](), [browser]() Tags: [article](), [browser](), [build-tools](), [code](), [dependencies](), [developers](), [es2015](), [javascript](), [legacy](), [polyfill](), [recommendations](), [web]() ### AI overview This article examines whether web developers and JavaScript library authors still need to transpile code to ES5. It uses data about browser support, popular libraries, tools, and websites to offer production recommendations, while discussing the bundle-size costs of transpilation and polyfills. ### Source excerpt 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 websites are doing ## Dynamic LCP Priority: Learning from Past Visits DevFeed: [Dynamic LCP Priority: Learning from Past Visits]() Original publisher: [Read original article]() Published: 2022-12-28T20:43:44Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [Chrome](), [Workers](), [API](), [JavaScript](), [data]() Tags: [api](), [browser](), [chrome](), [cloudflare-workers](), [code](), [data](), [javascript]() ### AI overview This tutorial explains how to dynamically set LCP priority on complex or personalized pages when the LCP element cannot be known in advance. It describes collecting LCP data from previous visitors, storing it, and using that data on later requests, with an implementation based on Cloudflare Workers, Worker KV, and the Worker HTMLRewriter API. ### Source excerpt 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 one small problem ## Performant A/B Testing with Cloudflare Workers DevFeed: [Performant A/B Testing with Cloudflare Workers]() Original publisher: [Read original article]() Published: 2021-12-20T14:01:14Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [A/B Testing](), [Cloudflare Workers](), [Latency](), [inlining]() Tags: [a-b-testing](), [cloudflare-workers](), [edge-computing](), [inlining](), [performance]() ### AI overview This tutorial explains how to run performant A/B tests with Cloudflare Workers at the edge. It discusses the performance costs of client-side and origin-based server-side testing and introduces a cookie-based approach for assigning users to experiment groups. ### Source excerpt 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 quite complex ## My Challenge to the Web Performance Community DevFeed: [My Challenge to the Web Performance Community]() Original publisher: [Read original article]() Published: 2021-10-06T07:18:38Z Content type: opinion Language: en Sources: [Philip Walton]() Topics: [performance-optimization](), [Core Web Vitals](), [real user monitoring](), [Chrome](), [User Experience](), [Website]() Tags: [chrome](), [core-web-vitals](), [performance](), [performance-optimization](), [synthetic](), [user-experience](), [web-performance]() ### AI overview The article argues that web performance optimization should focus on users' real-world experience rather than solely on synthetic tool scores. It explains that Lighthouse is useful for testing and optimization but does not guarantee good field performance: research found that almost half of pages scoring 100 on Lighthouse failed to meet recommended Core Web Vitals thresholds, while some pages with poor Lighthouse scores met those thresholds. ### Source excerpt 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 DevFeed: [Smaller HTML Payloads with Service Workers]() Original publisher: [Read original article]() Published: 2020-01-07T08:02:37Z Content type: article Language: en Sources: [Philip Walton]() Topics: [Web Development](), [Caching](), [Single-page application (SPA)](), [browser]() Tags: [browser](), [developers](), [html](), [offline](), [performance](), [server]() ### AI overview The article explains how service workers can reduce HTML payloads by requesting only page content and combining it with cached common elements to generate complete documents. On the author's site, this approach is reported to have reduced network payloads by 47.6% and improved median First Contentful Paint by 52.3% over the stated 30-day period. ### Source excerpt 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 true, it's far from the only thing that service workers can do to improve the performance and reliability of a website. A lesser known capability of service workers is that you can programmatically generate your responses--you aren't limited to just fetching from the network or reading from the cache. ## Cascading Cache Invalidation DevFeed: [Cascading Cache Invalidation]() Original publisher: [Read original article]() Published: 2019-10-09T08:26:44Z Content type: article Language: en Sources: [Philip Walton]() Topics: [Caching](), [JavaScript](), [Web Development]() Tags: [cache](), [caching](), [code-splitting](), [dependencies](), [hash](), [javascript](), [production]() ### AI overview The article examines how revision-hashed JavaScript filenames interact with code splitting and dependency imports. It finds that changing a vendor chunk can alter its filename, forcing importing chunks to change as well and reducing the effectiveness of long-term caching. ### Source excerpt 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 revision information to the filenames of your assets (usually content hashes) ## Using Native JavaScript Modules in Production Today DevFeed: [Using Native JavaScript Modules in Production Today]() Original publisher: [Read original article]() Published: 2019-08-20T07:20:17Z Content type: article Language: en Sources: [Philip Walton]() Topics: [JavaScript](), [modules](), [Transpilers](), [browsers]() Tags: [browsers](), [javascript](), [modules](), [performance](), [transpilers]() ### AI overview The article argues that, with current bundler advances, production applications can use optimized ES2015 JavaScript modules with static and dynamic imports. It revisits earlier research that favored bundling and explains why that research did not compare optimized module deployments with optimized classic scripts. ### Source excerpt 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 generate two versions of your codebase, one with modern syntax (loaded via ) and one with ES5 syntax (loaded via ). The technique allows you to ship significantly less code to module-supporting browsers, and it's now supported by most web frameworks and CLIs. ## KV Storage: the Web's First Built-in Module DevFeed: [KV Storage: the Web's First Built-in Module]() Original publisher: [Read original article]() Published: 2019-03-12T05:27:02Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [Chrome](), [modules](), [import](), [JavaScript](), [Web](), [Web platform](), [Demo]() Tags: [browsers](), [chrome](), [demo](), [experimental](), [import](), [javascript](), [modules](), [web-platform]() ### AI overview This article introduces Chrome's experimental Built-in Modules and Import Maps, focusing on KV Storage, an asynchronous key/value storage API built on IndexedDB. It explains how to use these APIs and demonstrates deploying them on the web with fallbacks for browser compatibility. ### Source excerpt 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 Modules and Import Maps. ## The Idle Until Urgent Strategy for Improving First Input Delay DevFeed: [The Idle Until Urgent Strategy for Improving First Input Delay]() Original publisher: [Read original article]() Published: 2018-09-20T07:25:36Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [benchmarking](), [modern web development](), [JavaScript](), [Webpack](), [Babel]() Tags: [analytics](), [babel](), [blog](), [browser](), [cpu](), [javascript](), [main-thread](), [network](), [performance](), [performance-metrics](), [trace](), [webpack]() ### AI overview This tutorial examines a blog's unexpectedly high first input delay and explains how to diagnose the cause with performance traces. It introduces the idle until urgent strategy as a way to improve responsiveness without removing site functionality. ### Source excerpt 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 is just a blog (and doesn't run much JavaScript), so I expected to see pretty good results. ## Page Lifecycle API DevFeed: [Page Lifecycle API]() Original publisher: [Read original article]() Published: 2018-07-24T18:41:57Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [API](), [browsers](), [Web]() Tags: [api](), [battery](), [best-practices](), [browsers](), [cpu](), [memory](), [testing](), [web]() ### AI overview The Page Lifecycle API brings mobile-app-like lifecycle behavior to web pages, allowing browsers to manage tab resources more efficiently. The article explains lifecycle states and events and provides advice and best practices based on research and cross-browser testing. ### Source excerpt 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 tabs consume system resources (memory, battery, and CPU), and if you never end up going back to them again (which, let's be honest, happens more often than not) those resources were consumed for nothing. ## First Input Delay DevFeed: [First Input Delay]() Original publisher: [Read original article]() Published: 2018-05-10T19:15:30Z Content type: article Language: en Sources: [Philip Walton]() Topics: [Web](), [browser](), [JavaScript](), [Library]() Tags: [browser](), [javascript](), [library](), [metric](), [performance](), [time](), [web]() ### AI overview The article introduces First Input Delay, a performance metric that measures the time between a user's first interaction with a site and the browser's ability to respond. It also mentions a JavaScript library for measuring the metric. ### Source excerpt 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 first impression is what happens when we first try to interact with it. ## Responsive Components: a Solution to the Container Queries Problem DevFeed: [Responsive Components: a Solution to the Container Queries Problem]() Original publisher: [Read original article]() Published: 2018-02-27T08:12:12Z Content type: article Language: en Sources: [Philip Walton]() Topics: [Responsive Design](), [CSS](), [Web APIs](), [Document Object Model (DOM)](), [web design]() Tags: [components](), [css](), [demo](), [developer](), [responsive-design](), [web-apis](), [web-developers]() ### AI overview This article explains how to build responsive components that adapt to their containing environment without waiting for CSS container queries. It proposes using currently available web APIs as a progressive enhancement, with generic base styles and environment-specific overrides that continue to work when JavaScript or newer browser features are unavailable. ### Source excerpt 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 you're a web developer, you've probably heard about container queries before. For about as long as we've had responsive web design, we've had developers asking for them (initially element queries, then changing to container queries). ## Why Web Developers Need to Care about Interactivity DevFeed: [Why Web Developers Need to Care about Interactivity]() Original publisher: [Read original article]() Published: 2017-12-19T17:25:23Z Content type: article Language: en Sources: [Philip Walton]() Topics: [interactive website](), [Web Development](), [JavaScript](), [Document Object Model (DOM)](), [browser]() Tags: [browser](), [javascript](), [main-thread](), [technical](), [time-to-interactive](), [web-developers]() ### AI overview The article explains web interactivity as a page's ability to respond quickly to user input. It identifies delayed JavaScript loading and a busy browser main thread as the two primary causes of poor responsiveness, while focusing mainly on main-thread work. ### Source excerpt 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 it again--still nothing. ## Deploying ES2015+ Code in Production Today DevFeed: [Deploying ES2015+ Code in Production Today]() Original publisher: [Read original article]() Published: 2017-09-13T19:23:12Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [JavaScript](), [es2015](), [browsers](), [Babel](), [Web Development]() Tags: [apis](), [async](), [await](), [babel](), [browsers](), [classes](), [es2015](), [javascript](), [webpack]() ### AI overview The article explains how to deploy ES2015+ JavaScript to production by serving a modern bundle to browsers that support the relevant syntax and retaining an ES5 fallback for older browsers. It discusses feature detection, polyfills, module bundlers, and Babel configuration. ### Source excerpt 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 all modern browsers can run ES2015+ code and natively support the features I just mentioned, most developers still transpile their code to ES5 and bundle it with polyfills to accommodate the small percentage of users still on older browsers. ## Why Traditional Pageview Tracking Fails for Modern Web Applications DevFeed: [Why Traditional Pageview Tracking Fails for Modern Web Applications]() Original publisher: [Read original article]() Published: 2017-04-11T17:46:25Z Content type: opinion Language: en Sources: [Philip Walton]() Topics: [Web](), [Single-page application (SPA)](), [PWA](), [browser](), [data]() Tags: [analytics](), [browser](), [data](), [patterns](), [pwa](), [web-app]() ### AI overview The article argues that traditional analytics tools produce unrealistic pageview data for modern websites because they equate pageviews with full page loads. It examines Gmail, single-page applications, and progressive web apps as examples where users can interact with changing or offline content without reloading the page. ### Source excerpt 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 direction the web is heading. ## The Google Analytics Setup I Use on Every Site I Build DevFeed: [The Google Analytics Setup I Use on Every Site I Build]() Original publisher: [Read original article]() Published: 2017-02-08T18:45:45Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [Google Analytics](), [Web](), [Code](), [async](), [Script](), [HTTP]() Tags: [async](), [code](), [google-analytics](), [http](), [libraries](), [web-developers]() ### AI overview A practical guide to configuring Google Analytics for web developers, covering how developers can use analytics to understand site usage and how to load analytics.js asynchronously without degrading user experience or blocking critical resources. ### Source excerpt 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 content out there that explains how to use Google Analytics, but most of it is rather narrowly focused on use cases that primarily apply to marketers and advertisers; very little is geared toward web developers who simply want to better understand how people are using the sites they build. ## The Dark Side of Polyfilling CSS DevFeed: [The Dark Side of Polyfilling CSS]() Original publisher: [Read original article]() Published: 2016-12-22T18:18:08Z Content type: article Language: en Sources: [Philip Walton]() Topics: [CSS](), [polyfill](), [modern web development]() Tags: [article](), [css](), [polyfill]() ### AI overview This article explains why polyfilling CSS is difficult by building a polyfill for a hypothetical CSS keyword that returns a random number between 0 and 1. It contrasts CSS with JavaScript polyfills and explains how Houdini APIs could make CSS polyfilling possible in ways that are not currently available. ### Source excerpt 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 Houdini APIs will (among other things) make it possible to polyfill CSS features in a way that simply cannot be done today. ## Loading Polyfills Only When Needed DevFeed: [Loading Polyfills Only When Needed]() Original publisher: [Read original article]() Published: 2016-09-27T22:41:26Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [polyfill](), [browser](), [JavaScript](), [HTML]() Tags: [browsers](), [html](), [javascript](), [performance](), [polyfill]() ### AI overview The article explains why loading all polyfills for every user can penalize users on modern browsers, then presents the author's approach to conditionally loading polyfills only when needed. It notes tradeoffs involving feature detection, deprecated libraries, and user-agent-based services such as Polyfill Service. ### Source excerpt 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 on production websites before they're fully implemented in all browsers. To not break the experience for users on older browsers, we of course include polyfills for any not-fully-supported features. ## Untangling Deeply-Nested Promise Chains DevFeed: [Untangling Deeply-Nested Promise Chains]() Original publisher: [Read original article]() Published: 2016-08-17T14:53:31Z Content type: article Language: en Sources: [Philip Walton]() Topics: [Promise](), [JavaScript](), [Refactoring](), [Web APIs](), [async](), [Caching]() Tags: [async](), [best-practices](), [cache](), [caching](), [callback](), [javascript](), [refactoring](), [tutorials]() ### AI overview The article examines how promise-based Service Worker code can become deeply nested and difficult to understand, despite promises being intended to improve on callback-heavy code. It discusses a network-first strategy with cache fallback for offline support and presents refactoring strategies, software development practices, and async functions to improve readability and maintainability. ### Source excerpt 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 remember reading a lot of blog posts claiming that these problems would be solved; unfortunately, that was a little too optimistic. With more and more web APIs becoming promise-based, we've proven that even promises don't prevent us from writing overly-nested, hard-to-read code. ## Learning How to Set Up Automated, Cross-browser JavaScript Unit Testing DevFeed: [Learning How to Set Up Automated, Cross-browser JavaScript Unit Testing]() Original publisher: [Read original article]() Published: 2016-07-11T06:48:41Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [Testing](), [Unit testing](), [JavaScript](), [Automation](), [Web Development](), [Mocha](), [Node.js](), [Puppeteer]() Tags: [automated](), [browser](), [browsers](), [how-to](), [javascript](), [node-js](), [testing](), [unit-testing](), [web-development]() ### AI overview A tutorial on understanding and building automated cross-browser JavaScript unit testing. It explains the manual testing workflow first, then shows how automation can handle repetitive steps while preserving an understanding of how the process works. ### Source excerpt 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 first releasing a project. ## CSS Houdini Task Force and Its Significance for Web Styling DevFeed: [CSS Houdini Task Force and Its Significance for Web Styling]() Original publisher: [Read original article]() Published: 2016-03-24T22:43:07Z Content type: article Language: en Sources: [Philip Walton]() Topics: [CSS](), [web-standards](), [Web Development]() Tags: [css](), [standards](), [web-developers]() ### AI overview The article introduces the CSS Houdini Task Force, explains its connection to browser rendering engines and the web standards process, and discusses why web developers should care about it. ### Source excerpt 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 (most of whom work on browser rendering engines), and I got to see a bit of how the standards process works. ## Why I'm Excited About Native CSS Variables DevFeed: [Why I'm Excited About Native CSS Variables]() Original publisher: [Read original article]() Published: 2015-12-06T20:43:53Z Content type: opinion Language: en Sources: [Philip Walton]() Topics: [CSS](), [Web platform](), [Chrome Canary](), [Sass](), [Chrome](), [Web Development]() Tags: [chrome-canary](), [css](), [experimental](), [feature](), [platform](), [sass](), [web](), [web-platform]() ### AI overview The article argues that native CSS Custom Properties are fundamentally different from Sass variables. It explains that Custom Properties are dynamic CSS properties scoped to the DOM, enabling capabilities and design patterns that preprocessors cannot provide, while suggesting that developers may use both approaches together. ### Source excerpt 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 Addy Osmani first tweeted about the release, he was met with a surprising amount of negativity, hostility, and skepticism. At least, it was surprising to me, given how excited I am about this feature. ## Do We Actually Need Specificity In CSS? DevFeed: [Do We Actually Need Specificity In CSS?]() Original publisher: [Read original article]() Published: 2015-11-01T22:37:42Z Content type: opinion Language: en Sources: [Philip Walton]() Topics: [CSS](), [Web Development]() Tags: [article](), [css](), [web-development]() ### AI overview This opinion article questions whether CSS specificity is necessary. It explains that specificity can be unintuitive and explores whether it is possible to prevent specificity from affecting the CSS cascade. ### Source excerpt 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 sure you can find dozens elsewhere online. [Next page]()