Hello friends. Here is an overview of how to set up Homebrew on Mac OS X. Homebrew is one of the best things ever. It allows you to easily install many software packages with simple terminal commands.

Homebrew already has a useful installation guide. It will get you up and running, but it’s lacking some important details.

By default, Homebrew uses the directory /usr/local/Cellar to install your packages, and it creates symlinks to the executable files in /usr/local/bin. However, in order to run Homebrew-installed packages with ease, you’ll need to add the latter directory to your $PATH variable. On OS X, this variable is located in the file at /Users/yourname/.bash_profile. (If the file does not exist, create it.) Add the following line to the beginning of the file:

export PATH=/usr/local/bin:$PATH

Now the terminal will look in your Homebrew directory when searching for executables to run, and your life will change for the better. Happy brewing!

Anybody else come across a nasty bug in Chrome when using @font-face with a text shadow? Your text gets all thin and scrawny as soon as you drop the shadow on.

It seems that this only occurs when viewing Google Web Fonts in Google Chrome. And unfortunately, this hasn’t been fixed even in the canary release of Chrome (v16).

However, there is a solution. Some guy has figured out a clean hack to get around the problem. Obviously you’ll want to declare a hex color first for older browsers, then your rgba color. Only new browsers pick up on the second declaration, and the color difference is negligible.


text-shadow: 2px 2px 2px #000;
color: #FFF;
color: rgba(255, 255, 255, 0.99);


I hope this helps mitigate some of the frustration the good CSS developers of the world are experiencing!

UPDATE:
This bug was fixed in Chrome version 18.

I’ve recently begun to favor slightly different ways of layout out a main navigation div in CSS. I had been using padding on my a tags, and padding on a span tag inside them. However, line-height seems to be a viable method of achieving the same effect with less code. It generally seems IE-safe too, although you have to be a bit verbose for the poor thing.

If you do use a span inside your a (for additional background images and such), you’ll need to either re-declare the same line-height on it, or display it as a block-level element, either one of which is easier than trying to divide up your padding correctly around your text. But in some cases, using the block-level option may cause IE’s box model to freak out, rendering your a/li elements block-level as well. If so, float the span. This, however, may hide the background of the span, in which case either height or zoom must be added to the parent a/li tags.

After writing this out, it sure doesn’t look easier, but at least my code is pretty… thanks to Nate Hanna for (non-monetary) tips!