Front-end & full-stack coding playgrounds for developers

Published in 09-08-2016 by Luis Lopez

Web developers, programmers, computer science students and web designers often need to do some quick testing of CSS features and libraries or the new hot framework of the year; showcase user interface challenges or components to a community, friends or to practise on their own; test JavaScript libraries on the console or the DOM (Document Object Model, the page) such as jQuery, D3.js (for data visualization) or others; work on SASS, ES6 or other transpilers and pre-processors on the fly without having to use command line or build tools; set up a quick virtual machine on the cloud to do some full stack development testing and try programming language snippets or other type of code using a REPL interface.

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.

Front-End playgrounds

Here’s some awesome sites that you’ll find incredibly useful when you have a quick JavaScript client-side project, snippet testing, HTML+CSS+JS (client side) static pages in mind and you want to just get to it without having to open your code editor, setting up a live reload server/proxy, search for libraries on the web to place them in your HEAD tag or load them with Bower. All you have to do is create a new project (the name of it depends on the site, Codepen calls them “pens”, for example), code and see the result or output, for library installation you have it easy because most of these sites have a drop-down list that you can select from.

Codepen

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.

Codepen

ESNext Bin

This is in beta (today, 8th of August of 2016) for now but it’s already working great. This interesting playground lets you add HTML and Javascript but the interesting part comes in the possibility to use ES6 (ES2015, ECMAScript 6) code without any error or issue; it lets you import modules with the 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).

ESNextBin

JSFiddle

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.

Jsfiddle

JSBin

JSBin is more of a debugging tool to share code with peers and test algorithms or libraries like RamdaJS, Lodash among others. It also has HTML and CSS so you’re not limited to just HTML and JavaScript, it has pre-processor support like Codepen and you can see the Javascript console result as you type but you will find yourself clearing the console window a lot if you make mistakes; not less important, the ability to export your code to a Gist.

Jsbin

Codepad

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.

Codepad

Full-Stack and other playgrounds

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.

Cloud9 IDE

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.

Cloud9

Glitch (Formerly Gomix and HyperDev)

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!

Glitch

Swift Sandbox by IBM

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

Swift Sandbox

PHPFiddle

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.

PHPFiddle

REPL.it

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.

Repl It

Conclusion

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.


Comments: