A few days ago I had to solve some very ugly bug that was caused by exactly the same approach I mentioned.

The code contained some calculation with a very large numbers and some how the results weren’t close to what we expected.

Let’s see some code

            // Example #2
            var firstValue = 3;
            var secondValue = 0;
            var result = firstValue / secondValue;

Simple, isn’t it. Running the above code will throw DivideByZeroException exception as we all expected.

Now look at the following code. Will it behave the same way ?

            // Example #2
            var firstValue = 3.5;
            var secondValue = 0;
            var result = firstValue / secondValue;

As you probably suspected – it won’t. It will run and complete without throwing any exception at all.
So, what happened here ? Are we talking about some serious bug Microsoft isn’t aware of ?

Well, first of all it is not a bug. The difference between the two examples is the type we are trying to divide by zero. In the first example firstValue is an Integer and in the second example is Double.

Does that mean we can divide floating point numbers by zero ? Yes we can.

Now you are probably wondering what will be the the value of result. Well, the answer is – Infinity. Yes, there is a value called Infinity and to be more specific, in our case the result is a Positive Infinity. The interesting part is because Infinity is a value you can make calculations with it and it won’t throw any exception. Let’s see some examples :

            var i = 3.5 / 0;                // Infinity
            var t1 = i++;                   // Infinity
            var t2 =  i--;                  // Infinity
            var t3 = i/i;                   // NaN
            var t4 = i * i;                 // Infinity
            var t5 = i>0;                   // true
            var t6 = i > double.MaxValue;   // true
            var t7 = double.MaxValue - i;   // -Infinity [ Negative Infinity ]
            var t8 = i-i;                   // NaN

So, now we know that calculations using Infinity are possible but in most cases the result won’t be something you can use for further calculation. By the way, if you will try to insert Infinity into Microsoft SQL field (at least in 2005) it will throw an exception saying “The supplied value is not a valid instance of data type float”.

And now i would like to return to the bug i was talking about at the beginning of this post.
What do you think will be the result of the following code.

            var i = 3.5 / 0;
            var result = (long)i;

The result is very numeric, not NaN and not Infinite but -9223372036854775808.
Now imagine situation when you must calculate some numbers that represent money, I mean loans, balance, etc. I’m sure you can easily understand how far can it go and which unpleasant result we can get.

C# provide us some usefull functions and constants we can and must use to avoid the above mistakes.

            //  Returns a value indicating whether the specified number
            //  evaluates to negative or positive infinity
            double.IsInfinity(double d) 

            //  Returns a value indicating whether the specified number
            // evaluates to negative infinity.
            double.IsNegativeInfinity (double d)

            //  Returns a value indicating whether the specified number
            //  evaluates to positive infinity.
            double.IsPositiveInfinity (double d)

            //  Represents negative infinity. This field is constant.
            double.NegativeInfinity 

            //  Represents positive infinity. This field is constant.
            double.PositiveInfinity

            //  Represents a value that is not a number (NaN).
            //  This field is constant.
            double.NaN

Floating point is necessary in so many cases – use it wisely and carefully.

ASP.NET was an easy choise for a server side code, but what about client side ?
The heavy viewstate, endless event handlers and infinity number of server side requests just to make the GUI  friendly – well, it just didn’t sound as a proper way to do it.

So, what do we have ?
.NET as a server side platform, but despite  all it’s powerful abilities it has nothing to do with client side. At the end of the day all those fancy control are just HTML and JavaScript.

JavaScript is still the engine that runs at the client side and it’s great, but we all know how many lines of code we have to write and time to spend to make it fast, modular and cross browser.

jQuery – it’s a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Indeed, we can do a many things with jQuery and it realy simplify the coding, but what if we have to build a product list with complicated HMTL, complex logic and real time manipulation ?

As i mentioned before, ASP.NET and UpdatePanels are just to heavy and JavaScript is to long.

