This will stack two images to create a CSS sprite. Very handy for flicker-free image rollovers:

$ montage -background transparent -tile 1x2 -geometry +0+2 image1.gif image2.gif result.gif

You could create a taller or wider stack by adjusting the -tile option. For example -tile 2x10 would stack 2 images across and 10 images down. If you don’t have 20 images, Imagemagick will leave empty spaces.

Not sure why I had to set -geometry +0+2. That creates a 2 pixel vertical offset, which was necessary to align to two images. If you leave it at -geometry +0+0 the hover image is slightly off, which makes for a cool “pressed in” effect, but it’s not always what I need.

The CSS

The CSS you would use to make the rollover work would go something like this:


a.rollover {
background: url('Images/result.gif') no-repeat center top;
display: block; /* necessary to set the width and height of a tags */
text-indent: -99999px; /* get the link text out of the way if replaced by an image */
overflow: hidden; /* so you don't get the dotted outline when you click on the link */
width: 100px;
height: 100px;
}

a.rollover:hover {
background: url('Images/result.gif') no-repeat center bottom;
}


Bash bonus!

When I did this, I had a folder of images with the naming scheme menu_img1.gif, menu_img1_on.gif, menu_img2.gif, menu_img2_on.gif.. .etc.. I automated the sprite creation process from the command line like this:


$ array=( img1 img2 img3 )
$ for i in 0 1 2
$ do
$ montage -background transparent -tile 1x2 -geometry +0+2 menu_${array[i]}.gif menu_${array[i]}_on.gif menu_${array[i]}_sprite.gif
$ done

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

Hallelujah! Finally someone with some power standing up for web standards. I suspected that the i-device refusal of Flash was a trojan horse for HTML5 and this confirms it. Adobe has the interweb by the balls and its time to loosen their grip.

There’s a lot of criticism directed at Jobs for calling for openness when his own products are closed. But seriously, who cares about closed devices? Apple made the iPhone and iPad, they can do whatever they want with them. There is competition in those markets, consumers have a choice. But nobody owns the internet and its in everyone’s best interest to keep it that way.

I’ve never had a single problem with them or a second of downtime (that I noticed anyway). Their cPanel interface is great to use and allows me to do pretty much everything I need. You ever have to call your web host to change domain settings or to have them install an app on your server? Then you need a new web host. Oh, and they’re pretty cheap. Like five to ten bucks a month cheap for their shared 1 plan, which is more than enough for me. Not as cheap as GoDaddy maybe, but seriously, GoDaddy? GoDaddy suuuuuuuuuuuucks.

I’ve only had to contact Webfaction twice with questions and the support staff has emailed me back so fast its like I’m their only customer. The other day I was wondering how to set up Apache with some PHP options that weren’t in the default install. I submitted a support ticket at 10:15pm and got a personal reply 12 minutes later. And let me tell you, this was no easy answer. Turns out you can install a custom Apache instance with whatever settings you want as a custom app on their server. Isn’t that just insane?! I’m totally doing it, even though it turns out the project I was doing it for is not happening. But awesome, right?

So here it is again:

Webfaction

Turns out console is undefined when Firebug is off (of freaking course) so Firefox stops parsing the code when it gets to all those console.log()’s and console.assert()’s that I have so liberally sprinkled my code with. To fix this, wrap ‘em in an if statement, but you shouldn’t use log as a function name since its a built-in. I like clog better anyway.


function clog(string) {
if (window.console) {
console.log(string);
}
}

function assert(fact, explanation) {
if (window.console) {
console.assert(fact, explanation);
}
}


Course this means that text substitution in console.log() doesn’t work, i.e.:

console.log('I like %s', 'pie') // prints ‘I like pie’

but

clog('I like %s', 'pie') // prints 'I like %s'

I’ll think about this and get back to ya.

A CD that Lee recorded for local folk/pop hero Nick Jaina was just released to critical acclaim, and we’re trying to drum up some exposure for Lee’s beautiful little basement studio. Go Lee!

Extensions

The Dev and Beta version of Chrome work with extensions (like LastPass, worlds greatest password manager). The dev version has been very stable for me:

http://dev.chromium.org/getting-involved/dev-channel

Developer Tools! Eeeee!

The thing that sealed the deal is the built-in developer tools. Seems they’ve shipped Chrome with a built-in Firebug-like JavaScript debugger and inspector (press ctrl-shift-j). Its not installed automatically on Linux machines, so apt-get it:

sudo apt-get install chromium-browser-inspector

I haven’t used it enough to form an opinion yet, but it looks great. I’m going to finish out the current site I’m developing with Firefox and Firebug, but I’ve got another one in the pipe that is going to be all Chrome.

Fantastic UI

Best user interface of any browser I’ve used.

The teeny tiny branding means I get at least a quarter inch of screen real estate that would normally be full of dialog. Page loading info is shown in a tiny pop-up at the bottom, so I get more space there too. Its overlaid on top of the horizontal scroll bar, taking up no room at all. The combo address/search bar means the horizontal space is more usable too. I can usually see the whole url even when I’m using Chrome in a small window.

