Thursday, 11 March 2010

Wednesday, 10 March 2010

Making Internet Explorer load lightning fast

I have been using Internet Explorer as my main browser since IE 3.0 and usually I have no problem with it. I know the rendering engine is a piece of crap, but I got used to the feel of it and the developer tools in IE8 are nice and FireFox just rubbed me the wrong way, so that was that.

But since Internet Explorer 7 upwards, and especially with IE8, the first loading of the browser got slower and slower. So slow, in fact, that I have to wait several seconds for the browser to allow me to use the address bar. No wonder I have been slowly using Chrome for searching and reading the news and all that.

Today I got kind of annoyed with it and started looking into the Internet Explorer options. An advanced one was Enable third-party browser extensions and I removed it, just to see what it would do. Suddenly I had no Google toolbar (but I don't use it anyway, since I enter all my searches in the address bar), Flash worked, the pages worked, the internal IE8 developer tools worked. The only difference is that Internet Explorer would load instantly!

Ok, that would work as a last option, but I got intrigued so I enabled the option again and went into the Manage Add-ons section. I haven't being paying attention before, but each add-on in the list also has displayed the loading time. I looked around and I found Groove GFS Browser Helper that loaded in ... 8.2 seconds! Disabled it: almost instant browser loading. Two other addons had over one second load time, both of them from Sun and related to Java (which almost no one uses anymore in web pages). Disabled them and now I have my browser back! Just for the sake of it I googled for Java Applet and went to a site with a Java on it. Amazingly, the applets all worked! So the addons themselves were not responsible for loading Java, they were just useless junk.

But what is this Groove thing? Is it some malignant Microsoft rival that purposefully makes its browser addon load slower as to sabotage Internet Explorer (hint! hint!). It appears not. As it usually happens, the greatest enemy of Microsoft is Microsoft itself: Groove comes from Microsoft Office 2007!

What does Groove Syncronization do? Microsoft Office Groove was designed for document collaboration in teams with members who are regularly off-line or who do not share the same network security clearance. In other words: nothing useful. Even better, the whole groovy thing can be easily uninstalled, which I also did.

To uninstall Groove go to Add or Remove Programs, look for the Microsoft Office entry, click on Change, remove Groove. That's it!

Sunday, 7 March 2010

Css LESS jQuery plugin

I've heard about LESS yesterday so I thought about how I would use it in my projects. Using a .NET http handler is just fine, but I was thinking of a simpler approach, so I created jQuery.cssLess, a jQuery plugin that reads the css and interprets it. You can find it at Github.

Current version supports variables, mixins and nested rules. I am wondering if it is even worth it to implement operations. It may bloat the plugin too much. What do you think?

Little did I know, someone else was trying a js centric approach to this. The project is called less.js and it's made by cloudhead. You can find it at GitHub.

If you are using LESS and decide to use jQuery.cssLess, please leave me a message about it and whatever your opinions are.

Tuesday, 2 March 2010

WPF Binding expression that depends on a parent that might or might not be there

I had this control that functioned as a textbox. The request was that it behaved differently when used as an editor in a grid and was in the "add new record" line. I agree that the best solution would have been for the grid to set a property to the editor when placing it somewhere or at least when adding to the grid, but that is not relevant.

The solution was, of course, to add a DataTrigger that would check a property of the parent grid row object, by using RelativeSource and FindAncestor. However, that approach resulted in an ugly binding error in the Visual Studio debug view window when the textbox was being used stand alone. It didn't break execution, but I kind of disliked it.

The solution, at first, was to use a Converter. However, the converter class does not apply to the RelativeSource, but to the referenced property. The binding would first look for the parent row, find nothing, then return a null reference exception when trying to access the path property.

Another solution would be to look for the parent in the LayoutUpdated event (only the first time) then look for the trigger and enable or disable it. Yet another is to reference a property that the textbox would set depending on the parent found above. Both solutions would be cumbersome if you don't have ownership of either control.

It appears that there is no way to determine the way a relative source is found. I don't know if they changed that in the WPF4 implementation, but it would have been a nice touch. That being said, I believe one can create a custom Binding object to take care of this. I will update the post with some sources when I get to working with WPF again.

Update: I've reached the conclusion that the problem is the question, not the answer. In order to make an element have a certain behaviour when a child of another element, a style should be added to the resources of the parent. This way, the problem is solved. I agree that sometimes it is cumbersome to do so, but the alternative is that your control will always search for a parent that might not be there. So, the solution is to make the parent make the child do what you want.

Monday, 1 March 2010

Javascript's eval Scheme

This weekend I participated in an advanced Javascript training (and workshop, as it turns out) gratiously offered by Frontend Force, a company specialised in professional Javascript code (not web design). That means they do stuff for browsers, for cell phones and even (if you didn't already know) for the server-side platforms running on Javascript. At this moment they are hiring for positions in Berlin (no remoting) and are looking for true IT professionals, preferably with strong Javascript knowledge. So contact them... now! They also do consulting.

The trainers were Dawid de Rosier and Piotr Zwolinski, both from Poland, more the former than the latter, and I have to say that I've learned quite a few new things and understood better things I already knew, just from Dawid's 6 hour presentation. The training was great also because it happened in the weekend, so I didn't have to feel guilty for skipping work from my regular job or to feel bored doing nothing in the weekend. I say 6 hour presentation because the next day we did an application in typical agile manner, working in teams and applying the things we've learned. The project can be found on the net, it is open, and it is a ... shopping cart. I know, terribly boring subject, but the code was the focus and the code was cool (at least my part, of course... :) ). The link for the project is this: 3F Commerce. But enough of that, after all the coding experience cannot be translated into a blog post, I will talk mostly about the presentation in the first day and the things I've learned there.

It should be interesting enough to get your attention that the training was about the Javascript programming language not its use in the browser. After all, Javascript is a stand alone language and, as you will see to the end of the post, used in a lot more contexts. Its roots stem from Lisp, Scheme (hence the title of the post), Self and a bit of Perl and the syntax is C like because it was cool at the time (and it still is, maybe the Perl guys should have thought of that). The name Javascript itself was used as a marketing ploy because Java was all the rage back then.

As a dynamic language its most proeminent features are the protoype based inheritance and the closure/lambda approach to variable scope. One of the most important things, if not the most, that I have learned is that each function remembers the context in which it was created. For procedural style of programming in Javascript, the context is the global one, so many people don't know or care about it. Short example:

function createMyFunction() {
var x = 11;
return function () {
alert(x);
};
}
Now if you execute var f=createMyFunction(); f(); you get a message box with a value of 11. The x variable is remembered, even if in the scope of a function that is not longer in execution. I will show you later how you can create truly private members of a class or function. Well, in Javascript there are no classes, only functions, but they have a different meaning from, let's say, functional programming.

First of all, we talked about the variable scope. Javascript does not have block scope. That's important. It means that if you do something like

if (condition) {
var x = 10;
}
alert(x);
you will get an alert with the value 10. The only scope is function scope in Javascript, meaning that to get the same effect as a block scope, the previous example should have looked like this:

if (condition) {
(function () {
var x = 10;
})();
}
alert(x);
and now you would get undefined.

Then we delved into apparently obvious stuff like

var x = 'true';
if (x) alert(x == true);
The code above would display false. Why? because there is an equality between different types and they are both converted into... numbers! true gets an internal representation of the true value, while 'true' gets the value NaN, as it is not a number. And they are not equal. The condition itself is satified, because x is not empty.

With these two things explained (better than I can here) it was concluded that global variables should be avoided, while in order to do equality one should use the triple equal sign === which compares not only the values, but also the types. It is also much faster, as it doesn't try to convert anything. One good use of the normal operator == is when comparing to null. Let me exemplify:

null == null //true
undefined == null //true
0 == null // false!
This is better than using a variable as a condition of 0 would not execute an if block.

The next bit was about functions and how you can use them as classes. Here it was explained how functions remember their environment. This kind of functions are called closures. An interesting thing you need to understand in Javascript is that the closer the variable is from your execution scope in the execution hierarchy, the faster its access is. Let's take a very common function: document.getElementById. Here is a faster version of it:

var byId = (function () {
var D = document;
return function (id) {
return D.getElementById(id);
};
})();
This is faster because byId is a closure and it gets a reference to the document (slow global variable) at its creation and remembers it in the environment. Every time you execute it, it will use the closest scope to find the variable and it will be faster. On my Internet Explorer 8, byId is faster than document.getElementById with 22%.
A very important thing to see here is that D is not accessible anywhere outside the function. Not even byId.toSource would show where D is created. So, indeed, it is a private member of the function!

A lot of stuff was discussed about random but important quirks of the language.
  • There are two main categories of types in Javascript: primitives and objects. For example '5' is a string primitive, while new String('5') is an object. The String object has methods, like toLowerCase. Yet '5'.toLowerCase works, because the primitive is automagically converted into the corresponing object.
  • The instanceof operator checks if a certain object is of a certain type. Kind of useless, since each object can have whatever members one defines dynamically and implemented in whatever way. Needless to say '5' instance of String is false. Or maybe not so needless :)
  • Each function has a special local variable called arguments, which represents an array of arguments passed to the function (no matter how many were defined in the function signature). This object has some special members like arguments.callee, which represents the function being executed. See how it is used to create an anonymous recursive function:

    var x = 10;
    (function () {
    alert(x);
    x--;
    if (x > 0) argument.callee();
    })();
  • Another fun thing is that there is a default undefined object. You can compare something with undefined: if (x === undefined). Unfortunately, undefined is not a reserved word. So this code is valid: undefined=10;. Just compare the type to the string 'undefined': if (typeof(x)==='undefined').
  • Most Javascript coders are familiar with the in keyword that is used to create foreach like loops: for (var key in hash) do(hash[key]);. Very few know that 'in' is also an operator: if ('x' in a) { do (a.x); doAgain(a['x']); }. It checks for the existance of a property in an object or its prototype. If you want to know if the property if of the object or of the prototype chain, use the hasOwnProperty method. Prototypes will be explained shortly.