So, i did some research and find a couple of JavaScript Template Engines.
The first one i bumped in was jsRepeater. At first it seemed like a great solution but after a few tests i found all kinds of bugs related to the syntax conflicts with HTML and JavaScript.

After a few days of googling, tests and googling again i found the one and only –  jTemplates.
jTemplates is a template engine for JavaScript, wich is wraped in a jQuery Plugin.
The syntax is very simple and  intuitive. It’s support parameters, includes, if/else, loops, JavaScript functions and many other nice and usable features.

Let’s say we want to list all our products. What we have to do is to write the template (HTML), pass the data and we have a product list.

Look how easy this is. You just write HTML and werever you need to insert some data you put {$.T.P.ColumnName}.

So, how we use it ?
Just add some textarea to your page, give it some id, set it’s display style to none and write your template inside.

<textarea cols="0" rows ="0" style="display:none;" id="ProductListTemplate"><!--
{#foreach $T.Product as P}
	<div style=”float:left;width:150px;height:150px”>
		<div>{$T.P.Title}</div>
		<img src=”{$T.P.Url}” alt=”{$T.P.Title}” style=”width:10px;height:10px” />
		<hr />
		<div>Price : {$T.P.Price}$</div>
	</div>
{#/for}
--></textarea>

Add some empty container that will hold the result.

<div id="ProductListContainer"></div>

Execute setTemplateElement and execute processTemplate while passing the data into it as a parameter

$("#ProductListContainer").setTemplateElement("ProductListTemplate");
$("#ProductListContainer").processTemplate(data);

Easy, isn’t it ?
I must say that the above example is a simple one, but I’ve been using jTemplates to create complicated lists, grids, trees, popups and even an image editing web application. Use it, I’m sure you will love it.

Yesterday I had to write some app that reads files located on some remote computer.
As I knew already this ins’t such a good practice, because your code can just hang/freeze for seconds waiting for that UNC path to become available or just checking it’s existence.

Still, I had to provide some quick solution and “hoping for the best” wasn’t good enough.
So, this is what I came up with.

        public static T Limex<T>(Func<T> F, int Timeout, out bool Completed)
        {
            T result = default(T);
            Thread thread = new Thread(() => result = F());
            thread.Start();
            Completed = thread.Join(Timeout);
            if (!Completed) thread.Abort();
            return result;
        }

        // Overloaded method, for cases when we don't
        // need to know if the method was terminated
        public static T Limex<T>(Func<T> F, int Timeout)
        {
            bool Completed;
            return Limex(F, Timeout, out Completed);
        }

The usage is very simple, just pass any method (declared or anonymous) and the desired Timeout in milliseconds to the Limex.

Example :

bool Completed;
string Content = Limex(() => File.ReadAllText(@"\\unc\dir\file.ext")
                       ,100 // milliseconds
                       ,out Completed);

if (Completed)
   // Do something
else
  // Do something else

Comments and suggestions for improvement are welcome and will be gratefully appreciated

And we were told endless times that the best practice is to load scripts at the end of web page. It’s true.

We also have document.ready events thanks to numerous javascript frameworks that gives us opportunity to perform most of our JS actions when document is ready to be manipulated. But there are cases when you do need JS blocking features.

Many ad serving systems work using document.write (One I’m have very good knowledge of is RealMedia), sometimes you need to load different versions of your scripts or your content rendering depends on some script and you have to be sure nothing is loaded untill your script is ready or may be you have script that depends on some script and you are not sure that this framework is loaded. Here comes document.write to your assistance.

I’m sure many people will say that I can load scripts using appendElement and then load depending scripts on it’s load event. This is also true, may be in my next post I will talk about this kind of script loading. But now lets see some samples.

Example #1

	<div style="border: 1px solid blue;width:200px;padding:10px;">
		Static element content
		<script type="text/javascript">
			document.write("<script type=\"text\/javascript\"
                                 src=\"writeContent.js\"><\/script>");
		</script>
	</div>

Content of the writeContent.js file:

document.write("<div style=\"border:1px solid red;width:200px;\">
     Dynamic element content<\/div>")

The result is pretty obvious:

In our next example we have some JS in in writeVariable.js file and we want to load and use it:

<div>
	<script type="text/javascript">
		document.write("<script type=\"text\/javascript\"
                      src=\"writeVariable.js\"><\/script>");
		alert(myVar);
	</script>
</div>

Content of the writeContent.js file:

    var myVar = "Some value";

You would expect to see alert “Some value” but actually you will get “myVar is undefined” error. Why? Look at the HTML structure created and understand why:

Script block that you wrote created right after script block that was executed, so obviously at the time you tried to alert myVar it didn’t exist in the document.

The correct way to write it would be:

	<div>
		<script type="text/javascript">
                      document.write("<script type=\"text/javascript\"
                           src=\"writeVariable.js\"><\/script>");
		</script>
		<script type="text/javascript">
                       alert(myVar);
		</script>
	</div>

You need to split your script into two blocks one writing the script and then second one using its data.

        if (a-b) alert("it's true!");

And another one

What will be printed as result of running this script:

	for (var n=10; n; n-- )
	{
		document.write (n + ",");
	}

The answer for both questions relies on the same principle of what JavaScript engine will evaluate as true and what as false.

    <script type="text/javascript">
        function doSomething(obj) {
            obj.style.color = '#cc0000';
        }
    </script>
    <a href="javascript:doSomething(this)">Link</a>

this keyword in his case was not A object as expected but window.
Having javascript:  in href attribute is like running JavaScript from address bar of your browser. It will run in window context.
Only if my friend was writing his code like this:

   ...
    <a onclick="doSomething(this)">Link</a>

it would work like charm.

But I never use javascript: at all in my markup. Why?
1. If you need text element that is clickable use span, any visual styling like text-decoration or cursor can be achieved using CSS.
2. If you don’t have actual link behind you shouldn’t use A tag. As far as I know it’s not good for SEO.
3. Javascript problems as i described above can arise
I would write the code above like this:

    ...
    <span style="text-decoration:underline;cursor:pointer;"
                 onclick="doSomething(this)">Link</span>

The only reason I know to use A for JavaScript triggers is to achieve hover effect without use of JavaScript.
If you know another reason why you should/shouldn’t use links as JavaScript triggers you’re welcome to comment.
After this post you can get an impression that I don’t like javascript: notation and you will be wrong,  actually there are very usefull tricks I use all the time:
1. Check some JS value on your page. Type javascript:alert(yourvariable) in the address bar and press enter.

You will get :

2. Or let’s say you have function somewhere on the page and you have to see it quick without searching through all your scripts. Or you wan’t to steal see how someone implemented something
Just type  javascript:alert(yourdesiredfunction) and voila:

UPD:
Just googled good page with JS best practices, it has Javascript: pseudoprotocol part that says almost exactly the same as my conclusions.
http://www.javascripttoolbox.com/bestpractices/

Will the following code compile and if yes what will be the result of it ?

static void Main(string[] args)
{
    int[] array = new[] {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};

    Func<int, int> func = i => {
                          Console.Write(array[i]);
                          return i;
                     };

    var result = array.Where(e => e <= func(2)).ToArray ();
}

<script type="text/javascript">
		function testThis(){
		  //who is "this"
		}
</script>

And now to the real example.

Let’s say you build a simple Javascript object:

<script type="text/javascript">
		var mathObj = {
			pi: 3.14,
			getCircumference : function(data) {
				alert(this.pi * 2 * data.radius);
			}
		}

		mathObj.getCircumference(10);
</script>

You have properties, you have functions, you can use this keyword to access properties of the object from its functions. Everyone is happy.
Now we want to add function that will get some server data using AJAX and run one of the functions our object has.
(To all who wondered what is $ stands for – I use JQuery framework in all my JS samples)

<script type="text/javascript">
		var mathObj = {
			pi: 3.14,
			getCircumference : function(data) {
				alert(this.pi * 2 * data.radius);
			},
			getRemoteCircumference: function(url) {
				$.getJSON(url, this.getCircumference);
			}
		}

		mathObj.getRemoteCircumference("RadiusData.js");
</script>

If we have {“radius”:5} in RadiusData.js file you would expect the result of getCircumference would be 31.4 but you will get NaN. Why is that? Because this keyword in this case will refer to some kind of object with request data returned by JQuery. What can you do?
Solution number one is to use your object name:

...
	getCircumference : function(data) {
		alert(mathObj.pi * 2 * data.radius);
	}
...

Ugly. You don’t have to return on object name in every function.
Solution number two is to use anonymous function and explicitly call your function:

....
	getRemoteCircumference: function(url) {
		$.getJSON(url, function(data){
			mathObj.getCircumference(data);
		});
	}
...

Good enough solution, but again I don’t like reusing object name…
And now to my favorite solution.

<script type="text/javascript">
   function getContextFunc(context, func) {
       return function() {
           func.apply(context, arguments);
       };
   }

   var mathObj = {
       pi: 3.14,
       getCircumference: function(data) {
           alert(this.pi * 2 * data.radius);
       },
       getRemoteCircumference: function(url) {
          $.getJSON(url, getContextFunc(this, this.getCircumference));
       }
   }

   mathObj.getRemoteCircumference("RadiusData.js");
</script>

Here apply function will come in handy. getContextFunc returns anonymous function that will run our original method in given context.
See some documentation

A couple of days ago, I had to create some web application with a very rich client side UI.
It worked like a charm in Google Chrome, Firefox… but IE7, after few dozens of nyroModal popups it just went dead.

Most of the styles are gone, JavaScript functions began to throw exceptions till it just stoped working, decided it can’t tolerate this kind of abuse any more and closed it self without any warning.

The first thing i did is to open Performance Monitor and what I see… every nyroModal popup i open cost me about 5Mb, so after a few clicks my IE7 virtual memory was about 789Mb. Terrifying, isn’t it ?

I’ve searched a bit and found the source of this problem was in one (of many) memory leaks IE7 proudly has – cleaning memory for removed HTML elements.

And now the fix.

1). Open your jQuery.js and find the next lines of code

    jQuery.extend({
        cache: {},

and add new function “discardElement”

    jQuery.extend({
        cache: {},

        discardElement: function(element) {
            var jqGCID = 'jqGarbageCollector';
            var jqGC = document.getElementById(jqGCID);
            if (!jqGC) {
                jqGC = document.createElement('div');
                jqGC.id = jqGCID;
                jqGC.style.display = 'none';
                document.body.appendChild(jqGC);
            }

            // place the element to the Garbage Collector
            // and clear it's HTML contents
            jqGC.appendChild(element);
            jqGC.innerHTML = '';
        },

2). Find the next lines of code in the opened jquery.js

	remove: function( selector ) {
		if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
			// Prevent memory leaks
			jQuery( "*", this ).add([this]).each(function(){
				jQuery.event.remove(this);
				jQuery.removeData(this);
			});
			if (this.parentNode)
				this.parentNode.removeChild( this );
		}
	},

and replace “this.parentNode.removeChild( this );”
with “jQuery.discardElement(this);”

	remove: function( selector ) {
		if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
			// Prevent memory leaks
			jQuery( "*", this ).add([this]).each(function(){
				jQuery.event.remove(this);
				jQuery.removeData(this);
			});
			if (this.parentNode)
				// this.parentNode.removeChild( this );
				jQuery.discardElement(this);
		}
	},

That’s it, now you (and every plugin) can do $(‘element’).remove() without being worry IE will eat all of your memory.

static void Main(string[] args)
{
    for (byte b = byte.MinValue; b <= byte.MaxValue; b++)
        Console.Write(b);
}

// A little tip
// byte.MinValue = 0
// byte.MaxValue = 255

How many times the above statement will be executed ?