CurtisFree.com Blog

My preferred monospace fonts

2012-05-12T21:30:00-04:00

As a programmer and command-line enthusiast, I spend a lot of time looking at monospace fonts. For many years, I enjoyed using what has been for years a popular default: Bitstream Vera Sans Mono.

A few months ago, I spent a great deal of time trying out different monospace fonts. Here, I’ll present a brief list of my favorites; the font specification strings and screenshots represent my preferred configuration for each of the fonts in my preferred terminal, rxvt-unicode:

Tamsyn
```
-*-tamsyn-medium-r-*-*-14-*-*-*-*-*-*-*
```
There's just something about Tamsyn that I like (in addition to its website, of which I'm a big fan).

Unfortunately, though it's a sans-serif font, the glyph shapes do seem to possess some “serif” qualities and seem jagged (pixelated). I'm also not a fan of the “sharp” m and w glyphs at smaller sizes (as shown). I refer to the m as a “Gmail m.”

I do use Tamsyn on my virtual consoles, as my favorite (see below) is a derivative of Tamsyn but is not yet available in a console-capable format.
DejaVu Sans Mono
```
xft:DejaVu Sans Mono:size=9
```
DejaVu Sans Mono is little more than Bitstream Vera Sans Mono – so here, I'm not straying far from my “safe default”; but I prefer DejaVu because it supports a larger character set (even though, admittedly, I don't make use of it).

This is the only non-bitmap font on the list.

Among other things, this means that much of its appearance is dependent on system font settings. Bitmap fonts, on the other hand, are much more uniform in appearance across systems (though they, too, are subject to some variation). Working with multiple Linux distributions and OS X, DejaVu Sans Mono can look crisp or blurry – or perhaps the character spacing might not be consistent across applications. While this is no fault of the font itself, it's worth noting.

I continue to use DejaVu in some terminals/on some machines; and it's my preferred font for displayed code (e.g., in code blocks on this page).
Terminus
```
-*-terminus-medium-r-*-*-12-*-*-*-*-*-*-*
```
Terminus is well-known in the Arch Linux community – and for good reason. It's simply a great font. Terminus glyphs are perhaps the simplest and most readable I've seen.

You might notice that the directory names in the screenshot are not displayed in bold face: this size of the Terminus font has no bold face. I don't consider that a problem (in fact, I like the clean look of a terminal with no bold fonts); but others might.

Terminus is “tied” with DejaVu as my favorite for use on some systems.
Termsyn
```
-*-termsyn-medium-r-*-*-14-*-*-*-*-*-*-*
```
Termsyn is a middle-ground between Terminus and Tamsyn.

Termsyn is probably the least popular on the list, but it's my default font in rxvt-unicode on my personal Arch machine. Using my preferred size for each font (pictured here), Termsyn is a little larger than Terminus. Furthermore, the “serif” qualities that I dislike in Tamsyn are not prevalent in Termsyn, due to its inheriting simple glyph shapes from Terminus.

Quickly copy last Git commit hash

2012-05-04T21:34:00-04:00

A typical portion of my Git workflow involves the following:

Local git commit
git push to upstream remote
Add a comment to an issue tracker that includes the new commit hash

A simple shell (ZSH, BASH, or similar) function makes the last step a little bit easier:

gitcp() { git log -1 --format="%H" | xclip -in; }

After running gitcp, the hash of the last commit is in X’s primary selection and can easily be pasted into a comment box in the issue tracker.

Depending on your preferences, you can instruct xclip to copy into a different X “selection” – or you can even use Autocutsel to sync your X selections.

Not using X11? There are xclip alternatives for OS X and Windows, so you can spin up your own helper utility.

Adding the total line count to Vim's status line

2012-04-22T08:23:00-04:00

By default, Vim displays some information about the current buffer/state on its command line (the last line in the window):

As of late, I like asking Vim to display a second line of information at all times (:set laststatus=2). This leaves some information displayed on the command line but moves other info to the “status line”:

As you can see in both screenshots, I have enabled Vim’s “ruler” (:set ruler), which gives line, column, and position (the last few fields in the commandline and the status line, respectively). While this information can certainly be helpful, one might also wish to know a little more detail about his/her progress through the buffer.

