Installing Bundler for Ruby in Ubuntu 10.04

When attempting to install Bundler for Ruby on Ubuntu 10.04, I got the following error:

shell> sudo gem install bundler
ERROR: Error installing bundler:
bundler requires RubyGems version >= 1.3.6

Running sudo gem -v I saw that I had 1.3.5. To get around this, simply install the available updater gem, then run it:

shell> sudo gem install rubygems-update
shell> sudo /var/lib/gems/1.8/bin/update_rubygems

Now running gem -v I see that I have 1.8.15 and I am able to install bundler:

shell> gem install bundler
Fetching: bundler-1.0.21.gem (100%)
Successfully installed bundler-1.0.21
1 gem installed
Installing ri documentation for bundler-1.0.21...
Installing RDoc documentation for bundler-1.0.21...

eAccelerator and open_basedir: open_basedir restriction in effect. File() is not within the allowed path(s):

After installing eAccelerator on a CentOS 5.5 server running PHP 5.2.10, a bunch of websites began failing with open_basedir errors like so:

[Fri Jul 16 17:53:50 2010] [error] [client XX.XX.XXX.XXX] PHP Warning: require() [function.require]: open_basedir restriction in effect. File() is not within the allowed path(s): (/home/username/) in /home/username/public_html/wp-settings.php on line 19, referer:

After doing some research it turns out that a default option that is compiled into eAccelerator is incompatible with open_basedir. The fix is easy enough, simply re-compile with the –without-eaccelerator-use-inode option like so:

make clean
./configure --without-eaccelerator-use-inode
make install

After re-compiling and installing, make sure you clear out the existing eAccelerator files before restarting Apache:

rm -rf /var/cache/eaccelerator/*
apachectl restart

eAccelerator states that the next version will have this compile option set by default.


Dojo: How to get the ID of an element.

To get the ID of an element using Dojo Framework, you need to use the dojo.attr function.

Given the following HTML:

<img src="/path/to/imageA.jpg" id="myImage1" />
<img src="/path/to/imageB.jpg" id="myImage2" />
<img src="/path/to/imageC.jpg" id="myImage3" />

You can get the IDs of each image in Dojo like so:

dojo.query("img").forEach(function(currentNode) {
    var theElementId = dojo.attr(currentNode, "id");
    console.log("id: ", theElementId); // debug

If you have debugging on and something like Firebug, the console output would be like so:

id: myImage1
id: myImage2
id: myImage3

CSS: Removing extra space underneath an image.

If you’ve ever tried to wrap an image in a div, you’ve surely came across the layout issue where an extra couple pixels of blank space are inserted underneath the image. Trying to get rid of this extra space has caused me to pull my hair out many times, but the fix is rather easy. All it takes is a basic understanding of the type of element that images are, and how they interact with the layout around them. First, some sample code:

<div style="border: 1px solid #000;">
    <img src="someimage.jpg" width="270" height="184" alt="yo" />

This will result in something like this:


Notice the 3 pixels of whitespace underneath the image. The reason this happens is because images are by default inline elements. Inline elements of course do not force new lines and act like text flowing along a line. The most well-known inline element is of course plain text — such as this very paragraph that you are reading now. The fonts that make up text have attributes named descenders, which are basically the part of a font that extends below the baseline on characters such as y, g, and j. Even though images aren’t like fonts and don’t have descenders, when your browser is rendering an image it treats it as an inline element and adds some space under the baseline to compensate for descenders. The easiest way to get rid of the space underneath an image is to convert it to a block element so that the browser doesn’t add extra room for descenders like so:

<div style="border: 1px solid #000;">
    <img src="someimage.jpg" width="270" height="184" alt="yo" style="display: block;" />

If for some reason you’re unable to convert your image to block mode, another way to fix it is to hard-code the height of the wrapper div to match the height of the image like so:

<div style="border: 1px solid #000; height: 184px;">
    <img src="someimage.jpg" width="270" height="184" alt="yo" />

Either of these methods will tightly and correctly wrap your image without the descender space below it like so:


Thickbox 3.1 with jQuery 1.3 – Stuck on loading image.

Thickbox hasn’t been updated in a while, and it is now incompatible with recent versions of jQuery (1.3+). What happens is that when you click the thickboxed element, the screen goes gray and the the loading “barber pole” image loads as expected, but then nothing happens… it just hangs on the loading image. The reason why is because Thickbox uses ‘@’ in jQuery, which is now deprecated.

To fix, simply open up the un-compressed thickbox.js file and go to line 79 and change the following:

TB_TempArray = $("a[@rel="+imageGroup+"]").get();

… into …

TB_TempArray = $("a[rel="+imageGroup+"]").get();

Once you make that change, Thickbox should work as expected!


CSS: How to pin an image to the bottom of a DIV

If you’d like to pin an image to the bottom of a DIV, it is a bit tricky. There is an relatively un-known property of an absolutely positioned element — if you wrap it in a relatively positioned element, the absolute positioning of the wrapped element will be positioned relative to the wrapper rather than absolutely in the browser window. Below is an example of how to pin an image (or any other element) to the bottom of a DIV. Note that the height on the imageWrapper is only there to illustrate that the image will attach to the bottom of the taller wrapper and is not required.

<div id="imageWrapper">
    <img src="image.jpg" width="100" height="100" id="bottomImage" alt="Some Image" />

#imageWrapper { position: relative; height: 500px; } /* height is for display purposes only */
#bottomImage { position: absolute; bottom: 0; }

PHP: How to capture output of echo into a local variable.

I’ve been customizing a WordPress install and have been needing to capture the output of the bloginfo() function, which simply echo’s a string. I wanted to capture the echo into a variable without actually echo’ing the string. You can do so by leveraging PHP’s output buffering functions. Here’s how you do it:

echo 'Hello World';
$myStr = ob_get_contents();

$myStr will now contain ‘Hello World‘ without actually outputting it to the screen.