the-cc-dev/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