For many folks, Memorial Day weekend was a chance to bask in the fresh summer sun and put some color in their cheeks, but for a hardy band of indoor hackers, it brought a chance to put some color in your Tweets! Tantek Çelik and I were two of the 50-odd developers invited to the Twitter Annotations Hackfest, and we used our preview access to that upcoming API to demo our proposal for applying the Web’s Cascading Style Sheets (CSS) standard to enhance plain ol’ Tweets with color, fonts and graphics.
Dr. Rohit Khare founded Ångströ in 2007, and before that ran CommerceNet Labs from 2004-2006 and founded KnowNow in 2000. He has worked on Internet standards development at MCI’s Internet Architecture Group and the World Wide Web Consortium (W3C). Last week, Tantek Çelik was named Web standards lead for Mozilla Corp. He is also co-founder of microformats.org, and founder of the Global Multimedia Protocols Group. He was previously chief technologist at Technorati.
Dozens of other teams also used the new APIs to bring other types of color to the Twitter experience, so we were proud to be one of the few selected to present of a panel of judges that included Paul Graham of Y Combinator, legendary angel investor Ron Conway and Twitter’s director of platform, Ryan Sarver. I can’t say enough about how impressed I was with everyone’s demos, but I’d like to write about our own experience.
I had arrived at Twitter HQ with a proposal that would allow you to @reply or @mention anyone you know, on any social network, but without embedding a long link to their profile.
Instead you’d use the “hidden” annotations layer to add back in HTML hyperlinks. That lead me down the slippery slope of asking, “Why not just use HTML for Tweets in the first place?” Obviously, there’s no virtue in repeating the message twice and, more importantly, with no more than 512 bytes available to add context to a 140-character message, there’s just no room to fit complete HTML markup into a Tweet.
So when I brought my idea to the Hackfest and asked for help from Tantek, a longtime expert contributor to the CSS specification, it was only a matter of time before we hit upon the concept of “Twitter Style Sheets” or “Text Style Sheets” (TSS). We joked about it with some of the other developers that evening over pizza, and when we saw the spiffy new artwork @biz had commissioned for the event, we knew that we simply had to demo how to reduce the entire poster to a single Tweet by the next morning!
Unlike CSS, TSS must be stored separately from the text itself. That way “smart” Twitter clients can apply it if the reader wants to see the result. TSS is just one of several potential enhancements to a hypothetical “Rich Tweet Format”, along the lines of @scobleizer‘s “SuperTweet” concept. Others might include using microformats to make it easier to recognize Tweets that refer to reviews, people, places and events.
For now, the first challenge was merely getting to “Hello, world!” Or, more to the point, “Hello,
world!” I started bashing on sample code for publishing annotations to the new API from @abraham. It was a rush to see that we could upload annotations at all, but we needed to write this as a browser-based application. Unfortunately, the existing libraries from my initial proposal don’t work with the unreleased APIs yet, so I dug into my bag of tricks for a JavaScript-based API I built last year called knx.to/twtr (pronounced “Connects to Twitter”), which is a way to add Twitter support with full OAuth support and without a lick of server-side coding. Much like Facebook Connect, a site needs only to include our JS libraries and host a tiny HTML on their own server domain.
I spent all night debugging the intricacies of escaping data and posting it. (To and from text input in the browser to attribute-encoded markup over URL-encoding in round-trip JSON [Strings only! No numeric data yet] through another round of XML parsing.) At the same time Tantek was rummaging through his own attic of code for a library called CASSIS. That code allowed him to develop our open-source TSS-to-HTML engine in a portable format that runs on either the server (PHP) or the client (JS) from the same source code file.
The first whiteboard discussions we had on Saturday evening began with handwritten CSS markup (PDF) to create the poster. Unfortunately, we knew that even with the use of relative character-count offsets to encode selections and ways to indicate styles that applied to the entire tweet and each sub-selection, it was already weighing in at over 300 bytes out of our maximum of 512 bytes. That limit applied to all annotations, so if we were going to encourage other developers to adopt RTF and TSS, we needed to use less space.
As proponents of markup that “puts people first,” however, we knew we couldn’t just use some unreadable binary compression goop. And here was our stroke of luck: We were wondering how to shorten CSS property names such as “font-style” when Tantek suggested using the first and last characters: “font–style” became “ftse” – but so did “font–size“!
I went off and wrote some programs to analyze all of the 200-plus properties in the latest CSS3 specification, and came back with the result that there were only six such collisions! TSS supports full-length (unambiguous) names along with abbreviations with those six problematic properties. (“Color” is far more popular than “cursor,” for example.) As luck would have it, that leaves one-character codes to use for future innovations, such as adding “h” to add href links or “c” for microformat classnames.
For now, come check out our demo (if you have a preview access account), or at least read the code (at http://xent.com/tss.js ) and stay tuned for what comes next. Though, like @ev himself, we’re not quite sure about the Promethean curse of giving users Tweets in any color they’d like – we’re afraid it’s only a matter of time before we see animated, blinking Tweets in 3-D!
