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
# initialize virtualenv (details skipped)
git clone git://github.com/yuguang/django-cloud-ide.git
cd django-cloud-ide
python setup.py install
cd ..
git clone https://github.com/clintecker/django-chunks.git
cd django-chunks
python setup.py install
cd ..
git clone https://github.com/clintecker/django-chunks.git
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:
- Modify the LANGUAGE and LANGUAGE_CATEGORY settings in fiddle-configuration.js.
- Write a class in fiddle-engine.coffee that inherits (Style/Program/Document)Editor
- Add the class to root.editor, which is globally scoped, for dynamic instantiation
- 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