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?

How to create and share a school calendar using Google

Summary: A walk-through explaining how to create and share a public school calendar.

I have three kids enrolled in two schools that operate under different calendars. To keep track of their schedules, I set up the school calendars on my phone (and PC), so that I get event notifications and reminders. It works well, but comes at a cost: in the beginning of each school year I spend 1-2 hours manually entering the information about the school events (minimum days, holidays, days off, back to school nights, etc.) into my personal calendar. And so do other parents at my kids' schools, as well as millions of parents nationwide. Sooner or later the schools will learn how to make the process more efficient, but in the meantime, you -- a school administrator, a teacher, or a volunteer -- can help us. It won't be hard.

In this article, I'll explain how to make it easy for parents to see a school calendar on a mobile device (iPhone, Android device, Windows phone or tablet) and keep this calendar up-to-date. You will no longer need to print calendars on paper (yay, trees!) or have parents enter them manually. A public calendar allows you to add new events, update existing events, delete cancelled events, set reminders, provide helpful event details (such as instructions or locations of off-site events) and subscribers will see them instantly. It lets you share the same calendar online (at your school's website). And it does not limit you to a school schedule. You can follow the same approach to set up a calendar for any organization or activity, such as a sports team or a volunteering project.

Before we get down to the nitty-gritty, let me first clarify the requirements and limitations.

REQUIREMENTS: A user must have a Google account.

While you may keep a personal calendar locked to your your mobile phone or computer, inside of iCloud, or in Outlook, for a public calendar you better use Google Calendar. It supports all major platforms (iPhone, Android, Windows), has wide adoption, and offers most features.

