jsFiddle – My Number One Tool

Posted by · March 19, 2012 9:44 am

On the day I achieved Savant status (10,000,000 points) at Experts Exchange I am writing this blog entry to share the most useful tool in my toolbox.

According to the creator Piotr Zalewa it is a

…playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets built from HTML, CSS and JavaScript

With the possibility of choosing any of the most popular frameworks and add plugins an CSS from elsewhere, it is an incredible tool for

  • trying out a hypothesis
  • visualising a jQuery plugin
  • debugging code snippets
  • giving a demo of an answer – public or not

and much more.

If you are asking JavaScript related questions at EE, the experts will be very happy to see a fiddle with your specific issue, they can then fork it at a click of a button and test a solution without disturbing your initial code

When you load jsFiddle.net, you get a view similar to this – the three entry areas and the one output area will be empty and a few buttons missing – they will appear if you have signed up and are signed in – but you are ready to go. Since I use jsFiddle exclusively to test jQuery, the following description will be largely jQuery oriented, but any of Mootools, jQuery, Prototype, YUI, Glow, Dojo, Processing.js, ExtJS, Raphael, RightJS, Three.js, Zepto, Enyo, or plain JavaScript is supported

jsFiddle example

Example of a jsFiddle

  1. Choose placement of code – whether the code you want to execute should be executed onload or just live in the head of generated content.
    If you include stuff like window.onload or $(document).ready… your code goes in the head.
  2. Choose the framework you want to run – it is a bit of a scroll to get to No Library (pure JS) if you do not want to use any of the included frameworks
  3. Paste or write your html, JavaScript and/or CSS in the designated areas – a tip when pasting, use the mouse instead of ctrl-v to paste and if you paste from another site like EE, make a little detour to a plain text editor or you will likely see the code being formatted without linefeeds
  4. Hit [> Run] or ctrl-return to see the code executed – or open the console if the code does not produce any visible output – console.log() is easier on the eye and mouse than alert…

 

Some more tips:

  • Sign up and sign in – it will give you the possibility to save your fiddles as public and gives you a dashboard for the rest so you can find them again
  • Giving a fiddle an title in the Info accordion will make it public (assuming you are signed in)
  • You can add any external CSS and JavaScript to your fiddle using the Add resources accordion – very useful for plugins
  • There is some Ajax support – I have however not yet found a file I can load without using the extended Ajax calls instead of .load() and .get()

I will leave you with some of my public fiddles and hope my first Expert Bloggers post has intrigued you and made you aware of this excellent tool for future use

  1. Using jQuery grep to add and remove specific items from object array
  2. Tablesorter with custom click handling – notice the external library
  3. TZ Posix to text conversion (no library)

Enhanced by Zemanta