• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How to display_fiddle_from_gist
 

How to display_fiddle_from_gist

on

  • 1,471 views

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 ...

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

Statistics

Views

Total Views
1,471
Views on SlideShare
1,469
Embed Views
2

Actions

Likes
1
Downloads
1
Comments
0

2 Embeds 2

http://mehrjs.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How to display_fiddle_from_gist How to display_fiddle_from_gist Presentation Transcript

    • How to display Fiddle from Gist Created by: Mehran Mozaffari @imehrSaturday, 3 March 12
    • 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 gist and be able to try the code with all library dependencies on Jsfiddle.net.Saturday, 3 March 12
    • 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...Saturday, 3 March 12
    • 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
    • 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 this gist is all about.Saturday, 3 March 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 YAML, the structure is compatible with the MooTools doc.Saturday, 3 March 12
    • 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
    • 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
    • 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
    • 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
    • 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-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