Posts Tagged ‘drtwoot’

HelTweetica

August 25th, 2010 at 10:02 pm

As the OAuthcalypse draws nigh, it’s looking more and more like I won’t have time to get Dr. Twoot updated before Twitter closes the door on Basic Authentication. Plan B is to use HelTweetica, an application I mentioned a couple of month ago and which has since been updated and improved.

Heltweetica is both free and open source. If you want to tweak it, you can get the source code from its GitHub repository, change it around and compile it for yourself.

I mentioned in that earlier post that I didn’t like HelTweetica’s small display font and that there was no apparent way to change it. There’s still no preference or menu option for changing the font or font size, but after nosing around in the repository, I learned that the timeline styling is controlled by a CSS file. You don’t even need to recompile to get HelTweetica to look different.

Just right click on the application and choose Show Package Contents from the menu. Open the Contents and then the Resources folders; there you’ll find the style.css file, which governs HelTweetica’s main window display. I haven’t explored all the options, but right up at the top is the body style:

body { 
    margin: 0px; 
    padding: 0px; 
    font-size: 15px; 
    font-family: Helvetica, Arial, sans-serif; 
    line-height: 1.15em; 
    background-color: #888; 
    color: #333; 
    width: auto;
}

Fifteen-point Helvetica is a little small for me, but 15-point Lucida Grande is quite readable, so I changed the font-family. Lucida Grande is what you see in the screenshot above.

Yes, there’s something inherently wrong with changing the default font of an application called HelTweetica to Lucida Grande, but I don’t care as long as I can read the tweets easily.

Unfortunately, the current version of Heltweetica requires Snow Leopard, which means I can’t run in on my iBook G4. More incentive to update Dr. Twoot.

Tags: , , ,
Post #1357 | 1 Comment

Reports of Dr. Twoot’s death…

June 23rd, 2010 at 4:00 pm

…were premature. OK, there was only one report and it was by me. But the statement stands—Dr. Twoot is alive and may survive the coming OAuthcalypse.

A combination of three things have allowed Dr. Twoot to hang in there:

  1. The vuvuzela effect. Twitter has been seeing so much traffic for the World Cup, it decided to put off the date of Basic Authentication’s death from June 30 to mid-to-late August.
  2. That new Twitter SSB I made just isn’t as nice to use as Dr. Twoot, nor is it as compact or customizable. Hence, a new effort by me to figure out OAuth.
  3. I finally found a spectacularly clear explanation of how a client program should construct OAuth headers. Jaanus’s post, combined with a single access token from Twitter, should allow me to get OAuth working on Dr. Twoot before August.

And if things go wrong? What if OAuth still eludes my grasp? Well, there’s HelTweetica, a Twitter client I just found via a tip from Matthew McVickar1. He noticed an aesthetic similarity between HelTweetica and Dr. Twoot and thought I might be interested. He was right.

Here’s HelTweetica:

And here’s Dr. Twoot at the same window width:

I still prefer Dr. Twoot’s layout because

Despite these preferences, I’d switch to HelTweetica in a heartbeat if I couldn’t use Dr. Twoot.

But I have hope now that it won’t come to that.

  1. Whom my wife calls “that really good looking guy from Hawaii who follows you on Twitter.” ↩

  2. An in joke among people who edit their Apache settings. ↩

Tags: , , , , , ,
Post #1286 | 1 Comment

A new Twitter SSB

June 12th, 2010 at 9:13 pm

With the coming requirement to use OAuth to sign on to Twitter, I’ve had to abandon my Dr. Twoot client program and have shifted to a new Fluid-based SSB of the Twitter home page. I’m using a userscript to reformat the page and make it narrower.

Two reasons I couldn’t adapt Dr. Twoot to OAuth:

  1. I’ve read in several places, including in Twitter’s developer pages, that JavaScript isn’t appropriate for OAuth because it exposes certain tokens that are supposed to be secret. Dr. Twoot is written in JavaScript.
  2. As important, I just can’t find an OAuth tutorial that I understand. Everything I’ve seen is all about Consumers and Users and Providers and getting credentials from one site to use on another. I’m not interested in any of these two-cushion internet bank shots; I just want to log in to one site and use it.

So, barring a last-minute change in Twitter policy, Dr. Twoot will stop working at the end of the month. I’ve looked into other Twitter desktop clients, but haven’t found any I like. I’m dead set against installing Adobe Air on my computer, which cuts down the number of available applications considerably. I tried Tweetie, but for some reason it isn’t nearly as compelling on the desktop as it is/was on the iPhone. I liked the customization options of Kiwi, but didn’t like any of the themes that came with it. I didn’t want to buy an application and then spend a bunch of time programming just to get an acceptable look.

