An Interview with jsFiddle Creator Piotr Zalewa

By  on  

One of the great code sharing tools was pastebin. It was simple and straight-forward but quickly grew out of its usefulness. That's where jsFiddle comes in. jsFiddle is a fresh tool that not only displays the code and highlights it but also executes its code within the browser for even better debugging. The creator of jsFiddle, Piotr Zalewa, took a few moments to answer my questions about his awesome creation.

jsFiddle

Piotr, please share who you are, your areas of development focus, and who you are employed by.

I am a happy father, an aquarist and a web developer and I would like it to be in that order.

I have started my first commercial web development in 1996 in Poland, and now I am working for Mozilla on Add-ons Builder. The tool of choice is a mix of Django and MooTools.

For those who haven't heard of jsFiddle, explain what jsFiddle is, how it's used, and where the idea came from.

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript.

The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs. We aim to support all actively developed frameworks - it helps with testing compatibility.

The idea came while I was chatting with MooTools developers on IRC #mootools. We were helping new people with JavaScript issues, using code which would fit in one line. Soon there was a question which was too complicated for a "one-liner". Answering it would involve opening an editor, creating an HTML file with all necessary tags and in the end opening it in the browser. I thought there's too much burden and the question remained unanswered. From that moment I knew it should be done on the web and the next day the prototype was ready.

You've chose to create the jsFiddle interface with the MooTools JavaScript framework. Why did you choose MooTools?

At the time I was already using MooTools on a daily basis, it was natural to choose this framework. I think it is simply the best and I still hold it.

What were some of the early difficulties you ran into when you began coding the website?

The worst was stability - there was no caching and my old server was quickly running out of memory. The other thing was the URL naming convention, jsFiddle still suffers from some of the choices made on day one.

What was the succession / timeline of features you added to jsFiddle?

There were lots of ideas from the MooTools community, but adding new features is always a lot of fun. We are simply trying not to overcomplicate the UI. I think that new interesting features came in following order: ability to save versions, testing Ajax requests, framework dependencies, adding external resources, discussing fiddles.

How long did the first release of jsFiddle take? What problems did you encounter shortly thereafter?

The functional prototype was done in 4 hours, it was written in spaghetti PHP, allowed to save HTML/JS/CSS and was opening the result in a separate browser window. Naturally, I have changed the code since then. There was so much hype I hardly remember the problems I've encountered. The one that I remember (and which was hard to solve) was the Cookie security bug. Early versions allowed to steal Cookies from jsFiddle. Someone could steal my administrator password by writing a simple fiddle and asking me to take a look. But this is no longer the case. jsFiddle is in alpha stage, so it's still before the "first release".

What pieces of jSFiddle were easier than you thought they'd be? What turned out to be more difficult?

Adding custom caching was something which took two hours - I thought it will take few days. The most difficult was (and still is) planning, the way people use jsFiddle changes and we should predict it in the code, urls and design.

What difficulties did you run into when you opened jsFiddle to more JavaScript frameworks?

One problem is management, I am always late with adding new versions. Recently I upgraded 3 of them in one day YUI, Raphael and Dojo. The other is onDomReady event - I don't know all of the frameworks and finding a default usage of onDomReady command per framework happened to be not as easy as I thought.

What affect on performance did the website experience when your added the EMBED feature?

To be honest I don't see any effect, I need to log it properly though.

How many fiddles have been saved to date?

There is over 40,000 fiddles in 160,000 versions

What features do you see adding to jsFiddle in the near future? How about the far future?

Big things - search, user registering, dashboards and social features. That's something which will change jsFiddle for good. Ephemeral fiddles as default for guests - there is no need to have a fiddle solving an issue on IRC to have an eternal live. We have some ideas for the far future, these however depend on the way people will use jsFiddle.

The Beta release will generally be a big step forward, apart from the aforementioned features, jsFiddle will get a refined interface - this is being worked on very heavily, and it already looks amazing! http://tiny.cc/d290k

Who has been influential in helping you get the website coded, designed, etc.?

Oskar Krawczyk of http://nouincolor.com. He asked me once on IRC if I'd like him to design the UI. I think the next day I knew he is the right person to do it. Since then we are working closely together (not only on jsFiddle, but also on Mozilla Add-ons Builder and some minor projects). Every now and again Oskar adds little functionally enhancements to jsFiddle - discussions, sharing, etc.

On behalf of the MooTools team and everyone that uses jsFiddle, I'd like to thank you for your work!

You are very welcome. It's great to develop for such a responsive community.

A big thanks to Piotr for his time. If you have more questions, feel free to ask him within these comments and he'll answer them as soon as he has a moment!

Recent Features

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

