Free Tool for Web DevelopersJS Bin: Built For Sharing, Education And Real-Time Rendering

Advertisement

This is our sixth article in a series that introduces the latest useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree1; the second introduced Foundation2, a responsive framework; the third presented Sisyphus.js3, a library for Gmail-like client-side drafts. The fourth shared a free plugin called GuideGuide4 with us, and in the fifth we’ve announced Erskine’s responsive grid generator Gridpak5.

What Is JS Bin?

JS Bin96 is one of the very first public paste bins with the output rendered live in your browser and available to share and edit with the completed output. Released back in 2008, JS Bin is now on its third iteration and after a long and thorough development finally includes some of the original features I wanted to build JS Bin with. It’s completely free to use all its features and open source, and it’s available on Github7.

JS Bin: Built For Sharing, Education And Real-Time8
JS Bin96, a collaborative JavaScript debugging tool with advanced features.

Essentially, JS Bin exists for two main reasons: a) creating test and debug cases, and collaboratively debugging those cases, and b) to teach and learn from. JS Bin is a collaborative JavaScript debugging tool. It allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code). Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

What’s New?

In both current and previous versions, the UX has been a big part of the update. Danny Hope10 volunteered his UX experience to this open source project and collaborated very closely with me, allowing us to instantly try out UX ideas, see them in action and decide whether they worked or not.

Again in the spirit of open source collaboration, the project needed to be upgraded from entirely PHP (and not great PHP code!) to Node.js. Aron Carroll11 worked for the last few months in his spare time converting the existing JS Bin logic entirely to JavaScript. So as of today, JS Bin is 100% JavaScript.

This move to Node allows us to introduce two new useful features:

  1. CodeCasting
  2. Live remote rendering

Both techniques use EventSource and a little technique that I call The Spike12.

The key difference between the old and the new JS Bin is that as you type – JS Bin is saving. Means, as soon as your first key stroke lands, you’ve got your own URL. You keep typing, it keeps saving. If you want to stop saving against that version, just create a milestone and live saving will be applied to the new revision.

CodeCasting

Say you’re running a demonstration or a workshop, and you want all the participants attending to see the code being updated and to see the output of the JavaScript, CSS and HTML, in real-time as you type. With the new JS Bin, you don’t have to be on the same connection, just visit the same URL. Instead of ending the URL with /edit, add /watch and they become voyeurs to your live coding. I’d love to see this live at a conference.

Live remote rendering

Ever wanted to check the output on multiple platforms: Firefox, Chrome, IE, iPads, Androids, Windows Phone, even a Boot 2 Gecko phone? Maybe all at a once? Maybe without ever hitting refresh?

JS Bin can do this. Simply point the device or browser to your full preview URL (basically removing /edit from the URL) and any changes you make as you type will cause the target device to refresh its content.

The URL structure even has a shortcut, if you’re registered, you can always point the URL to http://jsbin.com/[username]/last13 and it’ll pull up the last bin you’ve worked on. Along with live remote rendering, I’ve been working with the Adobe Shadow team and they’ve gone ahead and built compatibility with JS Bin directly in to Shadow.

How the live stuff works

Now, that’s an interesting question! And it has a quite simple answer. A while back I tried out a comet14 PHP based version of CodeCasting which was way, way more complicated. It worked, but releasing wasn’t possible as my server couldn’t take more than just a few concurrent sessions. The move to Node years later fixes that.

As you type, the tool sends an Ajax save request (after an idle time of 200ms). On the server side, this triggers an event which says “the bin with this url has just changed”. Now, when viewing the CodeCasting URL or the live remote rendering, each user is connected to the Spike application. It listens for the event that says that a bin has changed, and when that happens, it just finds all the users watching a particular URL and sends them the updated panel (so we only send the CSS panel if the CSS panel changed).

An EventSource15 maintains a persistent connection with the server and is listening for those events in the browser. When the event is received, depending on the content type, it’ll either inject the content live, or refresh the page providing users with the latest version of the code.

Other Important Features

There’s a whole lot more to the new release of JS Bin, and I intend to release screencasts on these features on the @js_bin2216 on Twitter.

Some of these features were always part of JS Bin, but hidden inside of the “beta” access – which required a clunkly console command. Now JS Bin 3 adds the much needed UI to do simple things like login to remember your history of bins.

  • Login to remember your history
  • Your full history on a single page with live previews on hover
  • An API to control default settings (useful if you’re preparing a teaching session)
  • Processors, so you can use Markdown, CoffeeScript and LESS, amongst others
  • CSS panel
  • Console panel
  • Support for more libraries (including Bootstrap, Backbone, etc)
  • Native support in Adobe Shadow17 (you can point your browser to JS Bin and Adobe Shadow will render the live output automatically)
  • “Edit from your editor and render remotely” feature. You’ll have to see it18 to believe it (idea and code by @wookiehangover19)
  • Our badass robot mascot: Dave20, the JS Bin Bot (stickers will be made!)

Dave, JS Bin Bot mascot
Dave, the JS Bin Bot mascot, created by @yoheis (of PhoneGap fame).

Also, I’d like to add GitHub support, export your history, hosting of static assets and further features21 to the upcoming versions of JS Bin in the nearest future.

Hack, Play, Share & Get Involved

I’m really excited to share this updated version of JS Bin. Watch out for the twitter account @js_bin2216 because it will be posting tips and screencasts, and do send your feedback23 with issues, ideas or just to tell us where you’re using JS Bin!

Footnotes

  1. 1 http://www.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/
  2. 2 http://www.smashingmagazine.com/2011/10/25/rapid-prototyping-for-any-device-with-foundation/
  3. 3 http://www.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
  4. 4 http://www.smashingmagazine.com/2012/01/03/guideguide-free-plugin-for-dealing-with-grids-in-photoshop/
  5. 5 http://www.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/
  6. 6 http://jsbin.com/
  7. 7 http://github.com/remy/jsbin
  8. 8 http://jsbin.com/
  9. 9 http://jsbin.com/
  10. 10 http://twitter.com/yandle
  11. 11 http://twitter.com/ac94
  12. 12 https://github.com/remy/jsbin/blob/feature/node/public/js/spike.js
  13. 13 http://jsbin.com/rem/last
  14. 14 http://en.wikipedia.org/wiki/Comet_(programming)
  15. 15 http://html5doctor.com/server-sent-events/
  16. 16 http://twitter.com/js_bin
  17. 17 http://labs.adobe.com/technologies/shadow/
  18. 18 http://www.youtube.com/watch?v=mY56fNmn2cE
  19. 19 http://twitter.com/wookiehangover
  20. 20 http://twitter.com/js_bin
  21. 21 https://github.com/remy/jsbin/blob/master/TODO.md
  22. 22 http://twitter.com/js_bin
  23. 23 http://github.com/remy/jsbin/issues

↑ Back to topShare on Twitter

Remy is the founder and curator of Full Frontal, the UK based JavaScript conference. He also runs jQuery for Designers, co-authored Introducing HTML5 (adding all the JavaScripty bits) and is one of the curators of HTML5Doctor.com. Whilst he’s not writing articles or running and speaking at conferences, he runs his own development and training company in Brighton called Left Logic. Generally speaking, he’s about as crazy about JavaScript, HTML & CSS as a squirrel is about his nuts during the winter!

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Zachary Kain ☯ (@zakkain)

    July 23, 2012 8:16 am

    Wow, that video of live editing with Sublime and local jsbin is incredible! With all the different bins, fiddles, etc out there I never gave jsbin a second glance… that just changed.

  2. 3

    This looks pretty damn amazing and it will make life much easier during testing and collaboration.

  3. 4

    Wow, this looks great. Congratulations! I loved the part about LESS support too.

  4. 5

    Does it support Sass and Compass?

    • 6

      Re: SASS & Compass – I’ve been asked about that a few times, so here’s the reply:

      Stylus and LESS are being rendered on the client side – so there’s no round trips just to render your HTML in the page between the browser and server. SASS was on my list (but that would cover SCSS and Compass too) but there’s no client side solution. Feel free to contribute here, I’m definitely interested in adding those processors: https://github.com/remy/jsbin/issues/176

  5. 9

    Thomas Eichberger

    July 23, 2012 11:06 pm

    Sounds really great and impressive. I’ll try it out…

  6. 10

    Very good article.

  7. 11

    Thank! nice article!

  8. 12

    I’m trying to install JSBIN on my localhost, but it won’t work. Seems to me that the installation manual on github is out of date ( since it wants me to update php files, while the config seems to be located in /config.default.json ).
    Now when I run the installation, I see the top bar and the jsbin mascot but all ajax calls fail. They are looking for files located in the /public directory, but from the root url. What am I doing wrong? Any help would be much appreciated.

    • 13

      Sylvia, we recently updated the local install and it’s now all working. The directions are literally this:

      1. Install Node.js (http://nodejs.org)
      2. In your terminal type: npm install -g jsbin
      3. In your terminal type: jsbin

      Boom.

      There’s going to be more docs and screencasts released that help you go through this, but it should be super easy if you use node. Follow @js_bin as it’ll be the place I push out the screencasts from.

  9. 14

    I find the technology this displays to be extremely interesting, but I’m struggling to determine where this would actually be useful.

    Collaboration seems invalid, considering that you shouldn’t have two people editing the same section of code at a time, and unless everyone else has a different development cycle than I do, there won’t be much activity for an observer to really watch the site to “see it develop”.

    Where would YOU find this useful? I’m honestly curious, because I’d love to see this applied somewhere.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top