| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.

View
 

JSFiddle

Page history last edited by Eva Warren 7 years, 2 months ago

JSFiddle Review| @jsfiddle

by Eva Warren, September 14, 2013

Description

 

JSFiddle is a free online application written by the women and men at Moo Tools. This tool allows users to test both the interaction between JavaScript, CSS, and HTML as well as the individual language and how it will be displayed in a browser. This is a useful application because it bypasses the need to delve into full-fledged front-end programming, enabling you to see quick results rather than going back and forth between your editor and browser.1It’s also extremely convenient for troubleshooting any problems you experience in your code. With its sharing feature, you are able to send a link to a collaborator, take a full screenshot of your code, or embed it on your webpage.

 

Access

 

The tool is completely free and can be accessed here

 

Sample Usage

 

What I came up with: http://jsfiddle.net/H3zcz/

Something that annoyed me:

Tips, tricks, and tutorials

 

It's a pretty straight-forward tool if you have a basic understanding of the coding languages it's centered around. Even if you're a beginner, it can still be a great way to practice since the results are displayed instantly when you "run" your code. 

 

YouTube Tutorials:

http://www.youtube.com/watch?v=Iw4f-yRf7RU

 

 

 

 

What the Tool Does Well

 

  • JSFiddle is utilitarian in its interface which I think many if not all programmers will appreciate. It's very straight-forward in what it can accomplish.
  • As previously stated, it's a great tool to use if you need to see quick preview from the code your testing or trouble-shooting.
  • It's collaborative feature is also very appealing to those who need help on their code or are working in a group for any particular project. 
  • "Tidy Up" button allows the user to organize her or his code in each pane
  • "JS Hint" button will show the programmer which line(s) of code may contain errors with suggestions on how to fix the error 
  • Has an option for Keyboard Shortcuts in the bottom left-hand corner 
  • Offers of JS-based Frameworks (such as Jquery) 
  • The site even has a jobs listing page 

 

What it Does Poorly

 

  • Content panes are not editable by the user; perhaps a more interactive approach would better suite some users 
  • Error messages/suggestions for fixes are only applicable to the JavaScript pane, however other errors within CSS and HTML still get highlighted 
  • Does not use intelli-sense for HTML, CSS, or JavaScript

 

What happens when you...

Does the tool have any instances of unintended uses that the company has had to speak to? 

 

Additional Resources

 

Sources:

1: http://cavica.com/using-jsfiddle-to-write-better-javascript/#continue

2: http://visualstudiomagazine.com/articles/2012/01/10/easy-web-development-with-jsfiddle.aspx

 

Similar Applications: 

http://codepen.io/pen/

 

Comments (0)

You don't have permission to comment on this page.