Joji Augustine

Posted on Aug 31, 2020

Anyfiddle - JSFiddle but for any language. Build, run and share code with this online code editor

#showdev #webdev #docker #productivity

Anyfiddle - An online code editor

https://www.anyfiddle.com

The Story

I came across Docker three years back when I was working on containerizing a web application. I was awed by the capabilities of Docker and containers in general. The one thing that impressed me the most was the ability to have a consistent dev environment across the organization I was working at. It also enabled the application to be developed and deployed in the same environment (No more bugs with comments like "Works in my local system").

After working with Docker and containers for a year, I started wondering if containers can do more than this. Can it enable development anywhere, anytime? Can I code in my Chromebook and then continue my work on my iPad seamlessly?

My first approach was to try to make Docker work on Chromebooks and iPads. Then I realized that such a solution would be quite hacky and may not be widely adopted.

Later, I tried a different approach where I started thinking about running containers in the cloud and accessing the environment and code via a browser interface. With just a browser I can then access, build, and run code from any device.

Thus Anyfiddle was born. I am happy to share this final product in DEV.to community for everyone to use.

Checkout Anyfiddle at https://www.anyfiddle.com.

Features ✨

Write and edit code in the browser using a powerful code editing interface
Run commands, scripts, web servers, etc. using the in-built Linux terminal
Manage code files and folder structure with the file explorer
Start coding with pre-built templates so that you can have your code running in seconds
Choose from a wide range of languages like NodeJS, Python, Java, Golang, PHP, Ruby, etc. or frameworks like ExpressJS, Laravel, React, Django, Spring, etc.
Share projects by copying the project URL and send it via Email, Slack, etc.
Preview web applications with a dedicated HTTPS URL
All projects (for signed-in users) will be saved securely in our servers and can be accessed from anywhere, anytime.

Built with 🔧

ReactJS in frontend
NodeJS
Typescript
ExpressJS
Kubernetes
Docker

Coming Soon

I'll soon be launching a Pro version of Anyfiddle that will include features like

Private projects
VSCode Editor experience with support for code completion, debugging, extensions support, theming, etc.
Larger container runtimes to run more resource-intensive apps and commands (More CPU and Memory)
Access controls for private projects

Request for early access to Anyfiddle Pro by registering on https://www.anyfiddle.com/pro-early-access

Share https://www.anyfiddle.com with your friends, teams, and contacts.
Follow Anyfiddle on Twitter, Facebook and LinkedIn

For any queries, questions, feedback, bug reports or help shoot a mail to hello@anyfiddle.com

You can also find me on twitter @jojimail

Top comments (45)

Junxiao Shi • Sep 2 '20 • Edited

How to change my username? It's currently part of my email, but I want it to be same as my Twitter/Facebook/GitHub ID.

Joji Augustine • Sep 2 '20

I have added an option to change the username on the accounts page.
User image on top right > Account > User details > Username.

Junxiao Shi • Sep 2 '20

Beautiful!

(sooner or later, someone will change their username to 'null', '; DROP TABLE', 'alert(1)', 'admin', etc. I hope you are ready for that)

Joji Augustine • Sep 2 '20

There are already checks for these.

Joji Augustine • Sep 2 '20

The only time you can set it manually is the first time you sign in. I will add the edit option in the next release.

Junxiao Shi • Sep 2 '20 • Edited

It did not give me any opportunity to set the username. I used Facebook login.

Joji Augustine • Sep 2 '20

Could be a bug. Will fix this as well as add the user profile edit options

Jérémie Astor • Aug 31 '20

Do you plan to add support for user-supported languages?

Joji Augustine • Aug 31 '20 • Edited

Hi Jérémie, you can install any language in a project. All projects have Debian Aptitude package manager.

If you want to see a language or framework added to Anyfiddle starter templates you can raise an issue or a pull request in github.com/anyfiddle/starter-templ.... If you have any language/framework requests I can get it added.

Jérémie Astor • Sep 1 '20

Right, I got my language working in repl.it simply by downloading the (linux) binary created by github-actions. So I guess the same would do.
I might try something with anyfiddle when I figure how to output sound from the browser.

Joji Augustine • Sep 1 '20

Downloading the binaries should work.

What tool/library do you use to play sounds? Does the sound functionality work in repl.it?

Jérémie Astor • Sep 2 '20

Gwion can use several drivers (eg: alsa, Jack, portaudio) but I think I should use wasm and WebAudio for such a case.
Replit requires a wav or mp3 which I can do using libsndfile, I'm not sure if it's gonna work in realtime.

