<story><title>Show HN: Pulsar, micro creative coding playground</title><url>https://muffinman.io/pulsar/</url></story><parent_chain></parent_chain><comment><author>stankot</author><text>Hey, author here. I&amp;#x27;m really glad to see this getting some traction on HN, it is one of those projects that really brings me joy.&lt;p&gt;It is inspired by a project that I saw on HN a while ago. I wasn&amp;#x27;t able to find it again, so I made my own version. I swear, only after finishing Pulsar I managed to find &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;tixy.land&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;tixy.land&amp;#x2F;&lt;/a&gt; again.&lt;p&gt;As a bonus, I wanted to run these animations on my DIY LED frame. Check out the video:&lt;p&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;Stanko&amp;#x2F;pulsar&amp;#x2F;tree&amp;#x2F;dev#led-retro-frame&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;Stanko&amp;#x2F;pulsar&amp;#x2F;tree&amp;#x2F;dev#led-retro-frame&lt;/a&gt;&lt;p&gt;Here are a few technical details:&lt;p&gt;It is built in TypeScript and open source. User code is executed in a web worker to minimize the risk of malicious use (tbh I&amp;#x27;m proud of the solution, and I find it quite nifty). Initially, I used to render everything as an SVG, but in order to create GIFs for the LED frame, I switched to canvas. Not to mention that SVG gave me a few headaches which I&amp;#x27;ll cover in a blog post (if I ever write one). The syntax highlighter is a trick I found on Stack Overflow. The textarea is transparent, and as you type in it, I take the code, highlight and copy it into a div which overlays the textarea.&lt;p&gt;It was really fun to build and I hope you had some fun playing with it.&lt;p&gt;I made it around last new year&amp;#x27;s eve, so here is a simple animation of a Christmas tree:&lt;p&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;muffinman.io&amp;#x2F;pulsar&amp;#x2F;?grid=classic&amp;amp;animate=both&amp;amp;code=Y2VpbCgoKGFicyh0ICogMC43KV4yKSo3KSAlIDEyMCkgPT09IGkgPyAwIDogKChhYnMoeS02KSAtIGFicyh4KjIuMykpICogKGNvcyh0ICogMC4yKSAqIDAuMyArIDAuNSkp&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;muffinman.io&amp;#x2F;pulsar&amp;#x2F;?grid=classic&amp;amp;animate=both&amp;amp;code=...&lt;/a&gt;</text></comment>
<story><title>Show HN: Pulsar, micro creative coding playground</title><url>https://muffinman.io/pulsar/</url></story><parent_chain></parent_chain><comment><author>lifthrasiir</author><text>Unfortunately, it was too easy to trigger XSS: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;muffinman.io&amp;#x2F;pulsar&amp;#x2F;?grid=classic&amp;amp;animate=scale&amp;amp;code=dD9jb3MuY29uc3RydWN0b3IoJ29ubWVzc2FnZT1lPT5wb3N0TWVzc2FcZ2Uoe2lkOmUuZGF0YS5pZCxlcnJvcjoiPG1ldGEgaHR0cC1lcXVpdj1yZWZyZXNoIGNvbnRlbnQ9MDsvL3VwbG9hZC53aWtpbWVkaWEub3JnL3dpa2lwZWRpYS9jb21tb25zLzUvNTcvRG9uJTI3dF9QYW5pY19CYWRnZS5qcGc%252BIn0pJykoKTow&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;muffinman.io&amp;#x2F;pulsar&amp;#x2F;?grid=classic&amp;amp;animate=scale&amp;amp;code...&lt;/a&gt;&lt;p&gt;It is really hard to make a correct sandbox in JS in general, without something like the Realms proposal [1]. Until that point you would have to be conservative to be safe.&lt;p&gt;[1] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;tc39&amp;#x2F;proposal-shadowrealm&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;tc39&amp;#x2F;proposal-shadowrealm&lt;/a&gt;</text></comment>