Thursday, April 30, 2009

Reflection performance

int x = 10; Assembly a = Assembly.Load("mscorlib"); Type t1 = typeof(int); Type t2 = x.GetType(); Type t3 = a.GetType("System.Int32"); Type t4 = Type.GetType("System.Int32"); Console.WriteLine(t1 == t2); Console.WriteLine(t2 == t3); Console.WriteLine(t3 == t4);

All of the equality comparisons will evaluate to true and, assuming that Type's Equals method is transitive (as all Equals implementations are supposed to be), then we can infer that t1 == t2 == t3 == t4. Loading t1 is the most efficient, t2 is a close second, and t3 and t4 are horribly inefficient. t3 is slightly more efficient because it only searches mscorlib.dll, whereas t4 searches all loaded assemblies. In fact, in a little test program I wrote, t2 is twice as slow as t1, t3 is 100 times slower than t2, and t4 is twice as slow as t3.

Tuesday, April 28, 2009

How many chinese characters can a computer display?

Recently there is news Name Not on Our List? Change It, China Says? Some people think of it from a perspective of culture, philosophy, or politics. But I a software engineer, let's talk about it from perspective of computer science.

When we say put your name in computer, what does it means? Let's say your name is "a", it will be converted a number 97 by the computer, this number is represented in a serial of bits (0 or 1). This process is called encoding. But the text you see, is not a number, why? Because computer convert the number into a picture, we call it decoding? The most poplular encoding format today, it is unicode. It uses 16bit to store all the charactors(no matter it is english letter, or chinese charactor, greek, let's just call them charactors at this moment). 16 bit means 65536 possibilities of combination, which means the system can only accommodate 65536 character. As I know the unicode system is still evolving, so it actually can accommodate more than 65536. But the fact is it can only handles limited number of character. In unicode system, the English letter 'a' is converted to number 97. And the Chinese character 'δΈ€' (one) is converted to 19968. Lets say, I have a new baby, I want to give it a Chinese name, I look up a ancient Chinese dictionary, the dictionary was created long before modern computer was invented. And I found a character in the dictionary, which is not our encoding system for example unicode. So there is no way to input the name into existing computer system. What option do we have? We can either update encoding system to encode your name. We need to create a number, and create a picture, and associate the number with the picture. And we also need to distribute the encoding system to all the computers? Obviously, it is not an easy job. The easy solution is to pick your name from the characters in the existing encoding system, for example unicode, but not from an ancient Chinese dictonary or even invent a Chinese character which never exists. That is what the Chinese government is try to do. Actually, unicode already can display more than 20944 Chinese character, even the most knowledgeable Sinologist can use. There are surely some people who will be affected, but 1.3 billion chinese, it is not that significant. Click here to see a list chinese character in unicode ranged from 19968 to 40911.

Monday, April 27, 2009

divitus classitus

In the book of CSS Mastery: Advanced Web Standards Solutions, there is a section about divitus and classitus.

Using too many divs is often described as divitus and is usually a sign that your code is poorly structured and overly complicated. Some people new to CSS will try to replicate their old table structure using divs. But this is just swapping one set of extraneous tags for another. Instead, divs should be used to group related items based on their meaning or function rather than their presentation or layout.

The root reason of this phenomenon is that designer tend to rush to see the result first, and forget the semantic of the content(the markup) express. My experience is that the a clean markup with strong semantic is a good document. A good document is starting point of good design. A good design is easy to be restyled and extended. Most of visual style can be implemented by CSS of current version. If it can not satisfying your requirements, we can wait for next generation (CSS 3 or CSS 4?). But before they are available, we can use javascript implement your advanced design needs. But the bottom line is to forget about style, when you authorize your markup, and always remember make your markup semantic, which means your document is still understandable even it is opened in notepad or lynx.

Semantic and style , they are different concern. While some developers and visual designer understand the rule of separation of concern, but web technology (like asp.net server controls, Web form) tend to make people deviate from it. Although it is not the fault of these technology, in fact, you can use these technology to achieve very semantic markup, but they tend to lure people to mix them together. ASP.NET MVC is trying to fix this.

Below is example of divitus classitus.

<div class="login_page"> <div class="login_header"> Registration</div> <div class="clear"> &nbsp;</div> <div class="clear"> &nbsp;</div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> First name:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Last name:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Email address:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Password:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Password Confirmation:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Company / Access code:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> &nbsp;</div> </div> <div class="reg_box"> <a href="#"> <img src="images/btn_submit.jpg" border="0" /></a> </div> </div> </div>

Here is restructure markup

<div id="membership"> <fieldset> <legend>Login</legend> <p> <label for="txtUserName"> Email Address </label> <input type="text" id="txtUserName" name="txtUserName" /> </p> <p> <label for=""> Password</label> <input type="password" id="txtPassword" name="txtPassword" /> </p> <p> <label for=""> Remember me</label> <input type="checkbox" id="chkRememberMe" name="chkRememberMe" /></p> <p> <input type="submit" id="btnSubmit" name="btnSubmit" /> <a href="registration.aspx">First time here?</a> <a href="ForgetPassword.aspx">Forgot your password?</a> </p> </fieldset> </div>

Wednesday, April 15, 2009

Object vs Function

Object.prototype.sayhi = function() { alert("hi"); } var o = {}; alert(o.constructor); //function Object(){[native code]}, created by function Object() alert(Object.prototype); //[object Object], ultimate prototype o.sayhi(); //show hi Function.prototype.saybye = function() { alert("bye"); } alert(f.constructor); //function Function(){[native code]}, created by function Fuction() alert(Function.prototype); //function prototype{[native code]}, //I think Function.prototype still link to an object constant {}, //so that it can be route to [object Object], the ultimate prototype alert(Function.prototype.constructor); //function Function(){[native code]}, created by function Fuction() alert(f.prototype); //[object Object], ultimate prototype function f() { } f.sayhi(); //show hi f.saybye(); //show bye alert(document.constructor); //[objectHTMLDocument alert(document.constructor.prototype); //[Interface prototype object] alert(document.constructor.prototype.constructor); //null in IE, function Object() in firefox

Tuesday, April 14, 2009

delete

The delete operator can be used to remove a property from an object. It will remove a property from the object if it has one. It will not touch any of the objects in the prototype linkage. Removing a property from an object may allow a property from the prototype linkage to shine through: var stooge = {}; stooge.name = "fred"; if (typeof Object.beget !== 'function') { Object.beget = function(o) { var F = function() { }; F.prototype = o; return new F(); }; } var another_stooge = Object.beget(stooge); another_stooge.name = "jeff"; alert(another_stooge.name); //jeff delete another_stooge.name; alert(another_stooge.name); //fred

do not use hasOwnProperty

The hasOwnProperty method does not look at the prototype chain: flight.hasOwnProperty('number') // true flight.hasOwnProperty('constructor') // false //use if (typeof flight["number"]) == "undefined") { }

|| and &&

&& is guard operator aka "logical and", and || is default operator "aka logical or", we normally see the code like the following

if ( condtion1 && condition2) { } if (condition1 || condition2) { }

&& means, If first operand is truthy, the result is second operand, else result is is first operand. It can be used to avoid null reference.

if (a){ return a.memeber; } else { return a; } //this is the same return a && a.member

|| means, if first operand is truethy, then result is first operand, else result is second operand. It can be used to fill in default value like the following

var last = input || {}; //{} is default value