vijayjoshi.org

You love gmail. Don’t you. Having so much cool features within one application is great. Now you will love it even more. Today Google is launching voice and video chat within gmail. You will now be able to talk with your friends or video chat right from gmail chat window.

Remember earlier times when you used to have one application for mail, another IM if you want to chat and even another application if you want voice or video chat. Now all of these are under a single umbrella gmail. And the best part : ITS FREE.

To enable this feature, all you have to do is install a small plugin from http://mail.google.com/videochat ,restart your browser and you are all set.

To make use of voice/video chat feature open the chat window. Now select “Video & more” at the bottom and select “Start voice chat or “Start video chat”. It will prompt other person to accept or reject your call. Once its accepted , chat happily.

Do have a look at this video Gmail voice and video chat.It will be available globally from today onwards.

Google rocks. What do you say?

Technorati Tags: Google, Google videochat

From today onwards I am introducing a new category FAQ. It will contain quick solutions and code for common problems developers face daily in javascript and php. Browser compatibility issues specially (Firefox and IE) will also be taken care of.
So here is the first one.

Q) How can I get the difference(number of days) between two dates in javascript?

A) Date and time operations in javascript can be done through the Date object. Default constructor for Date doesn’t take any argument and returns current date.

var aDate = new Date(); // will give current date

To get a specific date, you can provide year, month and day.

var anotherDate = new Date(yyyy,mm,dd);

Take care of the fact that months are from 0-11 i.e. January is 0 and December 11.
Hence, new Date(2008,10,09) is 9th November 2008 not 9th October.
Since there is not any inbuilt function for calculating date difference in javascript, we will use getTime() function. getTime() returns number of milliseconds since midnight of January 1, 1970.
Below is the code

var oneDay = 24*60*60*1000;	// hours*minutes*seconds*milliseconds
var firstDate = new Date(2008,01,12);
var secondDate = new Date(2008,01,22);
 
var diffDays = Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay));

What we did is

• we took two dates
• got milliseconds for each using getTime() function
• calculated their difference
• and finally divided the difference with the number of milliseconds in one day

Simple, isn’t it???

Technorati Tags: FAQ, javascript

Valuable resources for scripts and components:

Jibbering.com

This is the FAQ for the famous javascript usenet group comp.lang.javascript. The FAQ answers most of the questions beginners face daily ranging from accessing form elements to AJAX

Quirksmode
For all your browser quirks.

Scripteka - Prototype extensions library.
Who doesn’t know Prototype JS. Prototype is a popular javascript/ajax framework which makes client side development . Scripteka is a collection of extensions for prototype. Currently there are more then 120 extensions available and growing continuously. Dont forget to check Lightview and Prototip 2.

Javascript Toolbox
Javascripttoolbox is a js code repository by Matt cruse. All the code here is written and maintained by Matt Kruse himself. According to the site: “The information on the site emphasizes standards-compliance for best results, and best practices which should be followed.”

Javascript at HotScripts

More then 10 years old, this site is one of the oldest and nice places to look for resources. Not even js but php,python,ajax,asp etc. 2973 resources are there in Javascript category alone. New scripts continously get added at hotscripts.

Ajax Rain

Ajaxrain is a collection of AJAX/DHTML scripts most of which are extensions to various popular javascript frameworks like prototype, jquery, mootools. Nice and reliable content spread over more than 1100 scripts and 100 categories.

Ajax Daddy
Similar to ajaxrain this site also presents a collection of javascript/Ajax scripts.

DHTMLGoodies
You will get scripts on an array of topics here. Mainly readymade widgets like menus,calendar,folder galleries, trees,js games.

Must read blogs/articles

Prototype Dissected
For those who love prototype. This guy has prepared cheat sheets of every single method of prototype. Thanks Jonathan

Max Kiesler - Round-up of 30 AJAX Tutorials and 60 More AJAX Tutorials
This is incredible.

Ajaxian
Great blog on ajax, web development and latest trends and technologies.

