jsFiddle Sortable Items

jsFiddle is one of my favorite sites at the moment. It is a small in-browser coding enviorment that lets you write javascript, html and css. With a single click you can include some of the most popular js frameworks like jQuery, Mootools, Raphael, Dojo, Prototype, YUI etc.. You don’t even need to sign up to start creating “fiddles”. Here is something I created to help answer a question on stackoverflow. It’s a basic implementation of drag and drop sortable items:

Click the + sign to edit this fiddle…
jsFiddle isn’t so hot in IE fyi, it works but there are some weirdnesses.

You can view all the source right in this embeddable iframe that jsFiddle generates for you.

One of the things I was most impressed with the first time I saw jsFiddle was the syntax highlighting and auto-formatting. After browsing through the source I realized that jsFiddle uses a library called codemirror and since Codemirror’s auto-formatting for js has a minor bug, it uses js beautifier for javascript auto-formatting. Codemirror is really nice, I recommend checking it out.

I found myself using jsFiddle every time I was away from home and wanted to do a quick proof of concept… after a little while I decided I’d like to create my own in-browser code editor, so I spent a little time over the christmas break building one. I’ll probably release an alpha in the next couple of weeks. I’m going to try using it during my html5 and web programming classes and see how it goes. The in-browser editor that I created is different from jsFiddle… mine is intended to be installed on a web host in a password protected directory, basically giving you access to the server side languages…