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