[HN Gopher] In-browser code playgrounds
___________________________________________________________________
In-browser code playgrounds
Author : todsacerdoti
Score : 189 points
Date : 2024-01-06 13:15 UTC (9 hours ago)
(HTM) web link (antonz.org)
(TXT) w3m dump (antonz.org)
| esafak wrote:
| 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?
| senseiV wrote:
| replit/codesandbox maybe?
| meredydd wrote:
| Hi `esafak - can you drop me an email (in my bio)? Might have
| something for you.
| lazyasciiart wrote:
| 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.
| nmstoker wrote:
| This is amazing. Any idea if it's a "going concern"? Not to
| be snarky but it is from Google.
| spankalee wrote:
| 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.
| nmstoker wrote:
| Excellent. Thanks!
| ericmsimons wrote:
| This is what we do at StackBlitz (stackblitz.com). All hosted
| in the browser without the need for servers, including
| fullstack applications.
| giovannibonetti wrote:
| 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.
| ianberdin wrote:
| I've been working on such browser JavaScript Playground:
| (https://playcode.io) for 7 years.
| dmsnell wrote:
| 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...
| productlordtr wrote:
| an idea: perhaps you can automatically download all the
| requirements in the background when the page is launched to save
| some time?
| nalgeon wrote:
| 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.
| croes wrote:
| Bad idea, not ever one has an unlimited data plan.
| jamghee wrote:
| There may be some middle ground where the download starts when
| you click in a text editor, or hover over the "run" button
| moffkalast wrote:
| Woah, switch to satelite view. It renders some actual train cars.
|
| It must be so surreal watching this as a passenger.
| speps wrote:
| Did you reply to the wrong thread?
|
| https://news.ycombinator.com/item?id=38891712
| moffkalast wrote:
| Oops, yeah my bad. Can't delete it now though :/ Maybe dang
| will move it if he sees it.
| karlzt wrote:
| email him.
| theanonymousone wrote:
| 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/
| nalgeon wrote:
| 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).
| theanonymousone wrote:
| Yes of course. I wasn't talking about the code snippet use
| case.
| wiseowise wrote:
| Future looks bright for web technology. Can't wait until shackles
| of tribalistic, authoritarian OSs can be broken.
| 48864w6ui wrote:
| Just in time to wear the shackles of tribalistic authoritarian
| browsers!
| wiseowise wrote:
| 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?
| awwaiid wrote:
| I mean... That's it. That's the example. All Is Chrome.
| (small letters: or safari)
| nwhitehead wrote:
| 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?
| nalgeon wrote:
| 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 :)
| spankalee wrote:
| Nice use of web components!
| Beefin wrote:
| 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?
| jamghee wrote:
| 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.
| wahnfrieden wrote:
| I'm a big fan of LiveCodes, a new one:
| https://blog.livecodes.io/introducing-livecodes
| baudaux wrote:
| So inspiring for my work on the new OS I am creating:
| https://exaequos.com
| chkas wrote:
| A problem: Long-running code or endless loops freeze the browser.
| In my programming language the program runs in the webworker.
| https://easylang.dev/
| zubairq wrote:
| 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/
| helph67 wrote:
| BitDefender TrafficLight says "Dangerous page blocked for your
| protection" about yazz.com
| zubairq wrote:
| Thanks for letting me know... does it say why?
| chalst wrote:
| > 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.
| feeley wrote:
| 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 Universite de
| Montreal. 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)
___________________________________________________________________
(page generated 2024-01-06 23:02 UTC)