Do you have any idea?

Joji Augustine • Sep 2 '20

I also do not have much idea on how to make it work.
Does this work over ssh?
If some sound is played in a remote ssh server, it usually plays in the speaker connected to the server. I am not sure if there is a way to route it to the ssh client machine.

Jérémie Astor • Sep 2 '20

Yes, I guess it would use the soundcard machine it is running on.
There might be a way to output to Webaudio though, but that's a technology I don't know much about (I play music and code in C and Gwion 😄).
Definitely something I'm gonna research, I'd love to get full Gwion usage (which means sound) on the web.

Junxiao Shi • Sep 2 '20

Nowadays many audio programs can output to PulseAudio. If firewall allows, you can redirect the audio stream to a PulseAudio server on the local laptop.

Jérémie Astor • Sep 2 '20

That looks interresting! And I have some code for working with pulseaudio.
Do you have any links?

Junxiao Shi • Sep 3 '20

Look at PulseAudio documentation. Try module-native-protocol-tcp. You'll need a public IP for the laptop, activate this module to listen on a TCP port, then have the audio generation program connect to this port.

Jérémie Astor • Sep 4 '20

That's good to know, thanks, unfortunately, while it looks like it could work on AnyFiddle, this won't work on repl.it.

Junxiao Shi • Sep 2 '20

There's only one terminal.
If I click "Run" button, it takes over the terminal, and I cannot do anything else such as using git or invoking CLI commands to interact with the program.

I could install screen and it works, but isn't it great to have multiple terminals on the UI?

Joji Augustine • Sep 2 '20

Thanks for the feedback. Multiple terminal tab support is part of the future plan. Have to figure out how to show them without making the UI very cluttered.

I will update here when this feature is released.

Junxiao Shi • Sep 2 '20 • Edited

Glitch has only one terminal, but the server (e.g. Express) is running in a "logs" tab, and does not take up that terminal.

To have true multi terminal support, you can either do the drop-down menu like VSCode, or put multiple "Terminal" labels like Excel sheets.

Joji Augustine • Sep 7 '20

I have added support for multiple terminals. Check it out.

Junxiao Shi • Sep 3 '20

I'm seeing this on My Projects page:

Untitled Project
Last active Invalid date

/api/projects/ endpoint returned the following for this project:

[
   {
      "isPublic":true,
      "state":"STARTED",
      "desiredState":"STARTED",
      "reasonForState":"USER_ACTION",
      "saveState":"SAVED",
      "isForked":false,
      "id":"9r7y78cu",
      "userId":"b127815a-417c-412c-aeac-12598bbe4dad",
      "title":"Untitled Project",
      "description":null,
      "image":"registry.anyfiddle.com/projects/x4ku9su6",
      "port":null,
      "parentTemplateId":"nodejs",
      "parentProjectId":"x4ku9su6",
      "lastPingAt":null,
      "lastActiveAt":null,
      "lastStartedAt":"2020-09-03T23:35:14.000Z",
      "createdAt":"2020-09-03T23:35:05.839Z",
      "parentTemplate":{
      }
   }
]

The good thing is that the frontend elegantly handled this backend error by translating "lastActiveAt": null to "Invalid date" instead of crashing. Call me irresponsible if I crash on null or undefined in JavaScript or TypeScript.

Joji Augustine • Sep 4 '20

Last active being null has a reason. Its not an error. UI will understand this.

Junxiao Shi • Sep 4 '20

It’s better to render as “Never” instead of “Invalid date”.

Junxiao Shi • Sep 4 '20

How much memory is available in the container? I'm trying to build a very large Go program and I am getting /usr/local/go/pkg/tool/linux_amd64/link: signal: killed.
This program builds on a machine with 2GB RAM.
free -m says there's 8GB but the actual available amount appears to be less than that.

Joji Augustine • Sep 4 '20

The memory available per project is 500MB. free -m shows memory available on the host machine running the container. The container is limited to 500MB and the process gets killed if memory reaches this limit.

I will be launching Anyfiddle Pro with 1vCPU and 4GB RAM soon. You can sign up for early access here
anyfiddle.com/pro-early-access

Junxiao Shi • Sep 4 '20

I guess large C++ and Go projects are off limits in free accounts then.

Joji Augustine • Sep 5 '20

Most small C++ and Go projects should work. For larger projects, you would want to take Anyfiddle PRO

Bubbler • Sep 1 '20 • Edited

