Question

This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right

… and it was suggested I post something to jsfiddle. Honestly, I’m just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?

I am mostly interested in being being able to share and debug code that pertains to display and layout.

Many thanks in advance.

Answer 1

Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:

1. Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
2. Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment 🙂
3. If you do manage to isolate a behavior that you don’t understand or can’t explain or whatever, you can then save the test case (jsfiddle has “Save” and “Update” buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it’s a good idea to copy the relevant code from your test case directly into your question.

I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That’s kind-of important if you’re testing for mobile applications. Otherwise they’re both great resources.

Oh, and both sites let you import various popular libraries via simple configuration tools. That’s really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).