I've spoken a little about private members, but now I will tell you about inheritance! Yes, it is possible in Javascript, who would have thought? :) Only it is a prototype inheritance.

What are prototypes? Each function has an object that would be used to return default values for any of its instances called prototype. It's kept as a reference, so only one prototype object for any number of instances. This prototype, as almost anything in Javascript is writable, replaceable, extendable. Let me give you a short example:

function MyClass = {};
var m = new MyClass();
alert(m.someProperty);
MyClass.prototype.someProperty = 'set';
alert(m.someProperty);
m.someProperty = 'overwritten';
alert(m.someProperty);
delete m.someProperty
alert(m.someProperty);
This code defines an empty function called MyClass. You use it as a type and create instances of it by using the new operator. The first alert will show 'undefined' because the instance has no someProperty member. We then set it in the prototype and so it will be seen in any of the instances of MyClass, so the second alert will show 'set'. Then we set the actual value directly in the object. The third alert will display 'overwritten'. Delete the value (unset it) and the fourth alert will display 'set' again.

So what about inheritance? Let me give you the short story:

function MyClass(msg) {
// optional
// ParentClass.apply(this,msg);
}
var F = new Function();
F.prototype = Parent.prototype;
MyClass.prototype = new F();
MyClass.prototype.constructor = MyClass;
Here we create a MyClass object that inherits from ParentClass. In its constructor we apply the ParentClass function in the context of the MyClass instance (if we want to), then we create a new temporary F function in order to copy the prototype, but not whatever values are set via the constructor and we set an instance of it as the prototype for MyClass. Then we recreate the constructor of MyClass in its prototype, since it was overwritten.

