My contemplations and diurnal novelties are publicized here

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.


    JsFiddle 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 build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. All this statement is useful if you are unable to use the system or don’t know what it can achieve so here are few live demonstrations:-

Some worthy examples:-

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.

HTML: This area allows you to enter HTML to be used in your tests. By default, it will appear between <body> elements on the page unless overridden by options in the left pane. It works directly with the CSS and JavaScript entered in their respective areas. JavaScript entered within <script> elements may be entered here as well.

JavaScript: JavaScript source is entered in this area. It appears within <script type=”JavaScript”> tags in the header portion of the page. The options on the left allow you to choose which libraries/frameworks are used, so the code in this section does not have to include those.

Output: The results of executing the CSS, HTML, and JavaScript entered into the sections 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.

TidyUp: Cleans up your JavaScript code by indenting code blocks.

JSLint: Uses the JSLint tool to perform static code analysis of the code in the JavaScript area of the page.

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:

JavaScript placement: The first dropdown defines where the JavaScript code is placed and executed. The default is onLoad, which means it is executed via the web page’s onLoad event. Other options include placing it in the page’s header or body.

JavaScript library: The second dropdown allows you to use one of various JavaScript frameworks, which include MooTools, jQuery, Prototype, YUI, and much more. Also, it supports the various versions of these tools. This is a great feature because you can play with these libraries without downloading and setting up your own environment.

Panels: The jsFiddle interface includes the three code areas, but there are options for the CSS and JavaScript areas. You can choose to utilize SCSS instead of CSS and use CoffeeScript instead of JavaScript.

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.



Comments on: "Getting started with JS Fiddle" (1)

  1. […] JsFiddle is a playground for web developers, a tool which may be used in many ways. Check my article Getting started with JS Fiddle […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: