jsBin for rapid prototyping

Until recently I was an avid user of jsFiddle.  I used jsFiddle to create and save the smallest examples of a problem or some front-end code I needed to test against.  I really think this helped me to write good re-usable code that I could always go back to and try to break or recreate an issue to see if it was that code or some other outside problem.

I started playing around with Ember.js lately and a lot of the examples and questions on StackOverflow.com reference the Ember jsBin.  I have been following @rem for a while on Twitter so I had seen the references to jsBin before but hadn’t really given it a shot.  When I started using it I realized some really neat things – 

1. Every time I needed a feature it was already there, and easy to find

2. It was embedded all over the web and working great (unlike a fiddle which was always just a link)

3. It was perfect for giving product teams a way to rapidly proto-type

At my current job we have a product team that likes to play around with styles.  They have gotten good enough with messing around with HTML to be able to mess around in Chrome to give us something to look at when building it out.  The problem is they have to screen shot it or copy – paste into an e-mail.

After playing with jsBin I decided to create a quick and dirty canvas for them to use for prototyping.  I figured it would take an hour or so to get it looking ok but there I was 10 minutes later with a non-functional but great looking snap shot of our web app.  I went to share it with our product team and realized there were a few options for sharing that were perfect for them to use – 

1. A live look at the output (that updates when changes are made to the bin)

2. An editable version for them to create screen mocks with

This was great.  This was exactly what product wanted to be able to share with customers and directly make changes to colors and such to allow them to give instant feedback.  They were able to immediately start prototyping new views and how they wanted them to look.

After sharing it the first time I immediately wanted to start a ‘fork’ of the project to try out a few extra things.  Boom, one of the first options I found was to ‘clone’ the bin.

Pro-tip to you – create your own jsBins and use them in your organization.  If nothing else it will get product off your back and give them something to play with.