The jsFiddle environment
Getting up and running with jsFiddle is as quick as typing its address into your browser. Once the site loads, you are presented with a page divided into various sections. The left portion of the page is the menu area where you 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.
Figure A shows jsFiddle loaded in Internet Explorer 9 with empty code panes.
The default interface of the jsFiddle site (Click the image to enlarge.)
Working with the jsFiddle interface
Putting jsFiddle to use is as simple as loading the site and entering code in the appropriate areas of the page. The jsFiddle interface provides plenty of features to assist in your development. 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.
- Fork: 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.
The many features provided by the jsFiddle interface makes it relevant to almost all Web application developers. Figure B shows one of the examples — Delayed Mouse Tracking — which uses the Processing.js library. Additional HTML and CSS has been added.
Using one of the examples available in jsFiddle (Click the image to enlarge.)
The jsFiddle site brands it as a Web playground, and I can’t think of a better tagline because:
- it embraces the social element of the Web by making it easy to share; and
- it seems like a perfect place to answer those pesky development questions and quickly share the results – there’s no need to create scrap projects or files.
This is a hosted application, so performance can degrade during peak usage. This has not caused problems for me, but hopefully more backend resources (aka servers) will be available as jsFiddle usage increases. The jsFiddle blog allows you to keep up with these issues.
Check out jsFiddle today, and you will quickly see its power for rapid prototyping and testing.
Keep your engineering skills up to date by signing up for TechRepublic’s free Software Engineer newsletter, delivered each Tuesday.