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!
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!
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja