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”

Kiosk

At the #nlcX they have projects that we need to do one of these:

1. A company wants to deploy OSS in the network which have a server and 10 clients. The Internet link is 2 ADSL link
– Files can be shared in the server to the clients which run both Linux and Microsoft Windows
– Network single signon
– Computer Act 2007 data logging
– Clients can access the internet
2. Port the LinuxSIS’s Webadmin to other operating system or distribution such as Slackware, Ubuntu, Fedora (of course, except LinuxSIS)
3. You’re working as the system administrator of a premade tailor factory.

At the #nlcX they have projects that we need to do one of these:

1. A company wants to deploy OSS in the network which have a server and 10 clients. The Internet link is 2 ADSL link
– Files can be shared in the server to the clients which run both Linux and Microsoft Windows
– Network single signon
– Computer Act 2007 data logging
– Clients can access the internet
2. Port the LinuxSIS’s Webadmin to other operating system or distribution such as Slackware, Ubuntu, Fedora (of course, except LinuxSIS)
3. You’re working as the system administrator of a premade tailor factory. The factory wants to deploy Linux in the production line so the Purchase department presented a custom made commercial Linux based operating system to the board. You think you can made your own one so you:
– Customize any Linux distribution to tailored for Thais such as Thai menu
4. A school asked you to customize the Linux operating system for school use (the school have students from kindergarten to Grade 3) with these requirements:
– Easy to use desktop
– Attractive theme
– CAI softwares
– Blocks bad sites, and the blockage must hard to disable by the students
5. The national airport wants to install Kiosk to allow tourists to search airlines information from the website of the organization. They contacted your company to develop it using Linux operating system and OSS entirely. You’re in charge of these:
– Customize it to allow web browsing in full screen only after turn the kiosk on. Also, the user must not able to use other system except from web browsing such as: Alt+Tab is locked, no terminal access, no keyboard shortcuts and no kiosk modification
– Install web browser’s plugins for ordinary use

First I think the first one is easy to do and with [FreeIPA](http://freeipa.org) system, it is more awesome than custom made Ubuntu systems. (All competitors use Ubuntu even Fedora is available) It also provides real SSO for the webadmin. It uses Kerberos ticket from the session. (FreeIPA allow you to login to your computer with user from the database, in addition to local user) but my system isn’t perfect. I didn’t do the multiwan and the coova part, and no one willing to do it. So, at 11PM I decided to move to the 5th choice. I spent much time debugging more than developing because I disabled all console activity at first part (actually I’m not that fool, but startx from rc.local blocks it as by-product)

On to the topic about kiosk, I saw many competitors using this solution:

– Ubuntu, with/without customized boot splash (@jingjingmaple’s team use Suwannabphumi Airport and also have built-in web server)
– Firefox with existing addon disabling full screen exit (@nattster write his own addon)
– Fluxbox window manager
– 15s boot time (thanks to Ubuntu)

When I do that, I think at first place if security is important, so why I need to disable features? So, I think of WebKit’s demo application, which have no keyboard shortcut, and have back, forward, go, address bar only. Also, this is more sustainable because Firefox addons might stop developing and stop working with future versions. I didn’t rely on 3rd party developer and use the developer’s tool so the only case is Apple stopped make WebKit (which I think can be compared to Linus stop developing Linux. There are many companies that use WebKit on their projects so they might continue the project from that point)

Next, onto the window manager selection, @jingjingmaple demonstracted his own solution, which have “escape route” that when pressed will show fluxbox’s desktop. I think this is exploitable because there’s no verification (password protect, fingerprint, face scanning) at all. My solution? I don’t load any desktop manager. At first I even don’t load any WM but the browser window can’t be maximized without help from window manager. So I pick up a basic choice: metacity. (After I done the project and slept for few mins, I have the idea that I should use twm instead. However twm doesn’t seems to co-op with maximus)

Full screen browsing is also problem. Most people use full screen option in Firefox. For me, I don’t think full screen mode will work and it looks ugly because Firefox draw frames around your screen. I instead, use maximus which have been written as part of Ubuntu’s netbook remix. It task is to maximize the windows, and ensure it will maximize. My investigation also found that maximus give WM hint that the window shouldn’t be decorated at all. This is really full screen!

My entire solution:

– Fedora 11 with plymouth disabled due to it blocks startx from running
– WebKit’s GtkLauncher
– Metacity window manager
– Ubuntu’s maximus
– BONUS: Chromium (can be switched in configuration file)
– 25s boot time (to GDM, latest solution not measured)

I also doesn’t use GDM. Actually, I need it so much but it doesn’t show my xsession. I even install fluxbox and renamed my session to fluxbox, I moved the script to /usr/bin, I copied fluxbox’s template and strip it down. These options doesn’t seems to work.

I think I’ll made a distro from this (of course like the real one, the homepage is set to [Drama-Addict](http://drama-addict.com)) but with improved package selection

– Gentoo? LFS? Ubuntu? Fedora? Debian?
– GtkLauncher (but locks or remove the address bar, if you need it changes)
– Chromium
– Matchbox window manager
– Maximus
– GDM
– Plymouth custom boot splash
– 5-10s boot time

If possible, I will offer web-based customizer too.