Posts Tagged ‘twitter’

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

18th-century bookmarklet

May 24th, 2010 at 1:10 pm

Following up on this post, in which I tweaked my homemade Twitter client to display certain tweets in an old-fashioned font, I decided to create a JavaScript bookmarklet that would do the same when reading tweets in a regular web browser. This opens up 18-century rendering to everyone.

The bookmarklet uses JavaScript to show @DrSamuelJohnson’s tweets in the IM Fell English font, a webfont that Google has made available.

This should work in any browser. Just drag this link

C18th

into your bookmarks bar—you can change the name to whatever you like. If you follow @DrSamuelJohnson, clicking the bookmarklet when you’re at twitter.com will change the font of his posts. You don’t need to have IM Fell English on your computer; it’s downloaded as part of the page, just like a photo or screenshot.

You can, of course, read the bookmarklet to see how it works, but because it’s URL-encoded, there are lots of %22s and %20s in there that make reading hard. Here’s the unencoded source:

$("head link:last").after('<link href="http://fonts.googleapis.com/css?family=IM+Fell+English" rel="stylesheet" type="text/css">');
$("li.u-DrSamuelJohnson span.entry-content").css({"font-family": "IM Fell English", "font-size": "120%"});

Pretty simple. The first line sticks a link to the webfont into the <head> of the page. The second line grabs all the @DrSamuelJohnson tweets (list items assigned the u-DrSamuelJohnson class) and changes the font. Only the tweet text itself is changed; the meta information is left alone.

The bookmarklet uses jQuery, but there’s no need to link to the jQuery library, as Twitter already uses it.

It would be easy to extend the bookmarklet to change the fonts of anybody. If you follow me, please don’t change my tweets to Comic Sans; my feelings are easily hurt.

This isn’t the solution I really want, because the user has to click the bookmarklet. It would be better if the JavaScript were executed automatically after the page loads. That would probably require Greasemonkey (for Firefox) or GreaseKit (for Safari), neither of which I have any experience with. Maybe it’s time to look into them.

Update 5/24/10
Well, that wasn’t too hard—for Safari, anyway. Here’s a userscript for GreaseKit that does the font change automatically:

// ==UserScript==

// @name          C18th
// @namespace     http://www.leancrew.com
// @description   Renders @DrSamuelJohnson's tweets in IM Fell English.
// @include       *

// ==/UserScript==

$("head link:last").after('<link href="http://fonts.googleapis.com/css?family=IM+Fell+English" rel="stylesheet" type="text/css">');
$("li.u-DrSamuelJohnson span.entry-content").css({"font-family": "IM Fell English", "font-size": "120%"});
$("li.u-DrSamuelJohnson.latest-status span.entry-content").css({"font-family": "IM Fell English", "font-size": "175%"});

You’ll note that, in addition to the metadata at the top, I’ve added a third line of JavaScript. This line makes the text of @DrSamuelJohnson’s latest tweet appear in a larger font when I visit his Twitter page, as is conventional.

If you have GreaseKit installed for Safari, click this link to install and activate the userscript. I have it set up to work only with sites that have “twitter.com” in their URL.

This should work for Firefox/Greasemonkey, too, but it doesn’t. In fact, even the simple bookmarklet doesn’t work for me in Firefox. I don’t know why, and since I don’t use Firefox I don’t care enough to pursue it. If you know the answer, tell me in the comments or an email.

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

Webfonts for the 18th century

May 20th, 2010 at 9:28 pm

This morning, in a burst of pure genius, Dan Sandler (@dsandler) tweeted this:

Attention all 17th–18th century blogger-scholars: Your font needs have now been met. http://code.google.com/webfonts/list?family=IM+Fell

Sure enough, if you follow that link you’ll be taken to the preview page for IM Fell, an old-looking family of fonts, now available as webfonts through the auspices of the Google Font Directory.

I’m not a 17th or 18th century blogger, but I do follow an 18th century Twitterer, @DrSamuelJohnson, whose Tweets do ring with the Sound of RASSELAS.

I thought it would be fun (and easy—if it weren’t easy I wouldn’t have bothered) to rejigger Dr. Twoot to display Dr. Johnson’s tweets in IM Fell English.

First, I linked to IM Fell English in the <head>:1

<link href='http://fonts.googleapis.com/css?family=IM+Fell+English' rel='stylesheet' type='text/css'>

Then I used the Twitter API to detect tweets by the user DrSamuelJohnson and wrapped those in <span class="c18th">...</span> tags. With this addition to the CSS style file,

span.c18th {
  font-family: 'IM Fell English', 'Lucida Grande';
  font-size: 18px;
}

I was done. The font size had to be kicked up a bit because IM Fell English is on the small side.

Here’s how it looks.

Ten minutes of work that makes me smile whenever Sam Johnson’s tweets appear. If you’re so inclined, you can dig into the details at Dr. Twoot’s GitHub repository.

  1. Dr. Twoot is a serverless, jQuery-based webapp that that I turned into a site-specific browser (SSB) via Fluid. At its root, it’s just a web page. ↩

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

Another Twitter discussion

April 12th, 2010 at 7:31 am

Last night I had this little back-and-forth on Twitter.

I’m actually sympathetic to Mr. Russell’s concerns about Apple’s iPhone development restrictions, but come on: Jobs wouldn’t be making this play if all he had was his famous RDF. Maybe he’ll fail and, by overreaching, lose the market he controls; but right now that market is real and it’s his.

(And I’m not sure why Russell threw DRM into his complaint—that’s never been an issue with apps. You can’t blame DRM for every problem. The tendency to do so should be given a name. I suggest we call it the Doctorow Reflex.)

Tags: , , ,
Post #1218 | Comments Off

« Older Entries