In-browser code playgrounds | Hacker News Reader

In-browser code playgrounds

antonz.org

202 pointstodsacerdoti39 comments

I have designed 2 web based code playgrounds that you may find interesting.

https://try.gambitscheme.org is a playground for the Scheme language (specifically Gambit Scheme). It has a REPL and a code editor that saves files in the browser local storage. It also has a tutorial for learning the basics of Scheme.

https://codeboot.org is a playground for Python (there's an old version that supports JavaScript and we may resurrect it at some point). It was specifically designed as a simple IDE to teach programming to beginners and is in use at the Université de Montréal. Aside from the simple and intuitive UI, it has two important features for teaching:

1) Fine granularity single-stepping of Python code to help teach students how the computer goes about executing the code. It displays a bubble containing the variables in scope and their values.

2) It can bundle programs and the current state of execution in a URL that can be embedded in documents (HTML, PDF, PowerPoint, Keynote, etc) so that coding examples can be executed by the students in a single click. It also allows students to create simple web apps that require no installation and can easily be shared with others (because the URL contains all the relevant code of the app). You will find examples of this feature on the following pages:

https://codeboot-org.github.io/presentations/

https://codeboot-org.github.io/cegep/ (in french, but just click on the images)

I have played a bit with Pyodide and it is very promising for client-side web programming, particularly because of the philosophy similarities between Python and JavaScript, which make interaction more seamless.

Being interpreted is a hindrance, though: The interpreter itself is at least a few megabytes in size, constraining wider usability (IMO).

I'm enthusiastically waiting for solutions to "compile" Python code to WASM, instead of running it with a WASM-compiled interpreter. LPython[0] promises so, but it's still in alpha stage.

[0] https://lpython.org/

This approach would allow you to run a pre-built Python program in the browser, but not change the code and re-run it.

This kind of defeats the idea of interactive code snippets in the docs (but might still be useful in other use cases).

Yes of course. I wasn't talking about the code snippet use case.

A problem: Long-running code or endless loops freeze the browser. In my programming language the program runs in the webworker. https://easylang.dev/

So inspiring for my work on the new OS I am creating: https://exaequos.com

I like how you can handle lots of languages in a very systematic way, that is cool.

One thing I like about pyodide is that it supports lots of packages like numpy. How would you support packages like this with a WASI approach?

I guess you can prepare the necessary packages and mount them in the WASI file system for the Python binary (WASI allows this). Then you can import these packages in your Python code.

I haven't tried this though :)

If I may be forgiven for asking, what about web app playgrounds? Does anyone know a good solution for embedding whole sandboxed products for demonstration purposes?

replit/codesandbox maybe?

Hi `esafak - can you drop me an email (in my bio)? Might have something for you.

This one worked pretty great for my purposes. https://github.com/google/playground-elements

Of course if you’d rather build your own less functional copy from scratch in order to waste several months and avoid shipping, I have some colleagues you might enjoy working with.

This is amazing. Any idea if it's a "going concern"? Not to be snarky but it is from Google.

We use it and maintain it on the Lit team. There isn't a ton of time available for new features, but we'll keep it going for our use cases and accept contributions for new things.

Excellent. Thanks!

This is what we do at StackBlitz (stackblitz.com). All hosted in the browser without the need for servers, including fullstack applications.

You may want to add a disclaimer that your platform only runs JS and not other languages that compile to WASM, unlike the whole discussion here.

I've been working on such browser JavaScript Playground: (https://playcode.io) for 7 years.

My teammate built the WordPress Playground

https://playground.wordpress.net

The motivation was initially to build interactive documentation where you could play with the code examples and see how they change things, but it's being used to demonstrate plugins on the WordPress directory, build staging sites, add no-risk places to experiment.

Surprisingly has been taking over some of the native development tools because it provides a sandboxed and isolated environment that needs no other dependencies and leaves no junk on your computer once it's done. It's trivial to change the PHP version being run (making testing on different version of PHP easy) by adding `--php 5.6`, for example, which is something a bit gnarly to do otherwise unless running PHP inside Docker.

Another surprise is that once loaded, it runs very fast, faster than native PHP and MySQL (the Playground can connect to MySQL but runs sqlite by default). I attribute this to having everything in memory and bypassing the filesystem.

It's been the kind of project that only gets better the more it's used. It turns out that having a no-setup, no-trace, isolated, risk-free app playground is an incredible tool for more purposes than we first realize. Someone even put the Playground inside an iOS app and it runs smoother than the native WordPress app.

As for a good solution? Just a lot of work I guess but WASM is critical to it. Any device or platform that supports JavaScript can run the sandbox/playground app: VSCode, `node` itself, a browser, a mobile device…

> There is also Kohei Tokunaga's container2wasm initiative8, which converts arbitrary Docker images into WASI binaries. It looks promising, but it generates 100+ MB binaries for even the smallest Alpine-based images.

NixOS produces smaller containers, from around 10mb.

You can also try an in-browser code playground that I am building, a cross between Visual Basic 6 and Microsoft Access here:

https://yazz.com/

BitDefender TrafficLight says "Dangerous page blocked for your protection" about yazz.com

Thanks for letting me know… does it say why?

Future looks bright for web technology. Can’t wait until shackles of tribalistic, authoritarian OSs can be broken.

Just in time to wear the shackles of tribalistic authoritarian browsers!

Aside from Chrome trying to make everyone’s life miserable (and is still better than developing 5 native applications), do you have any examples of that?

I mean... That's it. That's the example. All Is Chrome. (small letters: or safari)

I'm a big fan of LiveCodes, a new one: https://blog.livecodes.io/introducing-livecodes

an idea: perhaps you can automatically download all the requirements in the background when the page is launched to save some time?

I can, but I usually don't want to :) I'd rather not force everyone who happens to open the page to download 20 MB before they decide to interact with the code.

The network may be fast and the traffic cheap in some parts of the world, but not in others.

Bad idea, not ever one has an unlimited data plan.

There may be some middle ground where the download starts when you click in a text editor, or hover over the "run" button

Woah, switch to satelite view. It renders some actual train cars.

It must be so surreal watching this as a passenger.

Did you reply to the wrong thread?

https://news.ycombinator.com/item?id=38891712

Oops, yeah my bad. Can't delete it now though :/ Maybe dang will move it if he sees it.

email him.

Nice use of web components!

im struggling to figure out best practices for RCE (remote code execution) currently i containerize client provided code as string for a lambda functuon. how do ya'll do it?

OP's solution isn't remote code execution though. It's all in-browser, which is why it's pretty cool. Assuming you're only running code that the client themselves are providing, you're in pretty good shape from a security perspective.

Reply on news.ycombinator.com