Twavatar – coming to a NuGet server near you

Yet another little micro-library designed to do one thing, and do it well:

twavatar.codeplex.com

Install-Package twavatar

I’ve recently been working on a personal project that lets me bookmark physical places.

To avoid having to build any of the authentication infrastructure, I decided to build on top of Twitter’s identity ecosystem. Any user on my system has a one-to-one mapping back to a Twitter account. Twitter get to deal with all the infrastructure around sign ups, forgotten passwords and so forth. I get to focus on features.

The other benefit I get is being able to easily grab an avatar image and display it on the ‘mark’ page like this:

image

(Sidenote: You might also notice why I recently built relativetime and crockford-base32.)

Well, it turns out that grabbing somebody’s Twitter avatar isn’t actually as easy as one might hope. The images are stored on Amazon S3 under a URL structure that requires you to know the user’s Twitter Id (the numeric one) and the original file name of the image they uploaded. To throw another spanner in the works, if the user uploads a new profile image, the URL changes and the old one stops working.

For most Twitter clients this isn’t an issue because the image URL is returned as part of the JSON blob for each status. In our case, it’s a bit annoying though.

Joe Stump set out to solve this problem by launching tweetimag.es. This service lets you use a nice URL like http://img.tweetimag.es/i/tathamoddie_n and let them worry about all the plumbing to make it work. Thanks Joe!

There’s a risk though … This is a free service, with no guarantees about its longevity. As such, I didn’t want to hardcode too many dependencies on it into my website.

This is where we introduce Twavatar. Here’s what my MVC view looks like:

 @Html.TwitterAvatar(Model.OwnerHandle) 

Ain’t that pretty?

We can also ask for a specific size:

 @Html.TwitterAvatar(Model.OwnerHandle, Twavatar.Size.Bigger) 

The big advantage here is that if / when tweetimag.es disappears, I can just push an updated version of Twavatar to NuGet and everybody’s site can keep working. We’ve cleanly isolated the current implementation into its own library.

It’s scenarios like this where NuGet really shines.

Update 1: Paul Jenkins pointed out a reasonably sane API endpoint offered by Twitter in the form of http://api.twitter.com/1/users/profile_image/tathamoddie?size=bigger. There are two problems with this API. First up, it issues a 302 redirect to the image resource rather than returning the data itself. This adds an extra DNS resolution and HTTP round trip to the page load. Second, the documentation for it states that it “must not be used as the image source URL presented to users of your application” (complete with the bold). To meet this requirement you’d need to call it from your application server-side, implement your own caching and so forth.

The tweetimag.es service most likely uses this API under the covers, but they do a good job of abstracting all the mess away from us. If the tweetimag.es service was ever to be discontinued, I imagine I’d update Twavatar to use this API directly.

Node.js on Windows

Thanks to Sharkie’s ongoing organisation efforts, SydJS is a thriving monthly JavaScript meeting here in Sydney. This evening they welcomed me along to talk about Node.js on Windows. Afraid of a mostly non-Microsoft crowd I rocked up with all the anti-Unix jokes I had but they turned out to be all quite friendly and it was a fun little talk.

Here’s what I ran through…

Update 18th July 2011: The latest official builds of node.js now come with a Windows executable. This is thanks to support from Microsoft.

Cygwin

Cygwin gives you a full POSIX environment on Windows. It’s great for running apps designed for Unix, but it’s pretty heavy and not very … Windows-ey. It’d be like creating a “My Documents” folder on Ubuntu.

All that being said, it’s the simplest and most reliable way of getting node running on Windows.

Works for 0.2.6 -> 0.3.1 and 0.4.0+. Anything between 0.3.1 and 0.4.0 won’t compile.

The steps (and common pitfalls) are well documented at https://github.com/joyent/node/wiki/Building-node.js-on-Cygwin-(Windows)

Once you’ve got it running in Cygwin, if you jump out to a standard Windows command prompt and run c:\Cygwin\usr\local\bin\node.exe you’ll get a nice big error. More on this later.

MinGW

The next step up from Cygwin is to compile it under MinGW. MinGW (Minimal GNU for Windows) provides the bare minimum set of libraries required to make it possible to compile Unix-y apps on Windows, avoiding the full POSIX strangehold environment that Cygwin provides.

Works for 0.3.6+.

Again, there are well documented steps for this: https://github.com/joyent/node/wiki/Building-node.js-on-mingw

Once you’ve got it running in MinGW, jump out to a standard Windows command prompt again and run c:\wherever-you-put-your-git-clone\node.exe you’ll get a nice big error.

Standalone

Now that we’ve compiled it with MinGW (you did that in the last step, right?) we’re ready to run it on Windows natively.

From a native Windows command prompt:

  1. Create a new folder (mkdir node-standalone)
  2. Copy in the node.exe you compiled in MinGW (xcopy c:\wherever-you-put-your-git-clone\node.exe node-standalone)
  3. Copy in the MinGW helper libraries (xcopy c:\mingw\bin\lib*.dll node-standalone)
  4. Run node-standalone\node
  5. Voila! It works!

Running as a Service

