Archive for September, 2008
GIT - version control system
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 -lAssuming 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 -aAnd 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
* masterIf 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:
Tabbed interface using a single image
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
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:
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.
