Keith Clark

Just shipped v1.0.1 with that change. Thanks for the suggestion Mathias 😀

v1.0.1 contains change to use the inert attribute for the output element. Thanks for the suggestion 😀

Oh that's a great catch. I'll add a GitHub issue for that

Good point. Would definitely be better to have matching behaviour - especially in the case where you use both attributes on the same element. I’ll add that to my backlog 🙂

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'm building a form associated component and would like to style its disabled state to visually match other form elements, but they look different in each browser. I'd also like to use the accent colour, but that isn't accessible as a <system-color>. I can use `Highlight` for the focus ring though.

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.

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.

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

Ahhh, memories!

Sorry to hear this.

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/

Using pointer distance to control the expression is fun. I can make the face look excited as the pointer moves closer to it and become sad as it moves away :D

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

Using transforms worked well. All I had to do was decompose the transform on the host element and apply it to the model. It also meant CSS animations and style updates worked automatically. Biggest challenge I had was detecting changes in computedStyle in a performant way.

This is the project I was referring to: github.com/keithclark/3...

This has some similarities to a project of mine which used ThreeJS to render models in the DOM (using a sync'd canvas). I used a custom element to add a model and resolved the elements CSS transforms to position the model in 3D space. Very interested to dig into the code and see how you did DOM sync

That’s a cool project!

Zero Element: Cube ...

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

Shaderview by Keith Clark A Web Component for rendering WebGL shaders

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 by Keith Clark A Web Component for rendering WebGL shaders

Shaderview. A Web Component for rendering WebGL shaders in your web pages.

keithclark.github.io/shaderview/

github.com/keithclark/s...

Fantastic album!

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.

Not yet, but one is coming. I’ll post when it’s available.

I’ll be pushing the project to GitHub soon so you can have a play.