If you work in javascript, these results shouldn’t be surprising

photo credit: /doh via photopin (license)
photo credit: /doh via photopin (license)

Hey Folks,

Javascript has some weird stuff built into it and sometimes when used in conjunction with other languages, it is easier to forget the corner cases that can come with javascript coding.

Here I compile the list checks, that every developer working in javascript should know, so that there are no accidental bugs and also sometimes these can be use to our advantage

Equal operator comparison

Double Equals

Comparison Result
null == null true
null == undefined true
null == 0 false
null == ” (empty string) false
null == NaN false
null == ‘2’ false
null == 2 false
undefined == null true
undefined == undefined true
undefined == 0 false
undefined == ” (empty string) false
undefined == NaN false
undefined == ‘2’ false
undefined == 2 false
0 == null false
0 == undefined false
0 == 0 true
0 == ” (empty string) true
0 == NaN false
0 == ‘2’ false
0 == 2 false
” (empty string) == null false
” (empty string) == undefined false
” (empty string) == 0 true
” (empty string) == ” (empty string) true
” (empty string) == NaN false
” (empty string) == ‘2’ false
” (empty string) == 2 false
NaN == null false
NaN == undefined false
NaN == 0 false
NaN == ” (empty string) false
NaN == NaN false
NaN == ‘2’ false
NaN == 2 false
‘2’ == null false
‘2’ == undefined false
‘2’ == 0 false
‘2’ == ” (empty string) false
‘2’ == NaN false
‘2’ == ‘2’ true
‘2’ == 2 true
2 == null false
2 == undefined false
2 == 0 false
2 == ” (empty string) false
2 == NaN false
2 == ‘2’ true
2 == 2 true

Double equals is not the same as triple equals when it comes to javascript. Notice that some things are unexpectedly true example 0 == “” is true when only compared with double equals vs its false when compared with triple equals. Double equals can somehow be helpful when you want to check if the value is either null or undefined you can quickly just do if(val == null) instead of if(val == null || val == undefined). Also notice that double equals does not check for the data type behind the comparator, example 2 == ‘2’ is true but not true in triple equals.

Triple Equals

Comparison Result
null === null true
null === undefined false
null === 0 false
null === ” (empty string) false
null === NaN false
null === ‘2’ false
null === 2 false
undefined === null false
undefined === undefined true
undefined === 0 false
undefined === ” (empty string) false
undefined === NaN false
undefined === ‘2’ false
undefined === 2 false
0 === null false
0 === undefined false
0 === 0 true
0 === ” (empty string) false
0 === NaN false
0 === ‘2’ false
0 === 2 false
” (empty string) === null false
” (empty string) === undefined false
” (empty string) === 0 false
” (empty string) === ” (empty string) true
” (empty string) === NaN false
” (empty string) === ‘2’ false
” (empty string) === 2 false
NaN === null false
NaN === undefined false
NaN === 0 false
NaN === ” (empty string) false
NaN === NaN false
NaN === ‘2’ false
NaN === 2 false
‘2’ === null false
‘2’ === undefined false
‘2’ === 0 false
‘2’ === ” (empty string) false
‘2’ === NaN false
‘2’ === ‘2’ true
‘2’ === 2 false
2 === null false
2 === undefined false
2 === 0 false
2 === ” (empty string) false
2 === NaN false
2 === ‘2’ false
2 === 2 true

Triple equals is much tighter comparison in javascript, it also checks the data type example see that 2 === ‘2’ is false while its true in double equals


Or (||) operator comparison

Comparison Result
null || null null
null || undefined undefined
null || 0 0
null || ” (empty string) ” (empty string)
null || NaN NaN
null || ‘2’ 2
null || 2 2
undefined || null null
undefined || undefined undefined
undefined || 0 0
undefined || ” (empty string) ” (empty string)
undefined || NaN NaN
undefined || ‘2’ 2
undefined || 2 2
0 || null null
0 || undefined undefined
0 || 0 0
0 || ” (empty string) ” (empty string)
0 || NaN NaN
0 || ‘2’ 2
0 || 2 2
” (empty string) || null null
” (empty string) || undefined undefined
” (empty string) || 0 0
” (empty string) || ” (empty string) ” (empty string)
” (empty string) || NaN NaN
” (empty string) || ‘2’ 2
” (empty string) || 2 2
NaN || null null
NaN || undefined undefined
NaN || 0 0
NaN || ” (empty string) ” (empty string)
NaN || NaN NaN
NaN || ‘2’ ‘2’
NaN || 2 2
‘2’ || null ‘2’
‘2’ || undefined ‘2’
‘2’ || 0 ‘2’
‘2’ || ” (empty string) ‘2’
‘2’ || NaN ‘2’
‘2’ || ‘2’ ‘2’
‘2’ || 2 ‘2’
2 || null 2
2 || undefined 2
2 || 0 2
2 || ” (empty string) 2
2 || NaN 2
2 || ‘2’ 2
2 || 2 2