Discussion

  1. /me bows to Piotr.

    Interesting and well made interview, kudos to Piotr and you, David! Do you accept donations for your aquarium though?

  2. It’s hard to quantify the impact that jsFiddle has had on our profession, much less on MooTools itself.

    The biggest change that I’ve noticed is in the MooTools users’ Google Group. Previously, someone would show up in our community and post “I can’t get {feature x} to work.” and our community would routinely reply, “it works. you’re probably doing it wrong. re-read the docs.” or, maybe, “post a link where we can see it.” These kinds of calls for help rarely ended with the visitor getting an answer; it’s just too tedious to help someone this way.

    But now, when people post, the reply is pretty universal: “create a jsFiddle and we’ll help you.” It’s a positive kind of reply – that we’re perfectly willing to help if you’ll put the code where we can interact with it. Our community can change just what they need to to let them see what they did wrong, or, sometimes it just turns out that they’ve found a bug for us.

    Speaking of which, bug reporting is also a million times better. Of all the things that have happened in the MooTools community since we began, jsFiddle has had the most profound impact on making our framework friendlier and easier to support.

    Thanks Piotr, Oskar, and everyone who pitched in to help make jsFiddle so awesome.

  3. Thanks for the interview David, love your blog (I’m studying http://davidwalsh.name/mootools-nodejs for tomorrow’s talk at http://londonajax.com/)

    @harald – it would have to be time donation :) maybe paypal has such a plugin.

    @aaron – thanks for this comment, without you and others early believers jsFiddle wouldn’t be where it is now

  4. Nice interview David.
    It’s awesome how much jsFiddle has grown since last year. I can remember at the beginning how clear it was the project for you: you really knew exactly what you wanted and how it had to be done.
    In no-time it has become one of the most useful and used tools on the web.
    Good job dude!

  5. As @Aaron said, jsfiddle changed drastically the way we help ppl on irc and mailing list. We now can give a much faster and better feedback on the problem and everybody feels happy :D.
    Thanks Piotr, Oscar and DW. You guys rock!

  6. Great interview.
    This has totally changed my way of testing snippets.
    I love the embed function, and I use it on my blog. This is the best way to show code, run it and let the reader change it.
    Thanks Piotr and the team!

  7. Klaus

    Thank you for jSFiddle!

    It even would work on the IPhone, but you you
    have to toggle the Sidebar.

    “jsFiddle toggle sidebar – [ctrl]+[shift]+[up arrow] – http://jsfiddle.net/

    11:32 PM Dec 1st via Ping.fm”

    This is no help, because there is no way to press
    all these buttons together…

    Klaus

  8. @klaus

    Have you tried using the draft? http://doc.jsfiddle.net/basic/introduction.html#draft I know it’s just testing, but it is like 99.9% needs. I might have to switch off the sidebar by default for iOS, ubt then there would have to be some sort of button created to show it again.

  9. Alex Margineanu

    Great interview.
    jsFiddle is a great tool, I love it. It makes web prototyping so much easier.
    Thank you for sharing jSFiddle with us!

  10. fgsdfgfds

    Jestesmy z Ciebi dumni :-)

  11. Manish Sonwal

    Great work… BTW is there any particular reason choosing mootools, i mean jquery would not be that bad either…

  12. rajesh

    Hi,
    I am new in this field,
    i want to know how to use the code posted in my own form
    http://jsfiddle.net/kralco626/E9XVr/53/

    as a try to use its doesnot show any effect.

    Thanks

  13. Gopi Sundharam

    I don’t remember how I survived without JSFiddle for all these years. I’ve been using it extensively in the last couple of years and it has made my life lot lot easier when designing/debugging anything related to client-side. Awesome tool!

  14. user

    hey nobody mention it’s jsfiddle ui is not that user friendly.

    the labels (HTML, JAVASCRIPT, CSS) on the upper right side blocking the scrollbar, and it’s really annoying.
    how come this mess goes to public though??
    it remember me with PHPMYADMIN earlier, i keep complaining over it, how come this one goes to the world, while i can make it much better than that.

    aaah there’s a major in my college which called “human-computer interaction”, guess some people need to pass it before being a great developer.

    • Anonymous

      For one, if you read the article, he says that it is still alpha software. Second, it is free and if you find it that frustrating to use, you can simply not use it. Third, if you think you can create better… do it. I’ll wait…

      … no? Thought so.

  15. Doug Gale

    The #jquery and #javascript IRC channels would be awful without jsfiddle. You can test, debug, change, and fix somebody’s problem in a matter of minutes, and have a nice link to post back to them. jsfiddle is great!

  16. I’ve created a service that allows you to build more complex JSFiddles by allowing you to include one jsfiddle in another. You can’t do this with straight JSFiddle due to a certain limitation with mime-types returned by the JSFiddle API. Problem solved here….

    http://youtu.be/dHlfQSLWZOg

  17. Cozzbie

    It was created in 4 hours!!! :( I am officially depressed. I can’t deliver this in three months…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!