jump to navigation

Git Tutorial Part II – Sharpen your Git-Fu with 10 more commands. June 6, 2009

Posted by xk0der in : Programming , 7comments

Some time back I had posted a simple Git tutorial that introduced you to 10 git commands, to get you started with this wonderful piece of tool. The response that I got for that post was great. I also got comments asking me for how to perform few other tasks. So here it is, the second installment of the git-tutorial. I hope you enjoy it as much as the first part.

Remember, the text presented here targets a single developer setup (as the first part did). I intend to do a distributed git setup in the third installment.

Note : Few commands have been broken into two or more lines to fit into the blog’s layout.

Let’s begin!

Command 1 : Time Travel: Moving back and forth between revisions.

The whole point of a version control system is to maintain revision history of your source code. And permitting you to view, how your code looked, at any point of time in the recorded history.

Git records your revisions in the form of commits. Every commit is assigned a unique hash to identify it. (Git uses SHA1 hashes). You can view the commit hash by issuing the git-log command (Check part one). The hash is displayed as a hexadecimal string on the line beginning with the word “commit” in the log.

Now that we know all this technical mumbo-jumbo, let’s use it to do some real work.

Move to a commit in the past.

To move to a particular commit back in time we use the command git-checkout, introduced in part-I for moving between branches. The syntax is similar, but instead of the branch name we use the commit hash. Always make sure you commit any changes or stash them (see next command) before you issue the checkout command; Else the changes will move across!

here’s the syntax:

$ git checkout commit_hash

Let’s see an example.

First I issue the git-log command to find the hash of a commit I want to switch to.

$ git log
commit 1ef801f70a99b07bb578bac4a3c2edb52b367e1d
Author: xk0der <amit .. AT .. xkoder .. com>
Date:   Fri Jun 5 12:52:16 2009 +0530

Added few comments

commit ccbaeec43300f19dd04308b6c62a3f03f6233725
Author: xk0der <amit .. AT .. xkoder .. com>
Date:   Fri Jun 5 12:51:30 2009 +0530

Initial import

(email address obfuscated for spam bots)

As you can see, I have just two commits here. I want to move to the commit with the log message “Initial import” i.e. my first commit. So I issue the following command.

$ git checkout ccbaeec4

as you can see I just typed in the first 8 characters of the hash. That is the minimum that Git requires to successfully identify the commits uniquely. You may supply more than eight characters or the full hash if you wish.

After the checkout is complete, you can view your files to see how they looked in the past :). If you want to modify your files and want to propagate the changes to the master’s HEAD, check command 6 below.

Moving back to the present
To go back to the master’s HEAD; which is the present state of your code; issue the command:

$ git checkout master

As I’ve said earlier, always remember to commit changes or stash them before moving between branches or commits.

Command 2: git-stash – Moving without committing.

This is one handy command you’ll find very useful. It lets you store your current changes to a temporary location. These stashed changes can then be recalled back when required. Thus alleviating the need to commit every time you need to move across branches or commits.

Stashing changes
the syntax is:

$ git stash

When issued, all changes will be stashed to a temporary location and you will have a clean current HEAD. You can verify this by issuing the git-status command.

When done with your other work, you can pop back the stashed changes by issuing the following command.

$ git stash pop

Pretty cool ‘eh! But when to use it?

When to use git-stash; Here is a one typical scenario
Suppose you are working on one of the feature branch and you get a mail that something is not fine with the code on your trunk, the ‘master branch‘. Now one way to to fix something on the master branch is to:

  • First commit changes on the ‘feature’ branch.
  • Next, checkout the master branch and fix what’s required.
  • Commit changes to master.
  • Checkout the ‘feature’ branch.

But, what if, you do not want to commit the changes on the ‘feature’ branch? Probably because you are halfway through something, or you want to test your code before you commit it. You you stash all changes as shown below.

$ git stash
$ git checkout master
...Fix some stuff...
$ git commit -a -m "Bug:12 fixed - thread no longer dies prematurely"
$ git checkout feature
$ git stash pop
...Continue working normally...

Multiple stashes
You can stash more than one set of changes, if required, by issuing the git-stash command multiple times.

When you use the `git-stash pop` command, the latest stash comes out first, much like a stack.

Viewing stored stashes

To view a list of stashed changes issue the following command

$ git stash list

There are more fancy things, that you can do with this command (checkout the man pages for git-stash). But for normal daily use the first two commands will suffice.

Command 3: git-diff – some switches to differentiate better.

I’ve already explained this command in the first part. Here I’ll discuss some command line options that you can supply, to help find the right information.

Finding which files differ (instead of what differs inside files)

Here’s the command:

$ git diff --name-status

This will list the files that have been modified(M), added(A) or deleted(D) with respect to the current HEAD and uncommitted changes, if any. You may supply commit hash(es) to find difference between those two commits.

$ git diff --name-status hash_1 hash_2

Using the HEAD symbol

You can use the HEAD symbol to view diff’s between the current HEAD and previous revisions, as follows:

$ git diff HEAD~1

This command will show you the diff between current HEAD and the immediate previous commit. This command is a shortcut for

$ git diff commit_hash_for_HEAD
  commit_hash_just_before_HEAD

What is the HEAD?

If you remember, as discussed in part one of this tutorial, HEAD refers to the latest commit on the current branch. 

You can change the number after the tilde (~) to find differences between HEAD and ‘that’ many commits before the HEAD commit. experiment and see what you find. This is a totally safe command to play with 🙂

