1:    <script language="javascript" xmlns="urn:schemas-microsoft-com:xslt" implements-prefix="js">

   2:      <![CDATA[ 

   3:      // This will return a URI encoded string

   4:      function encodeURL(sUrl) {

   5:        sUrl.MoveNext();

   6:        sUrl = sUrl.Current.Value;

   7:        return encodeURI(sUrl);

   8:      }

   9:      ]]>

  10:    </script>

Find example XSLT here: http://dl.dropbox.com/u/3260327/xslt/js_encodeURL.xslt

The first one: a simpel animated pie-countdown

The background: What I missed…

I have during my 15 years career as web developer tried various development tools, and have touched the “backend” development side of web applications also. It seems that many rich development tools focus on the heavier backend development part of web application development with things like intellisense, snippets and so on. I have often wondered: Why should it be so difficult and not possible – especially in VS – to automate things, processes which is done many times every day? Rich development tools RDTs should support the “web craftsmen” trying to produce quality work. In real life “real” tools for craftsmen like a carpenter have evolved. Quality tools make the fundament for quality work! Anyway, we might just have got a piece of quality tool in VS 2010!

The new features – javascript

In this part I focus on javascript in VS 2010.

Javascript intellicence

jQuery embedded from local “standard” API javascript file.

It is near perfect now! The intellisense engine in VS 2010 seems to “think” nearly perfect. Say you want to use jQuery. If you include your jQuery API using a local version, you will get basic intellisense – that is objects inside the jQuery API will appear as you start typing. You will get relevant methods shown together with basic information about which parameters you can use. Okay, but it gets better!

Microsoft minimised version of jQuery still has intellisence

jQuery embedded from Microsoft at: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
Using the MS CDN to get even a minified version of jQuery, you still get extensive intellisence!

Note:
After you have added any external script file you can update the javascript intellisense using [Shift]+[Ctrl]+J. For big APIs like jQuery this might take perhaps 20 seconds.

jQuery plug-ins handled as well in intelisence