Next up, I wanted to host node as a service, just like IIS. This way it’d start up with my machine, run in the background, restart automatically if it crashes and so forth.

This is where nssm, the non-sucking service manager, enters the picture. This tool lets you host a normal .exe as a Windows service.

Here are the commands I used to setup an instance of the SydJS website as a service:

nssm.exe install sydjs-node c:\where-i-put-node-standalone\node.exe c:\code\SydJS\server.js
net start sydjs-node

What We Achieved

We now have node.js, running natively on Windows, as a service. Enjoy!

(Just please don’t use this in production – it’s really not ready for that yet.)

Released: RelativeTime

Ruby has a nifty little function called time_ago_in_words. You pass it an arbitrary number of seconds and it gives you back something friendly like “about 2 weeks ago”.

Today, I implemented a similar routine for .NET.

relativetime.codeplex.com

nuget.org/List/Packages/relativetime

To use it, just include the namespace, then call ToHumanTime() on a TimeSpan object.

If you want more of an idea of what it generates, take a look at the test suite.

Released: Crockford Base32 Encoder

Now, doesn’t that just sound sexy? No, not really. I hear you.

Alas, I went and built it anyway.

crockfordbase32.codeplex.com

nuget.org/List/Packages/crockford-base32

Crockford Base32 lets you encode a number into an alphanumeric string, and back again.

Where it shines is in the character set it uses.

It’s resilient to humans:

  • No crazy characters or keyboard gymnastics
  • Totally case insensitive
  • 0, O and o all decode to the same thing
  • 1, I, i, L and l all decode to the same thing
  • Doesn’t use U, so a number like 519,571 encodes to FVCK instead
  • Optional check digit on the end

It’s great for URLs:

  • No funky characters that require special encoding
  • No plus, slash or equals symbols like base 64

It handles really big numbers. (Well, my implementation is limited to 18,446,744,073,709,551,615 but you could extend the algorithm even further just by changing the data type from ulong to something even bigger.)

Number Encoded Encoded with optional check digit
1 1 11
194 62 629
456,789 1CKE 1CKEM
398,373 C515 C515Z
3,838,385,658,376,483 3D2ZQ6TVC93 3D2ZQ6TVC935
18,446,744,073,709,551,615 FZZZZZZZZZZZZ FZZZZZZZZZZZZB

 

Don’t have too much fun now.

Making Internet Explorer Better for Developers

Here’s what my Start Bar looks like:

Screenshot of my start bar: Outlook, IE9, IE6, Firefox, Chrome, Safari, Opera, Visual Studio, Photoshop, Excel, MetroTwit, Communciator, Skype, Live Messenger

Specifically, you’ll notice that I have all the major browsers there as first class citizens. When I want to launch a browser, I just randomly move my mouse towards the bottom left of my screen and click which ever browser I hit first. As I write this post, I’m using four of them to browse the web. LastPass deals with my passwords and I don’t use bookmarks anyway.

I do this to maintain my knowledge of all the browsers, to help me be a better web developer.

For day-to-day browsing, this works fine. For development though, I find myself actively switching to Firefox just so I can use Firebug. On paper, Internet Explorer’s developer tools do everything Firebug does. In practice, I’ve just never liked them as much. Even with the current progress on consistent rendering, we need good development tools in all the browsers.

Over the last few days, I’ve been exclusively using the Internet Explorer 9 developer tools. I’ve noted each feature that I think needs work. Now, I want to add your feedback so that we can build a cohesive set of requests for the IE team. None of these suggestions will make it into the IE9 release, but now is a good time to get our feedback in before they commence planning for IE10.

General Browser

  • JS error dialog is annoying as hell – would be good to say “stop showing error dialogs” after the first one, and route the rest of the text to the console
  • Would be nice to be able to view JSON responses in the browser instead of getting a download prompt, just like XML

Console tab

HTML tab

  • Minor, but the HTML should really get renamed to DOM. It feels a bit silly telling people to go to the HTML tab when they want to see how an SVG is structured
  • Selecting an element in the DOM should outline it on the page
  • Can’t delete an element
  • Adding CSS properties in dev tools (should be able to do it from trace styles, not via attributes)
  • "Edit" button in DOM always seems to edit the wrong node
  • Typing style=" to add an attribute results in style="" which works against the habit
  • Rename "Trace Styles" to "Applied Styles" and make it the default
  • Rename "Style" to “Trace Styles” and make it second
  • Layout pane is too chunky – always have to make the dev tools bigger just to see it
  • With an active node in the DOM, need a way to get into the attribute editing via the keyboard only F2

Script tab

  • Whenever I hit “Start Debugging”, the dev tools undock and docking gets disabled. Seems unrelated and certainly annoying.

CSS tab

  • "This stylesheet cannot be viewed because its source is in a different domain than the page."

General dev tools

  • Why is there a "Clear Browser Cache" button in the HTML + CSS tabs? It’s already in the menu.
  • Why is Disable > Script not available? (It’s there, but greyed out.)
  • Consolas over Courier please.

What are you suggestions? Comment on this post.

I’m on the Microsoft campus in Seattle this week so I’ll be championing as many of these issues with the IE team as I can.