JSON- Javascript Object Notation

Intro
JSON stands for Javascript Object Notation. JSON is a way of writing or expressing JavaScript Objects so that it can be easily read by both the computer and humans. Unlike XML or eXtensible Mark up Language the JSON is much more compact and easier to Parse.

XML takes the form

<Tag>
      <Tag2>Information</Tag2>
<Tag>

JSON takes the form

var obj = {
an_array : [element1, element2 , element3 ....],
a_property : "property",
a_multi_array : [ [,,,],[,,,],...]
};

In order to parse an XML response, we have to use the following notation,
Suppose we are returning an XML response from a server using Ajax. The common method to extract the useful information is :

var xml = xmlHttp.responseXML;
var list= xml.getElementsByTagName("TAG");

for(i=0;i < list.length;i++)
{
//  loop through and extract the values
}

This can be replaced with the new JSON object notation by

var strobj = xmlHttp.responseText;
var obj = eval("("+strobj+")");
obj.an_array[0];
obj.a_multi_array[0][0];
// ....

The Notation
All object lies between the { }
each of the properties has a label and an associated value or an array.
It is specified as label : value
a , separates the label-value pairs.
Arrays are enclosed in square brackets [ ] and comma separated.

In short a JSON object looks like

var blog = {
name: "the Digital Me",
author : "arun prabhakar",
pages : ["http://url1/","http://url2/"];
complexarray: [[0,10,10],[7,5,7],[1,9,8],[7,1,4]];
};

JSON and PHP
PHP has 2 built in functions to help with the JSON format.
json_encode
json_decode

Links

json.org
php.net JSON Functions

Perl Script to HTML formatter

Intro
This script converts a Perl Script to HTML so that it looks good with colour code formatting for keywords and variables. This isn't yet completed and may contain bugs but I guess its worth posting. Anyone is free to modify and redistribute the code as long as the first line remains intact.

Usage

perl format.pl ScriptFile.pl

Output will be saved as ScriptFile.pl.html

Script

style="color:#0ff">$cnt =~ s/&/&/g;

$cnt =~ s/</&lt;/g;

$cnt =~ s/>/&gt;/g;







#Keywords



