JsFiddle Tips And Tricks

Those of you that were at DevCamp Vancouver presented by Make Web Not War hear Burke Holland talked about JSFiffle. He did an awesome blog post about it that we wanted to share with you. Burke is an Evangelist for Kendo UI and he is building Instasharp. You can read his blog for more awesome content.

I did a quick 15 minute presentation on JsFiddle Tips And Tricks and I was surprised at how many people had not even heard of JsFiddle. I think 3 or 4 hands went up in a room of nearly 100.

Of course, you do have to account for the 75% of people who just don’t answer questions in a group setting. That’s cool. I’m that guy sometimes. Especially if I haven’t been paying attention to what you are saying.

So assuming 25% of you haven’t heard of JsFiddle, that’s unacceptable.

JsFiddle is a browser based application created by Piotr Zalewa for creating snippets of HTML/CSS and JavaScript that you can version and share with others. It’s good for so many things and I use it pretty much every day. I have a fluid application setup just for JsFiddle. I also made an icon for it. Which I copied from Google. Ok, so I didn’t “make” it – I resized it. Which coincidentally is about the extent of my design skills. Just right-click that nifty JsFiddle PNG to the left there and save it. You will get the full PNG with transparency.

With JsFiddle, you have no need to create scratch or throwaway projects just to build a POC or prototype some idea. The syntax highlighting and auto-indentation support is really impressive for a web based application. In fact, the text editing capabilities are what really set it apart. It’s got a lot of obvious features, but some of the nicer ones aren’t as obvious.

Tips And Tricks

1. Use JsFiddle With StackOverflow

StackOverflow is such a great way to get answers and help others out. It’s really redefined how we get solutions to our problems with some parameters around the validity of an answer. One thing that will really scare people away from trying to answer your questions, is you post something with 250 lines of code. It’s just too much for the eyes. However, you can create a simple fiddle in JsFiddle and it’s much easier for people to not only debug your code, but also give you an answer by forking your code and then providing the link to the fix.

I hope that StackOverflow will consider direct JsFiddle integration. It’s a subject that’s already been broached on meta.stackoverflow.com

Tip 2 – Create Templates

Once you create an account and login to JsFiddle, you can create templates by adding in resources under the “Manage Resources” section – like external js/css libraries.

Drag the link to the fiddle to your toolbar in your respective browser and when you need to write a new fiddle with those same references, you just click the link, fork the fiddle and go. I created several templates a while back for some commonly used resources and UI libraries.

Tip 3 – Embedding Fiddles

You can embed fiddles from the “share” menu on JsFiddle. You can then share them directly in your posts. I do that ALL the time both here and on kendoui.com/blogs. The embedding is pretty simple and clear.

Hit the “share” menu and then select embed and copy the code. Then just paste the code into your site or blog post. That’s pretty simple.

Then it will look something like this in your page.

Once you have it in the page, you can adjust the tabs that the user sees by adding certain variables after the “embedded/”. You can add “result”, “js”, “html and “css”. Each of these is delimited by a comma. For instance…

…/burkeholland/JwDZN/embedded/result,js

would show only the results and js tabs in that order.

Tip 4 – Clear The Clutter

Sometimes the clutter of the JsFiddle windows interferes with debugging because you have to take the whole UI in the browser tools. You can get rid of all that by appending /show on the end of your fiddle. This will show you just the result and make debugging and inspecting elements a whole lot simpler.

Edit

Piotr has pointed out in the comments below that the “show” is not a good idea as it’s vulnerable to cookie stealing. Instead, he recommends using the “draft” feature. The only drawback to this is that you have to be a registered user. This is something you should do anyway. Once you have done this, you can clear away the jsfiddle interface by running jsfiddle.net/draft which will show the last executed fiddle without the jsfiddle interface.

Tip 5 – Mock Your Ajax

JsFiddle actually contains built-in functionality for mocking ajax requests. This is good because developing in JsFiddle means you probably can’t get at your data. Even if you could, it’s going to be cross domain. You can solve that by doing some ajax mocking. While JsFiddle does contain it’s on mocking tools, you have to post the data that you want back. A better option for me has turned out to be using MockJax from AppendTo in your fiddles for Ajax Mocking. Here is a sample fiddle where I am mocking some Ajax. Here is also a great article from AppendTo on how to use this library.

Tip 6 – Use DropBox For A Personal CDN

If you have a massive JavaScript library that you wrote and want to include, instead of pasting everything in the JavaScript pane, just create a public link in DropBox and reference the URL in the “Managed Resources” pane. You can use your DropBox as a CDN by sticking stuff in the public folder. I have a folder in mine called CDN where I stick all of the large libraries that I need to reference from JsFiddle. These would be libraries that aren’t already hosted by an official CDN.

Check out cdnjs for a complete list of hosted JS libraries. Chances are that if you need it, they have it.

JsFiddle Can Be Frustrating

JsFiddle is great, but does come with some frustration as it gets laggy during peak times because EVERYONE is using it. It’s that good. And it’s free. You will find times when it takes so long to render that you are better off just using a scrap application. I realize though that this is one person’s project and speed means more servers and more servers means more cash. I just appreciate it for what it is and I use it as much as I can when it’s not under heavy load.

Highly Recommended

JsFiddle is a fantastic tool for quick and rapid prototyping, sharing, and troubleshooting. I use it frequently and find myself only newing up projects on my local box when I’m actually working on a real project, not the random code question in an email.