Which led me to Fluid. In a minute I had a new application—called, with a certain lack of imagination, Twitter—that was a site-specific browser for the Twitter home page. It didn’t have the look I wanted, but I eventually hammered out a userscript that gave me a nice narrow view of the timeline that I could keep over by the right edge of my screen.

The sidebar is still available by scrolling to the right.

As you can see, I made the tweet input area taller and added the IM Fell font for rendering @DrSamuelJohnson’s tweets. Less obvious, maybe, is that I’ve boosted the font size and the line spacing a bit to make all the tweets more readable.

I knew from my earlier Twitter userscript that the Twitter home page loads jQuery, which should have made the reformatting easy. Unfortunately, the layout of the Twitter home page is a mess. You’d think it would be clean and simple: there’s a background image, a header, a footer, and a two-column content area—not much more complex than this site, really. But the HTML of the Twitter home page is a nightmare of <div>s within <div>s. Some contents are allowed to spill out of their containers, others aren’t. The two columns that make up the main portion of the page comprise a one-row <table>, which has a very 1990s vibe.

My first experiments in narrowing the timeline were very frustrating. Everything I tried that should have worked didn’t. I started Googling to see if anyone had solved this problem before me.

As it happens, there’s a userscript called Endless Tweets by Mislav Marohnić that, among many other things, very cleverly reformats the Twitter page to a narrow layout when the user resizes the window to a small width. I didn’t want to use Endless Tweets itself—it had some minor rendering problems in my tests—but it gave me hope that I could get the timeline narrowed if I just kept at it.

Success eventually came when I opened the Twitter home page in CSSEdit, a seldom-used (by me, anyway) application that came with the MacHeist 2 bundle, and started playing around with the widths of various elements. I kept track of the tests that worked and incorporated them into my userscript. Here it is:

 1:  // ==UserScript==
 2:  // @name        twitdrang
 3:  // @namespace   http://fluidapp.com
 4:  // @description Makes Twitter narrower.
 5:  // @include     *
 6:  // @author      Dr. Drang (http://www.leancrew.com/all-this/
 7:  // ==/UserScript==
 8:  
 9:  function getIMFell() {
10:    $("head link:last").after('<link href="http://fonts.googleapis.com/css?family=IM+Fell+English" rel="stylesheet" type="text/css">');
11:  }
12:  
13:  function twitdrang() {
14:    $("#container").css({'width':'600px'});
15:    $("#header").css({'width':'600px'});
16:    $("div#wrapper").css({'width':'400px'});
17:    $("#side_base").css({'width':'200px'});
18:    $("ol.statuses li").css({'width':'400px'});
19:    $("fieldset.common-form").css({'width':'400px'});
20:    $("#update_notifications").css({'width':'250px'});
21:    $("ol.statuses span.status-body").css({'width':'300px'});
22:    $("fieldset.common-form textarea").css({'width':'375px'});
23:    $(".actions-hover li").css({'width':'20px'});
24:    // $(".actions-hover .reply").css({'float':'right'});
25:    // $(".actions-hover .retweet-link").css({'float':'right'});
26:    $(".actions-hover .retweet-link a").css({'display':'none'});
27:    $(".actions-hover .reply a").css({'display':'none'});
28:    $(".actions-hover .retweet-link a").css({'display':'none'});
29:    $(".actions-hover .del a").css({'display':'none'});
30:    $("ol#timeline .status-content").css({"font-family": "Lucida Grande", "font-size": "15px", "line-height": "1.3"});
31:    $("textarea#status").css({"line-height": "1.4", "height": "4.2em"});
32:    $("li.u-DrSamuelJohnson span.entry-content").css({"font-family": "IM Fell English", "font-size": "120%"});
33:    $("li.u-DrSamuelJohnson.latest-status span.entry-content").css({"font-family": "IM Fell English", "font-size": "175%"});
34:  }
35:    
36:  if (window.fluid) {
37:    getIMFell();
38:    twitdrang();
39:  }
40:  
41:  $(window).scroll( function() {
42:      twitdrang();
43:    });

If you’re interested in a narrow Twitter SSB, follow the Fluid instructions to make an application that points to http://twitter.com, and then add this to the Userscripts folder. I call it twitdrang.user.js, but you can name it whatever you want. If you’re reading this well after the day it was posted, you should look at the twitdrang GitHub repository because it’ll have the latest version.

You may find that any time you post a new tweet, or update the timeline by clicking the “xx new tweets” link, the new tweets will not be formatted to the narrower width. That’s because those events don’t trigger the userscript. I haven’t yet figured out how to get that to work, so in the meantime there’s a kluge. See Lines 41–43 in the code above? They cause the reformatting function to be run whenever the window is scrolled. So if you just wiggle the scrollbar after the new posts arrive, they’ll narrow themselves down just like the others.

