Nuno Silva

Javascript Frameworks

Here an interesting site comparing the speed of 5 of the most known JS frameworks on the market:

http://mootools.net/slickspeed/

My results in several Browsers:

XP/Firefox:
Mootools: 157 ms
JQuery: 147 ms
Prototype: 215 ms
YUI: 342 ms
Dojo: 101 ms

XP/IE7:
Mootools: 416 ms
JQuery: 302 ms
Prototype: 1598 ms
YUI: 999 ms
Dojo: 503 ms

XP/Opera:
Mootools: 68 ms
JQuery: 64 ms
Prototype: 80 ms
YUI: 250 ms
Dojo: 28 ms

XP/Chrome:
Mootools: 68 ms
JQuery: 49 ms
Prototype: 291 ms
YUI: 215 ms
Dojo: 61 ms

The winner is: Dojo!!!

Is really fast in the major browsers (IE doesn’t count.. every javascript is slow on IE.. :\).

Intellisense with JQuery

It is known that Microsoft has adopted JQuery has it’s “official” javascript Framework.

Now it is possible to have, in Visual Studio 2008, intellisense using this javascript framework.

In this post made by Scott Guthrie he shows how to install this support in javascript.

Although i don’t use JQuery (by some reason i prefer Mootools) it is a very good feature to add to visual studio. I know what it costs me to program using Mootools docs page has a support. Having intellisense would become things so much easy!

Wordle - Tags with style

I was reading some blogs when i found a reference to Wordle in Vitor’s Blog.

Wordle gives a new dimension to the Tags we commonly use. The tag clouds we usually see are just a bunch of words with different sizes. Wordle tries to give them some style.

So, like Vitor did, i decided to generate the wordle of this blog. And here it is, my Wordle:

It really gives a new aesthetic dimension to tags. It’s art made with words, our words.

Double Click in a Html Select (List Item)

Double click is a feature that can useful when you build a Site. Almost every element can have a double click event. It’s usage is very simple:

<div ondblclick=’alert(”Hello”)’>Hello</div>

Test DoubleClick Here

Elements like element of a list item (select) should also have support for double click. But some browsers don’t support it (Like Internet Explorer). So the strategy is always had the event to the parent and, in that event, react according to the element clicked:

<select id='listItem' multiple="true">
	<option value="hello">Hello</option>
	<option value="hello2">Hello2</option>
</select>

Javascript Code using Mootools

$("listItem").addEvent('dblclick',function(evt){
	var v = this.selectedIndex;
	alert(v.value);
});

Firefox Commands

Like Google Chrome (see Google Chrome Commands), Firefox always have had about commands.

about: - Firefox version information.

about:blank - shows an empty page.

about:buildconfig - show Firefox build information (compiler and parameters used).

about:cache - Cache information of your Firefox. if you use about:cache?device=memory you’ll get detailed information about cache memory. if you use about:cache?device=disk you’ll see detailed information about cache in you hard drive.

about:config - A list of properties to tune your firefox. In once talked about this command in Firefox 3 is not caching content.

about:credits - A list of contributors that help made Firefox.

about:mozilla - just some text taken form the “The Book of Mozilla“:

“Mammon slept. And the beast reborn spread over the earth and its numbers grew legion. And they proclaimed the times and sacrificed crops unto the fire, with the cunning of foxes. And they built a new world in their own image as promised by the sacred words, and spoke of the beast with their children. Mammon awoke, and lo! it was naught but a follower.

from The Book of Mozilla, 11:9″

about:plugins - a list of all plugins currently installed.

about:robots - shows a humorous page with robots (Thanks omi for the contribution).

Google Chrome Commands

Google Chrome, like FireFox, has special commands, the about: commands, to show relevant information about the browser.

Here are some of them:

about:cache - Every single url that you visited.

about:dns - A list of used DNSs and response times.

about:histograms - Some text histograms with performance measures.

about:internets - Shows the tube screensaver of windows in the tab. The title shows: “Don’t Clog the Tubes!”.

about:network - shows url information about the current request(s) you are making.

about:memory shows how much memory google chrome and each tab that is open is using. If you have other browsers open it also shows their memory consumption.

about:plugins - a list of all plugins currently installed.

about:stats - a list of statists of the browser. Just a bunch of counter and timers. In the top you can read: “Shhh! This page is secret!”. Google guys have a sense of humour.

about:version - current version information featuring a big google logo (like we didn’t knew that chrome belonged to google).

And finally the “piece of resistence” and my personal favorite,

about:crash - crashes the current tab and shows the sad smile:

Google Chrome Review

Before i start, let me just say that the only browsers i use are firefox (THE Browser) and IE (just to check if the pages that i develop appear correctly and work). So, in advance, i’m sorry if i point some feature in google Chrome that already exists natively in other browser.

Yesterday i finally got access to Google Chrome Download Page, some time after the anouncement made on google’s official blog. The expectation was high and Google didn’t disappoint.

First, the installation is very quick. I went to http://www.google.com/chrome, Clicked the big blue button, downloaded a setup file, and chrome was installed in no time. Simple, quick, straight to the point.

First thing i noticed: The speed!!! The browser loads in a flash (not like firefox that, at least in my computer, takes a little time to load). When i started to browse some pages, i was astonished with the load speed. 

Like google explained in the google chrome presentation comic book, chrome uses one process for each tab. This has several advantages. The ones that i best remember are:

• If a page crashes, only that page is closed, not the browser;
• When we don’t need a page, the process of that tab is closed and the memory allocated is released.

Download Google Chrome at http://www.google.com/chrome

Google Chrome

This something that was being expected by (almost) all the internet community for some time now. Google has finally decided to release it’s browser.

It’s name is Google Chrome and, by what i could read in the comic book that was made to introduce the browser, it’s an open source browser that promises to take internet browsing to the next generation.

According to Google’s Blog, the first beta should be released today in more than 100 countries.

While you wait for the beta, i suggest you read the 39 pages comic book to be aware of the improvements Chrome is supposed to bring.

Here is a picture of the browser look and feel:

Download Google Chrome at http://www.google.com/chrome

My 10 top posts of all time

And here they are:

• Wrapp a div around other div’s with float
• What you need to be a game designer
• Divs instead of tables
• And so, i changed
• I want one of these without reflection, please!
• Shuffle a Collection
• Msdn Event
• Moooo what?
• Only for fans
• Hard Weekend…

Getting an html element Attribute

To do this i use mootools, a very fast and handy JavaScript framework.

Imagine that you got an element as following:

<img id="image" src="..." aaa="true" />

To get the value attribute “aaa” using mootools you only need to do the following:

$("image").getAttribute("aaa");

This solution will work in all browsers.