Making of Twiticas

Back then, there was a Twitter client by @dtinth that I love it use named thaiWitter (previously theDtTvB’s Twitter client). It have many great features and the developer is responsive to feature requests. Last year I requested identi.ca timeline merging ability to be added, but I think it might never be implemented due to how complex it is so I ask the developer for permission to fork. He allow me to fork the client side code, and implement the server side myself. I named the project “thaiNica”. It would download thaiWitter, patch it up and output to a file. However, due to the design of thaiWitter identi.ca timeline do not load after second refresh and so on. I have stopped working on thaiNica for some time.

Few months later while summer is approaching, I realized that Twitter is full of non-geeks and blogged in [my blog](http://blog.whsgroup.ath.cx/node/313) that I would make a client that can read both timeline at once.

I decided to use Chrome, because I think it’s the browser that have delivered most HTML5 features. Also, it have “Create web application” feature so end users can make it appear in box like thaiWitter more easily. (@dtinth told me that his decision to use Mozilla Prism is that Chrome’s handling of Thai language isn’t perfect at that time.)

First, I started by copying thaiWitter’s interface. I created all the markups myself and almost all shades of grey I guessed the color myself. After the basic interface is in place, I started on working with its notification system.

Twitica (the “Desktop” was added later, read on) have two types of notification. The first one that got implemented first is in-app notification. I use the design from [notify-osd](https://wiki.ubuntu.com/NotifyOSD#Bubble%20appearance%20and%20layout) instead of thaiWitter’s square layout because I think it’s not interesting enough. Also, I added hover to reduce opacity system like in Ubuntu. It was just few more lines of CSS with no JavaScript involved. The next stop is to make it appear programmatically. I added notify() function, which as of now haven’t been changed ever since Twitica started. It would add the notify and animate it using WebKit’s CSS transition. Benchmarks show that with hundreds of notifications active, Twitica still runs with almost no lag while thaiWitter with JavaScript animations lag easier. (Mozilla Prism do not support css transition yet)

The next one is desktop notificationwhich is also still intact since I started. It mainly use [Chrome notification](http://www.chromium.org/developers/design-documents/desktop-notifications) that have been developed with the Chrome OS. Also it works with Prism and Fluid but haven’t tested yet.

After that I begin adding timeline loading codes and rendering. I used basic auth and write the framework myself using OOP. I then make API for identica too. However, injecting tweet in between the timeline is hard, so I didn’t implement timeline merging anyway.

Luckily, identica have new feature that I just know of and it is being used in the website: the Realtime plugin. So I use varnish to proxy to identica’s meteor server and timeline just loads in realtime. (Althrough it have like 4s lag) This make timeline merging quite not nessesary.

After basic usage worked, I begin adding advanced features. Starting with geolocation with Google Gears because I saw that identica’s homepage also provide this feature, and then media upload.

Few weeks passed, and the first Chirp conference have the user stream introduced. I think “omg I must be the first to implement this”, too bad they allow the people who attended the event only to use the stream so TweetDeck and Echofon done that before. (At this time of writing they’re doing close-beta test) After few days it is available for public but under disclaimer that I couldn’t distribute the product. I decided to implement it and some more hacks later it was working.

Strangely, after the stream was added, CPU usage reached 100% for all time. I started optimization project and changed how Twitica scroll the timeline to make it more efficient, disable some effects like background image and the biggest (but mostly not noticable) is to move user stream handler to web worker. (However, Twitica Desktop nowadays have a rare bug that mysteriously make entire OS slow to crawl and probably occur in Linux too. I couldn’t trace the source of this bug because the machine is too slow to debug and it not easily reproducable. If you’re victim to this bug just close Twitica Desktop and in 3secs your computer will return to normal speed)

After I passed Triumudom Suksa entrance exam, I got the [Nexus One](http://google.com/phone). I tried Twitica on it and found that it works, even web workers is working. So I decided to tweak some around as described in my [old post](http://blog.whsgroup.ath.cx/node/330) to make it usable in the N1.

While Twitica use Basic Auth, its use have been deprecated for some time. Finally, Twitter put a deadline to shut the Basic Auth. This requires me to use OAuth instead. Still, I think it would be better to use XAuth (can’t remember why, besides it easier to implement) so I requested XAuth and got approved a week later. I got XAuth implemented in few days. When the deadline is approaching near, Twitter announced that there’re many failwhales making migration of some clients hard. They decided to move the deadline to August instead 🙁

While registering to OAuth, I found that “Twitica” have been used. I have to change to other name, but I already have Twitica Mobile (will write about that later) so I decide to name the web version “Twitica Desktop”.

When Twitica Desktop was fairly in place, and I haven’t got the Nexus One yet, I was fanatic of Palm webOS. (and it continues to nowadays) So I decided to make Twitica Mobile in case I got the Palm Pre Plus. (Sadly, the AT&T version doesn’t have 2.1GHz 3G so I bought the N1 instead) It use Basic Auth too, but it have real timeline merging (without keeping message between refreshes, and no stream as it would drain your battery) It have as much features as the Desktop version (Geolocation, Native RT)

**Next entry:** Twitica Mobile on PhoneGap and Twitica DS (formerly DSTwitt)

Introducing Twitica Desktop

Some times ago I posted an entry about [Moving out of Twitter](http://blog.whsgroup.ath.cx/node/313). Well, that project is stable enough now.

About the name, you might guessed it’s from Twitter + Identi.ca but also, one of its inspiration comes from my broken #thaiWitter fork named thaiNica. (thaiWitter + identi.ca, 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, pg.in.th, 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”