zhouzhou360 / fiddlesalad

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

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
  • Eco (Browserify nodejs module)
  • Traceur

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

• Tom Wilson for the CoffeeCup compiler
• Lorna Qin for redesign