Phil Parsons

Web developer. Bike enthusiast.

I'm a web developer from London in the United Kingdom. I work in FinTech and have a primary focus on front-end development with HTML, CSS and JavaScript. Away from the keyboard I enjoy hitting the trails on mountain bikes and offroad motorcycles.

Recent posts

  1. Building scrollable tabs with experimental CSS features

    New overflow and positioning features coming to CSS are making it easier to build common UI patterns with minimal JavaScript. This post explores how to build scrollable tabs using features from the overflow module and anchor positioning draft specifications

  2. Does TDD have relevance in an AI assisted developer workflow?

    Can the principles of Test-Driven Development (TDD) be applied to AI code generation? Let's look at the concept of Prompt-Driven Development (PDD), where we guide AI by applying the principles of TDD.

  3. Stop using Test IDs and assert usability instead

    The pattern of applying a Test ID to an element to more easily selected it in tests has existed for a while. During that time the tools we use as developers and testers have improved greatly and offer a more user centric approach to asserting our applications behave as expected.

  4. A place for custom elements in a world of JavaScript frameworks

    Last year, React 19 shipped with full support for custom HTML elements. Being the most popular of the JavaScript frameworks this release provides us with an opportunity to adopt web components in areas like design system component libraries. In this post I take a look at how to provide a good developer experience to aid adoption in this area.

  5. How to create polymorhpic web components

    The slot element provides us with the tools to create polymorhpic custom elements. This post explores how a tab element within a tabbed navigation section can be used with a Next.js link component.

  6. Don't FOUC up your web components

    A flash of unstlyed content (FOUC) doesn't just look bad, it could be hurting your core web vital score. Let's look at how to use progressive enhancement in web components to prevent such a FOUC up.

  7. Practical web component reactivity patterns

    The web platform provides us with all the tools we need to apply reactivity to our web components. Let's explore some reactive programming patterns we can use in everyday scenarios to build interactive web pages and applications.

  8. Generating entry points for TypeScript packages

    Consuming NPM packages that export JavaScript Modules (ESM) with bundlers like Vite and Webpack is simple enough but to author a package in TypeScript with ESM only exports there's a few things that need to be considered.

Me throwing a whip on my mountain bike at Bikepark Wales on a typically wet Welsh day in Autumn