jsFiddle: Test your code snippets live!

X

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic, or get updates by email if you'd like.

I am slowly, slowwwlllly coding my own mobile version of this site. I mean, there’s already a mobile version of this site (just visit it on your iPod) but it’s not exactly what I’d like. The one I’m making is not fantastic by any stretch of imagination; in fact, its little more than a glorified RSS feed. But I had a stupid issue; the images from the posts in my site were really, really too big for the iPhone’s screen, and since I was using a fixed width page (i.e. you can’t zoom in and out), this was a bit of a problem.

jsFiddle

After poking around for answers to this question, someone pointed me to a link on jsFiddle.net that contained code to apply certain properties to all images above a certain size. The code was neat, but what impressed me more was the site it was presented in. I mean, jsFiddle is actually really cool, if you’re someone who’s into web design, or if you just want to play around with javascript.

The site is simple and split into four panes; one  for your html code, one for CSS, one for your javascript, and one to show you what the finished product looks like. To preview your site, you simply click the “run” button at the top of the site. There are no user accounts, so every project gets its own url (mine being http://jsfiddle.net/YynnY/). Every save, consequently, is a number appended to that url (so the fifth revision of my project would be http://jsfiddle.net/YynnY/5/). It’s very intuitive. Because the URL’s are short, it is very, very easy to share code with people.

What you can expect

jsFiddle allows you to play with a bunch of js libraries, like MooTools and jQuery, and has a few things for convenience, too, like indenting messy code and things like that. I’ve gotten a sneak peak at some future features, like the ability to log in and save your code, and the ability to have an updating preview on a mobile device (PERFECT for me). I really can’t wait to see where this site goes from here. It’s truly an invaluable tool. Plus, it’s free. So, if you’re a web developer of any sort, check this site out.

Examples

Twitter Feed
Fade Out
Delayed Tracking

jsFiddle.net