Stunning Examples of using JsFiddle

JsFiddle is an amazing tool that is accessible anywhere via a browser. It allows you to rapidly create demos, examples, bugs, and many other web-based applications and sites. I would imagine that many amazing new ways to use the web will have their start inside a “fiddle”. There are many other sites which have discussed jsFiddle, so I’ll let you explore those first if you like:

And we’re back. I hope you know now after reading a bit about this tool just how amazing it is. I will often fire up jsFiddle just to play around with some idea I have for YUI, or test out aspects of CSS3 animations. Many other amazing developers have also come up with some insanely great examples of using jsFiddle. Let’s go through a few:

Lindsay S. Kay: (webgl)

Anthony Pipkin: (bubble animation)

fauxparse: (web based tower defense!)

sidonaldson (flaming text)

mootools (all their demos)

http://mootools.net/demos/

Sebastien P. (rotating christmas tree)

MrNibbles (amazing canvas animations)

loleg (traffic game using canvas)

GameQuery demos are hosted via jsFiddle:

http://gamequery.onaluf.org/tutorials/1/step1.php

HighCharts examples are used via jsFiddle:

http://www.highcharts.com/

js1k demo (3D Christmas tree cloned from original)

CSS3 – rotate text:

Google Maps:

I heard lots of feedback when I sent out the word to find some great examples of using jsFiddle. Many developers use it to play with ideas, try out some new technique, or to post examples for browser bugs in forums. One of the most empowering features of jsFiddle for me is that little “fork” button. Its like collecting baseball cards, only both you and I get a copy! You can dig into an example and figure out how it works on your own time, and even branch off of your own work to try out variations or enhancements. Myself I use it at least once a day to try out some idea or something. How do YOU use it? Do you have some amazing example of using jsFiddle that I’ve missed here? Please let me know in the comments so I can make this article better, and also highlight your hard work!

  • http://openconcept.ca Mike Gifford

    Those are great! Thanks for posting them!

  • http://thomasburleson.myopenid.com/ ThomasBurleson

    Check out these jsFiddles that uses SyntaxHighlighter and custom CSS to self document experiments with jQuery
    - http://jsfiddle.net/ThomasBurleson/RTLr6/embedded/result/
    - http://jsfiddle.net/ThomasBurleson/3SXtf/embedded/result/

  • http://www.marcellokabora.com/ Marcello Kabora

    Super cool !! But i need to export this in my document How can I do!? 

    http://jsfiddle.net/marcellokabora/EGtz7/

  • Hetal Jani

    nice
     

  • IndiAdamJones

    Adam from http://megabotix.com thanks for the post on jsfiddle. I think it’s super awesome, but I don’t use it once a day! It fills a perfect niche for web designers. I have check in a while but, I thought kodingen was awesome too! Nice write up! Your tone is smart, without being condescending. Nice post.

  • Ron Eaglin

    I teach Javascript – my lectures are at https://cop4813eaglin.pbworks.com/w/page/34521907/COP%204813%20Lectures – there are quite a few lectures on Javascript Animation and I have a Fiddle for each one – great way to make the code I use in the lectures available to the students..

  • shinde sagar suresh

    Google map according to our addess

  • http://bubencode.com/ bubencode

    Thanks for sharing these awesome JavaScript examples!