jsFiddle: Test your code snippets live!

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

  • themecreator

    Just checked the link out, and it looked really nice! I'm not very much into the javascript language, but for html and css, it seems like a very useful tool. And the thing with sharing with friends must be one of the most useful features! Lots of times, that's just what which is missing.

    Thanks for the tip! Have you signed up for the alpha?

    – Themecreator

    • http://technoheads.org Salem

      Isn't it fantastic? I mean, I'm still learning JavaScript, but this is a *

      great* learning tool. Plus, you're absolutely right; you can test your

      stylesheets (It'll actually let you import your own stylesheets in addition

      to the CSS you have).