With 'ruler' set, Vim tries to do this; but sometimes, it can be useful to have the total line count to compare with the current line number – not just a relative position. Fortunately, Vim allows users to customize the contents of its status line.

The 'statusline' option dictates what information is displayed on the status line. Since that option is blank by default, one must dig through the documentation to find the true default. Here’s the relevant snippet:

Emulate standard status line with 'ruler' set
  :set statusline=%<%f\ %h%m%r%=%-14.(%l,%c%V%)\ %P

%l is the current line number. I like to place the total line count (%L) just after that, as a fraction:

:set statusline=%<%f\ %h%m%r%=%-14.(%l/%L,%c%V%)\ %P

If you expect to edit very large buffers, you might also wish to give Vim some additional space to the right for many-digit line counts. Here, we give the line/column count group 20 characters instead of the default 14:

:set statusline=%<%f\ %h%m%r%=%-20.(%l/%L,%c%V%)\ %P

This gives a status line like the following:

Of course, you can add %L anywhere you like in your own status line. To make this setting “stick,” add that line (minus the leading :) to your ~/.vimrc.

Converting a GNOME Terminal colorscheme to X resources

2012-03-24T14:53:00-04:00

When I began using Linux regularly (nearly five years ago), I used both Ubuntu and Red Hat Enterprise Linux (RHEL) – both with the GNOME desktop environment.

Eventually, after moving to Arch, I developed a taste for lighter-weight applications, including my terminal (I prefer rxvt-unicode).

The default terminal in GNOME is, as you might have guessed, GNOME Terminal. Issues with VTE aside, GNOME Terminal is great; and I still use it often on some machines. When I used Ubuntu, the default color scheme in GNOME Terminal was the “Linux console” theme (which, I imagine, is designed to mimic the default colors of a VT in Linux).

When I began using a terminal configured via X resources (think .Xdefaults), I sought to replicate this color scheme – which I still use on my personal machine to this day. Fortunately, once you understand the basic relationship between GNOME Terminal’s color preferences layout and the X resources color values, it’s easy to map any scheme.

Colors in X resources

I won’t delve into the details of how X resources colors work in this post. For the purposes of a basic tutorial, all you really need to know is that there are 16 “core” colors in X resources, called color0, color1, etc., though color15.

To set these colors for use by all applications that understand X resources, you simply need to add lines like the following to ~/.Xdefaults:

*color0:  #000000
*color8:  #555555
! ... (this is a comment)
*color7:  #AAAAAA
*color15: #FFFFFF

(You’ll notice that those aren’t all in order. The reason isn’t really important here; if you’re curious, search around for more information on colors in X resources/.Xdefaults.)

After your colors are set, you can load them by issuing the following command:

% xrdb -merge ~/.Xdefaults

The modified settings will then take effect when the affected application is restarted.

Chances are, your system is already configured to merge in your .Xdefaults on login, so you only really need to worry about that command when you want to see your changes during the current session (which, I imagine, is most of the time); but note that some applications will understand changes the next time they’re launched without the need to -merge yourself.

Get your colors from GNOME Terminal

The key to using colors from GNOME Terminal with X resources is to understand which colors in the preferences pane map to which color values.

To get to the color options in GNOME Terminal, open the “Edit” menu and then select “Profiles…”; select the profile whose colors you wish to copy, and then click the “Edit” button.

Now, go to the “Colors” tab. At the bottom, you’ll see boxes that allow you to change each of the 16 colors available in GNOME Terminal:

The mapping is simple:

`color0`	`color1`	`color2`	`color3`	`color4`	`color5`	`color6`	`color7`
`color8`	`color9`	`color10`	`color11`	`color12`	`color13`	`color14`	`color15`

If you click a color in the grid, you’ll get the following window: (Note that the window title gives the color number – the same as that in the above mapping table.)

The value you need for your own .Xdefaults is the one in the “Color name” box.

Putting it all together

As you go through each of the colors in the GNOME Terminal preferences, you can add to and build your color settings in your own ~/.Xdefaults.

As I mentioned earlier, I use the GNOME Terminal “Linux console” colors on my personal (Arch) machine. Here are the colors, taken from my own .Xdefaults:

! colors
!! Taken from GNOME Terminal "Linux console" theme.
*color0:  #000000
*color8:  #555555
*color1:  #AA0000
*color9:  #FF5555
*color2:  #00AA00
*color10: #55FF55
*color3:  #AA5500
*color11: #FFFF55
*color4:  #0000AA
*color12: #5555FF
*color5:  #AA00AA
*color13: #FF55FF
*color6:  #00AAAA
*color14: #55FFFF
*color7:  #AAAAAA
*color15: #FFFFFF

I also prefer a white background, with black “normal” text. These two “special” colors are set as follows:

! bg/fg
*background: white
*foreground: black

(Note that some colors can, in fact, be set by name rather than hex #RRGGBB values.)

Quickly changing between similar directories in BASH

2012-02-08T20:03:00-05:00

I recently discovered a nifty trick in the cd builtin provided by ZSH: the ability to change from the current directory to another whose path is generated via simple (and, for better or worse, non-global) search-and-replace:

% pwd
/top/left/bottom
% ls /top/*
/top/left:
bottom

/top/right:
bottom
% cd left right
/top/right/bottom
% pwd
/top/right/bottom

Unfortunately, users of BASH don’t get this nicety; however, by adding a (somewhat) simple function to your shell config (~/.bashrc or perhaps ~/.bash_profile), you can emulate this behavior:

cd () { 
    if [ $# -eq 1 ]; then
        builtin cd ${1}
    elif [ $# -gt 2 ]; then
        echo -e "usage: cd path" >&2
        echo -e "       cd to_replace replace_with" >&2
        return 1
    else
        local new_pwd=$(echo ${PWD} | sed "s/${1}/${2}/")
        builtin cd ${new_pwd} && echo ${new_pwd}
    fi
}

Note that this isn’t perfect. For example, it will not work with values of to_replace or replace_with that contain forward slashes (or anything else that will mess with the sed command). There are certainly more involved methods that would avoid the limitations seen here.

Update (18 Feb 2011):

Josh Berry points out that this can be done using BASH’s built-in string manipulation in place of sed. The relevant line in the above function can be replaced with the following:

local new_pwd=${PWD/${1}/${2}}

Not all encrypted Google searches are equal

2012-01-13T10:33:00-05:00

Google offers two separate encrypted (i.e., via HTTPS) search pages: https://encrypted.google.com (which has been established for some time) and https://www.google.com (a more recent development). The former has generally lagged behind the standard Google search page in terms of features; https://www.google.com looks more like the regular Google search page.

My personal motivation for preferring Google’s HTTPS variants is not to protect my search terms: rather, I am concerned with the cookie information being passed between my browser and Google’s servers. While I do not often (okay, ever) use “open Wi-Fi,” failure to use an encrypted connection means that there is increased potential for a session hijack (as highlighted by the widely-publicized Firesheep).

Aside from differences in each version’s “frills,” there is an important security-relevant difference between the two: the underlying search result links.

Note that links in Google search results look like they point directly at the result URL; however, they actually point back to Google’s own servers, which redirect the browser to the actual result. This means that Google can track clicks, lead to particular referers, and more.

On https://encrypted.google.com, these underlying links point back to https://encrypted.google.com; however, on https://www.google.com, search result redirect links not use HTTPS.

For example, the first hit when searching for “Arch Linux” on https://encrypted.google.com is (line breaks added):

https://encrypted.google.com/url?sa=t&rct=j&q=arch%20linux&source=web&cd=1&ved=0CDMQFjAA&url=htt
p%3A%2F%2Fwww.archlinux.org%2F&ei=7-AQT_D3JIGFtgeC05mVAg&usg=AFQjCNHBJwJZGGNQOe4ZlnbMOM676Q1H7g&
sig2=qeODYK6JsiPId9mR0kwyOw

On https://www.google.com, one has:

http://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDQQFjAA&url=http%3A%2F%2Fww
w.archlinux.org%2F&ei=GOEQT_SsOtGJtweYl-GLAg&usg=AFQjCNHBJwJZGGNQOe4ZlnbMOM676Q1H7g&sig2=ek7en0Z
ia2EtsYirM0xlsQ

While it is unlikely that your session will be hijacked simply by following one of these redirections, note that any cookie information related to your authenticated session that is sent across the Internet unencrypted carries some potential for misuse if it is intercepted.

Users of the EFF’s HTTPS Everywhere Firefox extension are probably already using https://encrypted.google.com. If you’re using Chrome, you can manually add a new search engine with a search string of:

https://encrypted.google.com#q=%s

If you don’t already use the HTTPS-fortified Google search pages, give it a try.

Update (16 Mar 2012):

The EFF has published a note pointing out another security-related discrepancy between the two subdomains.

I've shifted from Vimperator to Pentadactyl

2011-12-31T17:51:00-05:00

I’ve been using Vimperator for years. I’m a huge fan of the Vim text editor, and Vimperator provides a Vim-like user experience in my favorite Web browser, Mozilla Firefox.

That said, Vimperator 3 was a departure from the experience I had come to know and enjoy.

The command line UI was revamped. In part, this led to the removal of what I consider a nice security feature: color-coding (the status bar) to indicate the security in use on the current page. Though one can use a custom script to re-implement this color-coding, it causes noticable delay when changing tabs.
Certain lower-level aspects became less Vim-like. For example, the 'guioptions' option (like that in Vim) was replaced with 'gui' – which has different (and sometimes confusing) behavior.

Recently, a friend asked me about the browser enhancement I was using, and when researching it herself, she discovered my new favorite Firefox extension: Pentadactyl.

Pentadactyl began as a fork of pre-3.0 Vimperator when two of the latter’s primary developers left the project. While Vimperator development has focused on “usability,” “simplicity”, “stability”, and “design” (as described in in the Vimperator wiki), Pentadactyl has maintained (and pushed toward) a truer Vim experience that can fulfill a hacker’s dream.

Importantly, both of the specific points mentioned above are nonissues with Pentadactyl:

The status bar security color-coding is functional. Like Vimperator, Pentadactyl now (by default) shows only a single line at the bottom of the window. Whereas Vimperator’s “single line” is a dual-purpose status and command line, Pentadactyl shows only the status line and reveals the command line only when necessary.
Pentadactyl still uses 'guioptions'. That said, some options diverge from what one might be accustomed to with Vim. Notably, search-related options use the term find instead of search (e.g., Vim’s 'hlsearch' vs. Pentadactyl’s 'hlfind'); and Vim’s multiple case-related options ('ignorecase' and 'smartcase') are unified into a single option ('findcase').

If you love Vim and have been using Vimperator, give Pentadactyl a shot (you’ll need to update your .vimperatorrc to a compatible .pentadactylrc). If you’re new to both, try each in turn and see which you prefer!

Site and blog now powered by Jekyll + PHP + Apache

2011-12-29T17:29:00-05:00

Out with the old!

Previously, my site was powered by CF-CMS (my own PHP-based content management system), and my blog was on Blogger. Though both were sufficient, managing the appearance of my blog is much easier when writing code from scratch than when hacking on a Blogger template. Furthermore, using Jekyll is a type of learning experience.

In with the new!

My site and blog are now powered by Jekyll. I’m quite particular regarding some aspects of my site—particularly, the URLs. Therefore, I’m using a small PHP “gatekeeper” that allows me to manage URLs exactly. Ultimately, content is stored as static HTML; but it is “fed” to into the response by a PHP script. While this does create some overhead, my site certainly isn’t popular enough (at present, anyway) for that to matter.

Other functionality achieved by CF-CMS using PHP has now been pushed to Apache via .htaccess.

The long-term success of Jekyll is yet to be seen, as it hasn’t been around as long as more popular (and user-friendly) solutions like WordPress. The fact that GitHub Pages supports Jekyll is certain to lend it a push among geeks, but only time will tell how it will fare.

What this means…

By choice, my blog can now be found at curtisfree.com/blog (as opposed to blog.curtisfree.com. Further wreaking havoc with existing “permalinks,” I’ve changed individual post paths, too.

The Atom feed for blog posts can now be found at curtisfree.com/blog/feed.

A significant side effect of leaving Blogger for Jekyll is that I no longer have native support for comments. Many (most?) bloggers using Jekyll make use of DISQUS to add third-party support for comments, but I’ve chosen to have no comments for now. The question-mark link at the end of each post is a stand-in, giving a link to email me directly with any comments and/or questions.

So?

I’m happier with the new solution and – hopefully – won’t be changing it anytime soon.

Update (29 Dec 2011):

The code for my site (and blog) is now on GitHub.

Using Amazon.com's Universal Wishlist with Vimperator

2011-08-06T16:54:00-04:00

You can also use Vimperator to add items to your Amazon.com wish list. With the following code, the command :amzwishlist will do the trick:

"" Amazon Universal Wishlist
""" JS derived from http://www.amazon.com/wishlist/get-button (also see Delicious credits above).
"""" NOTE: If not already logged into Amazon.com, this will not always work ('&' isn't handled
""""       by Amazon when passing through login).
command! amzwishlist js add_to_amazon_wishlist();
:js <<EOJS
  add_to_amazon_wishlist = function() {
    var amazon_wishlist_url = 'http://www.amazon.com/wishlist/add'
                            + '?u=' + encodeURIComponent(window.getBrowser().currentURI.spec)
                            + '&t=' + encodeURIComponent(window.getBrowser().contentDocument.title);
    window.open(amazon_wishlist_url, 'amzwishlist', 'width=900,height=553');
  }
EOJS

Easy Delicious bookmarking with Vimperator

2011-08-06T16:52:00-04:00

If you use Vimperator, add the following to your ~/.vimperatorrc to enable the addition of a Delicious bookmark for the current page simply by pressing D:

"" Bookmark on Delicious
""" JS derived from http://delicious.com/help/bookmarklets.
""" For reference, see https://developer.mozilla.org/en/XUL/browser.
map D :js add_to_delicious()<CR>
:js <<EOJS
  add_to_delicious = function() {
    var delicious_url = 'http://delicious.com/save'
                      + '?url=' + encodeURIComponent(window.getBrowser().currentURI.spec)
                      + '&title=' + encodeURIComponent(window.getBrowser().contentTitle)
                      + '&v=5&noui=1&jump=doclose'
                      + '&share=no'; // default share setting
    window.open(delicious_url, 'deliciousuiv5', 'width=550,height=550');
  }
EOJS

Keeping your home directory clean with Git

2011-08-06T16:50:00-04:00

I recently decided to keep my important and public dotfiles in a repository on Github. In doing so, I comitted most of the simple configuration files that I want to have present in my home directory.

Of course, though, over time I tend to collect numerous unwanted files in my home directory (e.g., .esd_auth, .zcompdump). Some time ago, I developed a series of scripts to clean up my home directory, and I typically run these scripts prior to shutting down my computer; however, I have found that it is easy to use Git to help keep my home directory constantly tidy.

After committing what one wants to a Git repository, a check of git status will reveal that everything else is not currently under version control. That’s where excludes (or “ignores”) come in handy. Assuming that the root of your repository is in your home directory, ~/.git/info/exclude can be used to tell Git which files you do not want under its control.

Here, add all files/directories that you want in your home directory but do not wish to commit. Ensure that you do not list any files you do not want at all (files like the aforementioned .zcompdump).

Now, barring any changes you have made to files that are in your repo, git status can be used to reveal a quick list of any unwanted files that have accumulated:

cfree3@CF-PC:~% git st # 'st' is an alias I have set for 'status'
# On branch master
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       .esd_auth
#       .gconfd/
#       .macromedia/
#       .viminfo
#       .vimperator/
#       .zcompdump
#       .zsh_history
nothing added to commit but untracked files present (use "git add" to track)

One caveat: Git will not “alert” you to unwanted directories (including nested directories) if they contain no actual files (see why here):

cfree3@CF-PC:~% grep ".adobe" .git/info/exclude
cfree3@CF-PC:~% tree .adobe
.adobe
`-- Flash_Player
    `-- AssetCache
        `-- 5885UGDY

3 directories, 0 files
cfree3@CF-PC:~% git st
# On branch master
nothing to commit (working directory clean)

Quickly changing voicemail providers on Android

2011-08-06T16:45:00-04:00

I have a Motorola Droid. Rather than using Verizon’s own voicemail service, I choose to manage my voicemail via Google Voice.

One day, I left a voicemail in someone else’s Verizon mailbox. After listening to my message, my friend chose to use Verizon’s “reply” feature (basically, the user replies by directly leaving a voicemail in the caller’s own Verizon mailbox). Until this point, I had not even set up my Verizon voicemail, and so I never received the message.

I have since set up my Verizon mailbox; however, I continue to use Google’s services over Verizon’s own. The problem: what do I do if someone sends me a voicemail reply in the future? To reconcile my desire to use one voicemail provider and my need to have access to another, I need a quick way to switch between mailboxes.

My solution: add direct-dial shortcuts to make the voicemail switch.

First, I added two new contacts: VM VZW (Verizon voicemail) and VZW GV (Google Voice). Within each contact, I have a single number (of type VSC, for Vertical Service Code). These numbers are provided by Google when one chooses to use or stop using the Google voicemail service: for VM VZW: *71<google_voice_number>; for VM GV: *73.

Finally, I added “direct dial” shortcuts for each number to one of my phone’s home screens (like those in the image above). Now, with one these shortcuts, I can easily switch from one service to the other. I can then check my voicemail (*78 on Verizon), and I will be sent whichever service I am using.

With only slight modifications, this solution can be adapted to suit your own needs (or your own wireless carrier).

Using the TrueCrypt CLI

2011-07-04T16:02:00-04:00

TrueCrypt is a great utility for hiding sensitive data – whether in an encrypted disk image or on an entire encrypted partition.

I encourage you to check out TrueCrypt, but that is not the point of this post.

Most TrueCrypt users are likely accustomed to its GUI. In fact, I very much like it. That said, some users do not realize that there is also a command-line interface (CLI) to TrueCrypt.

The key to using TrueCrypt from a terminal is the -t flag – which signals to the utility that you wish to use its textual interface.

After an encrypted volume has been created (a task that can also be accomplished via terminal), the two most common tasks will be mounting and unmounting the volume.

Mounting is simple and is the “default” option (requiring no special flags/commands). Simply tell TrueCrypt the location of the encrypted volume (disk image or device) and the mountpoint:

% truecrypt -t /dev/sdc /media/my_volume
Enter password for /dev/sdc:
Enter keyfile [none]:
Protect hidden volume (if any)? (y=Yes/n=No) [No]:
Enter your user password or administrator password:

Note that this makes it easy to choose an arbitrary mountpoint for the volume (rather than the default, which for me is /media/truecrypt1 for the first mounted volume). You can use a more complex command to avoid some of the prompts seen in that example.

Dismounting is also a simple task:

% truecrypt -t -d /media/my_volume
Enter your user password or administrator password:

For a full description of how to use TrueCrypt’s CLI, check out the built-in help (N.B., there’s no man page):

% truecrypt --help # Opens GUI containing help info and prints to terminal.

% truecrypt -t --help # Prints to terminal only.

% truecrypt -t --help | less # Nicer. :-)

If you begin using the CLI interface regularly, then do yourself a little favor and add an alias to your shell config: alias truecrypt='truecrypt -t'.

A look at paging in the Web-based Android Market

2011-05-21T13:39:00-04:00

If you have an Android phone and haven’t visited the Web-based Android Market, you should check it out. Just this morning, I was glancing over pages of the top free apps and noticed something about the pager (shown below the app results).

The formula is simple. If on a page x, x <= 5, the paging menu allows selection of the first x * 2 pages:

If on a page 5 <= x < 10, the user is always presented with a selection of the first 10 pages:

Then, for any page x >= 10, the user is presented with a list of pages from x -5 through x + 5 (inclusive – total of 11 pages):

This is a departure from the usual: most sites with such paging menus offer the user a constant number of pages for selection (surrounding the current page).

But what motivated Google’s design? There are multiple possibilities:

User experience. Simple: Why show the user so many pages in the menu? The further a user delves into the pages, the further he/she will likely go, so show more pages as the user goes further into the results.
Querying. Perhaps the query used on the backend examines only enough data to know that there are a certain number of pages. Most users only visit the earliest pages, so why even consider the later results to determine how many pages there are?

Interesting design, Google.

Update: Update (03 Jul 2011):

It appears that the Market is no longer using the page selector described in this post. Instead, the selector now offers the first 10 pages while on page x < 10, and pages x - 5 through x + 5 (inclusive; 11 total) thereafter until there are too few pages left to do so, at which point the last 11 pages are shown.

Building a simple Twitter widget using RSS...

2011-04-09T12:53:00-04:00

Sometimes, Twitter’s “stock” widgets aren’t quite what you want.

Sure, they look pretty nice; I’m even using one on this blog. But if you want to integrate Twitter info into an existing website, they don’t cut it. What then?

There’s the Twitter API. If you want to build any type of complex Twitter app/widget, then that might be the right solution for you, but if you want only to display simple, publicly-available tweets, then you can build your own widget using publicly-available Twitter RSS feeds.

Check out your own feed!

To see the feed for your own tweets, visit your Twitter profile using the old Twitter interface (I’m not sure where to find the RSS URL in the new UI). Below the icons of your followers, you should see a link to an RSS feed of your tweets:

Copy that URL: you’ll need it later.

Get coding!

I’m going to cover building a widget using PHP. If you prefer another language, I’m sure you can figure it out.

The first step is to determine how you will fetch and parse the RSS feed. I use Magpie RSS for this task. There are newer libraries for PHP available, but Magpie is simple and works.

Let’s take a look at my own widget (see my homepage):

<?php

    require('tp/magpierss/rss_fetch.inc'); // using Magpie RSS

    // get the latest tweet via RSS
    $url = 'http://twitter.com/statuses/user_timeline/222659411.rss';
    $latest_tweet = fetch_rss($url)->items[0]['title'];

    // we'll replace some patterns in the tweet
    $patterns = array(); $replacements = array();

    $patterns[] = '/curtisafree: /'; // remove Twitter username
    $replacements[] = '';

    $patterns[] = '/(https?:\/\/[^ ]+)/'; // make URLs into links
    $replacements[] = '<a href="\1">\1</a>';

    $patterns[] = '/@([a-zA-Z0-9_]+)/'; // turn user references into links
    $replacements[] = '<a href="https://twitter.com/\1">@\1</a>';

    echo preg_replace($patterns, $replacements, $latest_tweet);

?>

The first task is to import the Magpie code. My path (tp/magpierss/rss_fetch.inc) will only be valid if that is where you have placed the code within your website hierarchy. Adjust the path as appropriate.

Then, we actually fetch the information from Twitter. (Note that Magpie RSS uses caching, so the load you’ll be placing on the Twitter servers isn’t too bad; but if you expect very heavy traffic, you might consider using the official API instead.)

Magpie makes this simple. Using the URL you found earlier, we simply fetch the first tweet in the feed. Within the RSS entry, both the title and body give the actual tweet text – so either should do the trick. I chose to pull out the title.

You could stop here, if you wanted. You have the tweet text and can display it as you wish. I continue with some embellishments, though.

$patterns gives patterns to find within the tweet, and $replacements gives the corresponding replacement patterns (yep, PHP’s preg_replace can handle sets of patterns and their corresponding replacements!).

First, I remove my own Twitter username from the beginning of the tweet (there’s no need to show it).

Now, there are two types of links within a tweet that I’d like to represent as actual links: Twitter usernames (@username) and actual URLs. This can be accomplished using the patterns/replacements on lines 10-13.

You might have noticed in the newer Twitter UI that some tweets contain links without the protocol (http/https). The RSS feed, though, is more like the old Twitter UI. You’ll see full URLs. (For example, I tweeted about goo.gl recently, and you can see a difference in UIs (old and then new):

Via RSS, you’ll see the former – so the regex I provided above should be sufficient.

And there you have it: a simple Twitter widget that you can place anywhere on your website.

A tip to start my blog off right...

2011-04-04T23:35:00-04:00

Did you know that you can include (at least some) HTML in your Blogger title?

Simply enter the HTML along with your normal text.

For example, my title is:

<a href="http://curtisfree.com">CurtisFree.com</a> <a href="http://blog.curtisfree.com">Blog</a>

Note, however, that if all of the printable characters in your title are links, you’ll have to use the links below it in the blog list to go to its settings (as the usually-clickable title will have your links).

Update (24 Sep 2011):

While this tip still works:

I don’t use Blogger anymore; I use jekyll.
The mention of links in the Blogger UI is probably no longer accurate.