Show HN: Pulsar, micro creative coding playground (opens in new tab)

Your thing is way more hardcore!

As for colors, I wanted more than one color (or two with negative), so I went with a simple hardcoded palette. I wanted to keep the scope in control, but I might try inverting colors when I decide to add more features. Thanks!

It is probably the safest to use an iframe (like CodePen for example), but I was looking for a simpler solution. I ended up with a web worker as it has a completely separate scope (no access to window object). However, it still has access to a bunch of browser APIs, so I also have a list of “forbidden” words. It is not ideal, (as proved in one of the comments below) but it is a middle ground that seemed fine for my usecase.

The only way for a worker to communicate with the rest of the browser context is by using the `postMessage` method. The host code has to listen and respond via the `onmessage` handler, so the worker is unable to do anything that you don't explicitly implement in your `onmessage` handler.

You still have to make sure the API you expose to the user plugins aren't exploitable.

Thank you! It really annoyed me that I couldn’t find it.

Same here, I’m a visual thinker and stuff like this really helps me grasp certain concepts.

Hehe I don't mind, it is my favorite off topic, I love pen plotting. I use it to draw my generative art, which you can see here:

https://muffinman.io/art/

As for the engraver, keep in mind that AxiDraw is only using the weight of the pen (engraver) to press on a surface, so you might need to add some weight for it to work. But please be careful not to damage the servo motor or the plotter. Tyler Hobbs did something similar, he was using a drill bit to remove fresh paint from mirrors: https://www.tylerxhobbs.com/works/mirror-removal

People are doing all kinds of wacky stuff with plotters. I want to try using a brush along with markers. I think the combination of the two can be used to create interesting effects.

I mean, it is still easy to work around that because `f.constructor` is just `f['const'+'ructor']` and so on. Backslash was just a cheap way to avoid the exact pattern and it will be hard to fix them with a disallowed word list. For example, you may disallow string literals but then template string literals can be used: `const${``}ructor`, and some interesting code would be disallowed over the course. Literals fully disallowed, it is still possible to construct a string "constructor" without them, as the good old JSFuck [1] demonstrates. Disallowing brackets is almost sufficient, but your global worker scope is still exposed and that may be exploitable.

After some search, it seems that using a null-origin <iframe> seems the best approach you can use for now. Figma successfully used it in the production [2] and the only reason they switched was that no state can be ever shared, which is not a big problem for your case. They also tried the Realms shim for the aforementioned proposal but it seems to have a known vulnerability. And I guess you don't want to ship a WebAssembly JS interpreter ;-)

Anyway, sorry to bother you; it is hard to balance the fun and robustness at once. As a parting gift, the following is a genuine code that renders a 7-segment counter: https://muffinman.io/pulsar/?grid=classic&animate=opacity&co...

[1] https://jsfuck.com/

[2] https://www.figma.com/blog/how-we-built-the-figma-plugin-sys...

:3