I'm a long time user of Gitpod, which is another cloud-based IDE service. Gitpod is best suited for professional open source development, but not quite for trying things out before I decide to seriously put effort in it and upload to GitHub. To me, Anyfiddle is exactly aiming for this use case, which is a good thing.

Can you share some technical details, such as storage limits per project and server uptime (I know some services shut down servers after x hours of inactivity; I just noticed the server is shut down shortly after I close my project, but is it indefinitely running as long as I keep my project open)?

Joji Augustine • Sep 1 '20 • Edited

Hi, Thanks for the feedback. Anyfiddle's current main use case, is exactly what you described, quickly prototyping, running, and sharing. As the platform matures it will have feature parity with other cloud IDEs like Gitpod, etc.

The projects are stopped, 5 mins after closing the browser tab. It also gets stopped if the tab is inactive for more than 10mins. The project won't be stopped if the tab is active and open (for signed-in users).

The project being stopped will not lead to any loss of data or work if the user is signed in. The project resumes from the previous state when started again (Refreshing the page / Clicking on start again / Clicking on the project on My Projects page). Anyfiddle is free for signed-in is users. The sign-in requirement is added to prevent abusive usage.

For non-signed-in users, the project will not be saved and the project is stopped after 1 hour.

All this is done to reduce the server cost and optimize server space for many users. This allows us to keep Anyfiddle free.

Joshua Tzucker • Sep 1 '20

This looks impressive; the startup time seemed incredibly fast too (from picking a template option, to being able to edit the files and run commands).

Has this been a solo project for you?

Joji Augustine • Sep 1 '20

Thanks Joshua. Yes, this is a solo project as of now. Once more users start coming in, will think of how to expand.

Reducing startup time was a high priority for Anyfiddle. Did a lot of optimizations to make it this fast. Will keep improving the speeds in future releases.

Joshua Tzucker • Sep 1 '20

That makes it even more impressive! Great job so far!

Junxiao Shi • Sep 1 '20

Is there a storage limit? I use Glitch previously and its 200MB limit is troublesome for TypeScript projects.

Joji Augustine • Sep 1 '20

Currently, there is no limit. In future there will be. But not as low as 200MB. Will be at least 3GB for free projects.

How much storage does your Typescript projects generally take up?

Junxiao Shi • Sep 1 '20

I have one project using 196MB in the project folder. This includes node_modules but excludes nvm (Node.js binary).
Glitch doesn’t count the storage of node_modules, but AnyFiddle is Docker so you can’t exclude it.

A problem with Glitch is that Node.js versions are outdated. I can install newer versions via NPM but they sometimes count toward the storage limit.

I hope AnyFiddle can allow user-specified Docker images, so that I can have any version of Node.js and probably have my libraries and VS Code extensions pre-installed.

Joji Augustine • Sep 1 '20

Yes in Anyfiddle the storage would be calculated for the whole container size which will include node_modules folder size. Will make sure that storage limits are reasonable enough for most projects.

Support for user-specified Docker images is planned.

VSCode extensions and VSCode features will be supported in the Anyfiddle PRO version once it is launched. You can request early access for this here. anyfiddle.com/pro-early-access

Junxiao Shi • Sep 4 '20

How to delete a project that I created by mistake or no longer need?

Joji Augustine • Sep 7 '20

This feature is added. In My Projects page, each project will have a menu button on top (3 dots). This menu lets you rename, copy the project link, and delete projects.

Joji Augustine • Sep 4 '20

This ability will be coming in one of the upcoming releases.

Pontakorn Paesaeng • Sep 1 '20

That's amazing. I look forward to it.

BELearn • Jul 26 '22

Anyfiddle is getting acquihired by CodeSandbox and the creator of Anyfiddle will join the CodeSandbox team. Anyfiddle will no longer be operational for new users. Existing users can download their projects in Anyfiddle by logging in to their account.

Junxiao Shi • Sep 2 '20

GitHub login is asking for too much privilege. Why do you need access to private repositories?

Joji Augustine • Sep 2 '20 • Edited

I have fixed this. Now its will ask only for read access to email address. Was using the wrong scope. Thanks for pointing this out.

View full discussion (45 comments)

DEV Community

Anyfiddle - JSFiddle but for any language. Build, run and share code with this online code editor

Anyfiddle - An online code editor

The Story

Features ✨

Built with 🔧

Coming Soon

Top comments (45)

Read next

Step-by-Step Guide: Adding Google Maps to Your React App Using Vis.gl

Simplifying React Router Query Parameter Management with Custom Hooks

Wizard's Toolkit Demo

Skills you need as a DevRel