Trying to make Duplo more interesting... So far it is working (probably), seem to have encouraged my daughter to learn to stack two pieces together! 😃 Actually the next step after a fanfare is probably (not the stars but) to have pieces make different sounds and/or beats depending on sensors (ex sensing colors, stacking, proximity or sound) — a music machine. Perhaps more important: a programmer base plate; where you stack pieces & program them (from ex Arduino studio, for now). Inter-piece communication could also be interesting? Ideas?

Working on performance improvements now. Getting some nice visual effects thanks to uninitialized memory.

warping text in webgl space – 2024-09-06

In this I show a new feature that I am working on in my codeflowcanvas project (which is a visual programming system and language): exporting a flow to typescript so that it can be used in other code-bases. In this example it's a nodejs-hono project for creating an api with a swagger/openapi documentation page

A little toy I spent too much time on, just because fractals are always such catnip for me. The LÖVE app with all its source code if anyone wants to play with it.

Here's a new where I show the k-means clustering algorithm build in code flow canvas using some escape hatches. You can try it yourself on demo.codeflowcanvas.io (it's available in the examples)

I got excited about a client-side RAG thing working this week, but the most videoable thing I also got working was a sticky UI holder for Observable, which will be useful for hanging notebook extension upon.

Developing without a GUI framework comes with a risk of falling into some deep rabbit holes. This one is about exploiting the slowness of some widgets to create a sort of "Into the Spider-Verse" animation effect.

The self-sustaining single file observable notebook export format is ready and implemented in userspace

working on a local-first podcast client for video podcasts and youtube rss :)

Thanks to @Ivan Reese for coming up with the idea and putting it in my head: I've added a new feature to code flow canvas.. you can now drag and drop arbitrary values which are on the canvas on edges (or use the clipboard). I've made a small video about and you can see it here: . Off course you can try it yourself on demo.codeflowcanvas.io

In I show a small new feature : when dragging values on to edges (or connections as I like to call them), for node-types that support it ... a small preview shows the node output as a hint above the node. Currently only the expression and sum node-type support this. I am looking for a way to have every node-type support this. Another small tweak is that the expression node-type triggers its output directly when the expression is changed. Previously the whole flow was retrigged and this new behavior feels much better.

Editing the source code of notebook dependancies reactively. This is something you can't do in Observable which is where the non-interleaved editor actually has an advantage.

OK Part II done! The userspace editor + userspace exporter playing together nicely. You can try it out here. In theory you should be able to edit, export and upload to S3 without even logging into Observable. (There is not way to manage the layout of a notebook though, thats part III, so its sorta too limited to be useful yet).

My first attempt at putting all the pieces together to create a self-editable, zero toolchain, offline-first webpage with good debugger support. My CSS is quite weak so I need some more time to make it responsive and look cool, but the general idea is visible.

I've Implemented an embedded version of my editor so I can structurally edit code snippets in blogs or in slides. Using the effects in the web platform I can even send tweets from the snippets in a slide. https://vimeo.com/1049607806

Some news from Automat. I'm tackling the problem of control flow now. I think its the central issue for establishing interoperability between different types of software. Knowing when to continue work in parallel vs wait for completion, how long to wait before giving up, whether to retry, alert or crash, when to save & restore state, etc. Generally all the things called "glue code". They're not essential to "solving" any specific problem, but are still necessary for any practical application of any solution. I believe that with proper design all of those functions could be implemented as virtual devices, intuitive enough that folks without formal education could use. That will take time though. This is my interim solution: . It's meant to allow folks with sufficient dedication to implement the missing functions, without scaring them off. Most importantly it only requires three virtual devices to achieve virtually all control flow primitives (Instruction, Instruction Library & Assembler) so it's feasible to do in a relatively short time. I'm also attaching a WIP design for the "Instruction Library" object. If you're bored you may try to guess what which icon matches each x86_64 register (due to lack of space, only two REX registers are shown) :)

I put together a brief writeup about how I've been doing semantic zoom with just a little CSS. I feel like I haven't seen a lot of recent visual programming interfaces (although there are certainly a lot of prior art) take advantage of fluid zooming and geometric encapsulation. Here's a couple small demos: https://bsky.app/profile/chrisshank.com/post/3lgu3v6nfq22s

My actual target goal at-the-moment is being able to export some of the existing notebooks I have on Observable to my offline-first file format, which led me to develop a programmable import so I can script grabbing other notebooks in a batch export. But after I got the programmable import working, I could not actually see the imported notebook. So that led me to add opening dependancies as extra panels in the golden layout. I was surprised when I first saw dependancies that they were actually executing, although its kinda obvious in retrospect coz of how Observable runtime works*. When I saw them running I then wanted to edit them, which I just added. Then, as a consequence of the editor being implemented in userspace, you can now live edit the development tooling itself! Kinda cool. I still have not achieved my goal, but I am happy that these synergies are starting to emerge from combining userspace and development tooling inside a shared runtime.

*

I have not chewed through the fully consequences of this, but it means you no longer need to plumb development aids all the way to the top like in Observable. For example, an LLM coding assistant can offer its advice without its UI spilling into the primary notebook.

An update from Automat! It's now possible to use "inline assembly" to do stuff. Not very polished yet and can't do much but is pretty fast at doing that.

I've implemented an

eval

for EYG that type checks that the evaluated program is consistent with how the evaluated result will be used in the rest of the program. To my thinking it's similar to a Type provider but implemented the same as any other effect. This allows you do hot code reloading or deserializers without an separate codegen step https://vimeo.com/1062143358

I'm getting feedback about the state of the game using basic OCR now. Unfortunately the OCR that I'm using is optimized towards "natural" text - so it doesn't handle game UIs too well.

I am back to bug hunting. Reactive live coding is great when it works but the bugs can be devilishly difficult. The best methodology I have is plotting all the transitions on a timeseries and zooming RIGHT IN. Its a technique I keep coming back to and it has fixed quite a few subtle issues. I used to think the dependancy graph would be useful but actually a lot of the reactivity bugs occur via hidden event coupling occurring outside the programming model, for example, mouse events, url events, local storage events. They can cause different cells to trigger each other but not through the normal notification mechanisms.

I'm working on nice UI for working with assembly instruction cards recently. Today I've spent some time fiddling around with @Ivan Reese's https://github.com/ivanreese/knob trying to use it for switching condition codes in a smooth manner. Condition codes are discrete values, and there are just 16 of them but it feels nice to switch them out in a continuous manner. Still not finished but the results look interesting so sharing them here. (code) A key component of the gesture logic is fitting a circle to a bunch of points. Turns out it's really hard. I've wasted quite a bit of time before stumbling on Nikaolai Chernov's excellent home page: https://people.cas.uab.edu/~mosya/cl/CPPcircle.html . Strongly recommend bookmarking this one - you never know when you'll have to fit a circle to your data!

I've finally built my converter for Observable notebooks to Lopecode aka Jumpgate. Feels good (blusky post). Its 2:45 sorry, but it gives a full project overview. • Github repository • Observable collection

Here is an overview of a the most complex macro that Automat played so far. It has a little bit of everything: OCR, Assembly, hacky string processing, fine-tuned keystroke sequences. The end result is about 2x faster than manual execution and pretty satisfying to watch.

Dusted off an old project from 2021; a programmable audio sequencer. It stalled because there was no good way to store state in Observable, but with Lopecode, there is! Notebooks can write back into their own FileAttachments, which are bundled when exporting. So I just added some serialisation code and suddenly that project is much more useful. You can actually save the good settings as a hermetic file, completely sure that no external software changes will ever damage that moment in time. (online notebook)

Dusting off my Bitsy fork with simultaneous editing across clients. Right now I have Automerge imported and working. Except - while Bitsy is a tiny game engine, it's a massive project to refactor into ES6 modules, due to that Automerge dependency. This week I got Bitsy's built-in icons working, and I've yanked all of the onclick bindings from inline HTML into a shim module. As I refactor out all of the global state leaks, I have discovered one actual cyclic dependency between modules. I bet I can fix this with an existing instance object.

Feeling excited to demo multiplayer Bitsy on Wednesday! Gif autoplays so it's under the fold

Some context for the context menu: