Revision 712: The Web Beyond the Edges of the Browser Window, with Niels Leenheer

We speak with Niels Leenheer about playful browser experiments, strange hardware, and why the web is still a great runtime for doing things it was never really designed for.

After a short recap of beyond tellerrand Düsseldorf and Niels’ earlier appearances in Revision 273 and Revision 358, we dig into clocks, oscilloscopes, DMX lights, lasers, Doom, and a lot of CSS.

Shownotes

[00:03:08] HTML5 Test and old browser API experiments Niels introduces himself as a Dutch web developer who has been playing with the web since 1993. We talk about HTML5 Test, a project that once gamified browser support for new HTML5 features and even influenced browser vendors to implement APIs they had not originally prioritized. Today the test is mostly obsolete, but that is also because HTML5 succeeded. [00:07:42] beyond tellerrand and creative web work We recap beyond tellerrand Düsseldorf, where Niels gave a talk about his browser-based tinkering projects. The conversation also touches on the current AI-heavy mood in the industry, Oliver Reichenstein’s perspective on AI copycats, and why conferences like beyond tellerrand are valuable because they show creative, non-mainstream work that does not feel easily replaceable by AI-generated output. [00:14:56] Stubborn clocks, Raspberry Pi and physics Niels explains how he got interested in clocks through Vasilis and projects like the Diagon Clock. His own clock runs Chrome fullscreen on a round touchscreen attached to a Raspberry Pi. Instead of simply showing the correct time, it deliberately behaves badly: it misunderstands daylight saving time, forgets midnight, and keeps adding hours. Later, he added gravity using Box2D via box2d.js, turning the clock hands into physical objects that can be flicked, dropped and bounced around. [00:20:56] Oscilloscope drawings with SVG, CSS and Web Audio Niels then describes how his obsession with clocks led him to an oscilloscope. Instead of drawing to a normal screen, he uses Web Audio to generate left and right channel signals that steer the oscilloscope beam on the X and Y axes. The shapes come from SVG: browser APIs such as path length and point sampling are used to turn SVG geometry into audio waves. CSS transforms add an extra challenge because the raw path coordinates need to be combined with transformation matrices. [00:37:26 ] DMX lights, smoke machines and WebUSB We talk about controlling stage hardware from the browser. Niels uses DMX, a protocol based on 512 values sent repeatedly to connected devices. With a USB-to-DMX dongle and WebUSB, a JavaScript array can be translated into packets that control lights, smoke machines and, in theory, a stage flamethrower. The browser is not replacing a classic driver here, but JavaScript acts as the converter between the web app and the device protocol. [00:38:18] Lasers, ILDA and Asteroids The laser project builds on the oscilloscope work. Niels wanted to draw with lasers, inspired by Seb Lee-Delisle’s Asteroids laser projector work. A USB dongle converts browser-generated coordinates into ILDA, the protocol understood by laser projectors. Because the oscilloscope project already generated X/Y coordinates, Niels