Had pretty interesting two days at the event, must say it was very well organizied and had the best speakers. My summary of the event available here.

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

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.

Disable javascript on your browser and then go to http://www.geni.com/ and hit login, it will not only log you in but also say you have a 20% complete profile. The only saving grace is of-course it says the site requires flash and javascript!

Anyway that’s not the reason why this blog post was written as the post’s title suggests. I wanted to have a drop down for two items item1 and item2 and based on the selection of item1, item2 would change. I needed to have it working n the non javascript environment and also not make use of ajax to populate the second select box.

As always when I am trying to look for interesting solutions before I start thinking I somehow end up on this mans website So chris posted a really interesting solution but since I am using jquery for this project (and that i am fairly new to it) i decided to implement the same in jquery. I am sure it can be written in a better way as other jquery gurus can suggest, feel free to leave a comment.

Markup:

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

    <select name="quicksearch[religion]" id="quicksearch_religion">
              <optgroup label="Hindu(Any Caste)">
                    <option value="Hindu(Any Caste)_1">Adi Dravida</option>
                    <option value="Hindu(Any Caste)_2">Aggarwal</option>
                    <option value="Hindu(Any Caste)_3">Agri</option>
                    <option value="Hindu(Any Caste)_4">Ambalavasi</option>
              </optgroup>
... more markup
              <optgroup label="Jain">
                      <option value="Jain_258">Digamber</option>
                      <option value="Jain_259">Shwetamber</option>
                      <option value="Jain_260">Others</option>
                  </optgroup>
              <optgroup label="Parsi">
                     <option value="Parsi_261">Not Applicable</option>
                 </optgroup>
              <optgroup label="Jewish">
                     <option value="Jewish_262">Not Applicable</option>
              </optgroup>
              <optgroup label="Buddhist">
                                <option value="Buddhist_265">Not Applicable</option>
              </optgroup>
              <optgroup label="Other">
                  <option value="Other_266">Not Applicable</option>
              </optgroup>
          </select>