I love love love the tabs at the very top. It reinforces the idea that each tab is its own process doing its own thing (dialogs like preferences are also displayed in a tab, just like web pages). Tabs are arguably the most important feature of the browser dialog, they tell you where you are, and I definitely click on them more than anything else. Making them a big target right at the top where they are the most obvious thing in the whole interface is genius.

Way to go Google! Can’t wait for Chrome OS!

Update, 2/25/2010

Well, I tried.  Turns out that the Chrome developer tools has some usability issues that make it very hard to use effectively.  The number one problem is that the font is too small.  I get a headache just glancing at it.  I’m also annoyed by the checkboxes that pop up when you mouse over a css property.  I’m sure that one sounded really great on paper, but in practice its horrible.  The major thing it lacks is the “Larger Command Line” option that Firebug has, which allows you to put multi-line indented code in the console and run it.  It’s really nice and I use it all the time.

I still really like Chrome and I use it more and more (even though it doesn’t work with Netflix) for my non-development browsing pleasure.  Its still a young project and I’m hopeful that Google will improve the developer tools soon.

1. Go to Settings > Miscellaneous in your Wordpress admin area and make sure that ‘Store uploads in this folder’ is set to the default: wp-content/uploads (notice there is no ‘/’ before wp-content/uploads).  Try to upload again and see if it works.
2. If that didn’t work, open up a terminal and navigate to the wp-content directory.  If wp-content does not contain sub-directory called ‘uploads’, create one and then change its permissions to wide open (sudo chmod 777 uploads/). Try to upload the image again.  If this works, navigate to the wp-content/uploads/ directory and check the owner of the image you just uploaded (ls -l). It will probably be something weird you’ve never seen before (mine was ‘www-data’). Navigate up a directory and change the owner of the uploads folder to the one WordPress want to use: sudo chown www-data:www:data. Then revert the permissions back to something a little safer: sudo chmod 755 uploads/ and you’re done.

From the command line, enter:

• $ mkdir ~/public_html
• $ cd /etc/apache2/mods-enabled
• $ sudo ln -s ../mods-available/userdir.conf userdir.conf
• $ sudo ln -s ../mods-available/userdir.load userdir.load
• $ sudo service apache2 restart

I’m going to use an example to explain this. These events are listed in the order that they usually occur, at least when I use Bazaar. If you want to understand this at all, you better read the Bazaar in five minutes tutorial first.

Working Tree

When I start a new project I usually create a folder named after my project, say ‘foo/’, and in folder ‘foo/’ I might put my first file I’ll be working on called, say, ‘bar.py’, and a file to hold some data called ‘data.py’.  So as soon as I initialise Bazaar, ‘bar.py’ and ‘data.py’ will make up my working tree – the files I actually edit.

Branch

The next thing I do is initialise Bazaar by typing the command ‘bzr init’ in the terminal, which creates a hidden folder in the ‘foo/’ directory called ‘.bzr/’. This hidden folder and its contents is a branch – the state of a project including all its history.

A branch usually includes a working tree too, but it doesn’t have to. If you get a branch and it doesn’t have a working tree, you can run ‘bzr update’ to make one.

Repository

Among other things, ‘.bzr/’ contains a folder called ‘repository’. This, not surprisingly, is your repository – the place where all commited changes to your working tree are stored.

There isn’t much to a repository until you run ‘bzr add’, which adds all the files and folders in your project to the branch, and ‘bzr commit’ which records all the changes to your working tree in your repository.

Your repository works like a database. Each file you put under version control gets a unique identifier and each commit is numbered so you can go back to any revision and see what you did. A common thing to do if you have more than one person working on your project is to use the same repository for everyone. The command ‘bzr init-repo’ (as opposed to just plain old ‘bzr init’) creates a shared repository.

Checkout

So I created a folder and put some files in it, then initialised Bazaar which made my project a branch. Then I ran ‘bzr add’ and ‘bzr commit’ to add the files in my working tree and revisions therein to my branch. Now suppose someone else wanted to add code to my project? That is where checkout comes in.

If the hobo living behind the Safeway wants a stand-alone version of my branch that he can stare at or create a competing project that has nothing to do with mine, he can run ‘bzr branch [BRANCH_LOCATION] [TO_LOCATION]‘. This will create a copy of my branch on his computer, but his commits will not effect my branch.

But if Sally Smartypants and I are friends and she wants to contribute to my project, she would run ‘bzr checkout [BRANCH_LOCATION] [TO_LOCATION]‘, which would create a copy of my branch on her computer just like the hobo, with the major difference that Sally and my branches share the same repository. So when Sally runs ‘bzr commit’, the changes that she made would be reflected in the branch I have. I won’t see them right away though. If I want Sally’s changes to show up in my working tree, I have to run ‘bzr update’ to sync my working tree with our shared repository.

But what if a storm hits and Sally’s Internet goes down? No prob, her commits will just go on her local repository (since she has a full branch that works all by itself) until she’s back online and runs ‘bzr merge’ to sync up her local repository with the main branch.

Hope that clears things up. I know I’ve learned a lot.