Date Object Creation Format Differences in JavaScript

Another issue that came up in my multi-week calendar was due to how date parsing in JavaScript yields different date objects depending on the format:

• new Date('11/18/2015') creates a date object of 11/18/2015 local time zone.
• new Date('2015-11-18') creates a date object of 11/18/2015 UTC time zone. For example, if it's Eastern Standard Time (-5:00), then it will be 11/17/2015 19:00.

Try it out on your web browser's console. One good thing is Chrome, IE, and Firefox all seems to have the same behavior. Granted, I ought to be specifying date in a more specific format, but it's interesting to see how the same "date" yields different date objects based on the format. For the multi-week calendar fix, I just removed the native date creation (which I probably should've done from the beginning) and used moment.js's multiple date format creation method. Moment.js documentation has a reference to a nice table of JavaScript date parsing behavior. Hmm, maybe it's time to add some tests...

Multi-Week Calendar for Printing, using HTML and JavaScript

TL;DR: dusklight.github.io/multi-week-calendar

I made a simple HTML & JavaScript based multi-week calendar a while back, inspired by Visio's multi-week calendar shape. It serves a very specific purpose – I use it to print a calendar of the current month and the next in a single page. When I was using it locally, I just used IE every time, since I had set print background option on it (my main browser is Chrome). After I added it to Github, I figured I should try it on different browsers, and to my surprise, it failed on Chrome.

One of the main reasons it failed is because I didn't add any validations (don't need it when it was just me using it, though it's on my TODO list), but another reason for Chrome is because Chrome apparently supports date input type, and the date has to be in a specific format when setting the value programmtically – YYYY-MM-DD.

Chrome has a built-in date picker (for input type=date)

So after some researching, added Modernizr to detect support for the input date type, and set the default dates accordingly. I'll probably add jQueryUI date picker in the future so that it's consistent across all browsers, which means I'll need to replace type="date" with type="text", but since it's not for mobile use, should be fine...

Below is the code snippet after adding Modernizr:

...
<input type="date" id="startDate" />
...
var dateFormat = Modernizr.inputtypes.date ? 'YYYY-MM-DD' : 'MM/DD/YYYY';

$('#startDate').val(moment().startOf('month').format(dateFormat));
...

You can try out the calendar via github.io. It's a work-in-progress...

Using WinMerge2011 and DiffMerge in Visual Studio 2013 and 2015

Since the last post related to this topic, I've found a newer version of WinMerge, called WinMerge2011. It's a fork from WinMerge, since WinMerge 2.x hasn't been actively maintained, and WinMerge 3 is still not out yet. Don't let the "2011" scare you, it's being maintained – the latest build came out a couple weeks ago at the time of this writing.

I've also started to use them as portable applications. To use WinMerge2011 in portable mode, just unzip it using 7-zip, and create an empty file named WinMergeU.json in the same folder as WinMergeU.exe.

DiffMerge also works in portable mode if you download the zip package, though I'm not sure if settings are also portable.

The same steps from Visual Studio 2010 and 2012 work in Visual Studio 2013 and 2015:

1. Go to Tools -> Options to bring up the Options dialog
2. Go to Source Control -> Visual Studio Team Foundation
3. Click on "Configure User Tools..."

Add a new entry for WinMerge:

• Extension: .*
• Operation: Compare
• Command: C:\Portable\WinMerge2011\WinMergeU.exe
• Arguments: /e /x /wl /u /dl %6 /dr %7 %1 %2

Add a new entry for DiffMerge:

• Extension: .*
• Operation: Merge
• Command: C:\Portable\DiffMerge\sgdm.exe
• Arguments: /m /r=%4 /t1=%7 /t2=%8 /t3=%6 /c=%9 %2 %3 %1

Here's what the Visual Studio options mean:

I actually haven't used WinMerge2011 in a while, except when I need to compare files manually. I've been using the built-in Visual Studio 2015's compare tool lately because of code review integration.

(WinMerge version: 0.2011.005.427. DiffMerge version: 4.2.0.697)

Adding a Syntax Highlighter to Blogger

After some researching, I've decided to use Google's code-prettify to highlight syntax on my blog posts. There are several options out there, but code-prettify is simple to setup and use, open source, has good enough highlighting, and hosted on a CDN.

To add to Blogger, edit the HTML of the template and add the following right before the <head/>:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

To use, add a <pre> block with the class="prettyprint" in the posts. Don't forget to escape the content as needed.

I've also customized it a little to reduce the default font size, though I might remove it later:

<style type='text/css'>
  pre.prettyprint {  
    font-size: 0.8em;
  }
</style>