I’ve been wanting to learn how to make icons that jive with the Tango guidelines for a while now. For my first icon I went with a good ‘ol pint of beer. The guidelines are fairly involved but I think I satisfied most of them. A thicker border may be in order but this one turned out pretty well for a first revision.

Download all sizes tangopint1.zip

License: I don’t care, do whatever you want

Last weekend I brewed up a 5 gallon batch of my first belgian style ale. This is an extract recipe with a small amount of specialty grains.

The BJCP describes this style as “A moderate-strength golden ale that has a subtle Belgian complexity, slightly sweet flavor, and dry finish.”

I am eager to see how it turns out.

Ingredients

• 0.74 lbs. Balgian Pale
• 0.10 lbs. Belgian Aromatic
• 3 lbs. Dry Extra Light Extract
  Boiled at 25 min.
• 3 lbs. Muntons Dry Extra Light Extract
  Boiled at 25 min.
• .6 lbs. Candi Sugar Clear
• 1 oz Challenger (Pellets, 6.7%AA)
  Boiled at 60 min.
• .4 oz Amarillo (Pellets, 8%AA)
  Boiled at 15 min.
• .5 oz Fuggle (Pellets, 4.75%AA)
  Boiled at 1 min.

Once again, I forgot to measure the original gravity. The recipe that I started with predicted an OG of 1.066 with an expected alcohol content of 7.3%.

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.

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.

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

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.

As always improvements, tweaks & suggestions are welcome.