If you (a school calendar administrator or creator) do not have a Google account, you can easily create one (it's free). A Google account gives you access to the Calendar features including ability to create public calendars. You may prefer to create a special Google account that would "own" the school calendar, so you can transfer it to someone else in case you no longer want to manage it (Google makes it really easy to switch between multiple accounts).

To get real time updates, Google calendar subscribers (parents) will also need Google accounts. As a subscriber, you do not need to actively use a personal Google calendar (if you prefer something else), but you will need it to sync the school calendar with your mobile device.

WARNING: If you have a fundamental objection to using Google, there may be a similar approach to sharing a school calendar using a different provider (say, Apple, Yahoo!, or Microsoft), but it'd be more complex (if possible at all), so let's assume that at this point both calendar administrators and subscribers have Google accounts.

Calendar creation process
To set up a school calendar, follow these steps:

1. Create a public calendar
   First, you create a public Google calendar for your school online. Here is a short video explaining how to do this (if you prefer a written tutorial, read Create & manage a public Google calendar):
   
   
   Although you can change it later, try to give the calendar a meaningful name (or title). Keep in mind that a long name may not show completely on mobile devices, so place the most significant parts of the name in the beginning. Here are some examples of calendar names that I used, so you may want to follow a similar format:
   
   
   • CCHAT, Sacramento (School Calendar) (see preview)
   • CMP (School Calendar) (see preview)
   
   If you want to allow other administrators to maintain the calendar (create and make changes to the events), set appropriate sharing permissions (read the Control what others can see help section).
   
   
2. Add events to the calendar
   To make sure you add an event to the wright calendar, when you work with your school calendar, temporarily turn off all other calendars. Here are some tips.
   
   When naming events, follow the same naming convention. To make it easier for subscribers identify which calendar an event belongs to, include a short name of the school in the name of event. Here are some examples of event names that I used for a California Montessori Project's school calendar (you can browse the calendar to see more examples and details):
   
   
   • Minimum Day (CMP)
   • School Break (CMP)
   • School Holiday (CMP)
   • School Closed (CMP)
   • Last Day of School/Minimum Day (CMP)
   
   As you may have noticed, I prefer to keep titles short and simple, but I also use the description field for additional information.
   
   Include details that parents may find useful in the event description. You can use description for special instructions or any type of information you would normally provide in a letter or email invitation.
   
   For off-site events, specify the address in the location field. The address will help parents find location on map and use navigation apps.
   
   For some events, such as minimum days, it may make sense to set up reminders. Keep in mind that that parents may need time to travel, so give them enough time (I'd say, for a full-day event, a 12-hour advanced reminder would be fine, while for all other events, an hour would be enough). Use pop-ups for reminders.
   
   For repeating or multi-day events (such as regular after school activities or school breaks), set up occurrence rules (do not duplicate events).
   
   Instead of creating each event from scratch, use the Duplicate Event feature, which allows you to copy an existing event, and then update all relevant information. For example, when defining school holidays, set up an even for the Labor Day (I think it's the first holiday in a typical school year), make sure you use proper naming convention and define event details. Then duplicate it to make an entry for Veteran's Day (don't forget to adjust event information), and continue doing the same for other school holidays.
   
   
3. Advertise the calendar
   Once you get the calendar up and running, you send its address (the URL of the calendar's ICS file) to the parents. At the time of writing, you could locate the calendar address by following this steps:
   
   
   • Open your Google calendar page.
   • Click the settings (gear) button in the top right corner, and select the Settings option from the pop-up menu.
   • Under the Calendar Settings heading, click the Calendars tab link.
   • Click the name of your public school calendar displayed in the My Calendars section.
   • Scroll down to the Calendar Address section and click the iCal button (make sure you use the public iCal address and not the private one).
   
   A window will pop up showing the calendar address that looks like this:
   
   https://www.google.com/calendar/ical/abcd0efghi23jk45lmn45o6pqr%40group.calendar.google.com/public/basic.ics
   
   Make sure that the address ends with the .ics extension. This is the address of the calendar that you will need to share with parents.
   
   
4. Maintain the calendar
   You can use the same calendar year over year and make changes to it at any time. All changes to the calendar will be automatically delivered to the subscribers. As a bonus, you can also add a Google calendar to your website.
   

Calendar subscription process
To see calendar events on your mobile device, such as phone or tablet, do the following:

1. Subscribe to calendar
   Parents subscribe to the calendar using the provided address of the iCAL (.ics) file. The steps are outlined in the Add someone else's Google calendar article (see the Add using a link section). Alternatively, you can subscribe to a calendar by clicking the Add to Google Calendar shortcut displayed at the bottom right corner of the calendar's HTML page.
   
   
2. Sync calendar with phone
   If you do not see the school calendar events reflected on your phone (or other mobile device's) calendar, you may need to make a couple of adjustments. First, follow the instructions outlined in the Sync Calendar with a phone or tablet article. Depending on the device configuration, it may not be enough, so follow your device maker's recommendations. For example, here are instructions for Windows and iPhone users. For an Android device, you many need to clear calendar data and resync the calendar (if you are not sure how to do this, search for: <your device name> +clear +calendar +data and <your device name> +sync +calendar).
   
   

LINKS FOR CMP, ORANGEVALE PARENTS:

CMP, Orangevale School Calendar Page (short link) * | CMP, Orangevale Calendar (iCAL) file
Crater Lake, CMP, Class Calendar Page (short link) * | Crater Lake, CMP, Class Calendar (iCAL) file
Joshua Tree, CMP, Class Calendar Page (short link) * | Joshua Tree, CMP, Class Calendar (iCAL) file

LINKS FOR CCHAT, SACRAMENTO PARENTS:

CHAT, Sacramento School Calendar Page (short link) * | CCHAT, Sacramento School Calendar (iCAL) file

* You can add this school calendar to your Google calendars by clicking the link at the bottom right corner of the calendar page.

Easy? I think so.

I'm almost done, but before we part, one final though. In fact, this is the first question you need to address:

How many calendars do you want to keep?

Do you want to maintain a single district calendar or multiple calendars? Do you need a separate calendars for primary, middle, and high schools? Do you want the calendar to include the information relevant to teachers and staff (such as training)? Depending on the size of your district, differences in school schedules, and other factors, you may choose one approach over another. As a parent, I'd like a single school calendar with information relevant to students only and a class calendar reflecting class-specific events, such as field trips, project deadlines, and due dates. I do not care when and where teachers and staff attend training, but I do care when the school is closed, but others may have other preferences.

I hope this information was helpful. If you have questions or want to leave feedback, please leave a comment.

See also:
Embedding Google Calendar in eChalk
Can I get my Google Calendar shown in my iCloud Calendar on my PC?

Build API documentation with Sandcastle Help File Builder

Summary: How to build awesome API documentation using Visual Studio, XML code comments, Microsoft Markup Assistance Language (MAML), and Sandcastle Help File Builder (SHFB).

A couple of weeks ago, I gave this presentation to the Sacramento .NET User Group:

View on SlideShare

The presentation explains how to build first-class API documentation using Visual Studio, Sandcastle, and other tools and technologies. The goal of the presentation is to show how to build documentation with less effort and more fun.

The PowerPoint file (with links and notes) and the demo project can be found here:

• PowerPoint presentation
• VisualStudio 2013 demo project

The demo project page outlines the dependencies and requirements for building the solution and using the assemblies.

If you run into any issues or have questions, please post a comment below or contact me directly.

Technobrief #15

Summary: Recent (and not so recent) findings of software, articles, and more.

CSS

• Learn CSS Layout
  This site teaches the CSS fundamentals that are used in any website's layout.
• Responsive Menu Concepts
  Discusses four main concepts for building responsive menus.
• Ryan Fait's HTML5 Sticky Footer
  An implementation of the sticky footer (a footer that clings to the bottom of the page) that even beginners can get a handle on.

Design

• 50 Incredible Freebies for Web Designers, February 2015
  Free icon sets, templates, color palettes, and more.
• 6 Steps to Perfecting Minimalism in Web Design
  Some ideas on making your website more user-friendly.
• Good UI Ideas
  A running list of ideas for improving UI usability for both owners and customers.
• Interactive Guide to Blog Typography
  This guide will help you understand the typographic foundations that will improve the readability of your articles.
• How to Modify Bootstrap Quickly and Effectively
  Introduces several tools and options for Bootstrap UI modification.

Fonts

• 101 Essential Free Fonts for Web Designers
  Fonts that are genuinely free (not just one style or weight free), a balance of fonts that work well for body text as well as display, and a full collection of fonts that are pleasing to the eye.
• 10 Best New Free Fonts
  A small, yet very good, collection.

Graphics

• 25 Icon Sets in SVG Format
  25 professionally designed icon sets, that are all in the SVG format.
• Graphic resources for everyone
  Find free vectors, PSD, icons and photos.

JavaScript

• Gridforms
  A tiny Javascript/CSS framework that helps you make forms on grids with ease.
• SlabText
  A JQuery plugin for producing big, bold, and responsive headlines.

Programming

• The Ultimate Guide for Getting Started with Foundation
  Introduction to Foundation: one of the two big-name HTML/CSS/JS frameworks for front-end developers.
• Say Hello to PowerShell
  A brief tutorial.

Software

• DVDStyler
  Free slide show and DVD authoring tool. Important features: allows creation of interactive menus (from templates), support for multiple video formats.
• FlashIntegro Media Editing Tools
  These free tools include: VSDC Free Video Editor, VSDC Free Video Converter, VSDC Free Audio Converter, and VSDC Free Audio CD Grabber.
• GlassWire
  Free network monitor & security tool with a built in firewall.
• ImageCool
  Free batch image converter and image processing software. Includes 6 utilities: Watermark Maker, Image Cropper, Image Splitter, Frame Maker, Image Resizer and Image Combination tool.
• LightWorks Free
  The free version of a video editing application (see limitation in the version comparison charts).
• MP3 Diags
  Identifies and fixes problems in MP3 files, such as duplicate tags, wrong audio duration, character encoding, and many others.
• Windows Media Preview
  Shows thumbnails for all media files in Windows Explorer.

Tools

• A Dozen Tools for Removing Almost Any Malware
  An article providing all the information needed to remove even the most tenacious malware infestation.
• ITTT (If This Then That)
  Create alerts and notifications for a wide range of conditions: weather, shopping, etc.
• List of Mockup/Prototyping Tools
  An extensive collection (although, with no descriptions).

Build responsive websites with Visual Studio 2013 and Bootstrap 3.0

Summary: Materials for the Sacramento .NET User Group presentation.

Thanks a lot to everyone who attended my presentation yesterday. You have been an awesome audience. Also, many thanks to Josh Gurin (TEKsystems) for the pizzas and wings and Jason Singh (Microsoft) for the excellent meeting space. I was a bit concerned about parking, but there were lots of free after 6 PM parking spaces around the building.

Here are the materials I promised:

• PowerPoint presentation
• Visual Studio 2013 demo project

In case you don't want to bother downloading the files, here is the presentation:

View on SlideShare

The PowerPoint slides provide the same information as the web application built by the demo project. If you only want to check references and resources mentioned at the session, just use the slides. If you intend to see how the concepts were applied in the actual application, get the project. When you run the demo app, you will see the same content available in the presentation, although in a slightly different format. Links should work from both the presentation and the demo app.

If you run into any issues or have questions, please post a comment below or contact me directly.

See also:
The ultimate guide to Bootstrap by By Cameron Chapman
25 Free & Premium Bootstrap Admin Templates

WiX woes: What is your installer doing?

Summary: How to detect different modes of installation.

When building an application installer, it's often necessary to distinguish between different modes of installation, i.e. initial installation, repair, upgrade, uninstall, etc. And as with everything important in MSI, detecting the mode of installation is a PITA (and by PITA, I do not mean flat bread of Mediterranean origin). To help you a little bit, here is a table adopted from a StackOverflow topic (and comments), that shows the values of various Windows Installer properties can help you determine the installation mode:

	Install	Uninstall	Repair	Modify	Upgrade
INSTALLED	FALSE	TRUE	FALSE	TRUE	TRUE
REINSTALL	TRUE	FALSE	TRUE	FALSE	FALSE
REMOVE="ALL"	FALSE	TRUE	FALSE	TRUE	TRUE
UPGRADINGPRODUCTCODE	TRUE	FALSE	TRUE	TRUE	TRUE

You can use logical operators NOT, AND, OR to build complex conditions.

Here is how you can detect some common conditions:

First-time installation

• NOT Installed

Any installation

• NOT Installed AND NOT PATCH

Installation and repairs

• NOT REMOVE

First-time installation and repairs

• NOT Installed OR MaintenanceMode="Modify"

Upgrades only (during uninstall phase)

• Installed AND UPGRADINGPRODUCTCODE

Upgrades

• Installed AND NOT REMOVE

Full uninstall (except when triggered by a major upgrade)

• (REMOVE="ALL") AND (NOT UPGRADINGPRODUCTCODE)

Any uninstall

• REMOVE~="ALL"

If you notice errors or want to include some other conditions, please post a comment.

See also:
MSI Property Patterns: Upgrading, FirstInstall and Maintenance
Upgrading, FreshInstall, Maintenance and other MSI convenience properties
MSI Writing Guidelines: Installation Scenarios
How to execute custom action only in install (not uninstall)