Web Development

jsFiddle: An online playground for your JavaScript, HTML, CSS

jsFiddle lets developers play with the three core elements of Web development. Check out this powerful application for rapid prototyping and testing.

Every developer has been in the situation where you have code or a design that you need to test quickly and possibly share with others. jsFiddle is the perfect solution; it provides a custom environment (based on user selections) to test (or fiddle with) your JavaScript, HTML, and CSS code right inside your browser. A quick tour of jsFiddle will give you a better understanding of what it provides and why you should use it.

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.
  • 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.
Figure A shows jsFiddle loaded in Internet Explorer 9 with empty code panes. Figure A

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.
  • 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, so the testing options are endless. 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.
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. Figure B

Using one of the examples available in jsFiddle (Click the image to enlarge.)

Web playground

The jsFiddle site brands it as a Web playground, and I can't think of a better tagline because:

  • it allows developers to fiddle with the three core elements of Web development (CSS, JavaScript, and HTML);
  • 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.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

2 comments
drlabeeb
drlabeeb

Please I need a complete free courses with authorized certificates to give them to my students in many fuclties and high institutes Thanks a lot for your care and time Dr.Eng: Labib Francis Gergis Egypt