The following command will create an image called montage.png that is a collection of all the .png files in the current directory. Images larger than 150px on a side will be resized, but aspect ratio is preserved. The images are separated by a 2px offset.
$ montage *.png -geometry 150x150\>+2+2 montage.png
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 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;
}
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
In an open letter published on the Apple website, the venerable Mr. Jobs has thrown down the gauntlet:
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.
Webfaction has been my hosting provider for a couple years now. I’ve set up prolly six or so clients with them as well. I am absolutely in love with them.
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:
It makes sense, but I don’t ever turn Firebug off so I never would have noticed. That is, until I’m sitting in front of a client trying to show off a new website. That’s when I decide to turn it off. Yep.
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.
The following command will shrink all .jpg’s in the current directory that are larger than 500px and center them on a square 500×500px canvas. Since the aspect ratio of the original images will be preserved and not all of the originals are square, the left over space will be filled with an off-white color. All the modified images will be placed in a directory called ‘resized’. Original filenames will be preserved.
mogrify -path resized -resize 500x500\> -background 'rgb(217,215,202)' -extent 500x500 -gravity center *.jpg
The following command will resize any and all .jpg’s in the current directory that are larger than 500px on either side and put them in a file called ‘resized’. Aspect ratios will be respected, and the same filenames will be used for the modified images.
mogrify -path resized -resize 500>x500\> *.jpg
Yes, you have to use mogrify and not convert because only mogrify excepts the -path command. And I’m pretty sure it’s important to escape the greater than symbols in the -path argument like I did.
So the other day my boss brought over a computer for me to fix. Turns out he never partitioned this new hard drive he had installed. I fixed it but we didn’t have a copy of Windows around, so I went ahead and installed Ubuntu 9.10 on it. After years of subtle lobbying I’m switching the whole office to Ubuntu in a month or so, and thought it would be a good way for everybody to demo the new system. So I replaced the general use computer with this Ubuntu box. I didn’t say a word, just plugged it into the old monitor and keyboard and left it running. All day long I was expecting to hear complaints or confusion, but all I saw was Facebook, email, you know, use. It wasn’t until late in the afternoon when somebody asked “So, where are all my documents?” that I realized that not only was nobody worried about the using Ubuntu, nobody had even noticed.
One caveat: About a year ago I banned the use of Internet Explorer in the office and made it hard to find all our computers. So everybody already knew that the little orange and blue firefox logo means “internet”, as opposed to the little e.
The moral of this story is that the average user does not give a crap about what operating system they use as long as they can do the stuff they want without thinking much.
You can get the beta right now; I’ve played with it and it’s completely sweet. There’s some really bold design choices they’ve made with this version (window controls on the left!?) that I’m excited to explore.
You know, along with Ubuntu, I use Windows XP, Windows Vista, and Mac OSX every day. But if I had a choice, I would use Ubuntu for just about everything. Windows completely sucks and seems to get worse with every version. Vista is just embarrassing. I use OSX for managing my photographs and for entertainment purposes because all the media stuff works flawlessly. But if I’m doing anything important, Ubuntu is my go-to. Its faster, has better workflow, and every open source tool I can think of is a one-click install away. Plus it looks awesome makes me feel hardcore.
Slickr Gallery is a sleek little WordPress plugin for displaying Flickr albums on websites. The themes included in the plugin don’t work with Thematic based themes so I made one that does.
Download slickr_thematic_theme.tar.gz
Just download this file, un-tar it ($ tar -xvzf slickr_thematic_theme.tar.gz) and copy the extracted folder to wordpress/wp-content/plugins/slickr-gallery/themes. Then you can select the Thematic theme from the WordPress admin area under Settings -> Slickr Gallery -> Slickr Gallery Theme.
You’re welcome.