This select box is inside a form tag ofcourse and each form element is a list item, the last list item being the submit button etc. Someday when i have more time I would make this function more generic or make a plugin out of it. For now just as a note (#frm-quicksearch is the form and #quicksearch_religion is the select box)

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

/**
* jquery to convert the large select into changed selects
* to read from one master select item and make two different selects
*/
$(document).ready(function() {
  $('<li>').insertBefore('#frm-quicksearch > ol li:last').html('<select name="quicksearch_religion" class="religion">');
  $('<li>').insertBefore('#frm-quicksearch > ol li:last').html('<select name="quicksearch" class="cast">');
  $('select.cast').css('display','none');  
 
  // hide the parent select box
  $('#quicksearch_religion').css('display','none');
 
  // popular the religion one
  $("#quicksearch_religion").find("optgroup").each(function() {
    $('select.religion').append('<option>' + this.label +  '</option>');
  });
 
  // attach a handler
  $('select.religion').change(function() {
    // empty all select options
    $('select.cast').empty('option').css('display','block');
    $('#quicksearch_religion > optgroup[@label=' + this.value + ']').find('option').each(function() {
      $('select.cast').append('<option value="' + this.value +  '">' + this.text + '</option>');
    });
  }); 
});

This script has the following differences

• This only works for two level of selects, but not very difficult to add another level or make it generic for that matter
• Unlike the example http://icant.co.uk/sandbox/splitselect.html there is only one select box for the second level, the options are just removed and updated with the new options, not sure how fast it would be for larger list but it worked well for my requirements.
• If you are looking for pre-selected chained result see here or preselected select boxes with unlimited levels see here.

Some other interesting links are:

• http://hudson.gotdns.com/wiki/display/HUDSON/Meet+Hudson
• http://hudson.gotdns.com/wiki/display/HUDSON/Use+Hudson
• http://hudson.gotdns.com/wiki/display/HUDSON/Hudson+Best+Practices

I keep getting confused with terms with CVS esp. when I have to start doing some stuff that I usually don’t have to do on a regular basis. So writing it here so that I can refer to it later.
Trunk: The trunk is the mainline code base. Its similar to a branch with no name, so by default all the commits go to this nameless branch.

Branch: Its an alternate place on the codebase where the commits go other than the trunk. The idea behind is when developers want to work on fixes for a particular release where as other set of developers work on the next release. Then doing a branch is useful. My previous post Branching and Merging Code in CVS has more details on how to use it.

Working Directory: Working directory is the current directory where the code was checked out.

Tag: A tag identifies a set of revisions of files in the repository. There are two kinds of tags: static and branch.

Sticky: The term ’sticky’ in CVS has two somewhat different meanings depending on the context. If you have checked out from a static tag, then those files in your working dir will be ’stuck’ to that tag - and you won’t be able to commit changes to them until you ‘unstick’ them. This is because there may not be a place for that change to go. For example the tag may identify revision 1.5 of a file which already has a revision 1.6. Since there already is a revision 1.6, you can’t make a new revision 1.6 (unless of course you make a branch…)

Branches on the other hand, are implemented in CVS by being ’sticky’ to a branch tag where commits are allowed and go into that branch rather than the Trunk. In this sense a branch tag is also known as a ’sticky tag’. So if you have a branch based at the above file’s 1.5 revision you can now make a commit to that branch. The new file will have revision number similar to 1.5.1 meaning it is the first revision based on revision 1.5. This is a completely different revision of the file from 1.6 as it is on the ‘1.5 branch’ of that file.

Documenting this for now so that I can refer to it later and for anyone else who might find it useful.

DISCLAIMER: I have always found working with CVS very daunting and hence I am always extra careful in running the commands. The following instructions work for me and I cannot guarantee how it will work for you. So execute the commands only if you understand the instructions and are sure what you are doing.

Go to working directory and make sure you have the most recent version of the code:

cvs up -A

Do a cvs stat on any file to ensure that you do have any sticky bits set, from a previous branch etc.

$ cvs stat stuff.xml
============================================================ 
File: project.xml       Status: Up-to-date
Working revision:    1.19
Repository revision: 1.19     /code-monkey/confi/stuff.xml,v
Sticky Tag:          (none)
Sticky Date:         (none)
Sticky Options:      (none)

Ensure that the working and repository directory are the same.

Tag the current set of files as one save point. Which means you can later refer all those various versions of files stringed together for one tag.

$ cvs tag CODEBASE_2008_08_30

Once tagged, you are ready to branch the code based on that tag.

$ cvs tag -r CODEBASE_2008_08_30  -b CODEBASE_BRANCH_2008_08_30

This creates a branch of your code now called CODEBASE_BRANCH_2008_08_30

Now you can switch to the branch code using the following command:

$ cvs up -r CODEBASE_BRANCH_2008_08_30

Now you can confirm as well which branch you are on by using the stat command on the same file.

$ cvs stat stuff.xml
===================================================================
File: project.xml       Status: Up-to-date
Working revision:    1.9
Repository revision: 1.9     /code/stuff.xml,v
Sticky Tag:          CODEBASE_BRANCH_2008_08_30 (branch: 1.9.1)
Sticky Date:         (none)
Sticky Options:      (none)

Working on the branch:
Working isn’t any different from working on the trunck. All the code that you commit while you are on the branch goes straight into the branch.

Merging the branch to the trunk:
The important thing to remember is before merging you need to switch back to trunck.

You can now verify using cvs stat command as explained above.

Doing the actual merge

cvs up -j CODEBASE_BRANCH_2008_08_30

Now examine the output for any conflicts etc and then fixing them. Its worth at this point of time to run the application and check everything is working fine, run your test suites etc. Once confirmed everything is working fine, its time to check stuff back into the cvs.

You can now either do a full commit of your working directory which is not a good idea or identify which files had to be merged and check those only. To get to know the state of the current working directory run the following command:

$ cvs -nq up

and it will show you all the files with their status’. The files starting with M are the once which have been modified and the once with C are conflicts, resolve them as usual and then you can check files marked as M back into cvs with the comment that they have been merged from the branch.