Saturday, June 29, 2013

ASP.NET MVC Single checkbox generates two values

So a single checkbox:

Will generate two input fields in MVC CheckboxFor:

It is because the browser does not post a checkbox when the value is false. MVC takes this into account and creates a dummy field for the case when the checkbox is unchecked. So when the checkbox is checked you get ‘true,false’ instead of ‘true’

TryUpdateModel will take this all into account and work out the correct value for you.

The most awesome option in SourceTree

Rebase by default:


Thursday, June 27, 2013

AngularJS minification

Just downloaded angular source. Its no secret that AngularJS uses google closure tools. In case you are wondering how here is the grunt config:


This uses the custom grunt task as follows:

And the contents of the grunt task are just calling google closure compiler with proper arguments:


Sunday, June 9, 2013

Typescript: Indexer enforces property compliance

Here is a new thing I found about typescript 0.9Alpha. Once you specify a string indexer all other properties must be of the same type (which makes sense):

interface IBar{
    bar: string;
}

interface IFoo{
    a?: {
        [key: string]: IBar; // Once you have a string indexer all other properties
        options?: IBar;        // e.g Options, must have the same type
    }
}

var x: IFoo = {
    a: {        
        'someKey': {
            bar:'asdf' // put any thing other than a string here and you get an error
        }        
    }
}

Trying the Latest Version of TypeScript for Visual Studio

There is a blog post on the topic by the TypeScript team over at : http://blogs.msdn.com/b/typescript/archive/2013/01/29/trying-the-latest-typescript-build.aspx

However that was for TypeScript 0.8 and the path is different for TypeScript 0.9.

For Visual Studio Extension

To try out the latest built version of TypeScript, just copy the typescriptServices.js file from  the bin folder of the file you checkout from release-0.9.0 branch at  https://git01.codeplex.com/typescript over to:

C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript

Overwriting what was already there.


For the Compiler

Additionally you might want to replace the tsc.js and typescript.js files in the following location:

C:\Program Files (x86)\Microsoft SDKs\TypeScript

Again using the files in the bin folder of the repository. 

Friday, June 7, 2013

Why use semicolons in JavaScript

I always use semicolons even though they are optional in JavaScript. A key reason for me is convention and javascript minification (although closure compiler will rewrite your js with semicolons inserted). But if you want to know what else could go wrong even if you do not do minification there is actually only one case. When a line starts with `(` it should have a semicolon before it.

An Example

When you have an immediately executed function to create a new scope:

// define a function with assignment
var fn = function () {
   //...
} // semicolon missing at this line

// then execute some code inside a new scope
(function () {
    //...
})();

Will get interpreted as :

var fn = function () {
    //...
}(function () {
    //...
})();

The second function will fail with a "... is not a function" error at runtime.

Another example 

// careful: will break
a = b + c
(d + e).print()
// Will get interpreted as:
a = b + c(d + e).print();

Alternate Solution

 A potential solution if you want to be a cowboy and not use semicolons everywhere is to use a semicolon before ‘(‘:

; (d + e).print()

Its also potentially a good idea when your file starts with '(' since if someone (who does not use semicolons) does concatenation of your file it might become a problem. 

An example was from this answer: http://stackoverflow.com/a/1169596/390330

Thursday, June 6, 2013

Inspect all the event handlers on a DOM Element


Here’s how chrome Developer Tools make it super simple. Just inspect an element and look inside the Event Listeners section as shown:


Expand any event and you can see what element level the event is handled on e.g. here blur is handled on document as well as the div:

You can even jump to the function body (this is a minified file so it’s all on line 1) by clicking on the filename

As an aside: there is no way to do this in your own code http://stackoverflow.com/a/2623352/390330

Saturday, June 1, 2013

YouTube video url transformations

There are some really innovative ways that you can transform the youtube url quite easily. Here are a few

Just the video frame

Use /v/ 

Download YouTube Video

Provided by a third party (save from). Add ss after www.