Tinkering With Ubuntu

The other day I came across an old iBook laptop from 2004 in a box in my office. I remembered it was very sluggish last time I used it, and booting it up confirmed my recollections. So I started thinking how I could repurpose this old piece of hardware. I wanted to do something with Linux because leaving OS X 10.5 on that slow machine was not going to be at all beneficial.

Media server?

My initial thought was a dedicated media server. I’ve been running Plex on my jailbroken AppleTV for a while now (previously running XBMC). It’s a fantastic solution for streaming all types of video files without the need to convert them for iTunes compatibility. My current Plex Media Server is running on a laptop that often leaves the house, which makes it tough to watch anything when my wife takes it to a coffee shop to do some writing.

But it turns out Plex Media Server is not compatible with PowerPC chipsets, so scratch that.

Why not a web server?

After some quick searching I found that it should be relatively easy to set up a LAMP server. I headed over to Ubuntu and downloaded, burned a disc of Ubuntu server. I figured I don’t necessarily need the desktop version as that would unnecessarily use more hardware resources.

So I’ve got all the parts up and running for my very own web server, complete with Apache, MySQL, and PHP. The next step is to enter the world of DNS management and get the server accessible outside of my home network. If all goes well maybe I can cut out my monthly web hosting costs since I rarely use it.

It’s been fun so far playing around with a no-GUI version of Linux. I’m trolling Craigslist for old, unwanted windows machines I can repurpose for that dedicated media server. Let me know if you have anything I could use.

Infinite background-image animation loop

After I redesigned the “How Does Akismet Work” page, I realized the spam sorter graphic was just itching to be animated. Converting the main machine box into a gif with some flashing lights was easy enough. The conveyor belt is what gave me some trouble. I’m posting my solution here because the bug I came across was something so simple to fix and I just didn’t see it.

Spam Sorting Machine

This should be easy

The effect was to have the comment bubbles move left to right as if they’re going through the machine. Since this entire graphic is composed of empty divs with background images in the HTML (this was done in order to make the conveyor belt repeatable and expand to the edge of the browser regardless of size), making them move was a simple matter of changing the background-position.

Easy, I’ll just use a simple .animate() on the comment bubbles.

Perfect! Now to do some cross-browser testing.

Uh oh, Firefox

Next step was to jump over to Firefox to make sure it worked before committing the changes. Here’s where I ran into the problem, it didn’t work in Firefox. I racked my brain and did some searching to figure out why it would work perfectly in Chrome but not in Firefox.

It turns out (and I think I knew this already at some point) Firefox doesn’t support background-position-x and background-position-y. So I was trying to animate a property that couldn’t be animated.

My Solution

The solution was simple. Just remove -x from the background-position property and viola. My final code:

Why not use CSS transitions?

I was originally going to go the route of using CSS transitions, but I wanted more browser support, particularly IE9. If you want to use CSS transitions instead of the jQuery .animate() function here’s what I was using.

Using CSS is the only way I found to animate on both the x and y axis. But I couldn’t figure out how to keep it in a continuous loop, for example continuously moving an image diagonal. If you know of a way to do that, whether it’s via CSS or Javascript, feel free to comment below or get in touch [http://twitter.com/danhauk](on Twitter).

Union Station Grand Hall

image

We visited the gorgeous Union Station in Kansas City on a walking food/history tour. This 850,000 square foot building, with original architectural details, is celebrating its 100th anniversary this year. The Grand Hall is stunning with 95-foot high ceilings, three 3500-pound chandeliers, and a 6-foot wide clock hanging in the archway.

It also has a rich and interesting history. The notorious Charles Arthur “Pretty Boy” Floyd was accused of taking part in the Kansas City Massacre, in which FBI agents were killed by outlaws attempting to free their friend from federal custody.

If you ever find yourself in Kansas City, you should definitely check it out. It’s a beautiful building and I’m glad the governments of both Kansas and Missouri saved it from demolition.

Akismet Goodies

Photo credit: @pollyplummer on Instagram says "Awww, @akismet swag is unbearably cute."
Photo credit: @pollyplummer on Instagram says “Awww, @akismet swag is unbearably cute.”

For a while now, my colleague Nick Hamze and I have been in cohorts developing ideas for Akismet swag (aka promotional items). Mostly stickers on our own dime and one-off things he makes in his home created with my designs. All for fun.

About two months ago Nick came to me excitedly saying we were given the green light to make a bunch of goodies to send to Akismet beta testers as a way to thank them. Huzzah! So we spent the next month working together to come up with cool designs. Here’s what we had made:

It was a ton of fun and I can see why Nick loves making things like this in his spare time. And it’s really exciting seeing people enjoying the cool stuff they’re getting.