I did come across JS fiddle couple of months ago and didn’t find a meaningful use. So I left it. Now after reading some useful article from Chris Coyier I realized the power of jsFiddle.
Some worthy examples:-
- http://jsfiddle.net/dd454/20 (Code)
- http://jsfiddle.net/dd454/20/show/ (Demonstration)
You might have guessed so far how we can use it for our own ease. Let me explain a more for your ease.
The jsFiddle environment:-
Once the site is loaded, web page seems divided into various sections. The left portion of the page is the menu area where you can configure the jsFiddle environment. The main section of the site (on the right) is divided into four areas:
CSS: Enter CSS to be applied to the HTML used in your tests. It is placed between <style> elements in the header portion of the page.
Working with the jsFiddle interface
The top of the page includes a line of buttons to use some of these features. These buttons include:
Run: Executes the code entered in the areas on the page and display the results in the output area.
Creates a new example using the current code as the base.
Reset: Clears all the areas of the jsFiddle interface.
Share: Allows you to share code from the jsFiddle page with other users. The options include Facebook and Twitter, it and provides a link and the code to embed it on a website (for example, in a blog).
The left pane of the jsFiddle interface allows you to set up the development environment. The following list provides a sample of the available features:
Info: Enter a title and description that are important when saving/sharing. In addition, you can specify the body tag and DTD utilized.
Examples: This selection makes it easy to get up and running with the tool so you can get a feel for its features and how it may be used.