Like many before me, I was searching (unsuccessfully) for a decent twitter client. There are many, but most seem to be ad sponsored or based on a rather hefty framework like AIR (which by now, I guess, has been silently installed on my computer anyhow).

Update: This project is now deprecated and Twitter has removed basic authentication.

Custom apps have major implications for usability so I decided to roll my own. I wanted to try out Fluid, the Prism-like app to contain web apps in their own process/window, to see if it is possible to build a complete open source ad-free twitter client in a single web page only using javascript and HTML.

So, I cuiled for a jQuery twitter plugin but had to google it to find it. Some minor modifications to the code by the fine folks at SeaOfClouds and adding a method to post new status messages gave this native-looking OS X twitter client (HUD-style to the left, default style to the right and HUD avatars style below):

Twoot in HUD style

Custom twitter client with Fluid and javascript

Twoot with avatars

Thank’s to the twitter json api it was trivial to query my own friend feed and display it in Safari. Then, I used Fluid to create a self contained OSX app that displays my static HTML page. Googling a nice application icon makes it much better-looking in the taskbar. I decided to call it “Twoot”. Twoot consumes little memory and plays nice with embedded URLs (they open in a new Firefox tab).

Unfortunately, Fluid does not allow you to distribute the created app so you will have to roll your own by:

  1. Download and install Fluid.
  2. Create a folder called “twoot” in your home directory.
  3. Download the twoot html, js and css files from github and place in the twoot folder.
  4. Edit twoot.js and set your twitter username and password. (Enter credentials in the basic auth form when launching app the first time).
  5. Open Fluid and create a new app by pointing to the twoot.htm file (e.g. file:///users/you/twoot/twoot.htm) and set a nice icon.
  6. Save the app as “Twoot”.
  7. Your new twitter client is ready! Run it and resize as required, set the window to floating, kill tabs etc. Change the twoot.css and html file to customize it further.

Simple API:s are wonderful for usability!