Front-end & full-stack coding playgrounds for developers
The following sites are coding playgrounds. It means that you can write code in different languages and you will see the result reflected in the site without setting up a local environment, just get things done. I’ll list only the most used and best ones because I’ve seen some clones or deprecated sites still being listed and I don’t think I should expose you to that. However, if you have a nice (and still relevant) playground that I can add to this list, just let me know in the comment section down below.
I’ve been using Codepen since 2013 and it’s been always the go-to site when it comes to prototyping, testing, showcasing CSS or JS projects, teaching with the new teacher mode (PRO Only) or playing around with the newest and hottest library in town. You can use pre-processors quickly by editing your HTML, CSS or JS preferred configuration and you can see the compiled version with one click. Codepen also lets you add code to the HTML head tag and the PRO version has many interesting features.
import from syntax and the
const module = require('module') syntax from CommonJS, and for what do you ask? Using NPM packages that can be used client-side (like Cheerio, Lodash, Bluebird, jQuery, etc).
JSFiddle and the next one (JSBin) are fairly similar, I’m biased enough to say that I love both but I find myself using JSFiddle when I need to test SVG or HTML features with a minimalistic interface and as Codepen, anything you build here is embeddable and it provides a collaboration interface for pair programming.
At first, Codepad was a simple code snippet social network (or “the Instagram for programmers” as some sites called it), I loved copying and sharing snippets here. They recently launched their own playground that they even named it “Playgrounds” and looks very similar to what CodePen has to offer but the live sync looks choppy today, maybe they’ll improve it since they are open to feedback.
The other side of the coin, what if you wanted to play with backend technologies, programming languages that aren’t specifically for the web or set up a full-fledged virtual machine on the cloud for playing around and deploy your projects? That’s what the following services and tools may be useful for that. Some of them are only REPLs but they’re useful nonetheless.
This is, in my opinion, THE reference for full-stack coding IDEs and playgrounds for many reasons. You can set up an ubuntu virtual private server (with limited but scalable CPU and RAM resources, of course, if you pay) in seconds, import and deploy from Github (and others), see your result in a subdomain (or set your own domain). It’s a bit comparable with Heroku but Cloud9 an IDE and full control of your Ubuntu instance. The community is amazing, any problem or question will be solved already in the forums.
I’ve only used it five times and I am in love with it already, it has many things it can improve but it seems it will reach far places if they keep doing great things; built by the guys at FogCreek, Glitch lets you run a small Node.js instance with a silly subdomain name in which you can install NPM packages and run a small Node application. It provides no database but you can use MLab or any other Database as a service. The instances go to sleep after some inactivity but if you access the URL again it will wake up. It has a .env file where you can set environment variables, it also has assets and comes with Express by default. Also, these guys seem to change the name of their service every 9 months or something like that, it’s been 3 names already!
This REPL for Swift is a great sandbox tool for those Java Swift beginners or testers, I’m not a Swift developer but I tested it as you can see in the picture. It’s only for language testing so you won’t be able to create Swift iOS apps here.
The IBM Swift Sandbox is an interactive website that lets you write Swift code and execute it in a server environment – on top of Linux! Each sandbox runs on the IBM Cloud in a Docker container. The latest versions of Swift and its standard library are available for you to use. - IBM Swift Official Website
Apart from providing a PHP playground interface, it will let you preview the rendered result, you can enable or disable PHP drivers and use a database; it’s a very simple and old looking site but it’s usable if you don’t want to open up MAMP or use your own LAMP stack.
This one is my favorite for language feature testing and snippet creation, you can save the sessions to retrieve your code at any time. It has plenty of languages to choose from (including esoteric languages, compiled languages, interpreted, functional, object oriented and more). It works by sending your code to a REPL in their servers and displaying the output back to you. Developers will love to hear that they provide an API which is extremely useful if you’re building something related to programming, debugging or a learning resource like Codecademy.
Thanks for making it this far, I know I left out many sites that may appear in other roundups but I only wanted to include the very best, I would let PHPFiddle out but I feel like it’s a good addition. However, if you think there’s another link that I could add to this post, add it to the comment section as long as it doesn’t follow your own agenda (you’re the owner of the site) or else I’ll have to flag it as SPAM.