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…


4 Responses to “jsFiddle Sortable Items”

  1. zalun
    19. January 2011 um 07:40

    http://ideone.com/ is the site like that you’d like to create

  2. Zevan
    19. January 2011 um 07:51

    awesome! I’ve actually seen this site before but lost the link. Really nice how many languages they supprt. There is also http://jsbin.com/ … but I don’t really like that one as much as jsFiddle.

    Also, my editor does lots of stuff, manages files, find and replace, has built in templates and other nice features.

  3. zalun
    20. January 2011 um 01:02

    The new jsfiddle will (at least I aim to) have ability to switch editors in user’s profile – if your’s will be easily “embedded”, framework agnostic (or depending on MooTools) it might be connected.

  4. Zevan
    20. January 2011 um 15:22

    That sounds like a really great feature. I didn’t realize that you were one of the devs on jsFiddle. Congrats man… jsFiddle is awesome! :). The actual editor part of my tool is just codemirror with some simple ui for find and replace, a hex color selector and font size drop down. The main cool features are a simple file browser that is connected to a single folder on your web host and an auto test feature which refreshes a preview window if you stop typing for more than one second (this can of course be turned off). I’m excited about using it to teach with because of codemirror’s ability to auto-format html, php, css and javascript all together. Not that you would normally have all those things scrunched in one file, but for small in-class demos with one or two css definitions, one javascript event etc… it can be very nice.

    I’m looking forward to the new jsFiddle and will keep you posted about my editor :)

Leave a Reply

Spam protection by WP Captcha-Free