After travelling Europe this summer, I sat down at my laptop and ported the code to Node.JS. This is good because my Node process only needs to load the dictionary into memory once and can cache queries run against the trie. The scoring algorithm is accurate but very infrequently is off by 1 point – a bug that I’m trying to hunt.

Filling out the board involves typing your letters into the board. I’ve tried to ease the interaction of inputting letters by auto-advancing the board the editor based on your direction, but I think it’s being a little bit too aggressive right now. I may wait until the editor is advanced two spaces in the same direction before auto advancing.

Backspacing should probably reverse the auto-advancing direction on the first backspace, and then maintain its direction on successive hits. Typing a letter after a succession of backspaces might be a good trigger to reverse direction again, but I’m not totally sold on the idea.

Anyway, go cheat and find the best moves in your Words With Friends games.

The Words With Friends solver in action.

<?php
$user_agent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($user_agent, 'MSIE') !== false) {
?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/ie.css" />
<?php } else if(strpos($user_agent, 'Opera') !== false) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/opera.css" />
<?php } ?>

My IE specific stylesheet introduced some issues for the recently released IE9, which supports many CSS3 features like border-radius and box-shadow.  As a result, my site looked like this:

Since IE9 supports a set of CSS3 similar to Opera, I decided to have IE9 and Opera share a stylesheet which provides background gradients.  All older version of IE still needed to use the IE stylesheet which provided rounded corners, drops shadows, and background gradients.  The updated browser detection code is below.

<?php
$user_agent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($user_agent, 'MSIE 9') !== false
  || strpos($user_agent, 'Opera') !== false) {
?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/opera.css" />
<?php } else if(strpos($user_agent, 'MSIE') !== false) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/ie.css" />
<?php } ?>

Which fixes the display issue nicely:

IE9 still does not support the text-shadow CSS property which bewilders me, and I can’t do much about, short of replacing text with images.  Also, some might say I should use feature detection instead of browser detection in choosing which styles to use.  They’re right, and I will try to use Faruk Ateş and Paul Irish‘s Modernizr to solve that problem in the near future.

The Ski Experience was meant to represent me as a skier to everyone via my website.  The idea behind the Ski Experience was that visiting my site would be like visiting a ski mountain.  The homepage was the base lodge and feature a welcome message as well as links to the blog, portfolio, and contact page.  The main page of the blog would present a bunch of posts styled as trails that a user could go explore.  Finally, the navigation was represented as different peaks of the mountain that someone would go visit.

The Ski Experience idea was very appealing to me, mostly because I love skiing.  The way I envisioned the site was that it would be very graphically detailed.  I wanted something that looked beautiful and captured the essence of skiing.  Unfortunately, try as I might, I couldn’t design graphics the way I wanted them to look.  I learned that good graphic design is tough, and not something that I’m as experienced at as say development.

I played around with different styles and ways of creating the graphics, but nothing came out as awesome as I wanted it to.

Stylized mountains based on a photo.

Vector mountain drawn from hand.

Despite my failed attempts, I still had a very strong idea of what I wanted the Ski Experience to be, but I didn’t have the time to learn the design skills necessary to create it with all of the other things happening in my life.  So, I did what I do best, making a very clean, usable design for my site.  I like this new design, but at the same time, it doesn’t represent me as a skier.

The color scheme for this design was originally based off of a Tesla I saw while visiting Boulder, Colorado this past July.  My first few design iterations originally used a creme color for the site background, but I dropped that in favor of a cleaner off-white color.

An early iteration of the current design.

These past few days, I finally got together enough time to polish off the design and create a WordPress 3 theme based on the design.  What you see today is the result of that effort.  I eventually want to create a more mobile friendly version of the site (I think the site actually looks decent on the iPhone 4) and optimize my CSS.  I’ll also be tweaking some design elements based on things I notice and feedback I get from you all, so keep it coming.

In the end, what I learned is that today, I’m not a spectacular graphic designer, but I can get better if I put the time into it.  When that time will be, I don’t know, but possibly in December after my internship with Facebook and before classes start for my final semester at RPI.

I designed two of these experiments using HTML5 canvases and JavaScript.  I’ve modified them slightly to work on the web (as opposed to locally on my laptop), and so that they display the experiment results to the test subject (instead of storing the data).

Both experiments measure how well people count and identify certain objects under varying conditions.  The first experiment constrains subjects to only a glance at scene, while the second experiment has subjects count objects in a fast moving stream.

Objects in experiment 2 are in a fast moving stream.

I’ve updated The Labs with a link to the main experiment page.

Some web apps, like Brizzly, will automatically expand short links on their site, but what I wanted was a way to always know where short links would send me, regardless of the site I was on.  Additionally, I wanted a way that wouldn’t break the normal flow of web browsing.  So, I created Expand, an extension that determines the destination of short links and shows the user the destination when hovering over a link.

To test it, just install Expand and hover over this bit.ly link.  You’ll notice a hover effect that looks like this:

Sample usage of Expand

Also, if the link location matches the link text, Expand will replace the link text with the short link’s destination.  See what happens with this link after you install Expand: http://bit.ly/80Y4t5

Currently, Expand only works with bit.ly links, but I’m looking to increase the number of short linking services it works with.  I’m also working on performance optimization because the last thing I want is for Expand to slow down a user’s browsing experience.

Update (12/18/2009): Expand now supports over 30 short linking services!

Get Expand from the Chrome Extensions Gallery

Alpha invites will continue to trickle out during the coming days and weeks.  If you want to keep up to date on our progress, be sure to follow the GoSportn blog.

• Cleaner layout
• HTML 5
• CSS 3

Just looking at the site, you’ll wonder where all the HTML 5 is.  All of it is under the hood.  I’m taking advantage of the <header>, <nav>, <article>, and <footer> tags to improve the mark up on my site.  In fact, by setting their display style to ‘block’ all of the elements render as expected, even in browsers that don’t officially support HTML 5.

As far as the CSS 3 usage goes, it’s just to improve the look of the site.  The site is still viewable in older browsers or IE8, but will lack the shadows and rounded corners defined by the CSS 3 syntax.  I think this is a good way to start phasing in CSS 3 on the web.

I have a few things that I want to post (including post-Google thoughts), and I’ll hopefully get to them this week.

If you’re not familiar with Cliqset, they’re a start up based in Jacksonville, Florida (home of the slightly jejune Jaguars).  They have a good self-describing page, but essentially they provide users with a method to unify their identities across the myriad of sites out there and are building a fully read-write platform for developers.  I joined the site back in March, when the launched their first beta.  More recently, they launched their second beta and raised $1.5 million from an angel investor.

In addition to giving you insight on the services you use, cliqDNA also provides you with little snippets about the topics you like to talk about or the type of music you like to listen to.  The more people that try cliqDNA, the richer the data becomes, giving everybody a chance to see what really are the most active services on the web.

So why not go ahead and give cliqDNA a try»

Download the Okemo layer!

The simulation, powered by JavaScript, requires a browser with HTML 5 capabilties (Chrome, or a newer version of Firefox or Safari will do).  I’ve added in a bunch of controls such as render speed, block size, and premade patterns.  I also created the ability to ‘draw’, or spawn life forms by clicking and dragging the mouse around the canvas.  I’ll admit, my JavaScirpt probably isn’t 100% optimized, so the simulation may slow down a bit if you spawn a lot of blocks.

Life on a Canvas (in the Labs)