This works like standard || or operator, if the value of the first comparator does not equals to true it will select the other value. See section truthy value for which values return false when asked for boolean value.

Truthy value

Comparision Result
if ( null ) false
if ( undefined ) false
if ( 0 ) false
if ( ” (empty string) ) false
if ( NaN ) false
if ( ‘2’ ) true
if ( 2 ) true

Hopefully this can help someone have a reference check on what javascript does on == , === and || operators.

Let me know in comments..

  PS: I originally created this post in jsfiddle here (http://jsfiddle.net/bsurela/13gdvom5/)

Generate Random Colors

random colors
Hello Folks,

This post is just dedicated to check out http://bhavinsurela.com/color-generator/, a simple random color generation that i created. This is no rocket science but its fun to drag and drop colors around each other and to see them create different colors.

It works best in Chrome and uses drag and drop of HTML5 and also uses local storage. This is just a gig and some couple of hours of work, but I still hope it will be used somewhere.

Talk to you soon!

Solving the problem is the interesting part, providing finishing touches – not so much. What to do?

Developers are usually problem solvers, we solve problems and once we solve the core of it we have a tendency to call it done. However completing the rest of it, the finishing touches takes a looong time.
The 99% complete syndrome is a documented fact that aligns well with software development and developers.

I have noticed this in many people and not all are developers. Once they solve the hard part, rest of them is unexciting/boring/tiring to them. Do not get me wrong, that remaining part is also as equally important in a process of making a thing complete, but the drive is usually gone. I am guilty of this too, once I am done solving that’s challenging, solving that was new and interesting, the drive, the motivation slightly decreases.
Why is that? How do you stay motivated and driven to complete it completely?

This can really happen if you are working on a side gig, Once a thing is 99% complete and 1% incomplete.
Deep inside my heart, I wish that was it. I know it is not and I know I will eventually do the rest of it, but when is that eventually going to come? I do not know.
I also noticed that, if you are working in an office or a product driven by other people you may still have this feeling but then there is someone at your shoulders waiting for it to be completely complete and so you complete it. There you go, nagging works :)

I do not want to include everyone here, I know developers who will completely complete the product before saying its DONE, done whether its office or a project they do in their garage. I am proud of those guys and one can really learn from those guys. I hope you have seen or met some of these guys around you too.
Its good to have them around.

Here is what I do to keep me going on my side gigs in those times,

  • Try and set deadlines, real deadlines, the one that goes on the calendar.
    • Share deadlines with your close ones who keep you motivated.
  • Demo the product to people who can be nit picky.
    • Being nit picky is good. It leads you to become a perfectionist.,which is good. Most times.
  • If you have a TODO list, DO NOT check the item until is completely complete.
    • If you do not have it, have one. TODAY.
  • Credit yourself after completely completing it.

What do you do to stay motivated and driven after 99% completeness? I would love to hear

Linq and Automapper, A View Model and Data Model binding solution. Part 2

Hey Guys, So finally I have got a second piece of my earlier post. However this isn’t going to anything about Linq. We have already seen in part 1 how we can use Linq classes as data model classes. We have also seen how Automapper can help bind th…

Hey Guys,

So finally I have got a second piece of my earlier post. However this isn’t going to anything about Linq. We have already seen in part 1 how we can use Linq classes as data model classes. We have also seen how Automapper can help bind those data models to my view models in an MVC application. This post will be more about getting closer to real scenario where often your view model and data model are not always so similar that you can not get away with magic of Automapper without tweaking it. The goal of this post is to determine if Automapper is fast enough when mapping is complicated and when automapper has to be configured to map objects correctly.

For variety purposes this demo will be for a C# console application. I am using the new Visual Studio 2012 and .Net 4.5. I have also got Automapper as usual from my Nuget package manager. So here is how my data model and view model looks like. Take a peek.

44728658-datamodel

 

44728659-viewmodel

 

You can see there are bunch of difference between view model and data model classes:

  • The view model has string address while the data model has a seperate class CustomerAddressDataModel, it it is a member of CustomerDataModel
  • The view model has CompleteName and data model has FirstName and LastName
  • The view model has string IsMember while data model has boolean IsMember
  • The view model has CustomerCode while data model does not have any such thing.

