Introducing Twitica Desktop

Some times ago I posted an entry about [Moving out of Twitter]( Well, that project is stable enough now.

About the name, you might guessed it’s from Twitter + but also, one of its inspiration comes from my broken #thaiWitter fork named thaiNica. (thaiWitter +, also pun on Technika, an arcade game that the #thaiWitter’s author @dtinth enjoy) I promised to @dtinth to open source that one when it’s complete, sadly I couldn’t because the reason I stated in the old blog post.

The next part of the name is “Desktop”. I don’t add that to make the name cooler, but it have two reasons:

1. The name “Twitica” is used in Twitter OAuth application. (Note: at this time Twitica Desktop do not use OAuth to provide easy to use UX. The Twitica OAuth key is used in @anywhere on my blog atm.)
2. There is also a client with difference source, but have the same philosophy by me named “Twitica Mobile” on the Palm Pre. It almost supports everything that Twitica Desktop have, save for realtime stream because Palm’s scroller don’t like new content while scrolling (it would just reset the scroll) and it probably consumes battery.

I modelled Twitica Desktop based on #thaiWitter designs, but since I based it on Google Chrome beta I could use several new CSS features extensively like -webkit-box-shadow -webkit-transition text-shadow text-overflow. (box-shadow is used in the top bar’s shadow to simulate curtain on top of screen and at the end of timeline, webkit-transition is used in notification scrolling and tweet insert animation to make it even more super smooth (even with thousands of notifications), text-shadow is used in noticebadge and text-overflow is used in geolocation) Also, I decided to implement only latest features in Twitter like User Streams (so tweets flow in real-time!!), Geolocation (you may turn it on/off) and native RT (there is no old school RT available ever to discourage reply by RT)

Here is screenshot of Twitica Desktop in action. Notice several things:

* There’s a lock icon front of the tweet to indicate protected tweet.
* There’s a pin in back of some tweets, this to indicate that the tweet have geolocation enabled and you can click it to view Google Maps. (If you installed Google Earth you also can use the Earth view in 3D!)
* Instead of showing the RT: @username for native RT, Twitica Desktop show the original one instead with the retweeter screen name at the back.
* The in_reply_to indicator have been highlighted. I made that when going to re-implement native RT, at first it was at the front so I need to style it so users wouldn’t be confused with the original tweeter’s name. Then I move it to the back and think that it’s not how #thaiWitter do it. After I removed the box, it’s not noticeable enough so I decided to implement “notice badge” to in_reply_to as well to make it consistent.
* The background’s image is using the selected person’s background image instead of pure black. This make a lot of lag on Firefox but on Chrome with VESA VGA driver it runs smoothly. (At first I decided to make the tweet background to profile image, instead of global background but it make Twitica very ugly)
* At the upper left, notice the lack of Refresh button. The refresh button is gone because the home timeline is loaded from the user stream so there’s no need to refresh manually. In case of stream disconnect (such as the user pressing esc or open another Twitica instance) it would fall back to refresh immediatly and the refresh button will be back.
* At the upper right, notice the reverse geocoding. This use HTML5 geolocation API and do reverse geocoding from Google Maps server. the … is created automatically using text-overflow: eclipsis. I learnt about that when creating Twitica Mobile.
* Not seen: Google Maps, Twitpic, yFrog,, tweetphoto will open in lightbox instead of new tab.
* Not seen: in_reply_to indicator, when click will scroll to the replied tweet instead of opening new window in case that the replied tweet is found in current window.
* Not seen: Twitica use bouncy scrolling instead of linear scrolling. Currently there’s no limit in the bounciness and it would bounce too much when you have 100 tweets opened.

And last, since I have bought a Nexus One instead of Palm Pre already (blame AT&T and Palm for not selling 2.1GHz HSDPA GSM Palm Pre Plus in time) I have optimized Twitica Desktop for Android (yeah, I want to remove the Desktop suffix but I can’t because the reason above)

(Note: this is from older version)

* At first Twitica Desktop do not use Geolocation API, but instead Google Gears Geolocation. This result in some people can’t run Twitica. The reason is when I developed Twitica Desktop the HTML5 Geolocation API is not available yet. I’ve moved to HTML5 Geolocation plus Gears fallback when trying to make it Android compatible.
* Real-time stream make Dolphin Browser’s URL bar always present so I have to remove it and only use polling method.
* Android is smart and when tapping, it would find nearest link to click. I have to make every link in non-selected tweet focus that tweet instead of open the link.
* position: fixed is broken. I have fixed it using the trick from GMail mobile app.
* Maps just open in Google Maps application, not in lightbox!
* Last, since I’ve added the geolocation place name (not pictured on mobile version, see the desktop version) I have to condensed buttons name to only the yellow character.
* Notice that the notification resembles Ubuntu’s notification. The desktop version also use this theme. The notification will be transparent like in Ubuntu when hovered. You can click on it to close, unlike Ubuntu.

Now, when will I release it? I would need 3 things:

1. I need a hosting which allow me to use mod_proxy since PHP cannot proxy streaming content well, and there is XMLHttpRequest limitation on cross-domain request.
2. The user stream is in the developer preview period. In this period I cannot release anything.
3. I need better way to make seamless user experience on authentication. OAuth isn’t OK because the user stream use Basic Auth only and xAuth is not an option because “Web-based applications will not be granted access”