Smashing Magazine
is a blog on web development which covers web designing, css and javascript. From time to time you will get to see useful javascript tips, tricks and articles here. Among my favourites are Ajax solutions and 75 JS techniques

Technorati Tags: javascript, resources

Update : Doesn’t work in IE8 too.

I tell you again. IE Sucks.

Reason this time: Last time it was appending rows to an existing table. Now it wont let you set innerhtml of a select box through javascript too.

Here is the tale:

Yesterday I was working on an AJAX application where i needed to add options dynamically to some select boxes.
I had a select box in my html page and a json containing values. Thats good.
Now i iterated over the json, created a string with all options and values and simply set the innerHTML of the select box to the generated string. As simple as that.

var citiesSelect = document.getElementById('cities');// this is the select box
var str="";
for(var i=0; i < allCities.length; i++)// allcities is the array
{
     str+='<option value="'+allCities[i][0]+'">'+allCities[i][1]+'</option>';
}
     citiesSelect.innerHTML = str;
}

And I was done. I opened firefox and checked it. It worked.
It was IE’s turn now. It wont fill the selects at any cost. I was surprised. Neither IE6 nor IE7. Will update when I check with IE8.

Here is an example. You can check it across browsers.

Doing some google told me that THIS IS A BUG IN IE. It removes the first <option> part from the string to be set as innerHTML.

Direct from microsoft support - BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object

This led me to use DOM functions instead. I created each option. Then set its value, css. Another text node for display like that. Not difficult but the point is, all this could have been achieved in half the number of lines and time DOM functions took and in a simpler way. Moreover a bug related to a major feature like innerHTML in the most used browser is still lying there from the days of IE6 (or even before that…).

There are a couple of other ways as a workaround for this bug which I will discuss in coming posts.

Leaving with Douglas Crockford’s words:

“If a web browser is defective, causing errors in the display or performance of the page, should the page developer struggle to hide the browser’s defects, or should the defects be revealed in hope of creating market pressure to force the browser maker to make good? By which approach is humanity better served?”

Technorati Tags: javascript

As you probably know, Google celebrated its 10th birthday last month and they are celebrating it in a number of ways along with the internet users. On this occasion Google has presented a timeline of their journey of 10 years. This timeline marks all the major landmarks that Google has achieved in last 10 years,some of which are quite interesting.

Project 10 to the 100 is another project that they have launched. Google will accept ideas from users in certain categories. Then 100 ideas will be selected from these and public will vote on these. Finally 5 ideas will be selected and Google is committing $10 million to implement these ideas.

Now the best part which encouraged me to write this post. Yesterday google announced that it has made its oldest index available to users. In exact words  - “In honor of our 10th birthday, we’ve brought back our oldest available index.”. You can find it here. Note that the logo of Google is with exclamation mark. Its also missing the “I am feeling lucky” button. Google will also not be displaying ads in search results for this index

This index is of January 2001 and contains 1,326,920,000 pages. As Google says it is not the exact index of 2001 because they have removed some results from the index. Now an obvious question arises that why they are showing index of 2001 and not of 1998. Google’s answer is that this is the best and readily accessible index they can present.

Searching the web of 2001 gives interesting results. Like this search for AJAX . Search for youtube and you will get 0 results. Searching json gives InterneTV Music Videos-on-demand as first link. Search for php and see the third link. Its Parents Helping Parents, Inc. Home Page. Quite funny, isn’t it? Today if you search for php you will not get anything except php sites for at least 50 pages.  A search for captcha gives 5 irrelevant results. Today it returns 76,600,000 results. This shows how the web has evolved in these 7 years.
The results page is also not much different from what it is today. Clicking a search result will take you to the live version of that page as on today. There is another link with each result titled “View old version on the Internet Archive”. It will take you to the archived version of the page. I searched for google and followed the first link to the archived version of their homepage. It looks like this originally.

This index will not be available online forever. It will be live for a month only. Try searching the web of 2001 till then and do tell if you find any funny or interesting results. Happy searching…