Command 4 : git-add revisited.

In part one of this tutorial we learned how to make git keep track of a file or number of files by issuing the git-add command. Well that is one work git-add does. Let’s find out what’s the other thing git-add is used for.

Before that, let’s see how we have been committing changes up till now.

$ git commit -a -m "Commit Message"

We know that the -m switch is to specify the commit message, what is that -a switch doing there?

Before I explain; The above command is (almost) equivalent to the following two commands, in sequence:

$ git add .
$ git commit -m "Commit Message"

So you see, that little -a switch is actually a shortcut to add all files. But haven’t we already added the files for git, to keep track of?

Yes we have but git also wants you to tell it Which files to commit; and this is what the first ‘git add .‘ command is doing. It is telling git to add all new, modified or deleted files to the ‘commit stage‘. So after the files have be staged for committing, we actually commit i.e. register our changes, by issuing the second command (git-commit).

One small but important quirk.
As I said the command is almost equivalent to the latter sequence; so what’s the catch?

The switch -a with git-commit DOES NOT ADD files that are not currently being tracked by git.
WHEREAS; ‘git add .‘ adds files not being tracked by git for commit as well.

Why to use git-add this way? Read ahead.

Committing only selected files

Suppose you are working on, say 3 source files. You realize that you are pretty much content with the changes you have made to two of the files but the third file is still work in progress. You can commit just these two files by issuing the following commands:

$ git add path/to/file1
$ git add path/to/file2
$ git commit -m "Some feature done"

When you are done with the third file; You can commit changes by either issuing the following commands

$ git add path/to/file3
$ git commit -m "Third feature done"

OR, by issuing the following command (Since we want to commit all modified files.)

$ git commit -a -m "Third feature done"

You can use ‘*’ and ‘?’ wild-cards to stage multiple files for commit with the git-add command.

example:

