Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to display Fiddle                      from Gist                               Created by:                        Mehr...
How to display Fiddle                      from GistSaturday, 3 March 12
How to display Fiddle                      from GistSaturday, 3 March 12
The goal                       Creating a fiddle on the fly and fill it with                       some demo codes from a gis...
A multi files gist, hosted on gist.github.com                           STEP 1Saturday, 3 March 12
Just enter a URL with a very basic api                       STEP 2                                       and then...Satur...
You will get a fresh new    fiddle filled up with all    codes, coming directly    from that gist and ready    to try in Jsfi...
Go to gist.github.com and create a new gist.Saturday, 3 March 12
Go to gist.github.com and create a new gist.       This description       field can be       anything to       explain what...
Go to gist.github.com and create a new gist.                                                 The file names                ...
Go to gist.github.com and create a new gist.                                                 Allowed file names            ...
Got to gist.github.com and create a new gist.                           HTML              CSS                             ...
Got to gist.github.com and create a new gist.                                                Allowed file names        Writ...
Got to gist.github.com and create a new gist.                                           Click here and                    ...
Got to gist.github.com and create a new gist.       This code will       show up under       HTML pane       inside the fid...
Got to gist.github.com and create a new gist.                                                  Add another file            ...
Got to gist.github.com and create a new gist.        This would be        your JS code in        fiddle.Saturday, 3 March 12
Got to gist.github.com and create a new gist.        fiddle.manifest        is a description of        the gist written in ...
Got to gist.github.com and create a new gist.                                                      fiddle.manifest         ...
Got to gist.github.com and create a new gist.                                               fiddle.manifest (in YAML format...
Making the fiddle URL         After creating a new gist with multiple files, you can easily run it inside a fiddle by using t...
The fiddle URL with extra option         You can add an extra option to indicate all dependencies related to this gist code...
How to display Fiddle from GistSaturday, 3 March 12
How to display Fiddle from GistSaturday, 3 March 12
Resources          http://jsfiddle.net/          http://doc.jsfiddle.net/          https://github.com/jsfiddle/jsfiddle-docs-a...
Upcoming SlideShare
Loading in …5
×

How to display_fiddle_from_gist

1,751 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

How to display_fiddle_from_gist

  1. 1. How to display Fiddle from Gist Created by: Mehran Mozaffari @imehrSaturday, 3 March 12
  2. 2. How to display Fiddle from GistSaturday, 3 March 12
  3. 3. How to display Fiddle from GistSaturday, 3 March 12
  4. 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. 5. A multi files gist, hosted on gist.github.com STEP 1Saturday, 3 March 12
  6. 6. Just enter a URL with a very basic api STEP 2 and then...Saturday, 3 March 12
  7. 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 3Saturday, 3 March 12
  8. 8. Go to gist.github.com and create a new gist.Saturday, 3 March 12
  9. 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. 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. 11. Go to gist.github.com and create a new gist. Allowed file names • fiddle.js • fiddle.html • fiddle.css • fiddle.manifest • fiddle.response.htmlSaturday, 3 March 12
  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 RENDERSaturday, 3 March 12
  13. 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. 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. 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. 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. 17. Got to gist.github.com and create a new gist. This would be your JS code in fiddle.Saturday, 3 March 12
  18. 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. 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. 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 / noSaturday, 3 March 12
  21. 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. 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. 23. How to display Fiddle from GistSaturday, 3 March 12
  24. 24. How to display Fiddle from GistSaturday, 3 March 12
  25. 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.comSaturday, 3 March 12

×