Made a new Web Component: RichInput. It's a drop-in replacement for text-based <input> elements that can colourise user input. A "stylepattern" attribute accepts a regex pattern and the resulting capture groups can be styled using CSS `::part(group-n)` keithclark.github.io/richinput/

Using module `registerHooks` in NodeJS to intercept the assert module and return a Proxy that logs assertions outcomes to the console is a very simple way to build a unit test tool

Making a test suite

CSS system colour differences in the wild: Safari uses `Canvas` for inputs, where as Chrome/Firefox use `Field`. In this screen grab, the browsers from left to right are Safari, Firefox and Chrome. In each browser, the left column contains my web component and the right is a native element

I wish browsers would expose their default style choices (colours, borders etc) to CSS so that, when creating a Web Component, I don't have to impose my opinionated, halfway house set of default styles on developers. I'd like to style elements that fit with the native elements, until overridden.

Working on a colourised input web component that can be used as a drop-in replacement for `<input>`. It uses a regex pattern (set via attribute) for capturing content groups and CSS ::part() for styling them. Now trying to find a way to proxy its DOM interface to the input in the shadow DOM.

A few years ago, I wrote a "JSON to Type Doc" tool, which I use for all JS/TS projects that talk to JSON-based APIs but lack type definitions. I've moved it to a more accessible location and made some improvements. I hope it's useful to some of you. keithclark.co.uk/apps/json-ty...

I'm looking for a full-time frontend role in the UK. Are you looking for a developer with years of experience working on the Web Platform? If so, please send me a DM. Check my profile for more info.

Added uniforms support to my <shaderview> Web Component. You can now pass data to a shader from JavaScript using `element.setUniform()`. There are some basic pointer tracking examples on the website. keithclark.github.io/shaderview/

Adding support for uniforms to <shaderview>. This example is an animated smiley that tracks the pointer position. Original shader can be found here: www.shadertoy.com/view/lsXcWn

I often go back through my old CSS experiments to see how things have fared over time. It's also a great reminder of how far CSS has come! Last time I checked this old "zero element" demo, it didn't work correctly in any browser: codepen.io/keithclark/p...

Updated my Shaderview Web Component to offload rendering to a Web Worker. The performance difference is massive now that the main thread is unblocked. I've also used an IntersectionObserver to pause running shaders when they leave the viewport. ⚡ keithclark.github.io/shaderview/

First experiment for shaderview will be offloading the renderer to a worker so slower devices stay responsive.

Shaderview. A Web Component for rendering WebGL shaders in your web pages. keithclark.github.io/shaderview/ github.com/keithclark/s...

I'm looking for a new full-time role in the UK. Are you looking for a frontend developer with lots of experience working on the Web Platform? If so, please send me a DM. Check my profile for more info.

Working on a <shaderview> Web Component that can render GLSL fragment shaders into HTML documents. Shaders receive a limited set of uniforms (e.g. time) that can be set from DOM attributes/properties, allowing scroll linking and playback control. Shaders in this video are from www.shadertoy.com

Contemplating writing a new version of my CSS toggle dev tools extension but not sure how widely used it is nowadays. Does anyone here use it? github.com/keithclark/c...