Code Golf: 99 Bottles of Beer

0 comments

Here is my submission for the 99 Bottles of Beer challenge. Code size: 242 bytes.

a=' bottles of beer'
b=' on the wall'
d=a.tr 's',''
99.downto(1){|x|e,f=x.to_s,x<2?d:a
puts e+f+b+', '+e+f+'.'
puts 'Take one down and pass it around, '+(x-1).to_s+(x<3?d:f)+b+".\n\n"if x>1}
puts "Go to the store and buy some more, 99#{a+b}."

Tagged: code golf, ruby

Ruby compressor for JavaScript and CSS files

0 comments

On Friday, Adam and I were talking about the different JavaScript libraries that are available and how bloated they are. They can easily double the page weight of your site. But, if you want to use the pre-canned goodness of Prototype or Scriptaculous, then that's the price you pay. We were trying to find ways to decrease the amount of files a user downloads when they visit our company Web site. One idea was to compress the CSS file and all of the large JavaScript files that we use. Well, I found a cool online service to compress and combine JavaScript files, but there were no readily available sources for shrinking any other kind of file that I could easily find. So, Adam told me to use sed via the command line and use the power of regular expressions to strip line breaks, tabs, and spaces out of the given file. Well, I don't know anything about regular expressions, and Adam couldn't recall the exact syntax off the top of his head. So, he retired to his corner and whipped up a nice little Ruby program to do it for us.

Enter the Shrinker!

You can download the Ruby file below. If you're on a Mac, just copy it to /usr/local/bin then CHMOD 777 it. After that, you can simply run sudo shrinker path/to/file and it will spit out a new file with the extension .shrunk that you can now name anything you want. Windows users can dump the file anywhere they want and then run, from the command line: ruby path/to/shrinker.rb path/to/file to get the same thing.

File: shrinker.rb (UPDATE: This file is no longer available, sorry.)

Tagged: ruby, javascript, script, css

Using a background image on a table row

3 comments

How many times have you had the need to apply a background image to a table row? Chances are, not very often. Before a week or two ago, I'd never even thought about it. I was living in blissful ignorance of the problems that can occur when trying to achieve this. But, of course, things don't go perfectly forever. Recently, Buck handed me a design for a client that incorporated complicated styling for a table that presented information. After the requisite belly-aching, I did what was asked of me. Very simple CSS:

tr.bar { background: url(/images/tr_background.gif) no-repeat 0 0; }

As you'd probably guess, it works perfectly in Firefox, but not Internet Explorer. But surprisingly, it doesn't work in Safari either. So, there must be more to this than just IE and their non-compliance. Having moved on to another project, I didn't have time to research the bug or find a solution. So, I handed it off to Colin, who, after a little experimentation, was able to find an excellent workaround.

The problem with IE and Safari is that they don't allow a background image to be applied to a <tr>. What do they do when you try this? The <td>'s inherit the background. This might not be a huge problem normally, but the reason the <tr> needed the background to begin with is because it had rounded corners on the top-right and top-left. So with the bug, each <td> had a rounded corner on the top-left, which looked a little funny.

Colin found a fix for this, which entailed making a class for the first and last <td>'s and having a separate image for them than the center <td>'s. This would work, but why not use the same image? Colin used the idea of having a class for the first and last <td>, but instead of making new images, he just fiddled with the background-position.

Here's what he came up with:

td.first { background: url(/images/tr_background.gif) no-repeat 0 0; }
td { background: url(/images/tr_background.gif) no-repeat 50% 0; }
td.last { background: url(/images/tr_background.gif) no-repeat 100% 0; }

This way, we use the same image. The first <td> starts the image in the top-right, showing the rounded corner, the middle <td>'s center the image, so you don't see either corner, and the last <td> starts the image in the top-left so you can again see the intended rounded corner. Perfect.

Tagged: css, xhtml

Multiple CSS classes on a single element

0 comments

Do you worry about repeating styles in your CSS? If a lot of your CSS classes use a common style like text-align: center; or color: #CCC:, you can actually create a single class for each of these styles and save a ton (well, not really, maybe one or two KB) of bandwidth on page load. A lot of people don't know about assigning multiple CSS classes to a single element.

Let's say you have a <p> tag that you want to add specific styles such as margin and padding, plus some pretty common(throughout your Web site) styles like text-align: center; and color: #666;. Instead of writing each of these styles for every element that they appear on, you can write a single class for each style, or group of styles that usually appear together, and just add it to the class application on the desired element.

Your stylesheet might look like this:

.specific_style {
  margin: 5px 10px;
  padding: 2px;
}

.center_text { text-align: center; }

.dark_gray { color: #666; }

And then you can add multiple classes to any element by separating them with a space, like so:

<p class="specific_style center_text dark_gray">Lorem ipsum dolor sit amet.</p>

This will apply the specific_style class as well as centering the text and coloring it dark gray. This is a wonderful way to keep your CSS DRY. Be careful though. Don't overuse this method or your elements will have classes a mile long. Very handy when used properly!

Tagged: css, xhtml

Lost Theory

0 comments

This theory is re-posted from my company blog (HINT: check out our website homepage on Wednesdays).

There are a million hypotheses out on message boards and fan sites trying to guess the overarching story behind Lost. They range from theories about the castaways having gone back in time to theories about them being part of a grand science experiment. Based on information that came to light this summer during the off-season, I've developed my own theory about what's going on in the Lost universe.

The numbers (4 8 15 16 23 42) have always been a hot topic among Lost aficionados. It was revealed over the summer that these numbers are, in fact, a complex equation developed by an Italian mathematician named Valenzetti. It determines the amount of time before humanity exterminates itself, either by warfare, nuclear holocaust, or pandemic disease. My theory centers around this equation.

I think that the DHARMA initiative (or whatever is left of it) came into possession the information that the person (or persons) responsible for the destruction of the human race would be on Oceanic flight 815. They somehow (I told you this was a theory) caused the flight to pass over their island, made it crash, and they are going through the remaining passengers one by one to determine who the person is.

Things that support my theory:

1. In episode 1 of season 3, the DHARMA people didn't seem surprised at all to see a plane crash into their island. It appeared like they were expecting it. Ben (Henry Gale) sent Ethan and Goodwin out to pose as survivors and to bring back lists of the remaining passengers.
2. Walt, who had been in their custody for several weeks, was simply released at the end of season 2. I think they determined that he wasn't responsible, so they let him go.
3. The psychic told Claire that her child would be responsible for something terrible if he was raised by anyone other than her.
4. Ben (Henry Gale) told Kate in episode 1 of season 3 that the next few weeks would be very uncomfortable. (interrogation?)
5. Jack seems to be getting psychoanalyzed/interrogated by Juliette.

Tagged: lost