Too fast? Let's examine what would happen when a new MyClass instance is created:
var m=new MyClass(msg);
  • the instance of the F temporary class which holds any and all of the members in the prototype of ParentClass is the prototype of MyClass
    the MyClass prototype is different from the ParentClass prototype, so any changes done to it are not reflected to the ParentClass prototype
  • the constructor of MyClass (itself) is executed in the context of the new instance which executes the constructor of ParentClass in the same context and thus sets anything that the parent class would set to its own instances


Now the new instance has all the default members an instance of the ParentClass would have and its own members or overwrites of the existing ones. Inheritance!

To end this over long post, I will give you a piece of code of a class that inherits another class, has private members, setters, getters, etc.


(function () {
// base class
Animal = (function () {
// private member
var _version = '0.9';
return function () {
// priviledged getter (public, with access to the private member)
this.getVersion = function () {
return _version;
};
// priviledged setter
this.setVersion = function (value) {
_version = value;
};
};
})();
// prototype public method (only one referenced in all instances of Animal)
Animal.prototype.MakeNoise = function () {
throw "Abstract animal class must be inherited";
};
// prototype public method
Animal.prototype.getType = function () {
throw "Abstract animal class must be inherited";
}

// child class inherits from Animal
Duck = (function () {
// private member
var _type = 'Duck';
return function () {
// call the base constructor
Animal.call(this);
// priviledged getter (no setter for _type!)
this.getType = function () {
return _type;
}
// set version using base class method
this.setVersion('1.0');
// hide base class method (emulation of protected methods.
// of course, one can use delete a.setVersion
// and then access the base method)
this.setVersion = function () {}
};
})();
// copy the base class prototype
var F = new Function();
F.prototype = Animal.prototype;
// set it as the parent prototype
Duck.prototype = new F();
// prototype public method
Duck.prototype.MakeNoise = function () {
alert('Quack!');
};
})();

var a = new Animal();
alert(a.getVersion()); // 0.9
try {
alert(a.getType()); // error, abstract getter
} catch(e) {
alert("error! (" + e + ")");
}
try {
a.MakeNoise(); // error, abstract method
} catch(e) {
alert("error! (" + e + ")");
}
a = new Duck();
a.setVersion('999'); // no effect, since setVersion was replaced with empty function
alert(a.getVersion()); // 1.0
alert(a.getType()); // 'Duck'
a.MakeNoise(); // 'Quack!'


