How to display Fiddle from Gist

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.

Transcript

1. How to display Fiddle from Gist @imehr Mehran Mozaffari Created by: 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. 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. The goal 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 and then... STEP 2 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. Allowed file names • fiddle.js • fiddle.html • fiddle.css • fiddle.manifest • fiddle.response.html CSS HTML JAVASCRIPT AJAX RESPONSE / PAGE RENDER INFO AND RESOURCES 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. 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/{framework}/{version}/{gist_id}/ Making the fiddle URL http://jsfiddle.net/gh/gist/mootools/1.2/606699/ Saturday, 3 March 12
22. 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/{framework}/{version}/dependencies/{dependencies_list}/{gist_id}/ The fiddle URL with extra option http://jsfiddle.net/gh/gist/jquery/1.4.4/dependencies/lint,ui/606699/ 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. http://jsfiddle.net/gh/gist/mootools/1.2/606699/ https://gist.github.com/606699/ https://github.com/jsfiddle/jsfiddle-docs-alpha/blob/master/docs/use/gist_read.rst http://doc.jsfiddle.net/ http://jsfiddle.net/ http://mehrjs.com @imehr Created by: Mehran Mozaffari Resources Saturday, 3 March 12