iiinova — where your digital self keeps evolving

Keith Clark

@keithclarkcouk.bsky.social

keithclark.co.uk Front-end developer • IoT tinkerer • Retro gamer • Atari ST coder GitHub: github.com/keithclark LinkedIn: linkedin.com/in/keithclarkcou

Posts Replies Media

Keith Clark @keithclarkcouk.bsky.social · 23/06/2025

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/

313324

Keith Clark @keithclarkcouk.bsky.social · 28/05/2025

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

010

Keith Clark @keithclarkcouk.bsky.social · 23/05/2025

Making a test suite

000

Keith Clark @keithclarkcouk.bsky.social · 23/05/2025

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

000

Keith Clark @keithclarkcouk.bsky.social · 21/05/2025

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 screen shot of a custom text input element containing a URL, which has its various parts colourised. Alongside the input is the example source code, showing how to implement the element and style it.

010

Keith Clark @keithclarkcouk.bsky.social · 30/03/2025

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/

161

Keith Clark @keithclarkcouk.bsky.social · 28/03/2025

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

130

Keith Clark @keithclarkcouk.bsky.social · 01/03/2025

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

2261