www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Monthly Archives: September 2010

Improvements in Microsoft Visual Studio 2010, from a frontend webdevelopers point of view, part 1: javascript

Sometimes I have wondered just what the h**l they were thinking over at Microsoft: their flagship development tool just didn’t perform and deliver what you would expect from a tool of that caliber. That was before the (VS 2010)! I will try to write about features in VS 2010 which makes me happy as a frontend web developer, hoping that you will gain something from it – and please do comment and share your experiences.

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 , 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 –

In this part I focus on javascript in VS 2010.

Javascript intellicence

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!image

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!

 

The intellisence works perfect

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.

 

”Dropdown filelist simplified

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!

Using the surround with snippet

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.

Intelligence sugestions are related to the type of your variable...

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.

Here goes your excuse for not documenting your javascript code anymore! XML Comments in javascript.

 

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


Share



					

		

			
			
		

		

	
				






Using objects as keys in javascript, watch out!

			
		

			









Information




Here is an example of using various objects as keys in . 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




KeyValue


1.23456number (1.23456)


Sat Sep 18 18:49:18 UTC+0200 2010object (Sat Sep 18 18:49:18 UTC+0200 2010)


[object Object]object ([object Object])


function() { alert(‘My function’) }function (function() { alert(‘My function’) })






Share
					

		

			
			
		

		

	
				






Example illustration created using “Xara Designer Pro 6”

			
		

			
“An image says more that 1000 words”, in this post I will show just hos easy it is creating simple illustrations using Xara Designer Pro 6 (XDP6).


The illustration which I made for Jeppe as I tried to support him on adjusting options for his gallery


The background


The example is where I need to tell a friend how to change settings in a  gallery. He wanted the controls for his reference gallery to show above instead of below the gallery it’self. As many other jQuery based plug-ins things are controlled using options, and if you know how – it’s very simple to alter the behavior of such a plug-in. So all he needed was to change a value from “false” to “true”.


Creating the graphics


Creating the graphics was simple:


    

  • Open the webpage containing the gallery which I needed
    • 

  • Open Firebug plug-in for , and in the HTML tab, locate the place where the source code was located
    • 

  • Take a screenshot using the screen capture of XDP6, Ctrl+Q
    • 

  • Cropping the screenhoot inside XDP6 using the Photo Tool. The Photo Tool will let you crop without losing the original, which makes it an operation (like most XDP6 operations) where you relax as you know: You can always return to original!
    • 

  • I then found the marker pen in the in the Designs gallery of XDP6, which comes free with the program. Here you can see it together with other gallery items – all of them are vector graphics, as you can see to the right. Here I have changed them using standard vector tricks.The Designers gallery of Xara Designer Pro 6, and some examples of how to use clipart
    • 

  • I placed a resized version of the marker pen clipart on top of the cropped screenshot. Placed a shadow (using shadow tool), then I only needed to simulate a transparent line on top of the source code. Piece of cake (with XDP6!).
    • 

  • A rectangle made transparent, transformed it and finally did some dynamic blur on it.
    • 

  • I then copied it to the e-mail for Jeppe, and voila – I hope that my “illustration saying more than 1000 words” could help Jeppe :-) 
    • 



About the website of Jeppe K Graphix


Here is the gallery as it looked before I explained it to him:


The gallery at the website of Jeppe K Graphix


You can see the live version at his “portiofolio page” – his company webpage is here: www.jeppe-k.dk


Links



Share
					

		

			
			
		

		

	
				






Getting started with coding your own scripts for the Greasemonkey addOn for Firefox

			
		

			
Greasmonkey addOn for  will make it possibel to add extra features to your  without much efford. If you know your , DOM, CSS, HTML – well, basically if you are a professionel internet frontend developer – you should be able to extend  with the tools that you find on the net (if that unlikely event should appear). Here I will go through what you need to get started with developing your own javascript, adding new features for your . Lets get started!


Get the  addOn


You simply goto the list of Firefox addOns and


download/install the Greasemonkey addOn


from there. You ofcause then need to restart Firefox. After that is done you will see a monkey icon to the lower right of your browser:


You find the Greasemonkey addOn to the lower right of your Firefox window 


To turn on and off left mouse click, to access script right mouse click on the monkey.