So here if you try to map the above data model and view model. Automapper will blow. It will fail because it does not know how to resolve these issues. I will give a little idea but will not get into too much detail about how to configure Automapper to do so. I will attach the source code with this post for an enthusiast to play with it.

The following code will configure my automapper to resolve the above mentioned differences and successfully map my data model to my view model (or list of those). I have used value resolvers to resolve the data type issue, create CustomerCode attribute for view model. I have mapped address string by combining various values from data model’s member class. One can also achevie the similar result by creating another value resolver for address. Similarly the FirstName and LastName are combined to do get CompleteName, super easy.

 

Similarly to compare the mapping of Automapper, I also have Manual mapper in my MappingManager class. I wrote a simple Test method to spit out the time intervals and the mapped view model. Here is the code and the output.
44728917-onemapping

 

44728919-testmethod

 

The test method is a generic test method. It does both Automapper mapping and Manual mapping and it does it for the specified count of data models. Currently it does one data model to view model mapping and prints on the console. You can see it maps correctly which means our configuration of Automapper is correct.

Till now we can conclude two things. Complex mapping can be achieved by Automapper. The mapping we did includes type casting, flattening, creating derived attributes. Also we see that it is about 0.048 seconds slower for one mapping, which is not a big deal, usually. Also I would like to point  that Automapper always take a bit (in milliseconds) in first mapping more than its usual. Let’s compare as we did before, converting 100,000 data models to view models and see side by side comparision before we conclude any more.

 

44729138-finalresult

 

So here we can see that for upto 1000 model mappings Automapper is not far behind and we hardly map more than 1000 models at one shot. What we see here is a very similar result to my part 1’s result of simple data model to view model mapping. This means Automapper has it’s consistency. Complex binding or simple binding, Automapper is a good tool to use and save time from mapping code, provided you can afford 100th second delay. Usually that’s not a problem Hence our goal: “determine if Automapper is fast enough when mapping is complicated and when Automapper has to be configured to map objects correctly”  is accomplished and we can say that Automaper is great mapping and time saving tool.

It passes my tests, I hope it does your’s too. Take care.

Later..

Source Code (Visual studio 2012, .Net 4.5 solution. You might need to convert dlls if you are using other versions)

How to upload .Zip files in Posterous Blog

Hey there, So I was writing a post and I found out Posterous do not allow me to add zip files in the blog. This is very weird for a blogging website to me. Anyway, being an Engineer helps finding a solution. This is an era of cloud, you get tons o…

Hey there,

So I was writing a post and I found out Posterous do not allow me to add zip files in the blog. This is very weird for a blogging website to me. Anyway, being an Engineer helps finding a solution.

This is an era of cloud, you get tons of cloud space from Google, Microsoft, Amazon, Dropbox, SugarSync, Box etc. The all provide public and private sharing.

I figure why not make a public folder to any of these clouds and give you the link. Simple.

I choose Google drive just coz I like it.

Steps:

  1. Create a folder in Google Drive or your choice of cloud.
  2. Share it publicly or anyone with the link
  3. For sake of organizing stuff, I have a separate folder for each blog that needs a zip file since they are child folders of my main shared folder they are automatically shared.
  4. After I upload I get can get a public access link like this

 

42098598-right_click

 

 

42098600-share

  1. After that, I copy the link and link it here. I have just linked a document but you can link anything, a zip folder will be the obvious choice since Posterous does not allow it.
  2. That’s it. I am now going to continue to my other blog and use this technique there 😛

There is always a way around..

 

Hope this helps,

Later.

 

Linq and Automapper, A View Model and Data Model binding solution. Part – 1

Hi there, Hope you are doing great, I have another topic I would like to discuss with you! It’s Automapper. You may have heard of it and you may have already used it but I think there will be a little take away for everyone in this post. This will…

Hi there,

Hope you are doing great, I have another topic I would like to discuss with you! It’s Automapper. You may have heard of it and you may have already used it but I think there will be a little take away for everyone in this post. This will be the first part of the post

Today we are going to talk about:

1) How we can use Visual studio Nuget to get Automapper in our MVC 3 solution.

2) How we can map out LINQ data classes ( I will call them Data Model classes ) and bind them using Automapper.

3) Discuss how efficient and beneficial Automapper is than manual mapping.

However this first part will only consist of basic scenario. A basic mapping of Data Model classes to View Model which will be used by our views. The idea is to familiarize and know Automapper before we start unleashing all it’s powers.

