Jan 22, 2007  -  Comments

Shawn recently turned me onto a really cool site: Code Golf. Every week (or so) they post a coding challenge. The challenges themselves aren't overly difficult (well, most aren't). The real challenge is to complete the challenge with as little code as possible. . . literally. Your code submissions are first evaluated to determine if they work like they should, then they count how many bytes your program takes up. The shortest program for each accepted language (Perl, PHP, Python, and Ruby) gets 10,000 points, with each longer program getting points based on their size relative to the winning submission.

I've only been able to complete two challenges so far. Both have fallen around the middle of the group with regards to size. I'm not sure I'll ever know the shortcuts to get my 228 byte program down to 102 bytes! It is a great excuse for exercising your brain, though.

UPDATE: I've started posting my submissions to the challenges that I've been able to complete. Just look for posts tagged with code golf.

Tagged: rubycode golf

Code Golf: 99 Bottles of Beer

Jan 12, 2007  -  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',''
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 golfruby

Ruby compressor for JavaScript and CSS files

Dec 11, 2006  -  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: rubyjavascriptscriptcss

Using a background image on a table row

Nov 26, 2006  -  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: cssxhtml