wanderingstan

(Yet another geeky post. Apologies to non-programmers, though you might enjoy making some short URL’s.)

Keeping URL’s short is becoming important. It began years ago with tinyurl.com, mostly because email clients were chopping URL’s that wouldn’t fit on one line. Text-messaging/SMS sites like Twitter have intensified the need for keeping things short.

Last week my friend Danny Newman asked me for help with creating maximally short URL’s for one of his projects. Danny wanted to use at most 5 characters. Given that there are 93 valid symbols for each slot, that is enough to encode about 3.2 billion unique addresses. (That’s 93^5.) Not bad!

I came up with code (below) that converts a number into the shortest possible representation in a URL path. (E.g. the number may be an ID from your database, or the output of a hash function.) If you’re viewing this page on wanderingstan.com, you can try it out here: (See how big you have to make the number before the URL gets longer.)

And here is the code. This is in javascript, but it ports easy.

  function convertNumberToURLchars(N, padding) {      // Standard unique chars valid in a URL path    var chars = "0123456789"               + "abcdefghijklmnopqrstuvwxyz"              + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"              + "$-_+*,|\^~`<#%/?@&";                  // These chars will not be recognized as part     // of URL by certain email clients (Outlook)     // if they are the last char in the URL.    chars += "=:{}()[]'>,.!" + '"';         var radix = chars.length;    var URLchars=""    var Q = Math.floor(Math.abs(N));    var R;        // Construct the unique character string    while (true) {      R = Q % radix;      newDigit = chars.charAt(R)      URLchars= newDigit + URLchars;      Q = (Q-R)/radix;       if (Q==0) break;    }        // Handle padding    for (var i=padding-URLchars.length; i>0; i--) {      URLchars = chars[0] += URLchars;    }        return (URLchars);  }  

Small point: As noted in the comments, some punctuation characters (14 in all) won’t be counted as part of the URL by certain email clients when they are the last character. The way to avoid this is simply not to use the last 14 numbers available for a given URL length. Danny wanted 5 characters, so then instead of having 6956883692 unique addresses, he’ll have to settle for 14 less with 6956883678. The former would give a code of http://example.org/”"”"”, the latter gives http://example.org/”"”"&.

Hope you might find this useful someday.

(Thanks to linuxtopia for their radix code sample.)

This is a geek-out side story. Apologies if you’re not a programmer.

Alex Sirota and Mark Finkle have excellent pages on how to make a C/C++ XPCOM component for Windows. However, neither were what I needed: Alex’s didn’t work for Visual Studio Express, and Mark’s wasn’t specific for Firefox. It took me quite a while to get something working, so I thought I should document what worked for me in concrete specific steps:

• If you don’t have it, download Visual C++ Express.
• Download gecko-sdk-win32-msvc-1.8.0.4.zip and extract it to a folder named C:\xulrunner-1.8.0.4
• Download wintools.zip and extract it to C:\temp\wintools
• In the zip file, find these files:
• C:\temp\wintools\buildtools\windows\bin\x86\glib-1.2.dll
• C:\temp\wintools\buildtools\windows\bin\x86\libIDL-0.6.dll
• Copy them to C:\xulrunner-1.8.0.4\gecko-sdk\bin
• Download Mark Finkle’s sample XPCOM visual studio project xpcom-test.zip and extract it into C:\xulrunner-1.8.0.4
  
• Your folder structure should now look like this (from Mark’s page):
  
• Open the visual studio project by double clicking on C:\xulrunner-1.8.0.4\xpcom-test\test.sln
• In Visual Studio, select Build->Build Solution. This compiles the code and makes the dll file.
• Open a command window and cd to C:\xulrunner-1.8.0.4\xpcom-test
• run this command> xpidl-build.bat comp.idl
• This will create the xpt file
• Locate these 2 files:
• C:\xulrunner-1.8.0.4\xpcom-test\comp.xpt
• C:\xulrunner-1.8.0.4\xpcom-test\debug\test.dll
• Copy them to your Firefox components directory at C:\Program Files\Mozilla Firefox\components
• Open a command window and run these commands:
• > C:\xulrunner-1.8.0.4\gecko-sdk\bin\regxpcom.exe -x “C:\Program Files\Mozilla Firefox\components”
• > touch “C:\Program Files\Mozilla Firefox\.autoreg”
• Restart Firefox
• Download this test page to your computer.
• Load the test page in Firefox and click the test button.
• With any luck, you’ll see that 3+4=7. You can now start modifying the component. Be sure to go back and read the pages from Alex Sirota and Mark Finkle for more details.

Hope this saves someone else the trouble someday!

[Updated 2007/11/29 to fix typo and add Firefox Version info]

My environment:
Firefox version: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.10) Gecko/20071115 Firefox/2.0.0.10
Windows XP SP 2.

UPDATE: Looks like MyBlogLog has implemented my idea. Horay!

I love MyBlogLog. It’s a simple elegant idea perfectly executed. You can see their widget on the side of my blog, listing the last 8 people who’ve been here.

The thing is, the “people-watching” aspect of it has a distinct MySpace flavor, but MySpace is the one place where their widget won’t work. (Because it’s in JavaScript.)

About a week ago I woke up in the middle of the night with an idea of how MBL could work on MySpace. I just got off the phone with founder Eric Marcoullier and he thought it should work too. Maybe we’ll see it in action someday? Would be awesome.

So excuse me while I geek out for a bit!

• On MySpace, you can’t use JavaScript and Flash movies can’t “phone home” to your server.
• You can however, have images that are pulled from off-site.
• The server which supplies the image can set a cookie on the viewer’s brower.
• So, your “widget” then becomes 5 (or whatever) images wrapped in link tags, numbered 1 to 5. This is the HTML you have folks copy onto their page.
• When a page is viewed and the images are displayed, the server performs the following when serving the first image:
• Looks for a cookie identifing the person viewing the page
• Looks in DB to find the last 5 viewers and get their avatars.
• Records this list of 5 in a newly set cookie. (Or alternatively stores it in a special table in DB) This is the important step–we’ll need this record when someone clicks.
• Serves up the avatar image along with the needed cookies
• Sometime later, the page viewer may click on one of the images.
• The server will only know that the viewer was on page X and that they clicked on (e.g.) user image #3. At this point we don’t know which avatar was in that #3 slot.
• It is possible that other people may have looked at the page since the images were served, so the avatar they clicked on may no longer be #3. E.g. maybe they’ve been bumped to #5. So we can’t look in the master DB.
• The solution is to look in the cookie we set (or in the special table). This will tell us which 5 avatars where served up to this particular viewer
• Do the cross reference and take them to user page of the avatar they clicked on.

You can see how it might look like on my MySpace page. So that’s my geek-out for the day. I’m really fascinated with widgets in general and think they are a good thing; a de-centralizing of the web. With any luck, walled gardens like MySpace will soon be forgotten. But until then…