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.
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.
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…
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.
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
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.
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.
- Inspirational Quotes About Computer Programming 98 views
- Feeling Blue? Why The Most Popular Websites Are Blue 17 views
- Collection of Open Gov & Open Data Memes 14 views
- Creating PHP CRUD Apps with SQL Server on your Server or in the Azure Cloud 13 views
- Deploying a Java application to Windows Azure with Command-line Ant 11 views