Jsfiddle is a great tool to try js/css/html codes online and sharing those codes with other developers. In this slide I go through the process of converting a Gist (gist.github.com) to a fiddle. I explain the api behing Jsfiddle to create a multi files gist and then create a fiddle on the fly to be able to try the code. http://mehrjs.com

1. How to display Fiddle
from Gist
Created by:
Mehran Mozaffari @imehr
Saturday, 3 March 12

2. How to display Fiddle
from Gist
Saturday, 3 March 12

3. How to display Fiddle
from Gist
Saturday, 3 March 12

4. The goal
Creating a fiddle on the fly and fill it with
some demo codes from a gist and be
able to try the code with all library
dependencies on Jsfiddle.net.
Saturday, 3 March 12

5. A multi files gist, hosted on gist.github.com
STEP 1
Saturday, 3 March 12

6. Just enter a URL with a very basic api
STEP 2
and then...
Saturday, 3 March 12

7. You will get a fresh new
fiddle filled up with all
codes, coming directly
from that gist and ready
to try in Jsfiddle.
STEP 3
Saturday, 3 March 12

8. Go to gist.github.com and create a new gist.
Saturday, 3 March 12

9. Go to gist.github.com and create a new gist.
This description
field can be
anything to
explain what this
gist is all about.
Saturday, 3 March 12

10. Go to gist.github.com and create a new gist.
The file names
in this gist are
important to
follow a specific
pattern.
Saturday, 3 March 12

11. Go to gist.github.com and create a new gist.
Allowed file names
• fiddle.js
• fiddle.html
• fiddle.css
• fiddle.manifest
• fiddle.response.html
Saturday, 3 March 12

12. Got to gist.github.com and create a new gist.
HTML CSS
Allowed file names
• fiddle.js
INFO AND • fiddle.html
RESOURCES
• fiddle.css
JAVASCRIPT • fiddle.manifest
AJAX
RESPONSE /
• fiddle.response.html
PAGE RENDER
Saturday, 3 March 12

13. Got to gist.github.com and create a new gist.
Allowed file names
Write your CSS
code here. This
code will be
used in CSS
pane inside the
fiddle later on.
Saturday, 3 March 12

14. Got to gist.github.com and create a new gist.
Click here and
add another file
to your gist and
name it
fiddle.html.
Saturday, 3 March 12

15. Got to gist.github.com and create a new gist.
This code will
show up under
HTML pane
inside the fiddle.
Saturday, 3 March 12

16. Got to gist.github.com and create a new gist.
Add another file
to this gist and
name it fiddle.js
and write all you
JS codes here.
This code will
show up under
Javascript pane
in fiddle.
Saturday, 3 March 12

17. Got to gist.github.com and create a new gist.
This would be
your JS code in
fiddle.
Saturday, 3 March 12

18. Got to gist.github.com and create a new gist.
fiddle.manifest
is a description of
the gist written in
YAML, the structure
is compatible with
the MooTools doc.
Saturday, 3 March 12

19. Got to gist.github.com and create a new gist.
fiddle.manifest
is a description of
the gist written in
YAML.
The content of this
manifest will show
up under info tab in
the fiddle.
Saturday, 3 March 12

20. Got to gist.github.com and create a new gist.
fiddle.manifest (in YAML format)
name: the title of this code or app
description: description about this code
authors:
- author 1
- author 2
- ...
resources:
- http://....link to a js file
- http:// ... link to a css file
- ...
normalize_css: yes / no
Saturday, 3 March 12

21. Making the fiddle URL
After creating a new gist with multiple files, you can easily run it inside a fiddle by using the following api. Just
enter the URL with the following pattern in your browser and all those files inside the gist will come together in
one fiddle.
http://jsfiddle.net/gh/gist/mootools/1.2/606699/
http://jsfiddle.net/gh/gist/{framework}/{version}/{gist_id}/
Saturday, 3 March 12

22. The fiddle URL with extra option
You can add an extra option to indicate all dependencies related to this gist codes. In order to indicate those
dependencies use a comma separated list of those dependencies as the following format:
http://jsfiddle.net/gh/gist/jquery/1.4.4/dependencies/lint,ui/606699/
http://jsfiddle.net/gh/gist/{framework}/{version}/dependencies/{dependencies_list}/{gist_id}/
Saturday, 3 March 12

23. How to display Fiddle from Gist
Saturday, 3 March 12

24. How to display Fiddle from Gist
Saturday, 3 March 12

25. Resources
http://jsfiddle.net/
http://doc.jsfiddle.net/
https://github.com/jsfiddle/jsfiddle-docs-alpha/blob/master/docs/use/gist_read.rst
https://gist.github.com/606699/
http://jsfiddle.net/gh/gist/mootools/1.2/606699/
Created by:
Mehran Mozaffari @imehr http://mehrjs.com
Saturday, 3 March 12