JavaScript - - By James Hibbard

A Round up of Online Code Playgrounds

Nowadays, there are a variety of code playgrounds available online. Some (such as JSFiddle or JSBin) are designed with sharing in mind, which is useful for building a reduced test case to demonstrate a bug or problem you are having. Some (such as ES6 Fiddle, or D3.js Playground) allow you to experiment with a specific library or technology without the fuss of creating files or setting up a build step. And others (such as CodePen) have an additional social aspect, enabling you to show off your latest creation and get feedback from your peers.

It goes without saying that all of them are awesome and make developers’ lives considerably easier!

At SitePoint we use CodePen to host most of our front-end demos and until recently, I thought I knew it pretty well. That was until I read Chris Coyier’s article on 10 Cool Things You Can Do with CodePen and JavaScript which taught me a couple of really neat tricks. For example, did you know that you can Ajax stuff from other Pens at special URLs? Or that you can have CodePen check your JavaScript with JS Hint? No? Well, you can. And, as an added bonus, CodePen will also provide handy Google it links for finding more information on a particular error. I’d urge you to read the article to find out what other cool tricks Chris has to offer.

So that’s the front-end. But what about if you want to share a code demo which includes a back-end component? That’s going to be tricky, right? Well, the good news is that it probably actually isn’t. With the explosion in popularity of server-side JavaScript, a number of sites have grown up which are suitable for hosting demos involving back-end code.

The first one that springs to mind is Plunker. One of the reasons Plunker has proven popular is because it allows users to create an arbitrary number of files and to mimic a dev environment by allowing filenames such as public/js/app.js. Plunker plays nicely with the SystemJS module loader, which can transpile ES2015 on the fly (using Babel under the hood) and deal with both AMD, CommonJS and ES6 modules (as this demo from a recent SitePoint article demonstrates). Plunker also allows you to add packages from npm to your project (using npmsearch.com) and integrates Gitter right in the editor.

The next site worthy of mention is ESNextbin. ESNextbin makes life a little easier by giving you direct access to your package.json file. Any dependencies you specify there can be required in your code and used accordingly. It does this by using the Browserify-CDN, which pulls in the module from the npm registry and browserifies it as a standalone bundle. ESNextbin will also let you write in ES2015 and it uses GitHub Gists to save your files, so that you can share your demo with others.

The final site I want to mention is HyperDev. Created by the folks at Fog Creek, it was only launched recently, but already looks like it is making quite an impact. What makes HyperDev so cool is how much it lowers the barrier to entry. Just by visiting the site you create your own private virtual machine (complete with a server running Node.js) with its own custom URL. There is no need to sign in and zero configuration involved. Very handy!

HyperDev comes packed with a bunch of cool features. For example, as you type changes into HyperDev’s IDE, those changes are automatically deployed to your new web server. The same goes if you alter any of the server-side files. You can also invite collaborators to a project, which will allow them to edit live, with you, in the same documents.

There’s already quite a community springing up around HyperDev and they have a gallery of cool demos which will hopefully continue to grow over time.

And now it’s over to you. Have I missed out your favorite demo site? Let me know. Maybe you’ve got some tips and tricks for one of the sites I mentioned? Let me know. You’ve got a cool demo you wanna show off? Let’s have that, too.

I look forward to hearing from you in the comments below!

Originally published in the SitePoint JavaScript Newsletter.