Show HN: Esolang Park, a visual debugger for esolangs | Hacker News Reader

Show HN: Esolang Park, a visual debugger for esolangs

esolangpark.vercel.app

53 pointsnilaymaj6 comments

Hey HN! Esolang Park is an online visual debugger interface for esoteric programming languages, that I've been working on for the past few months. For every supported language, Esolang Park provides the powerful Monaco code editor, syntax checking, debugging functionality and a visualisation of the runtime state. The core is language-agnostic - a "language provider" only needs to implement the esolang's parser, interpreter and visualisation UI (and some other little stuff).

Apart from trying to boost DX for esolangs, the idea is for this to grow into a platform where people can discover and play around with a variety of esolangs without leaving the browser. That's quite far away though - the project is quite early in development and currently only has 5 languages (Befunge-93, Brainf*ck, Chef, Deadfish and Shakespeare). Some features like non-debugging execution mode (0ms interval) are missing too.

Currently the entire source code[0] (core + language providers) is written in TypeScript and React. Esolang code execution happens in a web worker. I'm planning to add support for WASM-based language providers for better performance, particularly for non-debugging execution. There's also a wiki[1] containing a description of the core design and a guide for implementing and contributing new language providers.

Looking to hear some feedback on the idea and current implementation - bug reports are welcome too!

[0] https://github.com/nilaymaj/esolang-park

[1] https://github.com/nilaymaj/esolang-park/wiki

Open articleView on HN

Very cool project!

> the bottleneck in performance turns out to be the React frontend. It is the time taken by the React frontend to render execution updates that dictates the fastest possible execution speed.

Why have React re-render each time execution updates? I don't think a user could make use of an updated visualization more than a few times per second, so it seems possible to re-render at a fixed rate (or at least capped, e.g. via 'debouncing' which ever function triggers the state update) while letting execution run relatively independently.

Also: could you say more about what kinds of the things the visualizer is capable of showing? I checked out the examples for each language and can get some sense of its range from that but I'd be curious to know more. (For example, when I was working on a program state visualizer I opted to provide visualizations of particular data structures, e.g. lists, trees, tables, maps etc.)

You're right, 5ms updates aren't really any more useful than 20ms updates. Although for the current esolangs `React.memo` serves most 5ms use-cases, I'll be happy to implement fixed-rate updates or debouncing when a visualizer gets too complex for simple optimizations.

Theoretically, the visualizer window can show anything I think - as long as the required props support structured cloning[0], it's really just a React component. Performance is the only limit, but the above methods will help when that limit is reached. A Leaflet.js map for the Taxi[1] esolang will be interesting to implement, for example.

[0] https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers...

[1] https://bigzaphod.github.io/Taxi

Shout out to the author for remembering the Shakespeare Programming Language exists! [1] Next on the list, which I am tempted to do, is build in support for LOLCODE [2] and Piet [3], though I'm not sure how the latter would work.

[1]. http://shakespearelang.sourceforge.net/

[2]. http://www.lolcode.org/

[3]. https://esolangs.org/wiki/Piet

I may have a bit of a soft spot for English-y esolangs :)

Yeah, LOLCODE should fit right in but Piet is tricky. I don't think a proper Piet editor can be added, but a possibility is to map each color to a relevant character and set up the right background colors for Piet in the editor - let me know if that makes sense in usability. Some added functionality for exporting as PNG may be required too.

This is so, so awesome!

My one small suggestion would be to make each languages docs more prominent than the icon which links to Github "implementation notes".

Thanks a lot! And I agree, the docs button is more important than it is shown to be right now - working on it. (edit: done. the animation is somewhat powerpoint right now though)

Reply on news.ycombinator.com