Iris Classon
Iris Classon - In Love with Code

What is JSFiddle? The ultimate guide for the ultimate lightweight tool (Q 249 & 250)

I’ve found myself using the online tool JSFiddle more and more. Not for just sharing a quick snippet at a forum such as StackOverflow, but for working on code for applications, code review, collaboration and more. Many developers, if not most developers that use JavaScript, know of JSFiddle, but I realized last week that few really have understood the brilliancy of of the tool and what it can be used for. So let me share with you what I know, and make sure you add a comment if I’ve forgotten something or a new feature has been added.

My public page My public page

Who made this?

  • Piotr Zalewa is founder and developer of this tool

  • He is currently a Web Developer at Mozilla Corporation (I believe)

Feature list

jsfiddle-iris-classon11
  • CSS,JS, and HTML Panel,execution panel

  • Panel sizes are adjustable

  • Collection of frameworks provided

  • Separate files can be referenced by adding them

  • Set document mode/variant

  • JavaScript or coffeescript

  • Fiddle information (name description)

  • Run (execute script)

  • Update/publish fiddle- private or public

  • Remote debugging (if logged in)

  • Real time collaboration with tracing

  • Collaborators have name, image and tracing/editing color

  • Chat

  • Voice call (experimental, didn’t get it working unfortunately)

  • Profile information- save your fiddles, public or private

  • Prettifyer

  • JsLint

  • JS panel shows matching opening/closing brackets etc. Some error feedback on missing closing tags and missplaced elements.

  • JS syntax highlighting to some degree

  • CSS panel highlights some invalid keywords, false positive on some.

Features- what I use it for

Write and execute code

Separate panels for JavaScript, styles, html and output. This encourages separation of the three, which is considered best practice, but a practice that many developers fail to follow.

Unit testing with for example QUnit and Jasmine

Why? Code should consist of separate components that are testable, and by breaking up the code and testing it in a separate environment it forces decoupling.

Example:

A QUnit example with js fiddle I made

Jasmine js example I made

Debugging

When you are breaking out the code into separate functional parts and combine it with a simple interface, great debugging tools and remote debugging you get excellent debugging conditions. The remote debugging is not the best, but appreciated. Today, with the latest browsers installed I could only make it work in the nightly Firefox with some but not all devices. Aside from the remote debugging you also have a prettifyer, and jsLint- which I must say is a neat thing to have and use. JavaScript is notoriously annoying to debug and a busy IDE can make it harder. If you want to do differential debugging (I have post coming on the topic) you can use two fiddles for comparison and isolate the error in the non working fiddle.

Remote debugging in jsfiddle Remote debugging in jsfiddle

Collaboration

Several users can sign up and work on the same fiddle simultaneously. You can see where they are in the code, there is a chat for quick communication, or the new feature that is still in beta at the moment, which is using voice. Users can select profile picture, editing color for tracking and username.

Why? I always seem to have somebody invited in my fiddle, even if they aren’t active all the time. I can get feedback, they can show things, execute the code and ‘fork’ the code to continue on their own example based of mine. They can modify resources and references, and pairprogramme with me without having to be in the same room.

collaborating in jsfiddle collaborating in jsfiddle

Codereview/kata

Related to collaboration is code review and katas/dojos. With the automatic versioning you have the before and after, and the communication tools allow you discuss the review, and change things together.

Here is one particular project that had undergone some code reviews,and is still a work in progress. Its based of one of my first knockout implementations and I thought it would be fun to see how much I can improve the code. Its not done,so feel free to review it. The CSS is of course just for fun, I was testing out some effects- just as with the splat example in the CSS example further down. Don’t forget to read: Should I do Katas/Dojos?

A Kata/Dojo project A Kata/Dojo project

Versioning

As mentioned earlier you have versioning, don’t forget to update often!

jsfiddle-iris-classon10

Tidy and lint code

You can clean up the code (tidy it) and run jslint as well, not a big feature- but a handy one when combined with the rest

jsfiddle-iris-classon5

Provide examples for forums, blogs

Some forums have horrible code formatting, MSDN is one of them, and the JS forum is not an easy read. And sometimes you just want to share something others can continue building on, or that you want to add to later. You can also embed the snippets on your website or blog, and as a demonstration tool you allow the attendees to have a snippet they can immediately execute, fork and extend.

Working on that CSS magic

Testing CSS tricks to confirm that I get the effect I want in JSFiddle has been something I’ve done a lot. Be that fancy art, or getting the fluid layout right with Twitter bootstrapper, you can work on one piece at the time using JSFiddle.

a CSS splat a CSS splat

Testing new frameworks

As you saw in the examples above I’ve had a play around with various frameworks in JSFiddle before committing to adding it to a project. Simply reference the scripts and style sheets and you are good to go. Save the fiddle for later, and compare frameworks and implementations.

Me trying out Raphael for the first time:

Raphael js example I made in jsfiddle Raphael js example I made in jsfiddle

How do I make a public fiddle private (after being public)?

In the options section on the left side of the fiddle (in the editor) remove the title and description for the fiddle. Update and set the fiddle as a base. The fiddle is now private, but can be found if another person has the URL.

Why not just create a gist?

2013-10-14 14-57-26

If you aren’t familiar with the term gist it’s simply one file or a collection of files that are repositories either public, private, logged in or not. The files are versioned, just as JSFiddle (done so automatically- but when logged in with JSFiddle you can set any version to be the new base). Repositories can be forked and are git-able. Gists do not provide real time collaboration, debugging, execution or interaction between files. Gists and fiddles serve different purposes that overlap, and I use both extensively.

Comments

Leave a comment below, or by email.
Clay Shannon
10/15/2013 8:14:33 AM
Very good article!

I may be naive or "out of the loop," but how does "< 3" equate to "love"? 
Dan
10/15/2013 9:48:50 PM
JSFiddle is kind of like the LINQPad of Javascript (or the reverse, not sure which came first).

Both are really awesome tools! 
Ben Surgison
12/12/2013 10:32:44 AM
I use jsFiddle all the time. I wouldn't mind fiddling you Iris. Add me on LinkedIn for more... http://www.linkedin.com/in/ajaxscape 
John Bryan
4/8/2014 5:58:47 AM
Reply to: Clay Shannon
It's a sideways heart. 
Piotr Zalewa
4/25/2014 8:47:35 AM
Fancy JSFiddle sticker? Email your post address to support [at] jsfiddle.net :) 
Iris Classon
4/26/2014 1:34:30 PM
Reply to: Piotr Zalewa
Oh yes I would LOVE some!! Ill email :) 


Last modified on 2013-10-14

comments powered by Disqus