These mostly-still images with subtle animations add a great new depth to photographs. 

See more at Jamie Beck’s Tumblr

A while back, I saw an awesome redesign of Facebook done by Information Architects. I’m not really a fan of hiding content in the third pane until a user clicks on a specific story (see also: twitter.com), but I loved the idea of stretching the content horizontally to increase visibility. We have a curious situation of monitors stretching horizontally while websites stretch vertically, which I think can be amended with some new design principles. To my understanding, that redesign didn’t make it past the conceptual stages. But I thought it should be possible to capture at least the general idea through some custom CSS tweaks. Here’s the result of my initial baby steps:

There was a limit to how much I could do with pure CSS, so I think next I’ll play around with some JavaScript to make more exciting changes. This is essentially just pushing half of the content over to the right, and fixing all the little things that were broken because of it. It seems to work without any major eyesores now, and I still use this whenever I browse Facebook. In case you’re interested, here’s a link to download the CSS file. Some disclaimers:

• I had no use for Facebook’s right column, so I removed it entirely. Mileage for you may vary.
• Some of the less-visited Facebook pages aren’t properly handled, so some parts might look weird
• I’m not very good at CSS, so the gross code will probably make you shudder.

By the way, is there an easy way to set the browser to use a custom CSS file for a specific webpage? I installed Personalized Web for Chrome, which does regex URL matching to apply scripts and styles, and for Safari I bundled it up into a separate extension. If there’s a more simple way of doing things, I’d love to hear about it.

As reported by NHK News

At the Kyoto Prefecture Office’s PR section, they have begun placing mannequins in the middle of the workplace to create more tension and encourage workers to perform better. The idea is that work efficiency will rise if they always feel that they are being watched, and that they should also be able to offer better service because they can visualize more strongly that they are speaking to a real person. There have been 5 mannequins in the office since last month. They have been designed to represent the common demographics this office responds to, and each has his/her own name. For example, Tomoko Hitomi is a 32 year old woman currently raising a child, and 24 year old Masaharu Fuku is a graduate student in the middle of job hunting. One employee says that “When we have discussions together, we can think about what Miss Yoshiko the mannequin would think, and this allows us to express our ideas more actively.” The office plans to increase the number of mannequins.

It writes like a pen, erases like a pencil, and becomes permanent after 3 days. Sounds like magic.

From the Sharpie blog.

0to255 is probably the best tool for finding different shades of one color. From their website:

0to255 cures your color manipulation woes. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.

I’ve been looking at GeekTool for a while as a desktop customization utility, but the examples I’d seen online didn’t appeal to me because honestly, system stats and running processes aren’t things I need to see all the time. Last week I finally sat down to work with it, because I decided to be more diligent about to-do lists, and the desktop is a good place to keep that visible. As long as I was at it, seeing upcoming events in the same place would be nice. This is exactly what iCal is for, I know, but it’s ugly and I don’t like looking at it. So GeekTool it was, and I really love the result.

Date and iTunes

First I have a big date in the upper left, because excessive typography tends to make designs look more intentional. The iTunes window is Bowtie, with the Zukunft theme. It fits in perfectly, and the progress bar implementation is great. The only thing I changed is the feature that iTunes volume is reflected in its opacity, which took me far too long to realize was a feature and not a bug. It’s a nice touch, but I wanted the look of the display to be more reliable.

Weather

Weather was the last thing I added, mostly because I thought a weather graphic would fill the extra space nicely, and I must have looked at about twenty different solutions. Most people are using Yahoo Weather’s data, and I almost did too, except that it was far too hard to grab a weekly forecast. I ended up not even using the weekly anyways, but so it goes. My weather comes from Accuweather, which seems accurate enough for my uses. I tried using curl to fetch the data, but for some reason it was really unreliable, so I settled on a Ruby script by Ted Wise. I haven’t decided how I feel about using an external script, so I might give it some more thought later. Just copy the following into a GeekTool shell widow to get an output like “Cloudy 26″:

{code}
/Users/{username}/Documents/scripts/weather/acweather.rb -z “ASI|CN|CH002|BEIJING SHI|” -o /Users/{username}/Documents/scripts/weather/icons -s
{/code}

I placed the script into my Documents folder, but you can put it anywhere you want to as long as you give the right location in the script. Looking at the options I’m using: -z defines the zip code, -o uses a custom icon set, and -s says to output a summary of the weather, which I tweaked a little bit inside the script. I had to use the fancy zip code because I’m outside the U.S., but the script actually has a lookup utility to help you find it. Run this command from Terminal and copy the output into your GeekTool command to give it your complete international zipcode.

{code}
acweather.rb –lookup “Beijing, China”
{/code}

My only complaint with Accuweather is that the default weather icons are gross. Luckily I found Starry Night, a custom iPhone theme that includes beautiful icon sets for both Accuweather and Yahoo Weather. In the command above, the script finds the appropriate weather icon and caches it in a known location. To actually show the image in GeekTool, you need to use a separate image widget which should have the following file location:
{code}file:///tmp/acweather-icon.png{/code}

To-Dos

I tried a lot of different ways to handle to-dos, since that’s why I started this project in the first place. I briefly looked at 3rd party apps but decided that was more than I need. My next thought was to use a plain text file. Quicksilver’s “Append To…” function lets me add items very easily, but I have to delete lines manually whenever I finish something, which was going to get old fast. I settled for OSX’s built-in to-do system because I can edit/close items from within Mail or iCal, and Quicksilver’s iCal Plug-in makes it super easy to add to-dos.

So now that we have to-do items saved, all that’s left is to display them through GeekTool. I did this by installing iCalBuddy, which is a command-line utility that makes it easy to access the OS’s calendar database. After installing, just enter the following command in a GeekTool shell command to display the list of to-dos from your OS calendar:

{code}
/usr/local/bin/icalBuddy uncompletedTasks
{/code}

Calendar Events

iCalBuddy to the rescue again, to pull these events out of the calendar. Each of these occupies one GeekTool window, and will output a list of events with a name and date:

{code}# This Week
/usr/local/bin/icalBuddy -nrd -df “%a” -tf “%I:%M” -eed eventsToday+7{/code}
{code}# This Month
/usr/local/bin/icalBuddy -nrd -ic “Events” -df “%B %e” eventsToday+30
{/code}

A quick explanation of the options I’m using:

-nrd, –noRelativeDates

Doesn’t use natural language relative dates, like “today” or “day after tomorrow”.

-df, –dateFormat

Weekly shows abbreviated day of the week (Mon, Tue) and Monthly shows month and day.

-td, –timeFormat

Weekly shows the time of the event in hh:mm format.

-eed, –excludeEndDates

They just took up too much space

-ic, –includeCals

Monthly only shows events from the calendar called “Events”. More on this later.

The default settings for iCalBuddy will include things like bullet points in the display, which I removed by editing the config file. To do this, just run the following command, and view this page for configuration instructions.

{code}icalBuddy editConfig{/code}

For example, these are the config changes that I used to remove the default bullet points and hide category names:

{code}
<key>bullet</key>
<string></string>
<key>alertBullet</key>
<string></string>
<key>noCalendarNames</key>
<true/>
{/code}

I made a separate calendar in iCal named “Events” that contains all of my long-term or all-day events. The monthly view only shows events from this “Events” calendar because otherwise I’d end up seeing four weekly meetings, which is silly. Ideally, there would be an option to only show all-day events since I’m basically using the monthly view to track those big events. As far as I know there isn’t a way to do that, so separate calendars it is.

Miscellaneous

The black bar is just an empty shell command with a transparent black background. Each column header is a static text window, and I made the horizontal lines by creating a new text window and filling it with underscores. I got the wallpaper image from Fiftyfootshadows, which is my new favorite source for high quality photography. I’m glad I decided to group everything together into one bar, since it keeps things very clean and works with almost any wallpaper.

WordPress has plugins, Last.fm has widgets, and people have written extensive libraries for integrating social networking feeds into your website. But of all these solutions, I wanted the cleanest possible.

