Connecting the dots…

Having used CVS, SVN and GIT, GIT clearly seems like my preferred choice of version control system, esp for my symfony projects, its amazing how fast it is and how easy it is to use for most of the basic operations and even for other slightly complex operations like branching and merging. I have previous covered cvs commands here , here and here so it seemed fair to have the git commands documented as well, its just much easier to have it all in one place as a quick start primer for anyone who is interested in playing around with it.

Download Information available at:
http://git.or.cz/#download

Before you start, set some git variables.

# set your name and email, used for commit messages
$ git config --global user.name ""
$ git config --global user.email ""
 
# enable nice colorful output
$ git config --global color.diff auto
$ git config --global color.status auto
$ git config --global color.branch auto

You can see the other configuration settings using the command:

$ git config -l

Assuming you are in your working directory, initialize the repository using the command:

$ git init

and you should see the following echoed back to the screen:

Initialized empty Git repository in .git/

Now you can add all your current files to the repository using the command:

$ git add .

This is now saved in a temporary staging area which git calls the ‘index’, this can be made permanent by calling the following command:

$ git commit

Now you have a functional repository which you can use to track your changes. The following the basic commands for your usual daily actions.

Adding files to the repository:

$ git add file1 file2 file3

To see the status of the current files, modified or un added files.

$ git status

You can also see the difference in the modified files.

$ git diff --cached

Commit the file automatically (adding new files and then committing them to the index can be done using the following command:

$ git commit -a

And here are the most interesting bits, the ease of branching and merging that might make you fall in love with this.
Creating a new branch:

$ git branch wacky_idea

Listing all the current branches

$ git branch
 
wacky_idea
* master

If you now want to work on the new branch you need to set the mode to the new branch by checking out the branch.

$ git checkout wacky_idea

Modify and commit your files using the standard $git commit -a and then you can merge it back into master by first checking out master and then doing the merge.

$ git checkout master
$ git merge wacky_idea

it will show you the summary in case of no conflicts or give you an opportunity to fix them before doing the merge. You obviously would need to do a git commit -a to add your changes to the index and then if you want to remove the branch run git branch -d wacky_idea

There are loads of other interesting features that I will post back to the blog but its surely an interesting version control system. The reason I like this so much is because I do a lot of my development during travelling and by far this is the only CMS that I am aware of that allows you to work offline and online as well. There are always work around to run your repo locally on cvs but that doesn’t serve the purpose of code centralization.

Some interesting links for further reading:

• http://git.or.cz/
• http://www.kernel.org/pub/software/scm/git/docs/everyday.html
• http://jonas.nitro.dk/git/quick-reference.html
• http://www.kernel.org/pub/software/scm/git/docs/gittutorial.html

I had to recently do a tabbed interface and I looked up for various implementations for tabbed interface mostly including one big image with a space in the middle or two different images one for the left section of the tab and one for the right tab. The solution that I eventually used was implementing it with just one image but it didnt have the white space in it and also was sprited to show both active and inactive tabs.

Advantages:

• Smaller image size
• Since the tabs (active and inactive) are sprited hence just one http call would get the required images
• Add a class “tabs” to any list item and mark anchor with class “active” to show active tab

Preview:

Markup:

1
2
3
4
5
6

<ul id="p-profile-menu" class="tabs">
  <li><a href="/fe_dev.php/user/basicprofile" class=""><span>Basic</span></a></li>
  <li><a class="active" href="/fe_dev.php/user/physicalprofile"><span>Physical Details</span></a></li>
  <li><a href="/fe_dev.php/user/socialprofile"><span>Social Profile</span></a></li>
  <li><a href="/fe_dev.php/user/otherprofile"><span>Other Aspects</span></a></li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.tabs {
  margin-top:5px;
  margin-left:-1px;
  border-bottom:1px solid #46A7D5;
  padding-bottom:5px;
}
  .tabs li {
    display:inline;
    padding:0 1px;
  }
    .tabs li a {
      text-decoration:none;
      padding-bottom:5px;
      padding-top:3px;
      padding-left:10px;
      background:transparent url('/images/details-tabs.png') no-repeat scroll 0 -105px;
      color:#fff;
    }
    .tabs li a span {
      padding-top:3px;
      padding-right:10px;
      padding-bottom:5px;
      margin-left:2px;
      background:transparent url('/images/details-tabs.png') no-repeat scroll 100% -105px;
    }
    .tabs li a.active {
      border-bottom:1px solid #fff;
      color:#000;
      background-position:0 0px;
    }
    .tabs li a.active span {
      background-position:100% 0px;
    }

and the image used was:

Spritied Image for tabs

Disclaimer: I am sure someone somewhere must have done this before, I am not claiming any credit for this, the idea for this post is to document this solution for anyone to use later.