Topic: javascript

Written on September 2nd, 2008 by Mojo about browsers, google, javascript with 1 Comment

Google Chrome First Impressions

Yet another browser? Well here we go again. Let’s take a look at Chrome and see what it has to offer. The download page is located here. The installer for Windows XP is only 474KB! You can watch the press conference video about Google Chrome or read the Google Chrome Book in the meantime.

What we knew so far about Chrome

  • Uses V8 JavaScript engine which supports Classes and compilation. There is a V8 JavaScript benchmark suite that gives FireFox 3 a score of 83, while giving Chrome a score of 1213! Safari 3 gets a score of 128. Judging by this alone, V8 blows away the competition.
  • Uses Webkit rendering engine.
  • Tabs run as independent processes which can be managed.
  • Lots of other features.

First Impressions

  • Installation was a breeze and imported FireFox settings.
  • No status bar, You only see the status bar when you hover over a hyperlink.
  • The Task Manager (Shift + Escape) updates in real time and shows memory, CPU and network usage for each tab, each plugin, and the main Chrome process separately. There is also a link to Stats for Nerds with lots more gritty info.
  • The Flash plugin is extremely CPU usage intensive and causes sluggishness when scrolling. I just loaded a popular flash website and noticed my machine came down to a near halt. It seems to happen more with Flash files that contain infinite loops, using as much as 70% of the CPU.
  • The built in JavaScript console looks like a combination of FireBug and Web Inspector.
  • There is a built in JavaScript Debugger (Alt + `)
  • Passes the Acid 2 test.
  • Chrome gets a score of 78 on the Acid 3 test, which is higher than FireFox 3 at 57, Safari at 72, and Opera at 45.
  • Omnibar - this is the URL/location bar in Chrome that has some fuzzy logic built in to suggest “smart” autocompletes. This is the current order of the drop down in the auto complete list. There seems to be no way of changing this ordering as of now. Would be nice to be able to customize them.
     

     

    1. Search Google for FOOBAR
    2. FOOBAR/ (I’m not sure how useful this one is really)
    3. Link to the FOOBAR Wikipedia page
    4. Link to I’m Feeling Lucky URL for term FOOBAR. This item gives you the ability to search within the URL. For example if you type in Amazon in the Omnibar and select the amazon.com option using the down arrows, you will see “Press Tab to Search Amazon”. See below instruction on implementing this search functionality for your website.
    5. Search Google for FOOBAR ANOTHER TERM
    6. Search Google for FOOBAR ANOTHER TERM
    7. A page in your history pertaining to FOOBAR
    8. Link to history search for pages about FOOBAR

Cool Developer related stuff in Chrome

Google Chrome User Agent String:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.X.Y.Z Safari/525.13.

Chrome has a menu option called “Create application shortcuts…” that uses Google Gears to create a shortcut to your webapp. Users can choose to place the shortcut to your webapp on their Desktop, on the Start menu and even the Quick launch bar in Windows. This is a pretty powerful feature. When a user clicks this icon, Chrome opens up without the Omnibar, and your website will appear in an “Application” format. You can customize how Chrome creates these shortcuts using meta tags. These tags are named: application-name, description, application-url, and shortcut icons in both 32×32 or 48×48 formats. The favicon is used if not specified. For example you can use the following HTML code in the head of your document. Note that with the Mozilla added support which is used in Chrome, you can use any supported graphic format as your favicon, and not just the old school favicon.ico file.

<head>
  <meta name="application-name" content="Gmail"/>
  <meta name="description" content="Google's approach to email"/>
  <meta name="application-url" content="http://www.gmail.com"/>
  <link rel="icon" href=gmail_32x32.png sizes="32x32"/>
  <link rel="icon" href=gmail_48x48.png sizes="48x48"/>
</head>

To open a new tab from your webapp in a separate process using JavaScript you can do this in Chrome.

var w = window.open();
w.opener = null;
w.document.location = "http://differentsite.com/index.html";

Chrome lets users search your website from its ominbar. To enable and include your website’s search in Chrome you have to create an OpenSearch description document (OSDD).
For example you can create something like this:

<?xml version="1.0" encoding="UTF-8"?>
 <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   <ShortName>Web Search</ShortName>
   <Description>Use Example.com to search the Web.</Description>
   <Tags>example web</Tags>
   <Contact>admin@example.com</Contact>
   <Url type="application/atom+xml"
        template="http://example.com/?q={searchTerms}&amp;pw={startPage?}&amp;format=atom"/>
   <Url type="application/rss+xml"
        template="http://example.com/?q={searchTerms}&amp;pw={startPage?}&amp;format=rss"/>
   <Url type="text/html" 
        template="http://example.com/?q={searchTerms}&amp;pw={startPage?}"/>
   <LongName>Example.com Web Search</LongName>
   <Image height="64" width="64" type="image/png">http://example.com/websearch.png</Image>
   <Image height="16" width="16" type="image/vnd.microsoft.icon">http://example.com/websearch.ico</Image>
   <Query role="example" searchTerms="cat" />
   <Developer>Example.com Development Team</Developer>
   <Attribution>
     Search data Copyright 2005, Example.com, Inc., All Rights Reserved
   </Attribution>
   <SyndicationRight>open</SyndicationRight>
   <AdultContent>false</AdultContent>
   <Language>en-us</Language>
   <OutputEncoding>UTF-8</OutputEncoding>
   <InputEncoding>UTF-8</InputEncoding>
 </OpenSearchDescription>

Fore more tips read the Google Chrome FAQ for web developers page.

ps. Don’t use the Google gears Chrome download page which gives a JavaScript error!

_GU_SetupOneClick is not defined
onload(load )
Written on August 19th, 2008 by Mojo about business, javascript with 1 Comment

JavaScript Arguments

The arguments object in JavaScript is a local variable in any function that provides some nice features we can use in our code. Here is the list of its properties and related properties of the Function object.

arguments itself returns an object that looks like an array (but not really an array) of the arguments passed to the function.

Prior to JavaScript 1.4 the Function object also had a similar arguments property, which is now deprecated.

However the Function object comes with a few other useful properties that we can still use to get argument related data.

function callTaker(a,b,c,d,e){
  // arguments properties
  console.log(arguments);
  console.log(arguments.length);
  console.log(arguments.callee);
  console.log(arguments[1]);
  // Function properties
 console.log(callTaker.length);
  console.log(callTaker.caller);
  console.log(arguments.callee.caller);
  console.log(arguments.callee.caller.caller);
  console.log(callTaker.name);
  console.log(callTaker.constructor);
}
 
function callMaker(){
  callTaker("foo","bar",this,document);
}
 
function init(){
  callMaker();
}

For demonstration purposes, you can run the init function above and view the logs in FireBug.

arguments object and its properties

arguments returns ["foo", "bar", Window, Document]

arguments.length returns 4

Note: even though our function has a signature with 5 arguments, length returns only 4 here. This is because the caller sent us only 4 arguments. See below for how we can use Function’s length property to find the number of expected arguments.

arguments.callee returns callTaker(a, b, c, d, e)

Note: callee shows us the signature of the currently executing function and is useful when trying to make recursive calls to a function within its own body.

arguments[1] returns bar

Note: arguments can also be set for functions in an array like format. For example you can set the second argument like this: arguments[1] = ‘moo’;

Function object and its argument related properties

callTaker.length returns 5

Note: This is the expected number of arguments.

callTaker.caller is the same as arguments.callee.caller and returns callMaker()

Note: we can go up the stack trace and get the caller of the caller etc. For example we can find the function that called callMaker using arguments.callee.caller.caller which returns init().

callTaker.name returns callTaker

callTaker.constructor returns Function()

Note: Since we have not modified the basic behavior, we see the built in function that creates an object’s prototype for our function, which is the Function object.

Basic Usage Sample

var dataArray = ["One", "Two", "Three", "Four"];
 
var lister = function createList(list) {
 if(arguments.length == 3){
  var result = "<" + arguments[1] + ">";
  for (var i = 0; i < arguments[2].length; i++){
   result += "<li>" + arguments[2][i] + "</li>";
  }
  result += "</" + arguments[1] + "l>";
  document.getElementById(arguments[0]).innerHTML = result;
 }
}
 
function makeList(){
 lister("list_HTML","ul",dataArray);
}

Run the sample

References:
JavaScript Stack Trace
Function
arguments

Written on March 21st, 2008 by Mojo about apple, browsers, css, javascript, testing with 4 comments

Whats new in Safari 3.1 Web Inspector and Snippet Editor

Safari 3.1 features improvements to the functionality for the Web Inspector developers tool. In now has an improved console for working with JavaScript and DOM, DOM inspector with CSS support, a nice Network analysis tool and search all built in. It is somewhat comparable to the FireBug plugin for FireFox so I will also make some comparisons of their features.
Continue »

Written on March 19th, 2008 by Mojo about apple, browsers, css, javascript, software with 2 comments

Safari 3.1 Features Review

Apple released Safari 3.1 (525.13) for both Mac and Windows users today which comes with a bunch of changes and improvements over 3.0.x series. Here are the set of changes included in the new release.

Developer Menu

The first thing you will notice is the addition of the “Develop” menu (Preferences/Advanced/Show Develop menu in menu bar) item with the following tasks:
Continue »

Written on March 12th, 2008 by Mojo about ajax, google, javascript, stats, testing without comments

How Google Analytics determines Connection Speeds

Today I was looking for an unobtrusive method of determining a user’s connection speed using JavaScript. A quick search on Google returned an array of tricks mostly having to do with using Ajax to make a call behind the scenes, and track the payload time for the small file. In most cases people use an image with a random variable at the end to avoid caching, like image.jpg?foo=1Rt2X21. This is all good but adds an HTTP connection which could potentially interfere with the user’s experience, especially if they are already on a slow connection to begin with. Continue »

« Previous