Made a new Web Component: RichInput. It's a drop-in replacement for text-based 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

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.

Added uniforms support to my 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 . This example is an animated smiley that tracks the pointer position.

Original shader can be found here: www.shadertoy.com/view/lsXcWn

Working on a 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