Some more information about tools that one can use in javascript programming:
Aptana - standalone js IDE and also Eclipse plugin
Rainbow9 - javascript IDE as a web application
QUnit - unit tests for javascript
JsLint - checks the validity of your javascript code online
jsbeautifier.org - reformats javascript code
Closure Compiler - minimize javascript code
JSA - obfuscator (it's an untranslated Chinese site, just use the last button)
Xmake or Rmake - code builders
NodeJS - javascript powered server side framework
jsDocs - makes documentation (specific comment formats are required)
JS TestDriver - unit testing and integration
Persevere - makes the connection between javascript fron ends and server side databases

Friday, 26 February 2010

ASP.Net using both inner properties and default innner properties

This post should have been titled Have your cake and eat it, too, but people need to find it in Google.

First of all, a bit of theory.

Web controls in ASP.Net can persist their properties in markup in two ways: attributes and nested tags. The problem with attributes is that the type of the property may be complex and iself have properties.

ASP.Net does have a mechanism for specifying subproperties by using a hyphen to separate properties and their subproperties. For example the BackColor property of a row of a GridView can be specified as both BackColor="Red" in the RowStyle tag or as RowStyle-BackColor="Red" in the GridView tag. However, that way is pretty unreadable and cumbersome that is why using inner tags is sometimes necessary (and implemented by decorating the properties with [PersistenceMode(PersistenceMode.InnerProperty)]).

But using inner tags is not always possible! Imagine a control like Panel. Its contents are interpreted as controls that are supposed to be rendered, so an inner tag would just be rendered to the page and not interpreted. There is no way of making such a control (decorated in its class declaration with [ParseChildren(false)]) have inner properties, but one can use something like an ITemplate property so that the controls can be placed in a tag of their own.

Also, consider controls like the DropDownList, in which ListItems are placed directly in the control tag and it is assumed automatically that they are children of the Items collection. That is because the Items collection is marked as [PersistenceMode(PersistenceMode.InnerDefaultProperty)] which means all the children of the control are considered elements in the property. Adding an inner tag would raise an error, as it would not be a ListItem object.

Yet, there is a way! And finding it was like discovering the holly grail. I have only tested it on a ListControl, but it should work on templated controls as well.

Let's start with a class that inherits from ListControl, therefore it has the Items collection in it and adding a complex property to it. I will create a special class called InnerTagClass that has a Text property. The control that inherits from ListControl and which I will call BaseClass will have an InnerTag property of type InnerTagClass. The code would look like this:

public class BaseClass:ListControl
{
private InnerTagClass mInnerTag;

[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[NotifyParentProperty(true)]
public virtual InnerTagClass InnerTag
{
get
{
if (mInnerTag==null)
{
mInnerTag=new InnerTagClass();
}
return mInnerTag;
}
set
{
mInnerTag = value;
}
}
}
Now go into the designer and modify the Text property of InnerTag. You will notice that it will be saved as a hyphen attribute, while adding items to the Items collection would render the list items as children in the BaseClass tag:

<local:BaseClass ID="BaseClass1" runat=server InnerTag-Text="Test">
<asp:ListItem>Test</asp:ListItem>
</local:BaseClass>
Now, an InnerDefaultProperty is still an InnerProperty. You can put the ListItem inside an Items tag and it will still work, and also you can add an InnerTag tag with a Text attribute and it will work as well! However, if you go into the designer and you change the Text for the InnerTag property you get the changed property as an attribute and the previous InnerTag tag, with the old value. That is not acceptable.

However, you can inherit from the BaseClass, override the Items and the InnerTag properties and change their persistence mode to InnerTag! Here is the code:

public class InheritedClass : BaseClass
{
[PersistenceMode(PersistenceMode.InnerProperty)]
public override System.Web.UI.WebControls.ListItemCollection Items
{
get
{
return base.Items;
}
}

[PersistenceMode(PersistenceMode.InnerProperty)]
public override InnerTagClass InnerTag
{
get
{
return base.InnerTag;
}
set
{
base.InnerTag = value;
}
}
}
Now editing in the designer will create the Items tag and add the list items to it and an InnerTag tag with a Text attribute! But when you type it in source view, you get intellisense for both the Items tag and the ListItem tag! Adding only list items to the control works just like an inner default property.

There is a catch, though, as adding list items as direct children of the InheritedClass tag will not allow you to change the values of Items or InnerTag from the designer. It will save the current items in an Items tag, create the InnerTag, but fail to remove the previous items and thus throw a designer error. Still, fixing that is as easy as switching to source view and removing the old items.

Another possible question would be if one could add both InnerDefaultProperty and InnerProperty as decoration to a property in a class, but the answer is no. An error of Duplicate 'PersistenceMode' attribute is thrown.

Also, it might be possible to be able to fix that via a specialised editor, but I think it would be too complicated by far.

So there you have it: a way to satisfy both the styles of source people (like myself) and designer people by using inheritance and persisting differently the base property and its override.