$keywords =~ s/ /)|(?:/g;



#Comments

$cnt =~ s/$singlecomment(.*)\n/<span style="color:#080">$singlecomment$1<\/span>\n/g;



$cnt =~ s/(?:<.*?>)*([\s)\[{;])((?:$keywords))([\s\[{(;])(?:<\/.*?>)*/$1<span style="color:#008;font-weight:bold;">$2<\/span>$3/g;

$cnt =~ s/([^\\])([\@\$].*?)([^a-zA-Z0-9_])/$1<span style="color:#0ff">$2<\/span>$3/g;



print $ARGV[0].".html";

open FILE,">".$ARGV[0].".html";

print FILE "<pre>$cnt</pre>";

close FILE;

Found a bug? (Plenty I know)
Post a comment with Line Number , Code , Correction.

Making Google talk Chat Themes

Intro

Making of a google talk chat theme is similar to making a 4 page HTML website with a CSS file. The following assumes you are using windows XP. Please unhide hidden files and folders.

The default chat themes for google talk are located in

X:\Documents and Settings\[Profile Name; Eg: Administrator.000]\Local Settings\Application Data\Google\Google Talk\themes\system\chat

where X: is the drive windows is installed.
[Profile Name] is your user name on windows.

Custom skins that we create must come under this folder:

X:\Documents and Settings\[Profile Name; Eg: Administrator.000]\Local Settings\Application Data\Google\Google Talk\themes\user\chat

Let us start creating a new skin name "digitalpbk"
Make a folder inside the above folder named "digitalpbk"

X:\Documents and Settings\[Profile Name; Eg: Administrator.000]\Local Settings\Application Data\Google\Google Talk\themes\user\chat\digitalpbk

Make a folder inside it named Content
Make one more folder inside Content named Resources

So the total path would look something like :

X:\Documents and Settings\[Profile Name; Eg: Administrator.000]\Local Settings\Application Data\Google\Google Talk\themes\user\chat\digitalpbk\Content\Resources

Make empty files and directories so that the complete Resources directory has :

Incoming \ Content.html
Incoming \ NextContent.html
Outgoing \ Content.html
Outgoing \ NextContent.html
main.css
status.html
nextstatus.html

File Descriptions

• Incoming \ Content.html : When you chat to someone, their first reply will use the format specified in this file.


• Incoming \ Content.html : When you chat to someone, their subsequent replies will use the format specified in this file.


• Outgoing \ Content.html : When you chat to someone, your first message will use the format specified in this file.


• Outgoing \ Content.html : When you chat to someone, your subsequent messages will use the format specified in this file.


• main.css
: This is the main CSS sheet in which you specify the class of styles as you do for HTML.

• Status.html : When you chat to someone, their status will use the format specified in this file.


• NextStatus.html : When you chat to someone, their changes in status will use the format specified in this file.

Sample


This is a sample of the Chat skin i made. You can Download the Resources zip file. Contains the chat skin.

A lil documentation :)

main.css

Main.CSS is the main cascading style sheet, let us start styling with it.

BODY { color: #fff; background-color: #000; margin:4px; }
BODY a {text-decoration:none}
BODY a:link { color: #ccf; }
BODY a:hover { color: #ccf; text-decoration:underline;}
BODY a:active { color: #cfc; }
BODY a:visited { color: #ccf; }

DIV.send1st
{
background:url('bg.jpg');color:#fff;
}

DIV.recv1st
{
background:url('bg2.jpg');color:#fff;
}

send1st is the sending message format. Just an image simple.
Same for recv1st.

Enjoy making your skins and do let me know of yours
Feel free to comment....

Buttons with Rollover Effect

Intro
In this article, I am going to explain how to make a simple link that looks like a button with roll over effects using only CSS.

First we have to decide on the dimensions of the image etc. And make an image that has the following format: The default image and then the rollover images.


The above image is 382x225 containing 3 images each of 382x75 stacked top to bottom.
The first image is the default image. The second is the hover image i.e., the image that is shown when the mouse is over the image. The third image is not used.

So we have to design the button
HTML:

<a href="http://www.answers.com/unicode%20mirror" class="ah"></a>

Styles:

a.ah
{
display:block;
width:382px;
height:75px;
background:url("http://www.blogger.com/img/bg-tab-right.gif") no-repeat 0 0;
}
a.ah:hover
{
background:url("http://www.blogger.com/img/bg-tab-right.gif") no-repeat 0 -75px;
}

The -75px highlited in red indicates the height of the images to be skipped, in this case 75px, If we have to display the third image as the hover image then just replace -150px here.

Demo:


For Starters ...

The Styles must be copied to the CSS file or pasted inside a

<style></style>

tags and the HTML can appear anywhere within the body.

Stuck?
Lemme know... Feel free to comment.

CSS Transparency Effects

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%


Intro
CSS (Cascading Style Sheets) can be used to add cool effects to an ordinary looking web page. One such example is adding transparency effect to images or other portions including text of your website.

in IE
In IE transparency is achieved by

 filter: alpha(opacity=XXX) 

where XXX takes value from 0 to 100. It indicates the % of opacity required.
For example

 <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="filter:alpha(opacity=50)" /> 

produces a semi transparent google logo.

in Firefox
In firefox the same effect is achieved by

 opacity:X

where X lies between 0 and 1 (0.1, 0.2,0.25 ...)
For example

 <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="opacity:0.5" /> 

produces a semi transparent google logo.

Inorder to produce the same effect on both browsers just give both codes

 <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="filter:alpha(opacity=50);opacity:0.5;" /> 

Both browsers would ignore the other code and produce the same effect.

Does this work on other browsers?
I donno try and let me know ....
Feel free to comment.