Who made this?
- Piotr Zalewa is founder and developer of this tool
- He is currently a Web Developer at Mozilla Corporation (I believe)
- CSS,JS, and HTML Panel,execution panel
- Panel sizes are adjustable
- Collection of frameworks provided
- Separate files can be referenced by adding them
- Set document mode/variant
- Fiddle information (name description)
- Run (execute script)
- Update/publish fiddle- private or public
- Remote debugging (if logged in)
- Real time collaboration with tracing
- Collaborators have name, image and tracing/editing color
- Voice call (experimental, didn’t get it working unfortunately)
- Profile information- save your fiddles, public or private
- JS panel shows matching opening/closing brackets etc. Some error feedback on missing closing tags and missplaced elements.
- JS syntax highlighting to some degree
- CSS panel highlights some invalid keywords, false positive on some.
Features- what I use it for
Write and execute code
Unit testing with for example QUnit and Jasmine
Why? Code should consist of separate components that are testable, and by breaking up the code and testing it in a separate environment it forces decoupling.
Several users can sign up and work on the same fiddle simultaneously. You can see where they are in the code, there is a chat for quick communication, or the new feature that is still in beta at the moment, which is using voice. Users can select profile picture, editing color for tracking and username.
Why? I always seem to have somebody invited in my fiddle, even if they aren’t active all the time. I can get feedback, they can show things, execute the code and ‘fork’ the code to continue on their own example based of mine. They can modify resources and references, and pairprogramme with me without having to be in the same room.
Related to collaboration is code review and katas/dojos. With the automatic versioning you have the before and after, and the communication tools allow you discuss the review, and change things together.
Here is one particular project that had undergone some code reviews,and is still a work in progress. Its based of one of my first knockout implementations and I thought it would be fun to see how much I can improve the code. Its not done,so feel free to review it. The CSS is of course just for fun, I was testing out some effects- just as with the splat example in the CSS example further down. Don’t forget to read: Should I do Katas/Dojos?
As mentioned earlier you have versioning, don’t forget to update often!
Tidy and lint code
You can clean up the code (tidy it) and run jslint as well, not a big feature- but a handy one when combined with the rest
Provide examples for forums, blogs
Some forums have horrible code formatting, MSDN is one of them, and the JS forum is not an easy read. And sometimes you just want to share something others can continue building on, or that you want to add to later. You can also embed the snippets on your website or blog, and as a demonstration tool you allow the attendees to have a snippet they can immediately execute, fork and extend.
Working on that CSS magic
Testing CSS tricks to confirm that I get the effect I want in JSFiddle has been something I’ve done a lot. Be that fancy art, or getting the fluid layout right with Twitter bootstrapper, you can work on one piece at the time using JSFiddle.
Testing new frameworks
As you saw in the examples above I’ve had a play around with various frameworks in JSFiddle before committing to adding it to a project. Simply reference the scripts and style sheets and you are good to go. Save the fiddle for later, and compare frameworks and implementations.
Me trying out Raphael for the first time:
How do I make a public fiddle private (after being public)?
In the options section on the left side of the fiddle (in the editor) remove the title and description for the fiddle. Update and set the fiddle as a base. The fiddle is now private, but can be found if another person has the URL.
Why not just create a gist?
If you aren’t familiar with the term gist it’s simply one file or a collection of files that are repositories either public, private, logged in or not. The files are versioned, just as JSFiddle (done so automatically- but when logged in with JSFiddle you can set any version to be the new base). Repositories can be forked and are git-able. Gists do not provide real time collaboration, debugging, execution or interaction between files. Gists and fiddles serve different purposes that overlap, and I use both extensively.