As good as it is, the current web interface does not make it easy to browse historical data. Anything older than the latest 100 or so tweets requires a lot of clicking and manual scanning. Their search too, understandably, only covers updates spanning back a week or so. Anyone who’s tried to revisit their tweets from an year or a couple of months back has surely felt the pain.

There had to be a better interface for browsing tweets. What surprised me, though, was that no one had created such a service for the nostalgic folk on Twitter. I did come across a few custom solutions: Doug Bowman (the design lead at Twitter) for instance, set up a WordPress archive; Andy Graulund built a custom LAMP app.

The idea of my own Twitter archive appealed to me, didn’t sound like a massive amount of work, and out came Not so Yellow.

Design

This project was the result of my grievance with browsing old tweets. Before anything else, it had to have a super easy interface for getting to tweets from any specific month or year.

I toyed with several ideas: listing all the years and months upfront; as drop–down menus / expandable lists; months from the current year upfront, with the full list on a separate page or down below; and, side by side.

As you can see above, I ended up adapting the side-by-side option. This design keeps the content (tweets) centrefold and topmost in the the visual hierarchy, and the year and month links as second-class citizens. Yet these navigational links are persistent and always available as soon as they’re needed.

Short Abused URLs

URLs are important. URLs are part of a site’s design. Cool URLs don’t change. An unfortunate consequence of Twitter’s awesome 140 character limit has been the blown-out-of-context URL shortening craze. While these shorter links definitely do a great job of conserving precious tweet characters, they are usually less readable, obfuscate useful information and — as was dutifully demonstrated by tr.im — provide little guarantee against massive link rot. They should, in my opinion, be used sparingly, only when absolutely necessary.

Well, here was a chance to do something about the shortened URLs under my control. And something I did. It wasn’t as straightforward as I hoped though.

My initial plan was to simply follow and look for redirects for all incoming URLs, and replace the tweeted link with the address of the final destination. Turns out:

• Some tweets use URLs for more than providing a link. Altering them can effect how well the tweet reads.

• Some redirects are temporary (in not just the HTTP response code).

• Some URLs change and lose their original meaning.

  http://rungta.muxtape.com redirects to
  http://muxtape.com.
  Sad but true.

