CSS Two Column Layout (via Bootstrap)

The other week I was worrying about the best way to setup two vertical columns using CSS. Most of the resources online are outdated and refer to IE5.5 on Mac and other such antiquities. I turned to twitter, and Chad Kittel suggested just do what Bootstrap does. What Would Bootstrap Do is the most recent WWxD addition to my vocabulary.

So I went digging and here is the results.
Float both columns and use :before and :after to contain things.

The default two columns layout in Bootstrap floats both columns to the left. There is no reason you couldn't change it, but it makes the most sense to keep your code readable and flexible. Adding more columns is simple and it flows the way you'd read.

The largest challenge in the two column layout is keeping things on top and on bottom where they belong. The old stand by is display:none to contain columns but you can hide things that you'd actually want to see. It isn't something I've run into very often, but on occasion I have. My biggest problem with display:none is that is has always felt like a hack and the problem with simple hacks is designers tend to abuse them (they end up everywhere).

All the common browsers support the :before and :after pseudo classes but unfortunately IE7, which enough of our customers still use, doesn't. Fortunately, that is easy to work around without a technical hack.

Here is my class formatted for LESS.

.contain {
    &:before, &:after {
        content: "";
        display: table;
        line-height: 0;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

The work was already done in Bootstrap, but I found a better explanation of the basic ideas from this clearfix page. Basically, if you wanted bare-bones support the single line of :after is all you need. The :before and :after table stuff helps to properly use margin and padding. The zoom puts the block into a special mode on IE7 to contain your floats.

HP ScanJet 3670 with Snow Leopard

I have an iMac running Snow Leopard 10.6.8 and I own a HP ScanJet 3670 Scanner.
HP gave up attempting to support this scanner and the accompanying software years ago, but some people have figured out how to give it life again.

You computer is going to freak out if you try to install the software for the HP ScanJet 3670, but everything goes great if you install the same software but tell the installer you actually want to install it for the ScanJet 3690.  Here is how you go about it.

1.) Download an old scanner multi installer from HP's FTP site:
ftp://ftp.hp.com/pub/softlib/software8/COL16498/sj-43494-2/COL16498.dmg

2.) Install it.  It is old junky software so be aware of a few things.  After you put in your administrator password it'll act like it has stalled for a couple minutes (just wait it out).  You'll select ScanJet 3690 after that.  The software will also forcibly quit any applications you have open so make sure you don't have anything unsaved.  If you are viewing this website it'll close your browser.  After the installation is complete it will force you to restart your computer.

3.) Upon restart you'll notice two icons in your dock.  If you are like me you don't want them there, so trash them.  HP will do it's damnedest to force them back in your dock so go checkout your Accounts in System Preferences, find Login Items and remove both of the HP Scanning tools.

4.) Scan stuff.  It should work just as well as you could ever hope.

I have read reports that this trick works exactly the same in Snow Leopard as far back as 10.6.2 but your mileage may vary.  Anybody know if the ScanJet 3670 will work in Lion?  Leave a comment about what Mac OS X system you have gotten the scanner to work in.

Build Mencoder from source on Debian Wheezy

su
apt-get install subversion
svn checkout svn://svn.mplayerhq.hu/mplayer/trunk mplayer

apt-get install build-essential
apt-get install git
apt-get build-dep mplayer

[install debian-multimedia]
apt-get install libfaac-dev

cd mplayer
./configure
    [press enter]
make
make install

mencoder -oac help

Setup Apache2 on Debian

Apache2 works great on Debian, but you need permissions set properly...

Add yourself to the www-data group.

sudo usermod -a -G www-data [username]

Change the group that owns /var/www/

sudo chgrp www-data /var/www/

Change the folder permissions

sudo chmod 2775 /var/www/

Debian Sudoer Group

Everybody wants to sudo.
Debian wants you to sudo.
It's just not as easy as it should be.

Here's the simple way to do it.

aptitude install sudo
usermod -G sudo <username>

Slimbox Previous Next Buttons Always On

I wanted Slimboxes Previous and Next Buttons to be always on, always visible, so people who haven't used lightbox style image displays can fully understand how things work.  Nobody had much worthwhile, so I had to dig in.

Turns out it's pretty easy.
Just replace the lbPrevLink and lbNextLink codes with the contents of the :hover and delete the :hover psuedo class.

#lbPrevLink {
left: 0;
background: transparent url(./slimbox/prevlabel.gif) no-repeat 0 15%;
}


#lbNextLink {
right: 0;
background: transparent url(./slimbox/nextlabel.gif) no-repeat 100% 15%;
}

Making a New Remote Branch with Git

This works for me at work.  I can't guarantee it'll work for anybody who doesn't work with me.  We'll be creating a new branch called "new-feature."

First checkout the branch you want to branch from.
$ git checkout master

Make sure ever thing is updated (fix any problems that might happen here).
$ git pull

Check you are in the right branch (note the asterisks).
$ git branch

* master
  staging

Create new local branch
$ git branch new-feature

Checkout the new branch
$ git checkout new-feature

Double check you are in the right branch and the remote branches are good
$ git branch -a

* new-feature

  master

  staging

  origin/HEAD

  origin/master

  origin/staging

Push local branch to create remote branch
$ git push origin new-feature

Triple check your branches to make sure everything shows up as expected.
$ git branch -a

* new-feature

  master

  staging

  origin/HEAD

  origin/master

  origin/new-feature

  origin/staging

Other developers who might also want to use the new branch can now easily do so.  If they do git branch -a the new branch will show up on the list as a remote branch.  If they want to actively work with the branch they need to check it out to their local machine.
$ git checkout -tb new-feature origin/new-feature