The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 4,267 other subscribers

Archive for October 5th, 2023

Publishing a Github Gist to JSFiddle | Toolbox Tech

Posted by jpluimers on 2023/10/05

I like JSFiddle, but rather keep source code under my own version control.

I was curious, so queried [Wayback/Archive] gist as jssfiddle – Google Search and found [Wayback/Archive] Publishing a Github Gist to JSFiddle | Toolbox Tech

It has better steps than the official documentation at these links:

  • [Wayback/Archive] Pass response directly from a Github repo – JSFiddle Docs
  • [Wayback/Archive] Display fiddle from a Github repository – JSFiddle Docs

    Demo Directory/

    demo.js
    demo.html
    demo.css
    demo.details
    • demo.[ js | html | css ] contains fiddle code for the specific panel
    • demo.details is a description of the demo written in YAML
    ---
    name: Name of the Demo
    description: Some description, please keep it in one line
    authors:
    - John Doe
    - Jan Wisniewski
    resources:
    - http://some.url.com/some/file.js
    - http://other.url.com/other_filename.css
    normalize_css: no
    load_type: d
    ...
  • [Wayback/Archive] Display fiddle from Gist – JSFiddle Docs

    Read a demo from Github Gist and present it as a fiddle.

    Gist files structure

    fiddle.js
    fiddle.html
    fiddle.css
    fiddle.manifest
    File name
    Description
    fiddle.[js/html/css]
    Contains fiddle code for the specific panel
    fiddle.manifest
    YAML description of the Gist for JSFiddle to parse
    Manifest file example
    name: The Name of the Fiddle
    description: Some description, please keep it in one line
    authors:
      - John Doe
      - Jan Wisniewski
    resources:
      - http://some.url.com/some/file.js
      - http://other.url.com/other_filename.css
    normalize_css: no
    wrap: bpanel_js: 1
    panel_css: 1
    Manifest fields
    • panel_html – Language for HTML panel. Accepts:
      • 0 – HTML
    • panel_css – Language for CSS panel. Accepts:
      • 0 – CSS
      • 1 – SCSS
    • panel_js – Language for the JS panel. Accepts:
      • 0 – JavaScript
      • 1 – CoffeeScript
      • 2 – JavaScript 1.7
    • resources – List of external resources.
    • name – Fiddle title
    • description – Fiddle description
    • normalize_css – Normalize CSS by loading normalize.css before any CSS declarations.
      • yes – normalize
      • no – don’t normalize
    • wrap – Set the JS code wrap. Options:
      • l – On load
      • d – On DOM ready

–jeroen

Posted in Development, DVCS - Distributed Version Control, gist, GitHub, JavaScript/ECMAScript, JSFiddle, Scripting, Software Development, Source Code Management | 1 Comment »