High-level overview of jsFiddle, a JavaScript sharing and prototyping facility.

1. Let’s unRiddle jsFiddle
Roark Howard
04-Apr-2013
For professional clients / qualified investors only

2. Origins
Invention is the mother of necessity. . .
“The idea came while I was chatting with MooTools developers on IRC #mootools. We were helping new
people with JavaScript issues, using code which would fit in one line. Soon there was a question which was
too complicated for a "one-liner". Answering it would involve opening an editor, creating an HTML file with
all necessary tags and in the end opening it in the browser. I thought there's too much burden and the
question remained unanswered. From that moment I knew it should be done on the web and the next day
the prototype was ready.”
Inventor: Piotr Zalewa (http://webdev.zalewa.info/)
2

3. Purpose
Share and share alike. . .
“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. Using this approach, JavaScript developers can very easily isolate bugs. We aim
to support all actively developed frameworks - it helps with testing compatibility.”
--Piotr Zalewa
3

4. jsFiddle UX & D
Face the music. . .
Interface designer: Oskar Krawczyk (http://nouincolor.com)
4

5. Use
The sky is the limit. . .
jsFiddle can be used to prototype JavaScript at any level of intricacy – from simple to complex.
•Test jsFiddle – Pure JS: http://jsfiddle.net/rhoward/EGVVW/
•Test jsFiddle – jQuery: http://jsfiddle.net/rhoward/GHNLj/
•HighCharts Demo: http://jsfiddle.net/rhoward/JvJ6C/1/
•Slider Gadget for CORI: http://jsfiddle.net/rhoward/RGBST/1/
•SlideShare Demo – Original: http://jsfiddle.net/rhoward/LYhpa/
•SlideShare Demo – Wrapper: http://jsfiddle.net/rhoward/vw3Xh/
5

6. Resources
The more the merrier. . .
•http://jsfiddle.net/
•http://davidwalsh.name/jsfiddle-interview
•http://webdev.zalewa.info/portfolio/
•http://nouincolor.com/
•http://cavica.com/using-jsfiddle-to-write-better-javascript/
•http://andrewwooldridge.com/blog/2011/03/16/stunning-examples-of-using-jsfiddle/
•http://ajaxian.com/archives/jsfiddle
6

7. Conclusion
Knock yourself out. . .
jsFiddle is a useful tool – both for work and play.
7