JavaScript Tools of the Trade: JSBin – Tuts+ Code Tutorial

\”We\’ve all been there. There are times when you simply want to throw some JavaScript code up and see how it works. Sure, you could go through the hassle of:

  • Setting up a dedicated directory
  • Create a file with markup
  • Finding the latest version of your favorite libraries, downloading them and including them in your code
  • Creating your stylesheet
  • Configuring your webserver
  • That seems like an awful lot of work just do do some simple code testing. Thankfully there are tools that make this type of work trivial.

In this tutorial, I\’d like to go over one of my favorite tools for interactive JavaScript testing, JSBin.

The Case for JSBin

As I mentioned previously, in many cases you simply need to test a small subset of JavaScript code. Setting up a whole development environment for such a use case, in most cases, doesn\’t really make a lot of sense unless there\’s a clear dependency on hardware (for example, WebRTC) or reliance on a third party API or product where you need backend services to successfully access information.

What JSBin offers is a browser-based user interface where you can enter:

  • HTML markup
  • CSS
  • JavaScript

… and get immediate feedback based on your code. In addition, you can optionally include any number of popular frameworks into your onscreen code, allowing you to leverage the framework\’s capabilities as well. The main benefit is the real-time feedback you get from the updates you make.\”