/fiddlesalad

An online playground with an instantly ready coding environment. Combine language preprocessors, CSS, HTML and JavaScript to create and share coding examples.

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

Fiddle Salad Live Web Development

The web developer's wonderland that makes everyday tasks enjoyable, a live editor for front-end languages

fiddlesalad.com

Current Features

  • Views
    • Results (live)
    • Compiled output (live)
      • CSS tooltips
      • jQuery API links
  • Auto-complete
    • CSS keyword
    • HTML attributes
    • JavaScript context
  • Saving
    • Local history
    • Diff of different revisions
  • Converters
    • JS -> CoffeeScript
    • HTML -> Jade
    • HTML -> HAML
    • CSS -> SASS
    • CSS -> SCSS
  • Import from existing site

Supported Languages

  • HTML

    • HAML
    • Emmet (input method)
    • Jade
    • CoffeeCup
    • Markdown

  • CSS

    • SASS and SCSS with Compass
    • LESS
    • Stylus

  • JavaScript

    • CoffeeeScript
    • TypeScript
    • Python
    • Roy
    • Opal

Getting the Code and Running it

git clone git://github.com/yuguang/fiddlesalad.git
git clone git://github.com/yuguang/cloud-ide-templates.git
mv cloud-ide-templates templates
git clone git://github.com/yuguang/django-cloud-ide.git
cd django-cloud-ide
python setup.py install
cd ../fiddlesalad
mv settings.default.py settings.py
pip install -r requirements.txt (see http://guide.python-distribute.org/installation.html if you don't have pip)
python manage.py syncdb
python manage.py runserver

Open http://127.0.0.1:8000/ in the browser.

Alternatively, Use Virtualenv

A virtualenv setup script is included for Linux

git clone git://github.com/yuguang/fiddlesalad.git
git clone git://github.com/yuguang/cloud-ide-templates.git
mv cloud-ide-templates templates
cd fiddlesalad
mv settings.default.py settings.py
./setup-virtualenv.sh
dev-python/bin/python manage.py syncdb
dev-python/bin/python manage.py runserver

Installation Notes

###Compiling CoffeeScript from the static/js/ folder run

coffee -cw -o ./compiled-coffee .

###Compiling Less run less compiler from the command line or install SimpLESS

###CoffeeScript Setup on Ubuntu sudo apt-get install coffeescript cd static/js/ coffee -cw -o ./compiled-coffee ./

###Initialize Database to Save Fiddles python manage.py loaddata language_fixture.json

Developer Documentation

The wiki has information on the overall design as well as UML diagrams.

Contribution Guidelines

Features ready to be implemented:

  • Auto-semicolon insertion for CSS style languages
  • Hide window title bar option
  • Color picker when hovering over CSS color values in editor
  • Homepage with vertical orientation and categorized languages
  • Scroll source to current cursor position in editor
  • More Languages

###Foreign language Translations Django's i18n middleware will be used, but only the translations for buttons and labels are needed.

  • Spanish
  • Russian
  • German
  • Japanese
  • French

###Syntax Highlighting Get started by reading the CodeMirror manual. The modes are under static/js/codemirror/mode/.

###Language Editor To add a language:

  1. Modify the LANGUAGE and LANGUAGE_CATEGORY settings in fiddle-configuration.js.
  2. Write a class in fiddle-engine.coffee that inherits (Style/Program/Document)Editor
  3. Add the class to root.editor, which is globally scoped, for dynamic instantiation
  4. Create the compiler (aka worker) in static/js/compilers/ with the sendResult and sendError functions. The compiler reads input from e.data for style and program editors and e.data.code for document editors

###User Interface ####Home The Homepage uses Twitter Bootstrap's fluid grid system to align buttons. The main files to modify are templates/home.html and static/css/home.less.

####Fiddle All UI elements are generated using Knockout and jQuery UI. Knockout templates are in templates/templates.html, with the View Model in static/js/model.coffee. Main stylesheet is static/css/fiddle.less.

Contributors

Thanks to