Technorati Tags: Google

A cartoon appeared on blogoscoped yesterday which provided details of longly awaited Open source browser Chrome by Google. It contained the details of how Chrome works and its features. It is written by the famous cartoonist and theorist Scott McCloud. You can see the official comic book on google books.
Also there were some screenshots at http://gears.google.com/chrome/ which have now been removed.

Later google announced on their official blog that they accidentally launched this comic. In the same post they have said that beta version of Chrome will be launched on Tuesday in more than 100 countries. Currently it will be available only for windows.

From the details provided in the comic book, Chrome appears to be an interesting project. Google built it upon Webkit and gears. Here are some of the main features that google promises in Chrome.

• Multiple processes not Multiple threads

In currently available browsers a single thread runs which takes care of all the operations in all tabs. That means html, javascript and plugins of all tabs. As modern day browsers rely heavily on javascript, if javascript hungs up in any of the tabs it crashes the whole browser and no one likes that. Google guys have made a multi process design, which means each tab is a separate process. Each has its separate threads. A crash on a page will only affect that tab. Others will be running smoothly.This also makes memory management efficient.

• Webkit and V8

Webkit has been chosen as the engine for Chrome and V8 for javascript engine. V8 was written from scratch for chrome. It has  an intelligent garbage collection system that will result in faster interaction to pages and prevention of memory leaks.

• New tabs

Unlike current browsers which share a common Address bar and controls, Chrome has tabs on the top. That means having individual address bar and controls for each tab.

• Omnibox

The address bar is called omnibox in Chrome. However it is more than just address bar. It works as a suggest box which offers suggestions like google suggest. Moreover it includes your search history too. So you dont have to look into search history.Just type in omnibox and Chrome will fetch it from your history.

• The private mode - Incognito

Its like the Porn Mode introduced in IE8.0. When you open an incognito tab and visit a site nothing gets logged to your browser history. After closing the tab the cookies of that session are also cleaned.

• Speed dial like feature

We know that Opera provides a speed-dial feature which shows a grid showing thumbnails of 9 sites on opening a new tabs. These sites can be selected by the user. Chrome has enhanced it and added more features to it. Besides 9 sites thumbnails view, on the right there will be links to users previous searches, recently closed tabs and recently boorkmarked items etc.

• Safe browsing

Processes are not allowed to write to the file system. Each process has its boundary and it will not be allowed to operate outside it.
Moreover Chrome continuously downloads list of harmful sites for Phishing and malware. If users encounters a site that Chrome thinks harmful, she will be warned. This services will be freely available in the form of API.

These and many more features are yet to be discovered when we will have Chrome in action. So wait for the release all open source lovers and Microsoft… Take a long breath.

Technorati Tags: Google

Recently JSON has become a very popular data interchange format with more and more developers and a large number of big players in the web arena opting for it over XML.  In this article we will explore what json is all about and how we can use it. We will proceed in the following manner:

• Definition, Characteristics and Structure of json

• Example

• Parsing json text

• Reading values from json

Let’s go through each of these one by one.

Definition, Characteristics and Structure of json

JSON which stands for JavaScript Object Notation can be defined as a lightweight data interchange format. It is also said a fat-free lightweight alternative to xml. It is a text format which is programming language independent and is native data form of JavaScript. It is lighter and faster than xml. The credit to make json popular goes to Douglas Crockford.

Since JSON is the native data form of JavaScript, it can be used on the client side in an Ajax application more easily then XML. Implementations of JSON has been done in most of the languages (check here) we will stick to javascript as of now.

A JSON object starts with { and ends with }.  In between you can have key value pairs which are enclosed with double quotes (“) and separated by a colon (:).

Keys are simple strings and values can be either array, string, number or Boolean. Values enclosed between { and } are objects and those between [ and ] are arrays.

Example

A JSON can be as simple as

{
“name”:”name1”, “age”:”25”, ”address”: "anywhere"
}

Example 1
An example using arrays

