As a developer evangelist for Adobe, I use Twitter often to keep up with the latest trends, announcements, and more. I’ve often been frustrated that the Twitter website and twitter apps all use one column that takes advantage of only about 1/9th of my large monitor. I’ve been looking for a good project to beef up my jQuery skills, and decided to see if I could build something to meet my own requirements for a tweet rapid-reader.
UPDATE April 5, 2013 — Twitter killed the Twitter Anywhere API so the app is broke. I’ll try to refactor it soon to use the newer APIs.
What is it?
LottaTweets is a web-based tool that fills your screen with tweets in a multi-column, newspaper-style layout allowing super fast reading. In addition to being able to quickly scan tweets, there are a few neat features:
- Color coded retweet rate — Tweets are color-coded based on the number of re-tweets per minute. It’s a quick way to visually identify tweets that others have found important enough to share. There is also a button that will toggle filtering based on the retweet rate. I originally was only using the re-tweet count, but I realized that it’s not a good measure since older tweets will always have more retweets than new tweets. The re-tweet rate seems to work well.
- Noise factor — Each tweet shows the noise factor of the tweeter. The theory is that if you have tweeted 2000 times but only have 50 followers, you are “noisy”. The noise factor is computed by number_of_tweets / number_of_followers. There is also a button that will toggle filtering based on noise factor.
- Infinite horizontal scrolling — you can keep scrolling right and it continues to load more tweets for you to read.
- Auto-refresh — if you check the box for auto-refresh, it will prepend any new tweets every 60 seconds.
- It’s read-only — I configured my Twitter API endpoint to be read-only, so you don’t have to worry about the app tweeting anything on your behalf. Each tweet has a link (timestamp) to the tweet on Twitter.com so you can reply, retweet, etc. Each thumbnail image is a link to that user’s Twitter page.
Technical Details and the Development Experience:
- The layout is using CSS3 columns and works great with latest versions of Chrome, Firefox, and Safari. It’s about 90% functional with Opera (there are some re-layout issues when filters are applied). CSS3 columns are not supported by IE6/7/8/9, but should be available in IE10. In order to support IE 6/7/8/9, I would need to use another means of multi-column formatting such as the jQuery columnizer plugin. For now, I’m leaving it as-is.
- I had a great head start on this project from Tom Germeau’s Fork-a-Twitter-Client (FATC) project. This provided the basic Twitter API interactions and saved me some hours of hacking. The project uses a StratifiedJS implementation called OniApollo. This was the first time I’ve seen StratifiedJS. It’s a clever way to simplify complicated asynchronous applications.
- I found a few browser bugs (no web dev project would be complete without finding new browser bugs!):
- Safari — I originally set each tweet div with overflow:hidden in case the tweet wrapped beyond the confines of the div. This worked fine on Chrome, but on Safari, everything in columns two through n was hidden! There were a lot of blank boxes with hidden text. Only column one was correctly displayed. I abandoned overflow:hidden for now since it’s very rarely needed.
- Firefox — Firefox doesn’t use up all of the vertical space when laying out the divs. I always had a blank space that was a few pixels taller than what is required to hold another row. I believe that this is a layout issue because it only happens with Firefox. As a workaround, if the user is using Firefox, I manually increase the height of the wrapper div to trick Firefox into thinking another row will fit.
- Opera — when you resize the screen, or apply a filter, Opera doesn’t handle the re-layout correctly and things get a bit scrambled.
- Mobile — The site runs great on desktop Chrome, Safari, Firefox and Opera. It runs OK in Safari on iPad, but the scrolling is a bit un-refined and slow. I’ll work on this soon. I haven’t tested yet on an Android tablet. iPhone and other mobile phones are really too small for this type of layout.
- The font in the top bar is Felt Tip Roman, a font available on TypeKit.com, a fantastic service that I’ve only used once before on Phraffle.com.
- I use Modernizr to check if the user’s browser supports CSS3 columns. A simple alert() is displayed if not.
- The Twitter Anywhere API uses OAuth to authenticate the user, but the cookie it drops is a session-only cookie, so you will have to re-connect each time you access the page after closing the browser. The subsequent connects should only require a simple confirmation click and not your email/password. If the site gets decent traction, I’ll look into using the “Sign into Twitter” APIs, which will give me more control over it.
- Yes, I know, I need a designer! (don’t we all?!)
- There is currently a bug – if you turn on a filter and it results in zero tweets, it will crash. The workaround is to follow more people! 😉
- The code is a bit messy and still fairly hack-ish, but it’s fairly easy to understand. View the source, and let me know if you have any suggestions.
Any suggestions on features?
Any suggestions on code/architecture?