Your first script


Let’s do a hello world! You simply right mouse click on the monkey and choose the “New user script..” (here you see it in Danish):


To add a new script simply choose 'New User Script...' 


The editor – first time


First time you do this you will need to locate the editor which you wish to use for editing your javascript. I choose Microsoft Visual Studio (MVS) because of the build in javascript intellisence, but any editor will do. Oh, and one thing – if you go for MVS you will experience that every time you choose to edit a script a whole new MVS is opend, not so smart. However you can edit your script at any time even without going through the Greasemonkey interfase, just know that:


    

  • Edited/changed  require a refresh of any window to work with the new code 
    • 

  • Any change in @require directive will call for you to reinstall your script (more below) 
    • 



See also below: The editor – how to change it


The basic choises


After you have pressed the “New user script…” you will be prompted with something like this (here in Danish):


The New User Script dialog of the Firefox Greasemonkey addOn 


Simply fill out the fields, with, name, namespace, short description and important the URLs where the script should and should not be able to execute. The first field will have the current URL of the active tab/window in your firefox filled out. You may remove that and simply choose any website by entering “http://*”.


If you have issues like you dont want this script to run on your local pc, you can enter URLs to exclude. 


Here is an example of how a simple hello world script might look like now: 


image 


As you can also see, the URLs which you wanted to include and exclude have converted into directives. The @include and @exclude directives, which you ofcause may change manually in your script file at a later time.


Running the script


After you have enteret a “alert(‘Hello world’);” and saved the script you are ready to run the script. You simply refresh the page by pressing F5 or Ctrl+R.


What you will see is an alert box saying “Hello world”. The code will be called after the page have been rendered (loaded) into the browser window. Nothing advanced here ofcause, but you now have the fundament for developing your own utilities, macroes in the form of Grease monkey scripts.


Adding external resources like  to your script


You have the option to specify any required script libraries (resources) which your script need to have installed. You do that by using the @require directive in the header of your script. Lets try to add jQuery.


- adding jquery description -


One thing to notice when adding new @require directives is that you need to reinstall your script again:


As of Greasemonkey 0.8.x, an @require directive added to an already installed script will not be recognized. Reinstall the script to force Greasemonkey to recognize the @require directive. You can simply drag-and-drop the script onto a Firefox browser window, or again in Firefox choose File>Open and select the user script, to reinstall it. 




When you want to reinstall I find drag’n’dropping the script from explorer directly onto a firefox window a very convient way. Here is hos it may look (here in Danish):


image 


A nice clean way to reinstall a script! The Greasemonkey folks have even added a short message at the bottom of the status line which displays information about how it succeded in installing the script! Well done Greasemonkey folks!


Links









Share
					

		

			
			
		

		

	
				






The “==” and “===” are not equal

			
		

			
Even if I have been programming  for many years, it is never too late to learn more. Should I be embarrassed not to know every aspect of ? Perhaps, but I want to move on here. I even want to write about it so that You and others will also get wiser.


Comparing objects and values in javascript


Here I will go through 3 different ways of comparing values, not all of them a good idea.


The first "=", not a !


The first time you start coding javascript and need to compare for instance a variable with a value you probertly make a mistake of assigning a value instead of comparing, and your code will fail to work correct. 


var error = true;
if (error='true') {
  // This code will always be executed as "=" assigns a value!
  // And after the code has execuded the value of "error" will be 'true' (a string)
} else {
  // It will never enter this area
}


Equal "==", a "soft" comparison


This comparison will do conversion of the values into types which can be compared, so it will bear over for types which are not the same. An example would be:


var error = true;
if (error=='true') {
  // This code will be executed as the boolean value of "error" will be
  // converted into a string and then compared
} else {
  // Not executed
}


Strict equal "===", a "strict" comparison


With this comparison you will be sure that the to parts in the comparison have 100% equal values.


var error = true;
if (error==='true') {
  // This code will not be executed as the type is not the same
} else {
  // This area will be executed as the comparison evaluates to false.
}


Conclusion


As various ways of doing comparison exists you cannot say that any of them is the perfect comparison option. I hope that you have learned a litle more on the aspect of doing comparison in javascript.


Links



Share