{
"name": "name1", "age":"25", "phoneNumbers": ["9999123456", "9999678900","1234567890" ]
}

Example 2
A more complex example which has values in objects and objects are array elements.

{
"results":
 {
   "students":
   [
     {
      "id" : "1",
      "name": "Ramu"
     },
     {
      "id": "2",
      "name": "Shyamu"
     },
     {
      "id" : "3",
      "name": "Damu"
     }
   ]
 }
}

Example 3

Those familiar with JavaScript will see that syntax is same we use while declaring objects in JavaScript.In the above example we have a json where results is the key and its value is an object.

Read the rest of this entry »

Technorati Tags: javascript, json

The popularity of any web application that provides an API can be judged by the number of mashups available for it. Twitter is no exception and recently we have seen a significant number of mashups available for twitter.
twittervision ,twitterspy, twittermap, twubble are some of the popular ones. Besides there are many desktop mashups also.

toanswer is the latest addition to this list. Created by Chuck Harmston, it can be seen as integration of twitter and Yahoo answers/Ask.

The concept behind toanswer is simple : users ask questions on twitter and they get answers to these questions on a dedicated place i.e. toanswer.

Seeing the potential number of users who ask questions on twitter, no wonder if toanswer becomes a success.

toanswer uses the twitter API, collects the questions asked,their respective answers, indexes them and shows them on toanswer. Basically it works like this-
Assuming you are a twitter user, you just  have to follow 2 users toask and toanswer and you are ready to use toanswer. If you want to ask a question you send an update to twitter as

@ToAsk your_question_goes_here

If you want to answer any question that is on toanswer you reply in a format like this

@ToAnswer [questionid] your_answer_goes_here

Note the questionid. It is required in order to associate your answer with the correct question.

As twitter is limited to 140 character updates, this can be used to take advice from users rather then answers.

Technorati Tags: Technology, Web2.0

As you know php has a large array of array functions.While some of these are used frequently, some are lesser known but even they can be very useful in certain situations.We will analyze 4 such functions and see how they can be useful.
The functions we will be exploring are range,list,compact and extract

1- range

range takes min & max as 2 parameters and returns an array of variables from min to max.

<?php
$numbers = range("1", "10");
print_r($numbers);
?>

Output:

Array
(
    [0] => 1
    [1] => 2
    [2] => 3
    [3] => 4
    [4] => 5
    [5] => 6
    [6] => 7
    [7] => 8
    [8] => 9
    [9] => 10
)

A third optional parameter is step.It was introduced in php5.

<?php
$numbersStepped = range("20", "1",5);
print_r($numbersStepped);
?>

Output:

Array
(
    [0] => 20
    [1] => 15
    [2] => 10
    [3] => 5
)

Note that when min is greater then max,the results are also in reverse order.
Does range works only for numbers??? Of course not. You can use it with alphabets too.

<?php
$alphabetsStepped = range("a", "z",5);
print_r($alphabetsStepped);
?>

Output:

Array
(
    [0] => a
    [1] => f
    [2] => k
    [3] => p
    [4] => u
    [5] => z
)

Read the rest of this entry »

Technorati Tags: php

If you are a web developer and work with js/AJAX, surely you would have faced a situation like this.
I had a table in a page. What i had to do was create rows in javascript and set the innerhtml of table to the rows created. Something like this-

 var x=""; var tableContents="
<tbody>"; for(var i=0;i&lt;5;i++) { x+="
<tr>" x+="
<td>row"+(i+1)+"</td>
" x+="</tr>
" } x+="</tbody>
"; document.getElementById("myTable").innerHTML = x;

of course assuming myTable is the table element available in the page.

I prefer innerHTML over DOM functions as they are faster on all browsers and platforms.

Anyway, I checked above code and found that it worked perfectly in all browsers (firefox, opera …) except IE (http://www.schneier.com/blog/archives/2005/12/internet_explor.html).
No error and nothing, my table was still empty.
Read the rest of this entry »