iiinova — where your digital self keeps evolving

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

@gw3m.bsky.social I'm writing a tool to converts MOD files into maxYMiser songs. I have successfully created song and voiceset data, which load and play in maxYMiser :) I want to create some basic instruments for the songs, but can't find any documentation on the file format. Does anything exist?

310

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

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 · 22/05/2025

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.

141

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 · 06/05/2025

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...

keithclark.co.uk

JSON to Type Definitions

Automatically create TypeScript type definitions or JSDoc blocks from a JSON payload

000

Keith Clark @keithclarkcouk.bsky.social · 09/04/2025

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.

011

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 · 26/03/2025

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...

codepen.io

Zero Element: Cube

...

010

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

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/

keithclark.github.io

Shaderview by Keith Clark

A Web Component for rendering WebGL shaders

091

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

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

010

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

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

keithclark.github.io

Shaderview by Keith Clark

A Web Component for rendering WebGL shaders

010

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

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.

020

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