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!

Generate filename-friendly datetime in Windows shell script

Summary: Windows batch script to generate timestamp for a filename.

People who write Windows Shell (AKA batch or .BAT) scripts for living sometimes need to create file (or directory) names using timestamp values based on local current date and time. This is not as trivial as it may sound. First, there is no shell command that would return a timestamp in a custom format, and the standard command may return a value containing illegal (for filenames) characters, such as colons.

There are articles that address this issue, but many proposed solutions do not accommodate region specifics, so they may work for an OS configured for one region, but fail for another.

The following script will generate a filename-friendly local timestamp for any region:

@echo off
rem -----------------------------------------------------------------
rem MAIN routine
setlocal & pushd

call :GET_TIMESTAMP
set timestamp=%ret%

echo %timestamp%

rem End of the main routine.
popd & endlocal 
goto :EOF

rem -----------------------------------------------------------------
rem Generate current timestamp in the format:
rem
rem YYYYMMDDhhmmss (as shown here), or
rem YYYYMMDD_hhmmss (commented out), or
rem YYYMMDDhhmmssmmm (commented out), or
rem YYYMMDD_hhmmss_mmm (commented out)
rem
rem Uncomment the block that generates the desired format and comment
rem out the alternate implementations.
rem
rem Returns %ret%.
:GET_TIMESTAMP
setlocal

for /f "usebackq tokens=1,2 delims==" %%i in (`wmic os get LocalDateTime /value 2^>NUL`) do (
if '.%%i.'=='.LocalDateTime.' set ldt=%%j
)
rem Without milliseconds, without underscore: 20160421140125
set timestamp=%ldt:~0,4%%ldt:~4,2%%ldt:~6,2%%ldt:~8,2%%ldt:~10,2%%ldt:~12,2%
rem echo %timestamp%

rem Without milliseconds, with underscore: 20160421_140125
rem timestamp=%ldt:~0,4%%ldt:~4,2%%ldt:~6,2%_%ldt:~8,2%%ldt:~10,2%%ldt:~12,2%
rem echo %timestamp%

rem With milliseconds, without underscores: 20160421140125202
rem set timestamp=%ldt:~0,4%%ldt:~4,2%%ldt:~6,2%%ldt:~8,2%%ldt:~10,2%%ldt:~12,2%%ldt:~15,3%
rem echo %timestamp%

rem With milliseconds, with underscores: 20160421_140125_202
rem set timestamp=%ldt:~0,4%%ldt:~4,2%%ldt:~6,2%_%ldt:~8,2%%ldt:~10,2%%ldt:~12,2%_%ldt:~15,3%
rem echo %timestamp%

endlocal&set ret=%timestamp%
goto :EOF

Enjoy!

See also:
How to get current datetime on Windows command line, in a suitable format for using in a filename?