Easy Zebra Striping with Prototype

While reviewing some of the JQuery tutorials, I was impressed with the ease of setting up a table with alternating row colors.

This got me thinking that it should be a relatively easy thing to achieve using the Prototype library as well. In this edition, I will give quick example of doing just that.

We’ll start by using the element selector utility method ($$). This will return a list of the odd numbered rows in our table. We then add the oddRow classname to each of these matched table rows.

1
2
3
4
5
6
7
8
9
10
function stripe(e) {
  var evens = $$('table.stripe tr:nth-child(odd)');
    if(evens) {
      evens.each(function(tr) {
        tr.addClassName('oddRow');
      });
    }
}
 
Event.observe(window, 'load', stripe);

The next step is to assign the stripe class to our table. Any table with this class will pick up the new behavior.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table class="stripe" border="0">
<thead>
  <tr>
    <th>Lorem</th>
    <th>Ipsum</th>
    <th>Dolor</th>
    <th>Sit</th>
    <th>Amet</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
    <td>Dolor</td>
    <td>Sit</td>
    <td>Amet</td>
  </tr>
...

Last step, we need to specify the CSS to change the background color. I also threw in a directive to collapse the borders.

1
2
3
4
5
6
table.stripe tbody tr.oddRow {
	background-color: #eee;
}
table.stripe {
	border-collapse: collapse;
}

Here it is in action. Though it’s a bit crude it illustrates that the rows are highlighted as intended.

Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet

As always improvements, tweaks & suggestions are welcome.

CVS Shortcuts in Vim

Vim is an incredibly flexible text editor. I continue to be surprised by the number of strange things it’s capable of doing. For example, there is a crude Tetris clone available for Vim.

A bit more useful, though, is the cvsmenu script for Vim. This is a fairly polished plug-in that will allow you to do all of the basic CVS tasks from inside your text editor. The supported CVS commands are: add, diff, commit, update, status, shortstatus, localstatus, and revertchanges.

Since the plug-in is poorly documented, I thought that I would take this opportunity to explain how to use it.

Installation

In Ubuntu, this is pretty simple.

% sudo aptitude install vim-scripts

% vim-addons install cvsmenu

This will install the package and enable the plugin for your user.

Usage

I will assume that you already have a versioned source tree checked out on your system. Start by opening a file in this tree. You can open a diff view by typing “,cd”. Note: that’s comma, C, D.

The local revision is shown on the right, the remote revision is on the left. This is a bit backwards from the Eclipse and Netbeans way of doing things. Typing CTRL+W+W will move your cursor between the two revisions. I haven’t found an easy way to move a change to the right, but I would be interested in reader comments.

Here is an index of the commands. They may be documentation somewhere but I was only able to find them by looking at the plug-in source code.

  • ,ca - Add
  • ,cd - Diff
  • ,ci - Commit
  • ,cu - Update
  • ,cs - Status
  • ,ch - Short Status
  • ,cc - Local Status
  • ,cv - Revert Local Changes. The odd thing about this is that it only updates the file on disk. It doesn’t actually revert the changes in the open editor.

Modern IDEs do ease the pain of performing mundane versioning tasks such as merging. But, this is a nice alternative to those heavy-weight tools.

socialthing! and Prism on Ubuntu

A recent article on the socialthing! blog made me curious about setting up a site specific browser in Ubuntu.

This is a pretty simple thing to accomplish and it beats the heck out of the currently available Ubuntu twitter clients.

Start by installing the prism package.

компютриsudo aptitude install prism

You can then setup a new application by starting prism either from the command line or from the applications menu. Setup is pretty self-explanitory but here is a screenshot for good measure.

If your looking for a good socialthing! icon, you can find one here. Then launch your new app and voila!

You might also checkout prism-facebook, prism-google-mail, prism-google-reader, and prism-twitter.