Tags: , , , , , , ,
Post #1275 | Comments Off

Dr. Twoot authentication redux

April 2nd, 2010 at 11:30 am

I decided that last night’s configuration instructions for Dr. Twoot (the world’s greatest Twitter client) were unnecessarily long, so I wrote a quick little configuration script that prompts you for your Twitter username and password and prints out the required authentication lines.

The script is called config.py:

 1:  #!/usr/bin/python
 2:  
 3:  from base64 import b64encode
 4:  from urllib import urlopen
 5:  from getpass import getpass
 6:  import re
 7:  
 8:  print '''Enter your Twitter username and password.
 9:  The password will not appear as you type it.
10:  '''
11:  
12:  uname = raw_input('Username: ')
13:  # pword = raw_input('Password: ')
14:  pword = getpass('Password: ')
15:  
16:  url = 'http://twitter.com/users/show/%s.xml' % uname
17:  uid = re.sub(r'\s*</?id>\s*', '', urlopen(url).readlines()[2])
18:  
19:  print '''
20:  Copy the following two lines and paste into twoot.js.
21:  '''
22:  print "var UID = %s;" % uid
23:  print "var B64AUTH = '%s';" % b64encode('%s:%s' % (uname, pword))

From the command line, cd into your drtwoot directory and execute

python config.py

You’ll be prompted for your Twitter username and password and out will pop two lines that will look something like this:

var UID = 987654321;
var B64AUTH = 'c21lYWdvbDpwcmVjaW91cw==';

Copy these and paste them into Lines 8-9 of twoot.js, and your copy of Dr. Twoot will be customized for your account. All of this is in the GitHub repository.

As you can see script connects to twitter.com to get the user ID number, but doesn’t store or send your password. As currently written, the password is not echoed to the screen. If you like to see what you’re typing as you type it, and you’re not worried about shoulder surfers, you can comment out Line 14 and uncomment Line 13.

Line 17 does a lot of work. It

  1. connects to Twitter;
  2. reads your publicly-available user data and puts it into a list of lines;
  3. extracts the third line of that data; and
  4. erases the <id></id> XML tags and any whitespace, leaving just the user ID number.

Line 23 generates the Basic Authentication string by doing a base64 encoding of your username and password, separated by a colon.

I thought about having the configuration script edit twoot.js directly, but it didn’t seem worth the effort. Users who know how to create a site-specific browser with Fluid aren’t likely to object to a simple cut and paste.

Tags: , , , , ,
Post #1207 | Comments Off

Dr. Twoot authentication

April 2nd, 2010 at 12:10 am

When I got back from vacation, I noticed that Dr. Twoot (the world’s greatest Twitter client) had stopped working. Authentication problems. I suspect the most recent update to Safari changed the way WebKit handles Basic Authentication and that’s what caused the breakage. The fix was fairly simple after I did a bit of rooting around in the jQuery documentation.

To use Dr. Twoot now, you’ll have to modify two lines in the twoot.js source code. From the README in Dr. Twoot’s GitHub repository:

You’ll need to change Line 7 of the file twoot.js,

var UID = 123456789;

so it has your Twitter user id. To get your Twitter user id number, execute

curl -s http://twitter.com/users/show/username.xml | grep "<id>"

in the Terminal, where username is replaced by your Twitter screen name. You’ll get a response in the form

<id>123456789</id>
  <id>2345678912345</id>

Your user id will be the first number. Copy that number and paste it into Line 7 of twoot.js.

You’ll also need to change Line 9 of twoot.js

var B64AUTH = 'dXNlcm5hbWU6cGFzc3dvcmQ=';

to the base 64 encoding of your username:password string. Here’s a quick way to do it from the command line using Python:

python -c 'import base64;print base64.b64encode("username:password")'

where you put your username and password in the double-quoted string. Don’t forget the colon. Copy the output and paste it into Line 9.

The stuff about changing Line 7 has always been there, but the need to change Line 9 is new.

Update 4/2/10
I decided these instructions were too long, so I created a configuration script that does all this work for you. Read about it here.

In the past, Dr. Twoot relied on the Keychain to send the authentication information after your initial signin. My guess is that the latest version of WebKit—which, via Fluid, is what Dr. Twoot uses to render the Twitter stream—has tightened up its security and no longer automatically sends authentication info across domains. Because Dr. Twoot sits on your hard disk (Domain 1) and sends Ajax requests to api.twitter.com (Domain 2), it now has to send the authentication info itself.

If you’re interested in how the authentication is done, look in the $(document).ready setup down around Line 310 in twoot.js. The authentication is in the $.ajaxSetup call.

Tags: , , , , , ,
Post #1206 | Comments Off