Extra jQuery plug-ins added will also get intellisense, as expected, but also at the correct place
below you can see that I have added a script reference to the jQuery Cycle plug-in for jQuery. The “cycle” method now exists after I have used a jQuery selector $(‘#test’). The description of the method “cycle” however is not very useful – but that is because that the jquery.cycle.all.min.js file does not contain JavaScript documentation (more about that later).

If you think about it – VS 2010 is quit smart! It scans the cycle plug-in and sees that it extends the jQuery API. That is how it can figure out – I guess – that the cycle method fits in as a method on a found elements of the “$” (or jQuery) method. Nice feature!

Dropdown filelist simplified

Automatic dropdown file list when adding HTML code like “script”. Previously you had to click the “Pick URL…” and then point to the file which you wanted to use in your HTML document. Now you simply click on the file, if it is located at the same place as the current document. Nice.

”

Snippets – finally!!

I have written about snippets in Visual Studio in a previous post: Find Visual Studio Snippets ready for download on my DropBox folder, but it is first in VS 2010 that it is actually possible to execute snippets in HTML mode! (Why, why, why?). Anyway you can now! And VS 2010 comes with a few snippets installed.

Snippet types “Surround with” and “Insert snippet”
If you do not know how to activate them try the “surround with snippet” by pressing [Ctrl]-K, [Ctrl]-S. By doing that you get the chance to automate things like creating a JavaScript function using just two keyboard clicks and a mouse click. The Insert snippet can be archived using [Ctrl]-K, [Ctrl]-X. And remember: You can always create your own!

Just discovered that in fact Microsoft has not made it possibel to use snippets within CSS… Why, why, why???

Intellisence will execute your code dynamically to give better suggestions

Say you define a string “effect” and assign it a string value. This will make VS 2010 execute the assignment and then “guess” that your variable is of the type String. So at a late point in your code you try to use the variable, the suggestions given by intellisense will be relevant to that type (string). Look at the example below. To the left a variable “effect” and to the right an “int”, the suggestions are not the same. Smart! and you can do some pretty nice things when your code is dynamically executed – try visiting the JavaScript Intellisense Improvements with VS 2010 – on ScottGu’s Blog and have a look at those examples.

Your own intellisence using XML comments!

Now there is no excuse why you do not document your JavaScript code! VS 2010 offers easy documentation using snippets and XML comments! It is so easy, simply press [Ctrl]+K, [Ctrl]+X, choose “XML Comments” and what type of comment you want to insert. After having done and (of cause) filling out the marked fields, your code will be providing intellisense and suggestions when other people use it! Cool!

You can see below a simple function called “myhide”, The 3 lines below the function have been inserted using the above mentioned XML comments snippet. I defined a summary, a return definition and a param description. Voila! My function now has intellisense and build in help – which will without doubt be useful for me and others at a later state. You can make this part quit advanced with references to documentation files, assemblies and more.

Various small changes

• You can zoom the work area as you can in your browser. Just hold down [Ctrl]while rolling the wheel of you mouse up and down. Guess that woud be nice for elderly people like me
• All these improvements also apply to the free Visual Web Developer 2010 Express!

Links

• JavaScript Intellisense Improvements with VS 2010 – on ScottGu’s Blog
• VS 2010 and .NET 4 Series – on ScottGu’s Blog

Here is an example of using various objects as keys in javascript. It is no problem in javascript! Update:  I was fooled by javascript. Actually you cannot use objects as keys in standard javascript. I read the comment below from Kambhase and tested his example. It is a fact that you cannot in standard javascript use objects as keys.

Why it does not work

I read the article here: http://www.timdown.co.uk/jshashtable/ – a page where you can download a javascript which will give you code allowing you to get an implementation of Hashtables, which can use objects as keys.
Tim Down, the author of the above jshashtable code, writes amount others about why you cannot use objects as keys:

The reason for this is that JavaScript silently calls toString() on the object being passed in as the key and uses the result as the property name. In the example above, key1 and key2 both become "[object Object]", hence the second assignment simply replaces the original value of the property "[object Object]".

This also indirectly explaines why my code below seems to work: I only have one “custom object” (an object without a toString method implemented), and so run into no conflicting as Tim Down describes in the above quote.

So if you need objects as keys in a Hashtable: Use the code Tim Down have created, found here: http://www.timdown.co.uk/jshashtable/

Code

var a = 1.23456;
var b = new Date();
var c = { my: 'object' }
var d = function() { alert('My function') };
var arr = [];
arr[a] = (typeof a) + ' (' + a + ')';
arr[b] = (typeof b) + ' (' + b + ')';
arr = (typeof c) + ' (' + c + ')';
arr[d] = (typeof d) + ' (' + d + ')';

Output

I then googled for JSON viewer and found a very cool tool! “JSON viewer” at codeplex.com. It comes in three variants:

1. A standalone viewer – JsonView.exe (view example screenshoot)
   No doubt – I found this very easy to use. Click to start, paste JSON and view it…
2. A plugin for Fiddler 2 (http://www.fiddler2.com/) – FiddlerJsonViewer.dll
   Well, I do not have it installed.
3. A visualizer for Visual Studio 2005 – JsonVisualizer.dll
   I followed the instructions (though in VS2008), but never really got to a point where I saw the visualizer appear. Perhaps I just dont get the concept of visualizer.

I will not go any further into how to install it, I believe that the readme.txt inside the ZIP file should explain that part. And how to use it – well, try downloading this JSON: http://www.netsi.dk/wordpress/wp-content/uploads/2010/05/exampleJSON.js and play around with it!

Read the article and post your comments here on this page.

The intellisense got smarter!

The way that the intellisense got smarter is that VS2008 allows you to have the documentation in a seperate file. That way your main code will not be “heavy” for browsers to use – only at development time will the “-vsdoc” documentation file be used!

VS2008 will search for documentation in 3 predefined files – 3 patterns will be searched for: If you have a library, say "mylibrary.js", VS2008 will search for documentation in the same directory in this order

1. "mylibrary-vsdoc.js", then if that is not found, a search for…
2. "mylibrary.debug.js", then if that is not found, a search for…
3. "mylibrary.js"

So if you program a javascript library you can add VS2008 intellisense code in a version named in one of the two ways shown above (or embedded in the main library), and then save it in the same folder as the actual library. This will introduce help on methodes in the library.

If no intellisence appers as you type try updating: “Edit > IntelliSense > Update Javascript IntelliSence (Ctrl+Shift+J)”.

To get this feature you will need to install this hotfix for VS2008.

You can see a description of how to use the "-vsdoc" part in jQuery here:
Rich IntelliSense for jQuery.

Below you can find links to related posts/articles – one of them “The format for JavaScript doc comments” I thing is very important as it is a guide to how you add documentation (and intellisence) to your own javascript code. So now there are more than one argument to start documenting your code!

Happy documenting!

/Sten

Related articles

• jQuery Intellisense in VS 2008
• JScript IntelliSense FAQ
• The format for JavaScript doc comments
• Hotfix for VS2008

Javascript frameworks – a litle background
Last year Microsoft realized that jQuery was a very powerfull and solid javascript framework, the simply decided to adapt it and use it as their prefered javascript API. Not a thing which done often by such a big player! The company which perhaps has as many people who hate it as it has followers realized that open source code is something to respect and adapt!

Google Colsure on the other hand – what is it? As I understand the framework is something which Google has developed for internal use, and now has opened up, so that everyone are free to use it. I must admit that I am not totally into all the terms of use and the history of this framework. However IMHO:

We don’t need Google to put one more player on the field of javascript frameworks! When it comes to javascript frameworks we need the unity amoung javascript developers – and a framework like jQuery provides all the extensibility for any Google special needs. 

What to do with “the new Microsoft” ?
It would be unrealistic to expect Google to “drop” its Google Colsure framework, but us – the javascript developers – might put presure on Google (the new Microsoft?). I for one do not need another javascript framework. So I will continue using jQuery.

I do not see Google as the new Microsoft – and Microsoft is not a bad company in my eyes. What however is bad is when one company is too big and can ignore other players without getting into trouble. Google is probertly not trying to push other javascript frameworks out of the field… Right Google? Perhaps Google could try to convert their ideas into extentions/plug-ins to jQuery?

Other opinions about Google Closure
Using TweetDesk I set up a search for “Closure Library” to follow the tweets about the Google Closure Library. Just followed one of them to: http://www.sitepoint.com/blogs/2009/11/12/google-closure-how-not-to-write-javascript/

That article was written by Kevin Yank and he referes to some Google Colsure critism spoken by Dmitry Baranovskiy. I myself have coded many lines of javascript and learned things just by reading this article! I also saw some scary “mistakes” which Dmitry pointed out in the new Google Closure framework. One of them was testing if a var was of the type String (From base.js, line 742):

1
2
3

goog.isString = function(val) {
  return typeof val == 'string';
};

The problem with that method (isString) is simply that it fails if you call it with a String object! Not cool! If you call it like this: goog.isString(new String(‘My string’)) it will return false!

Ofcause nothing is perfect, and the points by Dmitry Baranovskiy could easily be changed as a normal bug is fixed in any javascript framework. What scares me is the fact that many people seem to think that Google equals perfect, and if many people are non-sceptical about things developed by Google (Yahoo, Microsoft or anyone!) then perhaps they will leave jQuery and start using Google Colsure Library… I hope not!

I succeded in 31 minutes – which included setting up a simple “documentation”/article about how I did! Now that article/webpage has been brushed up (making it more nice to look at) and I can think that it is worth a visit!

Find it on my domain here: http://www.netsi.dk/showcases/cufon.html, it also has a few relevant links. Should you feel the need to submit comments about that page, feel free to do it here.

Though simpel to setup – those parameters – I have made a simple web application which will give you the URL you need to get the map you want.

Try it here: http://www.netsi.dk/showcases/getmap.html