Rapid prototyping with jsFiddle for web developers

Summary: How to use jsFiddle for building wireframes and rapid prototyping.

Recently, I needed to build interactive prototypes of a web form. I do not own a license of a professional prototyping tool (like Balsamiq, HotGloo, UXPin), so I tired several free online options (namely, iPLOTZ, concept.ly, MockFlow) and appreciated the ease of drag-and-drop; however, making these prototypes respond to interactive events (mouse clicks, selection changes, etc) turned into a hassle.

I also tried a couple of desktop options, but had even less luck with Pencil (couldn't figure out how to make a combo box display multiple entries), Visio 2013 ("Where is the combo box, Lebowski?"), and Blend for Visual Studio 2013 ("You're entering the world of pain!").

I was entertaining an idea of using animations in PowerPoint, when it struck me:

Why not use jsFiddle?

If, after reading the previous sentence, the first question that popped into your mind was "What the heck is jsFiddle?", you may not realize that saying "What the heck!" is really worse than saying "What the hell!". But nonetheless, for those just coming out of a coma:

jsFiddle is a free web-based tool that allows you to quickly test HTML/JavaScript/CSS. But wait, there's more!

Here is what a jsFiddle screen looks like:

You enter HTML, CSS, and JavaScript code into the corresponding panels, click the Run button, and see the result of your work in the window appropriately named Result. It's that simple.

Let's summarize what jsFiddle has to offer:

• It's free (as in "it ain't cost sh*t").
• It's web-based (no crap to install).
• It's not using Adobe Flash, like most other online prototypes do (they still do, don't they?).
• It uses HTML, CSS and JavaScript (you already know these, right?).
• It uses a standard web programming model (no need to learn proprietary controls).
• It supports pretty much every popular JavaScript/CSS framework (yay to jQuery! yay to Bootstrap!).
• It can incorporate any custom JavaScript/CSS framework (assuming it has a public URL).
• It keeps versions of your changes (version control by default).
• You can send a URL of your prototype for a review or do a live demo (with some quirks, though).
• You can collaborate with others on a prototype (although, I haven't tried).

The bottom line is that using jsFiddle, you can quickly build a prototype and implement the functionality that is only constrained by the limitations of the same technologies your applications uses (JavaScript, CSS, HTML). In the other words, there are no practical constraints. It's almost too good to be true. Why haven't I thought about it before?

Anyway, if you want to build a wireframe or a quick prototype using jsFiddle, do the following:

1. Create an account (if you don't have one).
2. Log in and open the editor.
3. While in the editor, under the Fiddle Meta section on the left side, enter the title and description of your prototype (wireframe). If you do not want to make it public (discoverable via search), leave the title field blank.
4. Add your HTML, CSS, JavaScript.
5. Click the Run menu option to preview the functionality.
6. When you are happy with the result, click the Save (or Update) menu button to keep the changes.
7. The public link to the fiddle can be found in the Embed Code section of the Embed screen (to open the Embed screen, click the Embed menu option).

If you close jsFiddle and come back, you will find your fiddles in the dashboard (to access the dashboard link from the editor, click your account name in the top right corner of the page). The dashboard shows your public and private fiddles (proper descriptions will make it easier for you to locate private fiddles):

Now, a bit of jsFiddlespeak, if you do not mind.

Visibility: You may have noticed somewhat non-traditional use of the term public. As I mentioned above, public means that a fiddle can be found via a search, and non-public means that to access a fiddle, someone must know the fiddle's URL (non-public fiddles are still open to public).

Baseline: Every time you save a fiddle (via the Save or Update menu option), jsFiddle will create and retain a new version. You can access a specific version of the fiddle by appending the version number to the fiddle's URL. For example, assume that your jsFiddle profile name is jdoe and you make 13 changes to a fiddle with ID qdn9f737, the URLs of the version history will look like these:

https://jsfiddle.net/jdoe/qdn9f737/1/
https://jsfiddle.net/jdoe/qdn9f737/2/
https://jsfiddle.net/jdoe/qdn9f737/3/
...
https://jsfiddle.net/jdoe/qdn9f737/12/
https://jsfiddle.net/jdoe/qdn9f737/13/

The non-versioned URL will correspond to whichever version you set as base (the first version by default) and will look like this:

https://jsfiddle.net/jdoe/qdn9f737/

You can define any version as base by opening this version in the editor and clicking the Set as base menu option (in certain cases, you may need to save the version first).

Finally, a few tips to help you get most out of jsFiddle (these are mostly notes to self, but others may find them handy).

Use the gear buttons (in the right top corners of the corresponding panels) to configure the HTML, CSS, and JavaScript settings. In particular, you can specify the version of HTML (such as HTML 5 or HTML 4.0.1 Strict) to use and а JavaScript framework (such as jQuery 2.2.3 or AngularJS 1.4.8) to include. You can only pick one option from the JavaScript Frameworks and Extensions list, but you can include additional dependencies as external resources.

To include an external resource (other than the framework or extension selected in the JavaScript Frameworks and Extensions list), click the External Resources header in the left pane of the page, paste or type in the URL of the framework file (normally, the resource's CDN address) in the JavaScript/CSS URI field, and click the plus sign. Here are the URLs of the common CDNs:

• Bootstrap
• Font Awesome

If you want to share your prototype, but do not want others to see the JavaScript/HTML/CSS code, uncheck the HTML, CSS, and JavaScript option under the Tabs heading in the Embed options (notice that the source URL in the Embedded Code section ends with embed/result/):

To make the prototype look better when viewed in the the full screen mode, you may want to limit the maximum width of the page. Enter the code similar to this in the CSS panel:

html {
  max-width: 1200px;
  margin: 0 auto;
  background: #eee; /* Fills the page */
  position: relative; /* Fix for absolute positioning */
}

Have fun!