$ git add header/*

This command will add all files inside the folder “header” to the ‘commit stage’.

Remember: git-add just stages the changes for commit (i.e tells git which files to commit), the actual commit i.e. write to the repository happens when you issue the git-commit command.

Also checkout the git-reset command listed below; to learn, how to remove files from ‘commit stage’.

Command 5 : git-rm ; Few more things you should know.

The –cached switch:

When git-rm is used with this switch the file are removed from git’s repository but are no deleted from the disk.

Example:

$ git rm --cached
  path/to/file/or/folder

The above command will remove the particular file or folder but they will continue to exist on the disk. If you issue git-status command the file will be shown as deleted, as well as un-tracked.

git-rm without the –cached switch:

When used without the – -cached switch git-rm removes the file from the repository as well as from the disk.

You need to commit changes after using the git-rm command with or without the – -cached switch.

All isn’t lost!

Remember that the file(s) that you removed with git-rm and then commit changes, only apply to that commit. All your previous revisions will still have the removed file(s) or removed folder(s). So if you checkout previous revisions you can get the files or folder back.

You cannot alter the commit history(well! see git-reset below), as that goes against the version control system’s primary functionality; which is to preserve history of changes to the source code repository.

Command 6 : Managing branches.

We already know how to create, delete and move between branches. Here are a few more commands to help you manage your branches.

Creating a branch out of some older commit.

Suppose you want to move back to a particular commit and create a branch out of it. You can issue the following commands

$ git checkout commit_hash
$ git branch branch_name
$ git checkout branch_name

A convenient shortcut for the above command-set is:

$ git checkout
  -b branch_name commit_hash

The above command is exactly equivalent to the three commands listed before.

An example with the shortcut command:

$ git checkout
  -b bugfix_branch HEAD~2

The above command will create a branch named bugfix_branch which will be positioned at two commits bellow the current HEAD.

You can use the gitk gui to visually checkout the branches. Try it, it’s really cool! (Checkout the part one of this tutorial to know more about gitk).

Command 7 : git reset command

Clearing changes
You made some changes to your source code and realize you don’t need those changes. Maybe you were just testing something. What to do now?

Just use the following command to clear any changes and move back to the latest clean state, i.e. the last commit.

$ git reset –hard

BE VERY CAUTIOUS while issuing this command as it is IRREVERSIBLE.

This command will clear all un-committed changes and revert back all your files to the state reflected by your last commit.

The above command can be quiet useful if you do a merge between branches or from other people repository and get some conflicts; and you want to restore your repository back to the clean state. Just issue this command you’ll be back to the un-merged state.

Clearing files staged for commit
After adding files to the ‘commit stage’ you realize you do not want to commit those files. You can issue the following command to un-stage them.

$ git reset

This command un-stages files staged for commits ONLY, so all your changes are still there.

Deleting commits!

This command is provided for those rare cases where you REALLY REALLY DO need to ‘alter’ the history. Or for those occasional cases where you did some bad commits.

Issue the following command to delete a commit forever and ever.

$ git reset –hard HEAD~2

This command gets rid of the last two commits; kind of rewinds back to the third last commit.

If you have shared your repository, you are strongly discouraged to use this command. But as a single developer you can use it if really required.

Command 8: Garbage collection; Compress your repo and get some free space.

I’ve saved the simplest command for the end! Smile now 🙂

Issue the following command to make git compress your repository and clean it up.

$ git gc

This operation might take some time, a couple of minutes or so.

When finished, you’ll probably have more disk space 🙂

You should gc once is a while.

gc = garbage collection.

Yeah, that’s it! Just eight commands, but I’ve got two more things to make life easier for git users. So it adds up to ten right! 😉

Extra 1 : Ignore some files; .gitignore explained.

Not all files inside your project folder are required to be tracked by git. Some example include: object files, swap files etc.

Create a file name ‘.gitignore‘ in the base folder of your git repository and put in the name of files inside ‘.gitignore‘ as explained below, to make git ignore them.

Simple wild-cards are recognized.
*‘ and ‘?‘ wild-cards plus regular expression’s square bracket `[ ]‘ notation is recognized.

So, for example, if you want to ignore all files ending with the extension ‘bak‘ you can specify the following in your .gitignore file.

*.bak

The above line, if present, in your .gitignore files will ignore all files ending with ‘.bak’ anywhere inside the project folders.

Ignoring a particular file or folder using absolute path notation.

Suppose you have the following directory structure for your project, where “Project” is the base directory of your project’s repository.

Project
    |-- .gitignore
    |
    |-- .git
    |
    +-- Folder_1
    |
    +-- Folder_2
    |       |
    |       --- Folder_3
    |
    -- Folder_4
            |
            +--- File_1
            +--- File_2
            +--- File_3

Now suppose you want to ignore the folder `Folder_3‘ put following in your .gitignore file:

/folder_2/folder_3/

Notice the forward slashes at the beginning and at the end:

  • If you remove the preceding forward slash, git will ignore all folders named ‘folder_3‘ inside any folder named folder_2.
  • Removing the forward slash at the end will make git treat the name ‘folder_3‘ as a file name instead of a folder. So in case if we had a file named ‘folder_3‘ inside folder_2, that would be ignored.

Now, if you wanted to ignore the file File_2 as shown in the diagram above, you place the following in your .gitignore file:

/folder_4/file_2

Notice we did not put a forward slash at the end, if we had, git will treat the name ‘file_2‘ as a folder name.

So here are the rules, re-iterated.

  1. Absolute paths begin with a forward slash ‘/’.
  2. Folders names should always be suffixed with a forward slash ‘/’.
  3. File names should NEVER be suffixed with a forward slash ‘/’.

The use of square brackets as shown in the example below. They work very much like regular expression notation.

An example .gitignore file.

# git ignore file
# comments start with hash

# ignore all object files, all
# files ending either with '.o' or '.a'
*.[oa]

# Ignore all files with
# the extension *.swp
*.swp

# Ignore a single file
/folderA/folderB/build.info

# Ignore a folder named
# temporary in the base folder.
/temporary/

# Ignore folders named _object
#  anywhere inside the project.
_object/

What’s the use of .gitignore, after all?

Well, if still haven’t figured out let’s look at a typical coding scenario.

You have your project, added all files to your .git repository, and did and initial commit. Now you start editing some files, your favorite editor creates some backup files ending with ‘.bak’ extension.

Now you do git-status to check what all files changed, git tell you which files have been changed but also lists a the ‘.bak’ files as being untracked.

After few days, the list of untracked files becomes so long, that doing git-status scrolls past your screen. Not pretty right! 🙂

Also, you cannot do ‘git add .’ to stage files for commit, as this command will add the ‘.bak’ files to be committed as well, unnecessary bloating your repository.

What’s the solution? Just create a .gitignore file inside your project’s base directory and place a line containing ‘*.bak’ in it. Now do git-status; wow! neat ‘eh. 🙂

Extra 2 : Throw in some colors and introduces yourself to git.

Your name and email address in commits
Edit the file .git/config inside your base folder (project folder) and enter the following lines.

[user]
    name = Your Name
    email = your email Id

example:

[user]
    name = xk0der
    email = amit@xkoder.com

After placing these details in your file, the next time you commit any changes, your name and email id will be registered as the author of that commit.

Colorizing git’s output.

Gary has a small and simple post on how to get color’s in git’s output here:

http://scie.nti.st/2007/5/2/colors-in-git

That’s it! Go do some Git-fu.

In the next installment I intend to cover distributed git setup and few more commands. Till then enjoy! 🙂

Like this post?

Git Tutorial : Starting with git using just 10 commands August 13, 2008

Posted by xk0der in : Programming , 27comments

Part – II of this tutorial is now available here.

Git is marvellous piece of tool every programmer must have. Git is a distributed version control system developed by Linus and others. Yes you guessed it, it is used heavily by the Linux (kernel) developers apart from many other projects.

How will Git help you and what this post covers.

Scope of this post : This post will deal with the usage of Git by an individual developer only.

Why use version control : Version control gives you a great deal of flexibility while coding. You can make changes without having to worry about breaking things, as you can always move back to previous version(s) of your code. Version control also allows you to compare changes as you move ahead, helping in bug-fixing apart from other benefits.

Why use Git : There are a number of other version control systems available, some centralized systems some distributed systems. Amongst them, Git is one of the fastest version control system, very simple and easy to use, and has lot of helpful features packed in very a small package. Check my other post to know more reasons.

Prerequisite

1) You need a computer :) with preferably Linux (any flavor) installed on it. (This post does not deal with Windows, though you may use the commands given here without any modifications (probably!)).

2) You need Git.

on Fedora distribution, you may install git using the following command

$ sudo yum install git

On Ubuntu distribution, you may install git using the following command

$ sudo apt-get install git
$ sudo apt-get install git-core

(Edit: 21/Oct/2008 – Thanks to robo47 for pointing out the mistake)

For other methods and building from source check out this page.

3) You need some project which you are developing (or would be developing) :) . The project’s language could be anything .. C, C++, D, Python, Perl, HTML, JavaScript, plain text files … you got the idea right? :)

Let the show begin

Command 1 : Initializing an empty git repository.

Befor you can start using the power of git you need to create an empty repository and tell git which files to track. The first command that I’m presenting initializes an empty git repository.

Before executing the command you need to be at base folder of you project. For example if you have all the source code for you project stored here /home/xk0der/SourceCode/myProject, (We’ll call this folder as the base folder for ease of discussion), move there first. Now execute the following command once you are in the base folder.

$ git init

This will create an empty repository in the current directory (the base folder).

For every project that you want to track using git, go to its base folder and issue this command first and then the next 2 commands presented below.

Command 2 : Adding files to git repository.

The next step is to add files to your git repository, essentially telling git that these are the files we want to keep track of. Execute the following command from the base folder.

$ git add .

This will add all the files from the current folder and sub-folders recursively to the git repository.

Command 3 : The commit command.

This is one command you’ll be using quite often.

the above command adds the files but does not commit the changes to the git repository. So you need to issue the following command to make the changes final.

$ git commit -a

This will open a text editor (probably vi) where you can add some comments about this commit. If you prefer not to use the text editor, you can specify the commit message from the command line it self, just use the following format instead of the above one.

$ git commit -a -m "Initial import"

The -m switch is used to specify the commit message. In our case the commit message is “Initial import”. You can put anything between the quotes for your message.

You are ‘all’ ready!

Now open your favorite text editor and start coding. When you feel you have accomplished something or you just want to save the current state of your source code issue the git-commit command as described above. The commit command will create a new checkpoint and save the current status of your source code.

Git (like any other version control system) saves all the commits you have done to your source code repository. This enables you to go back and forth between commits and inspect the changes.

Now let’s move forward and learn a few more commands.

Command 4 : Viewing the commit log.

You can view all the commits you have done till now using the following command

$ git log

This command shows the commit history with the

1) Unique commit hash
2) Name and email of the person who performed the commit
3) Date and time of commit
4) The commit message

Of all these, the first item, the unique commit identifier, the SHA1 hash is of importance to us. This hash will be used with some of the commands listed next, and is used with a plethora of other git commands, not listed here :)

Command 5 : Checking the current status.

While coding, you may want to see what all files have changed, before you do a commit to store them in the git repository. This command helps you achieve that.

$ git status

The above command will list all files that have changed since your last commit.

Command 6 : Finding the difference between commits.

Apart from just viewing files that have changed, you may be interested in viewing the actual differences in the source code.

$ git diff

The above command will show a difference ( a diff ) with respect to your last commit and current changes.

The diff command can actually be used to compare difference between any commits

To view difference between a previous commit and current changes.

$ git diff commit_hash

here the commit_hash is the first eight characters (hex digits) of commit hash as shown in the commit log by the git-log command. Yes! you need not specify the full hash, just the first eight digits are good enough.

To view differences between two previous commits.

$ git diff commit_hash_1 commit_hash_2

This command will display differences between the two commits identified by the commit_hash_1 and commit_hash_2.

Command 7 : Creating branches!

Don’t be scared by the word “branching”, specially if you never dealt with them. Branches are easy to play with and are very useful.

Before I show you the command a bit more discussion about branches.

  • You can view branches as being diversion from the main linear commit tree.
  • All branches stem out from the master branch, the name given to the main trunk.
  • Every branch has it’s own commit log.
  • You can have different code in same files across difference branches. (This is the main feature of branching). Actually git goes even further and allows you to have not only different content in files across branches but even different sets of files across different branches.
  • At one point of time, you can be sitting only on one branch. What this means is that, the source code from the current branch will be the effective one, the one to which you would be making changes.

Why use branches?

Suppose you have an almost stable source code and you are to release the product in a month or in a week or two. You also have plans to include another great feature into your code, but are afraid it might break your code and your release plans may go hay-wire.

This is where branches come into picture. Just create an experimental branch from you main stable trunk ( the one you’ve been working on up till now is the main trunk, the master branch). After you have created the experimental branch, you can continue fixing bugs and polishing the code on the main, i.e. the master branch. Meanwhile you can also continue working on the experimental branch without affecting a line of code on the master branch.

In the end, if you find that the experimental feature is working good enough, merge it into the master branch and release your product. If the experimental feature didn’t quite work out, you can still release the product from the master branch. The experimental branch is still there so you can continue working on it till it gets stable.

This is one scenario (and the most often reason, though not the only one), to create branches.

Okay now, back to commands . Issue the following command when you want to create a branch.

Creating a branch

$ git branch branch_name

branch_name could be anything that you wish, for example:

$ git branch experimental_feature

Branching a branch or “I want more branches”.

You can create as many branches from inside any branch you want, creating a very dense tree if you like.

Just move inside (check-out that branch, see command 8 below) and issue the branch creation command.

Command 8 : Moving to a branch and listing all branches

Once you have created the branch move to it by issuing the command listed below. Always Make sure you do a commit before you issue this command or else changes will move across branches. Make this a habit! (OR have a look at git-stash command, discussed in part II of this tutorial.)

$ git checkout branch_name

Here the branch name is the branch where you want to move. Once checked-out, you can view staus, log, diff etc, using the commands presented earlier.

To go back to the master branch (the main trunk) issue the following command. (Again make sure you had issued the commit command)

$ git checkout master

Listing all branches

Issue the following command to see all available branches in the current repository.

$ git branch

Command 9 : Merging two branches

Move to (checkout) the branch with which you want the merge to happen and issue the following command.

$ git merge branch_name

This will merge the branch branch_name with the current branch.

For example if you want to merger the “experimental_feature” branch with the master branch, issue the following commands

$ git checkout master
$ git merge experimental_feature

Git will notify you with any conflicts it cannot resolve automatically (if any). You can then resolve the conflicts manually.

Deleting a branch

After the merge is done you can delete the experimental branch if you wish by issuing the command

$ git branch -d experimental_branch

The above command will only delete the branch if it is fully merged with the current branch’s HEAD. HEAD is the current position in your branch, the latest commit.

Command 10 : Deleting stuff from the repository.

Issue the following command if you do not want git to keep track of a file or folder and (this is the opposite of the git-add command). The file stays in the working directory, on the disk.

$ git rm --cached path/to/the/folder_or_file

The git-rm command removes the files from the repository for current HEAD only; previous revisions/commits will still have the file.

That’s it, you’re done!

Before I leave you :) a few more command/features that may interest you, but are not totally necessary as of now.

A graphical repository viewer

To invoke a graphical repository viewer, invoke the following command

$ gitk

Git – Graphical user interface

For those who prefer GUI, you can install a graphical front end to git.

On Fedora

$ yum install git-gui

On Ubuntu

$ apt-get install git-gui

Run the gui by issuing the following command

$ git-gui

Yup, totally done now! :)

That’s all folks. :) I hope this post will help you in getting started with one of the most powerful version control system available around.

When you are done playing with these commands, you may want to read the second installement of this turotial here: Git Tutorial Part II – Sharpen you Git-Fu with 10 more commands.

Like this post?

JavaScript Associative Arrays Demystified July 10, 2008

Posted by xk0der in : Programming , 18comments

Javascript hides a lot of arsenal beneath its simplicity. In this post I’ve tried to explain normal javascript arrays and associative arrays starting with absolute basics and then presenting the advance concepts that are often overlooked but are simple to understand and are very handy. I’m not a Javascript guru :) . This post is more about what I’ve discovered overtime while coding in Javascript. Hope it helps and saves your time.

Please Note: A single line in the code snippet may wrap or may have been split to fit it into the blog’s page layout. All code snippets are provided for illustration purpose. Though they should work (execute) fine without any modification, I’ve not tested all the snippets presented here.

Normal indexed arrays

I’ll start the discussion with normal indexed arrays. Most of the text in this section would be known to many, but might be useful for Javascript newbies.

In Javascript you can create and use normal arrays as follows:

var myArray = new Array();

Normal arrays uses positive integers numbers (including zero) as index. To store elements to this array. you can use the following syntax.

myArray[0] = 200;
myArray[1] = 300;

Where 200 and 300 are the values stored at the first and the second location in the array, respectively ( index 0 is the first location).

Another way to assign elements is to use the array constructor as follows.

var myArray = new Array(200, 300);

The above code has the same effect as the previous one, storing 200 at the first location (index 0) and 300 at the second location (index 1)

Tip 1 : The array.length property
If you want to add an element at the end of a normal, number indexed array (the one we used above). use the following code.

myArray[myArray.length] = someValue;

For example:

var myArray = new Array();

myArray[myArray.length] = 200;
myArray[myArray.length] = 300;

For the first assignment, myArray.length would be 0, so 200 is stored at the first location (index 0). after the assignment the array length becomes 1 hence 300 is stored at the second location (index 1). At the end if you try to check the length property of myArray, it will contain the value 2. As you would have guessed, you can always find the number of elements in an array by using it length property, as follows

arrayObject.length

Tip 2 : Quick array creation.
You can use the square bracket operator to quickly create an array. This is specially useful when you need to pass array arguments to functions. An example follows.

var myArray = [200, 300];

alert(myArray); // outputs: 200,300
alert(myArray.length); // outputs: 2

The first line in the code, is equivalen to:

var myArray = new Array(200, 300);

Here’s how you can use this trick while passing argument to functions:

function sumAll( arrayArg )
{
    var sum = 0;
    for ( i = 0 ; i < arrayArg.length; i++)
    {
        sum = sum + arrayArg[i];
    }
     alert("Sum is:" + sum);
}

sumAll([100,200,300,400]);
// the alert in sumAll() function should
// display - Sum is: 1000

Tip 3 : Javascript array elements can be heterogeneous
I’m only storing numbers in all the above examples but Javascript arrays can store a string, an object and for that matter another array itself (as an array is nothing but an object). And one important thing to remember is that unlike many other programming language, all elements need not be of the same type. You can store numbers and strings in an array at the same time as illustrated below.

var mixArray = new Array();

mixArray[0] = "Hello World";
mixArray[1] = 100;

var anotherMixArray = new Array(200,
                                300,
                                "Hello Again",
                                500);

var moreMixArray = new Array();

moreMixArray[0] = 600;
moreMixArray[1] = mixArray;

moreMixArray[2] = new Array(700,
                            anotherMixArray);

moreMixArray[3] = "Incredible!";

The above code may look like madness at first glance, but is perfectly valid and provides a great bit of flexibility to the programmer. if you cannot figure out what’s going in that piece of code, draw it out and things will make sense, look at the figure below. :)

Array Madness Explained

Sparsely populated Array

In Javascript arrays can be sparsely populated, that is, you need not fill-up each and every location in an array. Consider the following example.

var myArray = new Array();

myArray[0] = 200;
myArray[5] = 300;

alert(myArray);

// the alert dialog box shows 200.
alert(myArray[0]);

// 300 will be shown in the alert box.
alert(myArray[5]);

// this shows 'undefined'
alert(myArray[2]);

// this will show '6' in the alert box.
alert(myArray.length);

The above code creates a sparsely populated array, courtesy the statement myArray[5] = 300; All intermediate locations from index 1 to index 2 are created but nothing is stored there, essentially they are not-defined. Note that though the number of elements stored is two the array length is shown as 6. This is because, though the elements may be empty (technically undefined) they are part of the array.

An examples that uses the techniques shown above.

// Store Fibonacci series in an array

// Disclaimer: the code snippet here
// just serves the purpose of
// illustrating usage of array and by
// no means is an efficient or
// elegant solution (even if it is one

;)

 )
// to calculate or find Fibonacci series/numbers.

var myArray = new Array;
var maxNum = 100;

var a = 0;
var b = 0;
var c = 1;

while(c < maxNum)
{
    myArray[myArray.length] = c;
    a = b;
    b = c;
    c = a + b;
}

// displays
// Fibonacci Series : 1,1,2,3,5,8,13,21,34,55,89
alert("Fibonacci Series :" +  myArray);

// display - Array Length : 11
alert("Array Length :" + myArray.length);

Associative Arrays or something else!

Before we explain the “something else!” part in the heading, some definitions and examples.

Associative Array: In simple words associative arrays use Strings instead of Integer numbers as index. So we can have something like,

var myArray = new Array();

myArray["abc"] = 200;
myArray["xyz"] = 300;

Here the indexes “abc” and “xyz” are called keys and these keys are mapped to the values 200 and 300. So we say that the key “abc” maps to ‘200′ and similarly the key “xyz” maps to ‘200′. It’s that simple!

Where to use associative arrays?
I’m presenting few example here, where associative arrays may be helpful.

Databases: Consider a table with following columns and types, in the format COLUMN_NAME as TYPE

NAME as TEXT, MARKS as NUMBER, DOB as DATE.

In your code if you were to find the type of a column, you can create an associative array as follows:

var studentTypes = new Array();

studentTypes["NAME"] = "TEXT";
studentTypes["MARKS"] = "NUMBER";
studentTypes["DOB"] = "DATE";

alert("Type of MARKS is :" +
      studentTypes["MARKS"] );

As with normal arrays we need not remember the index number. Using the column names as keys we can directly get the types from the mapping.

This is a very trivial example, but the associative array concept can greatly simply coding for similar scenarios.

“But what about the ’something else!’ part”, I hear you saying :) read ahead to know the truth about Javascript associative arrays.

Magic and mystery continued…

Try the following code snippet.

var myArray = new Array();

myArray["a"] = 100;
myArray["c"] = 200;

// the alert box will contain nothing,
// it'll be empty!!
alert(myArray);

“What happened here? why did the alert box print nothing? why didn’t it output 100,200?”, don’t be too startled, more mysterious things are about to happen…

Try another piece of code.

var myArray = new Array();

myArray["a"] = 100;
myArray["c"] = 200;

alert(myArray.length); // output: 0

“What? ZERO!” … yes zero, because my friend there is NO such things as associative arrays in Javascript. “WHAT!”, you say, but you read it correct. Read ahead to know what these “key” to “value” mappings are.

Object and Properties and Not Associative Arrays

Javascript allows you to add properties to objects by using the following syntax:

Object.yourProperty = value;

An alternate syntax for the same is:

Object["yourProperty"] = value;

Shoosh!… If you are not getting what’s going on, you may skip to the next section, and I promise, it won’t hurt your usage of the so called associative arrays in Javascript.

Well, back to the discussion. In the code where we say myArray[“a”] = 100; What we really are doing is creating a property named “a” for the “myArray” object and storing the value 100 in the property.

try the following code, to make things clearer,

var myArray = new Array();

myArray["a"] = 100;

myArray.b = 200;

alert(myArray.a);
alert(myArray["b"]);

Remember: These are not alternate ways to assign values to an associative arrays, these are alternate ways to assign properties to an object.

The object “myArray” is of the type Array() in our example, courtesy the statement “var myArray = new Array();”. But in theory and in practice you can use any Class’s object to simulate the associative array. Try the following code and you’ll get what I mean by using any Class’s object.

var myArray = new Date();

myArray["a"] = 100;
myArray["b"] = 200;

alert(myArray["b"]); // output: 200.

Got the point? Good! :), but I suggest you use the Array class (for simulating the associative array behavior), as it makes the code more obvious (when read). As pointed by Nelson, using an Array class comes with extra baggage, like the functions push(), pop() and sort() and the property .length, which are of no use with the data we are storing. So as suggested by Nelson, we can use the plain Object class or the curly bracket notation to simulate the associative array behavior.

Now that the mystery is solved, just to avoid confusion, let’s use the term “associative arrays” for the Object-Property assignment behavior.

Tip 4 – Quick associative array creation

We cannot use the Array() constructor to assign elements to associative arrays as we did with normal (proper) arrays. But we can use the Javascript’s object notation to simulate the square bracket effect. (see tip 2).

Check out the code first:

var myArray = { "abc":200, "xyz": 300};

alert(myArray["abc"]); // output: 200

The curly braces is a quick way to define an object, specifically and unnamed object or an object with no class. Normally we have been creating objects using the new operator, which expects a class name to be present.

The colon separates the property name and the value associated with it. The property name goes to the left of the colon and the value goes to the right. Multiple properties are separated using a comma.

The quotation marks enclosing the property names is optional, but is required if you are going to use property names with spaces.

In the associative array terminology, just replace the term property from the above paragraph with key.

Tip 5 – using for(in) to iterate through an Associative array

You can iterate through an associative array using the for..in loop construct as follows.

var myArray = {abc: 200, "x y z": 300};

for(key in myArray)
{
   alert("key " + key
         + " has value "
         + myArray[key]);
}

The above code snippet will display two alert boxes with the following text “key abc has value 200″ and “key x y z has value 300″ respectively.

Some explanation:
The for loop here iterates through all the properties of the object “myArray”. The variable “key” will contain the property name inside the for block, which can be used with the object to retrieve the property’s value.

In terms of associative array, you can think of the for..in construct to be iterating through all the “keys” in the array one by one, assigning the key’s name to the variable “key”.

Epilogue

I’ve not gone into much details about the Javascript object notation and neither have I dealt too extensively with the associative array concept, but nevertheless I’ve tried to present the concept of associative arrays in as simple a manner possible. I hope the post will help the newcomers to Javascript and experienced programmers alike.

Thank you for reading. :)

Like this post?

x86 Emulator in Java – Cool! June 26, 2008

Posted by xk0der in : Programming , add a comment

Before I write anything about it, here’s the link to the JPC project

http://www-jpc.physics.ox.ac.uk/index.html

It’s a nice feat these guys have achieved by creating an emulator for Intel x86 architecture in Java. I’m not sure how useful this project would be, but it’s a cool peice of software :) . Hats off to the JPC developers.

Some of the demos with DOS games are nice. Got nostalgic playing the old DOS games; Prince, mario, keen, invaders :)
What more, it can run Linux! .. I’m yet to try their Linux demo though, but the DOS one’s were very fast.

And to top it all, they have release the source code, I’ve just downloaded it and ‘am going to have a look at how they have done it. Meanwhile you can visit their demo pages and enjoy some of the good ol’ DOS games.

Like this post?

Git and Trac – A Love Story. June 26, 2008

Posted by xk0der in : Programming , add a comment

This is a post I’ve written at my Company blog. Here’s a small excerpt and the link to the complete post.

Git and Trac – A Love Story

Git and Trac, both got married very recently (at our setup ) ), and the newlywed couple are quite a charm to work with. It all started with the search for a version control tool which could be used now, with just four of us using it, and that would scale beautifully to hundreds and thousands of users. The version control system would be the groom. Meanwhile we were also in search for a perfect partner (the bride), an issue tracking system, that would gel with our choice of version control seamlessly.

To begin with, we all (at Hidden Reflex) were leaning towards a central repository setup ….. more


Like this post?

Overcoming the fear of Python January 16, 2008

Posted by xk0der in : Programming , add a comment

As all C, C++ and Perl devotees, I too looked upon Python with apprehension. Python? What? I asked. The very idea of white-spaces being part of syntax gave me jitters and I convulsed with disgust. Why Python? Perl can do it. OOP? Perl has it … errm .. Kind of.

After reading numerous articles about python by putting the search terms “I hate pyton“, “python will die” and the like, I started getting a grasp of differences and likeness between python and other languages. One thing more I learned was, never be judgmental about a programming language if you have not used it. So after traversing threads at various forums related to “Love Python” and “Hate Python” I started understanding the various mumbo-jubo related to python. And then the thought occured to me, let’s give it a try. I downloaded python on my Windows XP machine at home and Vim for windows. Then jumped right into coding a problem that was asked to me in an interview. It was a design problem actually, but nevertheless a design can be implemented :) .

Within minutes I was automatically indenting code as I used to with C,C++ or Perl (or other free form languages I had used, for that matter). So the frown over mandatory white-spaces soon turned into a smile. And by the time I could realize I was finished creating a four road junction traffic simulator. I did searched the net for some reference, but the best thing was I just looked at the example and understood what it was, no reading what the code does or will do. Other syntax came so naturally that I didn’t even had to look online. That is I guess the beauty of Python.

In around half an hour or so, I had a complete running program in Python, using classes, random number, lists and other subtle features. The code was so readable, I thought, do I need some of those comments I’ve put in there? Some were required. But most of the time the code was itself very much self-explanatory.

Later I booted my laptop (it has FC7 installed) and copied the code on my Lappy. Python comes bundled with FC7 so I straight-away executed the code. Wow! … Its faster than windows .. Ha ha … yes this is what I noticed. Then I tinkered a bit more with the code, optimizing some things and learning new stuff in the process. Overall I enjoyed my first step into Python, very much.

I’m not going to shun C,C++ or Perl for that matter. For quick one-liners Perl is still the best. My domain is embedded systems and Linux Kernel programming so C and C++ are essential. But this discovery about Python has really give me an option. Option to create large and manageable programs in less time. They say in the python community, You spend more time solving the problem as you code and less time worrying about the language and its syntax. I Agree!

Like this post?

VMWare – Simple communication between Host and Guest January 2, 2008

Posted by xk0der in : Programming , 2comments

Recently I’ve been working on a project which required VMWare as one of the component. As part of this project some sort of communication, albeit simple in nature,was required between the host and the guest machine.

Here are two simple commands, one to be run on host and one on the guest, using which you can pass simple information between the host and the guest virtual machine.

(single line command may wrap to next line … please note this)

Host machine commands:

Syntax:
$ vmware-cmd <path-to-machine.vmx> getguestinfo <variable>
$ vmware-cmd <path-to-machine.vmx> setguestinfo <variable> <value>

Example:
$ vmware-cmd /vmware-stuff/Ubuntu.vmx setguestinfo some_counter 12
$ vmware-cmd /vmware-stuff/Ubuntu.vmx getguestinfo some_counter

The first command, above, will set variable ’some_counter’ to value ‘12′ and the second one will fetch the value of ’some_counter’ on/from the virtual machine specified by /vmware-stuff/Ubuntu.vmx

VMWare typically identifies different virtual machines by their configuration files (.vmx)

To set/get info from other machine use the configuration file path of that virtual machine.

The above variables may be accessed on the guest (Virtual machine), in our case Ubuntu.vmx using the commands shown below (see example).

And yes! make sure the Virtual machine is powered on :)
Guest machine commands:

Syntax:
$ vmware-guestd --cmd 'info-set guestinfo.<variable> <value>'
$ vmware-guestd --cmd 'info-get guestinfo.<variable>'

Example:
$ vmware-guestd --cmd 'info-set guestinfo.some_counter 35'
$ vmware-guestd --cmd 'info-get guestinfo.some_counter'

Variables set in Virtual Machine (Guest) may be accessed on Host and vice-versa.

I tested this on VMWare-Server as it is free :) … hopefully and very likely the same is applicable for VMWare-Workstation.

For more hardcore scripting, you may Use Perl-SDK provided by VMWare (On windows you may use COM-SDK).

Please leave comments if you found this info helpful (or even otherwise).

– xk0der

Like this post?

xstress – xk0derz SMTP Stress Testing Tool November 15, 2007

Posted by xk0der in : Programming , add a comment

xstress is a tool developed by me, that allows users to stress test (their) SMTP Mail servers. The tool is pretty straight forward (and very simple too). It creates multiple connections to the mail server and pumps e-mail traffic on those connection. That’s it.

The good thing is that you can configure lots of parameter to simulate different kind of traffic, like virus traffic and spam traffic for instance.

You may use the links below to get sample (un-harmful) virus file and spam file respectively.

http://en.wikipedia.org/wiki/EICAR_test_file
http://en.wikipedia.org/wiki/GTUBE

The tool contains a README file explaining how to build and run it.

Complete source is available at the following link: http://sourceforge.net/projects/xstress

xstress Home Page : http://xstress.sourceforge.net

Hope this tool is useful to some ( or all ;) )

Like this post?

Good Design or Smart Engineering? May 30, 2007

Posted by xk0der in : In My Opinion, Programming, Random Musings , add a comment

This is one question that haunts (new) software engineers day after day.

We learned from the days of BASIC to Java and .NET that goto is an incarnation of devil itself, but we find goto in code written by the so called ‘elite’ programmers. What does this mean? Was all that computer science we learned a crap, of no use?

Well the answer is a surprising “yes”! Well a complete yes will be a bit too overboard ;) , but nevertheless, it is true to a large extent. From the little experience I’ve had as an software engineer and from what I’ve learned from the experience of the so called ‘elite’ programmers, Good design may not always be smart engineering.

What does this mean? Simply put, when writing code that will be used outside of the lab, in the real world, you should use the best possible solution. The best possible here refers to the solution which is faster, uses least number of resources and possibly adheres to other criteria that make your final code perform slick and cool stuff efficiently.

The above does not imply that you start writing obfuscated code! No, not at all. Read the above para again, the essence of engineering is producing efficient solutions not which are hard for other to understand, though this may result due to the efficient solution derived, but that is not the goal here. Science, or more specifically (in our case) computer science proposes ideal designs and assumes ideal conditions for those designs. In reality there is no ideal computer, no ideal processor and no ideal language and rarely do you get ideal conditions :)

So for the real world, when designing a solution, we need to take many factors into consideration. So a smart engineer will not be swayed away into the idealistic world trying to deliver an ideal solution. In the real world there are no thumb rules that one should (or would) follow blindly! These so called “thumb rules” are suggestion which may or may not apply to your solution.

Time is one of the major factors affecting the design of a solution. For companies to succeeded in todays cut-throat competition, it is not just the delivery of product that is important but it is the timely delivery that takes precedence. You would not like to fall behind your competitors, would you? So a solution that can be implemented in least possible time is at times the best, no matter how many rules of good programming design it may be breaking.

Engineers are not there to prove any scientific law or theorem, they are there to get things done, the most effective way!

Like this post?

Current URL in FireFox November 30, 2006

Posted by xk0der in : Programming , 9comments

I required this while creating an extension for Firefox that bookmarked the current URL at some site.

After some hacking I found that the Address bar object that displays the current tab’s URL has the id set to ‘urlbar’

Following simple Javascript code accomplishes the task


var obj = document.getElementById("urlbar");

returns the reference of the address bar. Now you may use obj.value to get the URL text in the address bar.

There is a function implemented by FireFox named handleURLBarCommand(); that opens the current URL in the address bar in the current tab.

So the following code will open http://ensparc.com in the current tab.


var ub = getElementById("urlbar");
ub.value = "http://ensparc.com";
handleURLBarCommand();

Using handleURLBarCommand() function may not be the standard function to open URLs but Mozilla developer probably won’t rename it to anything else in the near future.

if you want to safeguard yourself from probable future modifications use the following method


var myHandleURL = handleURLBarCommand
// Now use myhandleURL wherever you
// were to use handleURLBarCommand
myHandleURL();

If they change the name, all you have to change is the first line, that’s it!

Hope this was helpful !

Like this post?