PHP or Javascript?

I prefer server-side solutions. Dumping processes onto the client feels like poor user experience. The problem with using PHP though, is that we have to wait for these external sites when loading pages. I’m in China right now, with no Twitter or Facebook, and I’ve visited enough sites that hang for 30 seconds to know that mine had to be different. So I started writing it in Javascript, but decided halfway that it wasn’t worth it. What to do?

The Solution

PHP it was, but with all of the data cached locally. Since my new policy is that client requests will touch no external resources, I set up a cron script to poll Twitter and Last.fm every 5 minutes and store the feed on my own server. Each page-load just pulls data out of the cache file, and the results are as good as realtime.

The cron script:

{code type=php}
// Twitter
$cache_file = dirname(__FILE__).’/cache/twitter_cache’;
$url = ‘http://twitter.com/statuses/user_timeline/XXX.json?count=10′;
if ($tweets = file_get_contents($url)) {
file_put_contents($cache_file, $tweets);
}

// Last.fm
$cache_file = dirname(__FILE__).’/cache/lastfm_cache’;
$url = ‘http://ws.audioscrobbler.com/1.0/user/XXX/recenttracks.rss’;
if ($songs = file_get_contents($url)) {
file_put_contents($cache_file, $songs);
}
{/code}

Nothing fancy here, and you can see that it’s easy to do similar things for other services. Now for page requests, it’s just a matter of pulling this feed out and parsing it however you please. In my case, I just show the most recent item of both feeds. I got a JSON feed from Twitter and RSS from Last.fm, so you can see both examples:

{code type=php}
function get_recent_tweet() {
$cache_file = dirname(__FILE__).’/cache/twitter_cache’;
if(file_exists($cache_file)) {
$tweets = json_decode(file_get_contents($cache_file), true);
$tweet = $tweets[0];
$created_at = strtotime($tweet['created_at']);
return $tweet['text'].’
‘.$created_at;
}
else return ‘Unable to find recent update’;
}

function get_recent_song() {
$cache_file = dirname(__FILE__).’/cache/lastfm_cache’;
if(file_exists($cache_file)) {
$songs = new SimpleXMLElement(file_get_contents($cache_file));
if (empty($songs->channel))
return ‘No recent updates’;
else {
$created_at = strtotime($songs->channel->item->pubDate);
return $songs->channel->item->title.’
‘.$created_at;
}
}
}
else return ‘Unable to find recent update’;
}
{/code}

My needs are simple. I can even narrow them down to one. A good way to manage those I follow. Really, that’s it. Why is it so hard to find an application that does that?

The obvious solution is creating groups. Family in one group, tech blogs in one group, funny people in a third. Excepting small apps I’ve never heard of, TweetDeck and Nambu are the only clients that support groups.

TweetDeck certainly has impressive features but I can’t say I feel good about using it. I avoid AIR applications, and the interface is just too cluttered. Usability requires columns, and columns take up a lot of space. Scrolling feels unnatural. The unread indicator is useless since it’s not immediately visible. And clicking on a tweet does not mark it as read. What? Groups work the way I expect them to, but I just can’t enjoy the functionality when it is housed in that interface.

Nambu is a near-miss. Native look and feel is great, and the Finder-esque sidebar is the best I’ve seen. Groups, however, are too hard to use. Right-clicking on a tweet allows me to place that user into a group, which is fine for spontaneous organization. But when I want to batch-organize some recent follows, searching through the timeline won’t do. The “Twitter Groups” window is clearly my next step, but I notice that my list of follows to choose from is surprisingly sparse. Apparently I can only choose from those users who have already been placed in a group. What?

Seriously. Give me a way to sort everybody I follow into groups, and put each of those groups into its own tab. I don’t really care what happens after that, as long as it’s not excessive or stupid. I keep saying I’d do it myself if I had the time. Maybe I should do it anyways.

Sidenote: A company whose flagship is a Twitter client should be amazing at conversing on Twitter. *shake fist*