• Some uncool URLs redirect to soft 404 pages.

  http://tinyurl.com/6xqx42 expands to
  http://www.ibnlive.com/olympicsnews/abhinav-bindra-wins-olympic-gold/70827-29.html
  which, instead of pointing to the correct new location
  (http://ibnlive.in.com/news/abhinav-bindra-wins-olympic-gold/70827-29.html)
  redirects to http://ibnlive.in.com/missing.html.

• URLs can become really long and unreadable.

  http://youtube.com/watch?v=lCrJRgzTBCE redirects to
  http://www.youtube.com/index?ytsession=ODBr9ZffIdpph2UHiTlWOwoUUUHyBDlIvBvoQs5JS4jkKj40n5WuEgv-NU6hwEcaBCT-Oz8cA0VOZtxWTlaV5WzhWef8KsewHvt_CvZEfG6P5HsgM0c1E3UZvMIJNAUbZs0i2XnAsLn6THeHgqh3tEL_7RwbprFc4F-iGlRiFKdjAI2ObVjg1eE2h3rjf3zobuvf_6gUB56w16y-3IIzMsIBMQwRhVmXC3fXUVgxMuIpfbNjYtwymuiT9uh0LUjxv0eALEZtdp2oDA-1-XvKEDRj5MMMfSfPt1EZ8K-uccYWNI6pWML8SpXG3pFTZebqq97SGhWVemzur-NiUlels1BHBeLBjhJ-9WNTCFDPCIJNh1G0RrXvyYQ8zhLhgygYDYUshxYPy_4
  (this example courtesy of Bernie Ecclestone).

So, I scratched my URL replacement plan and decided to provide inline expansion, similar to the ‘(expand)’ short URL suffix on Summize (now search.twitter.com). Expanded URLs, when applicable, are added to the tweets as [+] links.

Tooltip via the generated CSS content:attr(href) property.
No JavaScript.

The fully expanded link addresses are displayed as tooltips when the mouse moves over [+]. Thus, a user has the option to simply click the original short URL or preview and directly click through to the final destination.

Should, Could, Would

Should

Search, obviously.

Could

As Rakesh graciously pointed out, this could be opened to support any user, and do for Twitter what Justin Ouellette’s ihardlyknowher does for Flickr. Not so Yellow does archive tweets from multiple accounts (and can support for a few more), but it wasn’t built as a public service.

Would

Perhaps at a time when I haven’t got 4 other projects stretching me thin.

For now, if you’re interested in archiving and/or browsing through your own tweets, take a look at Doug Bowman’s instructions for WordPress. Alternatively, download and install Andy Graulund’s well designed, fully featured, open source LAMP project Tweet Nest. Or ask me nicely.

Credits

• Body text typeset in Linux Libertine (GPL) and embedded using Font Squirrel’s excellent @font-face Kit Generator.
• Rashmi Swamy for coining “not so yellow”.
• Phil Sturgeon for the CodeIgniter cURL library.
• Rakesh Rachamalla and Rashmi Swamy for feedback, help with testing, and their tweets.

∞

I’ve made ample use of this extensibility to add functionality I found myself using in multiple places. I’m sharing a few of these extensions here in the hope that others might find it useful.

• Output (extends native)
• Encrypt (extends native)
• Css

They’re all being used under production, with the latest version of CodeIgniter and PHP 5, so they’re hopefully bug-free.

∞

I needed a simple silhouette of the goddess for a design project commissioned by Dad, and had to resort to tracing one myself. I’m releasing that work here for free use under the Creative Commons Attribution license in an attempt to fill that internet void.

• Download PDF

I’ve only just started playing around with vector graphics (courtesy of the simple and easy VectorDesigner app), so while you won’t find a professional’s polish or attention to detail, it should suffice as a useful starting point.

∞

In any case, this piece is a conversation with Rohit Nag about Top Gear (the show), which took place back in November last year.

For better or worse, the transcript tries to document our chat as accurately as possible. As a result of this, much like Top Gear itself, we’ve ended up with a rambling review, some rubbish, fanaticism and comedy.

You have been warned.

∞

Part of the final assignment for this subject required designing a user interface. Instead of simply creating diagrams in Photoshop (or, god–forbid, Visio) I opted to go ahead and mock–up a working demo site.

From the Ashes

I was revisiting some of my assignments earlier this year when I came across the aforementioned site, and thought it was a shame the design was gathering dust in a neglected folder on my computer. So, I decided to dust it off and do some good by sharing it with the wider world.

The demo web site is meant to provide an interface to the stock management system used by a fictitious leather shoes reseller in Melbourne called Luvov Shoes.

Pages

1. Log In
2. Home
3. New Stock Form
4. New Stock Form with errors

A stock listing/management page would probably make the demo more complete, but I’ll let that be an exercise for the reader <evil grin>.

I have however spruced up the HTML and CSS to make the markup slightly more meaningful and lightweight compared to the original version. I also added a bit of JavaScript to make the navigation menu more accessible.

• View demo
• Download demo

Why Again?

I’m well aware of how incomplete the page designs are, and this doesn’t even compare to something like “The Highly Extensible CSS Interface” series by Cameron Moll, but I think it can serve as a helpful example nonetheless.

• Look out for CSS selector examples. Besides the common ones, you’ll find combinations of attribute selectors, adjacent, child and descendant selectors as well as a few pseudo–classes.

  /* ID Child Type */
  #nav > li
  
  /* Type <Descendant> Type Attribute */
  form input[type="submit"]
  
  /* ID <Descendant> Type Pseudo-class Adjacent Type  */
  #dash ul:first-child + ul
  

  As usual, different browsers have varying levels of support for these CSS selectors. CSS3 has proposals for a lot more of these selectors.

• Examples for semantic form design and real–world usage of the <fieldset> element. This demo also makes use of the HTML5 doctype and some of its affordances, like no type attribute for the script tag.

• The site also contains an example of an accessible dropdown menu. Use your keyboard (tab key) to try it out.

  

Finally, I’m all ears for any improvements, discussions and call outs, so don’t hesitate.

Usage

I’ve published this with the aim to help budding web designers. By all means go through the code and the design, tear it apart if you want to, and feel free to use any bits and pieces (ha!) in your own projects. Just don’t rip off the entire thing and call it your own. Licensed under creative commons for what it’s worth.

∞