Phil Parsons
@pmparsons.bsky.social
Web developer - https://philparsons.co.uk
I’ve recently been tackling an approach that exports JavaScript design tokens for individual Lit elements and maintains CSS as the source of truth for styling. This is what I came up with.
#webcomponents #css #javascript #lit
philparsons.co.uk/blog/bundlin...
#webcomponents #css #javascript #lit
philparsons.co.uk/blog/bundlin...
Bundling design tokens for Lit web components
Building a design token pipeline that keeps component styles isolated and supports light-dark color schemes requires balancing automation with developer experience. This post demonstrates a Style Dict...
philparsons.co.uk
October 2, 2025 at 7:10 AM
I’ve recently been tackling an approach that exports JavaScript design tokens for individual Lit elements and maintains CSS as the source of truth for styling. This is what I came up with.
#webcomponents #css #javascript #lit
philparsons.co.uk/blog/bundlin...
#webcomponents #css #javascript #lit
philparsons.co.uk/blog/bundlin...
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
philparsons.co.uk/blog/buildin...
This post explores how to build scrollable tabs using features from the overflow module and anchor positioning draft specifications
philparsons.co.uk/blog/buildin...
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 ov...
philparsons.co.uk
June 13, 2025 at 7:41 AM
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
philparsons.co.uk/blog/buildin...
This post explores how to build scrollable tabs using features from the overflow module and anchor positioning draft specifications
philparsons.co.uk/blog/buildin...
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.
philparsons.co.uk/blog/the-rel...
Let's look at the concept of Prompt-Driven Development (PDD), where we guide AI by applying the principles of #TDD.
philparsons.co.uk/blog/the-rel...
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.
philparsons.co.uk
May 4, 2025 at 7:48 AM
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.
philparsons.co.uk/blog/the-rel...
Let's look at the concept of Prompt-Driven Development (PDD), where we guide AI by applying the principles of #TDD.
philparsons.co.uk/blog/the-rel...
April 23, 2025 at 8:50 AM
ThemeSwitch is a flexible little #webcomponent for easily adding theme switching capabilities to a web page.
github.com/p-m-p/parson...
#javascript #html #css #darkmode
github.com/p-m-p/parson...
#javascript #html #css #darkmode
parsonic/packages/theme-switch at main · p-m-p/parsonic
A noble collection of web component trinkets. Contribute to p-m-p/parsonic development by creating an account on GitHub.
github.com
April 14, 2025 at 6:47 AM
ThemeSwitch is a flexible little #webcomponent for easily adding theme switching capabilities to a web page.
github.com/p-m-p/parson...
#javascript #html #css #darkmode
github.com/p-m-p/parson...
#javascript #html #css #darkmode
Definitely a summer vibe open.spotify.com/track/4EyIt5...
Stay
FISHER · Stay · Song · 2025
open.spotify.com
April 2, 2025 at 2:51 PM
Definitely a summer vibe open.spotify.com/track/4EyIt5...
Still using data-testid in your tests?
philparsons.co.uk/blog/stop-us...
#javascript #webdev #playwright #tdd
philparsons.co.uk/blog/stop-us...
#javascript #webdev #playwright #tdd
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...
philparsons.co.uk
March 22, 2025 at 3:29 PM
Still using data-testid in your tests?
philparsons.co.uk/blog/stop-us...
#javascript #webdev #playwright #tdd
philparsons.co.uk/blog/stop-us...
#javascript #webdev #playwright #tdd
Another handy little #webcomponent added! Back to top button for any web page or scrollable container.
Back to top: www.npmjs.com/package/@par...
Full collection: github.com/p-m-p/parsonic
#html #javascript #webcomponents
Back to top: www.npmjs.com/package/@par...
Full collection: github.com/p-m-p/parsonic
#html #javascript #webcomponents
GitHub - p-m-p/parsonic: A collection of handy little web components
A collection of handy little web components. Contribute to p-m-p/parsonic development by creating an account on GitHub.
github.com
March 16, 2025 at 8:18 AM
Another handy little #webcomponent added! Back to top button for any web page or scrollable container.
Back to top: www.npmjs.com/package/@par...
Full collection: github.com/p-m-p/parsonic
#html #javascript #webcomponents
Back to top: www.npmjs.com/package/@par...
Full collection: github.com/p-m-p/parsonic
#html #javascript #webcomponents
Released v1 of this little #webcomponent that easily copy’s text, images or whatever else you want to the clipboard www.npmjs.com/package/@par...
#javascript #html #webcomponents
#javascript #html #webcomponents
@parsonic/copy-to-clipboard
Copy text to clipboard web component. Latest version: 1.0.0, last published: 8 minutes ago. Start using @parsonic/copy-to-clipboard in your project by running `npm i @parsonic/copy-to-clipboard`. Ther...
www.npmjs.com
March 4, 2025 at 7:48 PM
Released v1 of this little #webcomponent that easily copy’s text, images or whatever else you want to the clipboard www.npmjs.com/package/@par...
#javascript #html #webcomponents
#javascript #html #webcomponents
February 12, 2025 at 2:08 PM
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 #webcomponents in areas like design system component libraries.
philparsons.co.uk/blog/custom-...
philparsons.co.uk/blog/custom-...
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 area...
philparsons.co.uk
February 4, 2025 at 6:20 PM
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 #webcomponents in areas like design system component libraries.
philparsons.co.uk/blog/custom-...
philparsons.co.uk/blog/custom-...
Advent of code stickers arrived! I only managed 10 days but stoked to receive them. Thanks @deno.land
January 30, 2025 at 2:48 PM
Advent of code stickers arrived! I only managed 10 days but stoked to receive them. Thanks @deno.land
Since adding an example of how to use my boxslider library from CDN it’s been interesting to see the usage of the #webcompents grow. Almost feels like the jQuery plugins of old!
github.com/p-m-p/slider
github.com/p-m-p/slider
January 17, 2025 at 4:00 PM
Since adding an example of how to use my boxslider library from CDN it’s been interesting to see the usage of the #webcompents grow. Almost feels like the jQuery plugins of old!
github.com/p-m-p/slider
github.com/p-m-p/slider
#tailwindcss is really helpful right up to the point you want to do anything meaningful with #css grid then it becomes a hot mess of brackets commas and underscores
January 9, 2025 at 4:18 PM
#tailwindcss is really helpful right up to the point you want to do anything meaningful with #css grid then it becomes a hot mess of brackets commas and underscores
@boxslider/react@2.6.1 released with minor updates to fully support #react 19!
Docs: philparsons.co.uk/slider/docs/...
GitHub: github.com/p-m-p/slider
Docs: philparsons.co.uk/slider/docs/...
GitHub: github.com/p-m-p/slider
React | BoxSlider
BoxSlider React components are a thin wrapper around the Web Components for each
philparsons.co.uk
January 8, 2025 at 7:54 AM
@boxslider/react@2.6.1 released with minor updates to fully support #react 19!
Docs: philparsons.co.uk/slider/docs/...
GitHub: github.com/p-m-p/slider
Docs: philparsons.co.uk/slider/docs/...
GitHub: github.com/p-m-p/slider
Reposted by Phil Parsons
🔥 React ⨉ View Transitions … soon.
```js
import {ViewTransition} from 'react';
```
github.com/facebook/rea...
```js
import {ViewTransition} from 'react';
```
github.com/facebook/rea...
Add <ViewTransition> Component by sebmarkbage · Pull Request #31975 · facebook/react
This will provide the opt-in for using View Transitions in React.
View Transitions only trigger for async updates like startTransition, useDeferredValue, Actions or <Suspense> revealing from ...
github.com
January 5, 2025 at 9:43 PM
🔥 React ⨉ View Transitions … soon.
```js
import {ViewTransition} from 'react';
```
github.com/facebook/rea...
```js
import {ViewTransition} from 'react';
```
github.com/facebook/rea...
@react.dev is there an update in the works for the docs section on custom elements in 19? react.dev/reference/re...
React DOM Components – React
The library for web and native user interfaces
react.dev
January 6, 2025 at 8:00 AM
@react.dev is there an update in the works for the docs section on custom elements in 19? react.dev/reference/re...
Lots of value dropped on #leadership in #software teams in this episode techleadjournal.dev/episodes/200/
Book is definitely going on my reading list!
Book is definitely going on my reading list!
#200 - Become a Great Engineering Leader - James Stanier
In this milestone episode of the podcast, James Stanier returns for the third time to discuss his latest book, “Become a Great Engineering Leader.” We explore the role of an engineering leader and del...
techleadjournal.dev
January 6, 2025 at 7:40 AM
Lots of value dropped on #leadership in #software teams in this episode techleadjournal.dev/episodes/200/
Book is definitely going on my reading list!
Book is definitely going on my reading list!
Added the share result event to my share button component. Give it a try if you need to add native share button to your website and leverage existing #opengraph tags github.com/p-m-p/parson...
#javacscript #html #webcomponents
#javacscript #html #webcomponents
github.com
January 5, 2025 at 1:09 PM
Added the share result event to my share button component. Give it a try if you need to add native share button to your website and leverage existing #opengraph tags github.com/p-m-p/parson...
#javacscript #html #webcomponents
#javacscript #html #webcomponents
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. philparsons.co.uk/blog/how-to-...
#webcomponents #nextjs #react
#webcomponents #nextjs #react
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.
philparsons.co.uk
January 5, 2025 at 11:59 AM
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. philparsons.co.uk/blog/how-to-...
#webcomponents #nextjs #react
#webcomponents #nextjs #react