[OTHER]: Online client-side playground with test runner about website

[appgurueu]

I'd ask @Panquesito7 for a transfer of this issue to the website repo. After the website maintainers have given their input, you could start working on a follow-up PR.

[hatemhosny]

Thank you @appgurueu @cclauss

We have a playground on the website already, but it lacks test support.

I did notice the playground on the website. As you mentioned, it does not currently run tests. In addition, the Monaco editor is not supported in mobile browsers as mentioned in the official website. LiveCodes playground can run tests using Jest, and has good mobile support (on mobile, the default code editor is CodeMirror6 which has great mobile support).

Would you be interested in integrating your playground / adding test support to the website?

Sure, I'd be interested to help integrating that to the website/repo.

On the Python repo, we use a Microsoft Dev Container and a GitPod.

• https://github.com/TheAlgorithms/Python/tree/master/.devcontainer
• https://gitpod.io/#https://github.com/TheAlgorithms/Python

How does LiveCodes compare with these?

LiveCodes is a totally client-side app. It does not need any backend servers. All code processing/compilation (including the 80+ languages/frameworks), code evaluation, and tests run inside the browser. It can be hosted on any static file server or CDN. In addition there is an easy-to-use SDK that allows embedding playgrounds and communicating with them. The SDK is also available as a React component which can make integrating the playground in the website easier.

Please guide how to proceed. Shall I start a PR in the website repo?

[hatemhosny]

I have updated the playground to also include all the algorithms in the TypeScript repo.

Demo:
https://hatemhosny.github.io/thealgorithms-javascript/?lang=ts

When running TypeScript algorithms, the playground also allows showing the compiled JavaScript code.

The playground has also been updated to the latest LiveCodes release which updated Jest to latest version (v29.7) and allowed watching for code changes to auto-run tests.

Are the TypeScript repo maintainers the same as here or shall I notify them there?

[appgurueu]

We are the same (@raklaptudirm and me).

[cclauss]

Let's go with Pyodide because we are quite religious about using the very latest version of Python and I tend to upgrade Pyodide and this repo needs a fair amount of scientific Python which as you state is a focus of Pyodide.

[appgurueu]

Nice project!

We have a playground on the website already, but it lacks test support.

Would you be interested in integrating your playground / adding test support to the website?

Either way I think we might want to link your playground from the Readme. @TheAlgorithms/javascript_maintainers @TheAlgorithms/website_maintainers thoughts?

[cclauss]

On the Python repo, we use a Microsoft Dev Container and a GitPod.

• https://github.com/TheAlgorithms/Python/tree/master/.devcontainer
• https://gitpod.io/#https://github.com/TheAlgorithms/Python

How does LiveCodes compare with these?

[hatemhosny]

@cclauss

This is an initial attempt for Python algorithms: https://hatemhosny.github.io/thealgorithms-python/

LiveCodes runs Python in the browser (with no backend server), including doctest, using Brython. Example: https://livecodes.io/?template=python

Most algorithms and their tests run in the playground, even those that import form the standard library. However, importing external libraries does not work.

LiveCodes supports running Python using Pyodide. Example: https://livecodes.io/?template=pyodide
Pyodide allows importing many scientific libraries. But this is a much larger download.

We can, however, select which "runtime" to use for each algorithm.

Let me know what you think.

[hatemhosny]

Let's go with Pyodide because we are quite religious about using the very latest version of Python and I tend to upgrade Pyodide and this repo needs a fair amount of scientific Python which as you state is a focus of Pyodide.

I have updated the Python playground to use Pyodide: https://hatemhosny.github.io/thealgorithms-python/
Now scientific libraries (e.g. numpy) can be used:
e.g. https://hatemhosny.github.io/thealgorithms-python/?algorithm=machine_learning/decision_tree

Please note that Pyodide is loaded with every update to get a new environment. This affects performance.
If you want faster performance, the code can re-run in the same previously loaded Pyodide environment if you remove the last line # __livecodes_reload__
This works as if you keep running extra code in a Jupyter notebook vs restarting the kernel.
Edit: this is no longer needed. The environment now resets on update without needing full reload, which resulted in significantly improved performance.

[Panquesito7]

Nice project!

We have a playground on the website already, but it lacks test support.

Would you be interested in integrating your playground / adding test support to the website?

Either way I think we might want to link your playground from the Readme. @TheAlgorithms/javascript_maintainers @TheAlgorithms/website_maintainers thoughts?

What readme do you mean exactly? 🤔

Also, this idea sounds very interesting. Good work, @hatemhosny. I would love if you could incorporate it into the current website we have. 🙂

[hatemhosny]

thank you @Panquesito7
I will start working on a PR. I will let you know if I need guidance. Thank you.

Meanwhile, I have added a playground for R: https://hatemhosny.github.io/thealgorithms-r/
It uses WebR to run R locally in the browser (using WebAssembly)
WebR supports running a number of R packages (https://repo.r-wasm.org/). Example: https://livecodes.io/?template=r

@cclauss
Also I have updated the Python playground: https://hatemhosny.github.io/thealgorithms-python/
Significantly improved performance, reset environment on update without having to add any flags in code, upgrade to the latest Pyodide version and use micropip to automatically install any imported library.