Let’s start with Nuget. Nuget is a God send to me. I have had the pain of manually adding references, dll, scripts and css, setting dependencies to .Net project for a simple solution that is provided by a third party tool. Nuget makes all that as simple as few clicks. It’s a “Package Manager” that now ships with Visual studio 2010. You can add thousands of third party tool without all the hassle by searching in it’s console, It will automatically set references, dependencies and what not. You can learn more about Nuget here.

So I used Nuget to find Automapper. Let’s discuss a little bit about Automapper.

Automapper is a object to object mapper. You can potentially map any object to any other object easily via this Automapper library. I personally use to map my Data Model to View Model and vice versa.

Why? Because Automapper takes care of my unproductive coding where I just write redundant code of mapping View and Data Models, It automatically does it for me at fairly low cost. Yes! A few configurations and we are done! Just give Automapper your input model and gives you your desired output model. For complete details see this.

I like to use LINQ to query my SQL database in my MVC solution. So for testing purposes I created this database dragged tables to my LINQ file which automatically created Data Classes for me. These classes look fairly like my model but I don’t want to use them as my View Model ofcourse… So Let’s create a basic Customer Model (View Model). Here is how it looks.

37272671-Customermodel
37272672-DBMLCapture

Fairly simple. Fairly similar to my Data Model Class. For part 1 let’s keep it that way for now.

Now I have installed Automapper but haven’t done anything with it yet. Let’s do it.

I have created a Folder “Data Context” where I keep my .dbml file and I have created a static class called “Mapping“. Mapping because it’s going to perform mapping via Automapper and static because it will be common for all the sessions.

Here is how it looks.

37272689-MAPPIING

There are three methods,

Customer_ViewModelToDataModel() -> It calls Mapper (Autmapper’s class) .CreateMap takes in two template types, since it’s View Model-> Data Model binding the first argument is Input(View Model) and second argument is desired output type which is DataContent.Customer our LINQ Customer class. Based on relationships in Database, LINQ created a Transcation member in Customer class which is not present in out View Model “Customer ” class hence we perform an “Ignore” to leave that member out of the mapping.

Thats it. Automapper created a map for us. We don’t even have to specify which members map to which in each models.. Cool isn’t it.

Similarly we do Data Model -> View Model, since View Model’s Customer class does not have a “Transaction” member there is nothing to ignore in it. We have created another map.

The third function PerformMapping just wraps these methods so we can call them together.

Now, the application needs to know about this mapping before anyone tries to map one object to another. Since this is Asp.net web project the best place to call our “PerformMapping” function will be Global.asax. Here is what I do there.

37272706-global

This is it. Your application knows that there is a map and these objects can be converted into one another via Automapper, but wait how to actually do that?

Here is how. I have created a view strongly typed with my View Model Customer. I will let MVC generate fields for me and this is what it gave me. Now we will perform simple insertion in DB for this posted View Model, we will convert this into Data Model Customer obect that LINQ recognizes and perform and insertion into a DB. So here are the snapshot for these steps

37272888-createcust
37272889-createcust1

Notice I now use Mapper.Map instead of CreateMap, the templated parameters remain the same, the first one my input object, second one my output object but here i pass a object as a parameter so that Automapper can read from this object and write it to my desired object and give me back..

You would want to see that Model inserted don’t you.. Let’s generate another view called Show Customer which will fetch this view out, Only this time we will use Automapper to convert our Data Model LINQ Customer class to our View Model Customer class and pass that along in the View so that our view can display that. Here is a method that does that. Sure enough I have my Data Model as input, View Model as output and a LINQ queried data object of Customer passed in to Mapper.Map method. It gives me my View Model as expected. I now use this View Model and pass it down to my strongly typed View.

 

37272899-showcust1
37272900-shwcust

OK so we have seen what Nuget can do, and how via automapper we can convert the objects quickly into one another without writing any stupid redundant code, without even specifiying the individual member mapping in any of these model, pretty slick I think.

WAIT It is not over yet…

If you are anything like me you would wonder Automapper sure converts the data under the hood nicely but what are the cost that comes with it? Well for this kind of a mapping, not much.. Have a look a this.

Specially the last image.

37272760-timetest1
 37272761-timetest2
37272763-timetest3
37272765-timetest4

I am comparing the binding of 1, 10, 100, 1000, 10000, 100000 set of sample models via manual mapping and Automapper, manual mapping ofcoruse is faster but Automapper is not left that far behind. But again this is my i7 with 8 Gb RAM server and you will hardly parse 100000 model on a single shot. Also It’s the application expected use which decide how crucial these timings are and whether it is wise to choose / add conversion layer between your data model and view model. That being said, do not forget this is a smile mapping and not fancy. In part 2 we will have complex model binding and again see if Automapper keeps up the performance like this..

Hope you will stay around…

Later..