blogging – Liquidninja

Liquidninja Goes Mobile

frostninja-mobile

As I continue to browse the web on my beloved iPhone, I occasionally visit a blog that’s perfectly sized for the device. Basically this saves me a double-tap (which would zoom in on the article text) but anything that makes people think less is just awesome!

I recently decided that I wanted my own blog to have a similar feature: detect mobile browsers and present a different skin or theme to them. Getting this done was slightly trickier than I had expected.

An important note: if you’re using a caching plugin for WordPress you may have problems with serving different flavors of pages depending on the client’s browser. Luckily WP Super Cache, which is updated fairly frequently recently added a “Mobile device support” option for just this purpose.

First I tried the plugin called wp-mobile. This one looks just great on an iPhone. Unfortunately it just wouldn’t work for me. (Yes, even after disabling wp-supercache.) I also wasn’t a big fan of the complexity that the carrington theme comes with (since theme customization was one of my goals).

Next, I tried the much simpler MobilePress. This one just worked right out of the box with a couple caveats. First, it didn’t play well with Disqus (the cool distributed comment platform this site uses). The Disqus comment text came up the same color as the theme’s background so the comments were completely unreadable. I fixed this by changing the body background color to a lighter shade. The second caveat I’ll get to in a moment.

After MobilePress was working I decided to customize the default theme to give it the same feel of the main theme on this site, FrostNinja. (For those curious, I wrote a post on how I made FrostNinja.) To test it I used the technique described in the aforementioned article as well as simulating the iPhone on two of my desktop browsers. The picture at the top of the screen is Safari 4 with the developer menu enabled and the iphone user-agent set. I also tested with Firefox (mainly because I just love firebug!) with the UserAgent Switcher plugin.

Next comes the other problem I faced which was a bit nastier and I still don’t understand why it’s broken. I uploaded my new FrostNinja Mobile theme to my server in the correct place (plugins/mobilepress/themes) and successfully set it as the default, for all platforms, in the Mobilepress Themes setting page. But the default theme was still being served — even with wp-cache completely disabled! The workaround for this one is a bit uglier: after renaming the existing themes I symlinked both to my new theme (e.g., “ln -s frostninja-mobile default”).

Overall a fun experience and I’m pleased with the result.

Update: At some point this mobile theme stopped working yet again. Rather than keep debugging it I turned it off in favor of a responsive solution. This has many benefits including way fewer moving parts. Here’s how it looks on mobile:

Liquidninja Redux (or How I Designed my own WordPress Theme)

The homepage to liquidninja.com has barely changed since I put it up about 8 years ago (I’m not so good at remembering dates so I looked it up via the handy internet archive). Well the site now sports a brand new look and this post will go over a few of the details on how I did it.

This first screencap is how my homepage looked for so many years (in internet time it’s like 50!). I’ve always been quite fond of this minimal (albeit pretty useless) page.

liquidninja-pre-blog — Fig 1. My ancient homepage

After installing WordPress onto the homepage earlier this month it looked like screenshot number two. Notice that I tinkered to get my latest tweet onto it via a handy wordpress plugin. This was an idea I borrowed from Howard Lindzon, one of the funniest, and thus the only stock market writer I consistently read.

(Update: The twitter plugin for wordpress was having problems due to API limits and page caching so I changed the theme to use twitter’s standard javascript option.)

Fig 2. wordpress default on liquidninja.com

Although I think the default theme in WordPress, called Kubrick, is nice it’s definitely not my personal style. So I spent some of my spare time over the past couple weeks designing my own theme which is now live on the site (screencap 3).

Ahh… much better. I call this theme FrostNinja.

So how did I put this theme together? Since I didn’t want to spend too much time on this project I didn’t bother digging into the wordpress codex. Instead I started by taking Kubrick and copying the theme directory (called default) to use as a template for my new theme. Then I went through all the files to get a sense of their purpose (wordpress uses PHP so some basic programmer’s understanding of it helped with this part). Then I tweaked or culled as necessary.

At work, I get to use fancy Adobe products to generate image assets but since this is a personal project I decided to go the free route. All graphics for the theme were created using two free, open source software packages. This decision was made to both save cash and to learn how capable the free alternatives are these days.

The twitter bubble and the rounded rectangles for the header and footer were all drawn using InkScape. (Think Illustrator but free.) InkScape is a vector graphics program and I was very impressed with its capabilities and user interface. It has nice spline editing, a powerful (although not super easy to use) gradient editor and overall very nice set of tools. I look forward to playing with this app again.

The site logo, background (which is my remix of factoryjoe’s filigree) and other images were done with the GIMP. (The poor/smart man’s Photoshop). It’s been a while since I fired up the GIMP and it seems to have come quite a way. I toyed with it on both OS X and Vista and my only complaint was how it deals with multiple tool windows; I was really hoping that the OS X version would at least have a single menu bar. But the software is extremely capable so I can’t complain too much.

To test it all the right way I would probably recommend installing WordPress and mysql locally. But I wanted another shortcut so I hacked together some canned HTML versions of key pages of my site using the new theme. After completing the design, I then used FTP to get the template directory up and then ironed out a few last glitches using the preview theme feature in WP (rather than pushing live too early).

Et voila!

A New Blog Resolution

I don’t feel too strongly about the concept of new year’s resolutions. People should be willing and able to resolve changes at any time of the year. But here I am starting a blog and it happens to be January of the year 2009.

The idea to begin writing a blog came about from a couple factors. One, I find myself often spending much of my spare time tapping the j-key, aka surfing, in Google Reader. (Thanks to Scobleizer for that video a few years ago on how to use GR effectively — that moved me off of Sage and I haven’t looked back.) So if I read lots of blogs, shouldn’t I write one too, for karmic reasons?

The other reason was that I recently moved my website, liquidninja.com, from one hosting company (your-site.com: cheap, good reliability) to another (dreamhost, so far so good). And the new one actually lets you run arbitrary web software! So I finally went and tried some free web software packages including WordPress.org which has published these words you’re reading.

I’ve basically taken a hiatus from the public web’s eye since 2002 when I stopped working on metapad, my freeware notepad replacement project. Since then I’ve been happily living in Seattle and working at Amazon.com designing and building some very cool website software. But I don’t really intend to talk much about Amazon here…

So, what do I intend to write about on this blog? New technology, software, and design. I might do some re-blogging and link to cool or funny stuff floating around the cyberspace. I also plan to write about media and entertainment like movies, books and the occasional video game. And of course blogging.

Next up? The impending re-design of this very blog.

First post

From my iphone even! A real post is coming soon.