My .vimrc is posted on Github. A lot of people post theirs for others, but mine is just there for me. New jobs, new computers, friend’s house… you never know when you might need to vim a little.

Yeah, who doesn’t do a Hello World to test their new system out… Guilty as charged.

A brief Google shows a high probability that I coined this phrase: “Moustache Fu”. Though it might conjure up notions of a hipster learning martial arts, it’s intended to describe a certain circle of coding hell, as in “I’ve just encountered code written by a 9th degree blackbelt in Moustache Fu”.

Typically caching is something done on a web server to reduce expensive calls to databases or filesystems. It will keep commonly used resources in memory, allowing them to be accessed quickly. You can apply similar ideas to Javsascript.

It’s common to find yourself assigning a value to a variable that might or might not be null. A first-pass approach to coalescing a value into that variable might look like this:

1
2
3
4
5
6
7

//userInput may or may not be valid
var Foo;
if (userInput) {
    Foo = userInput;
} else {
    Foo = defaultValue;
}

A more concise way would be to use the ternary operator:

1

var Foo = (userInput) ? userInput : defaultValue;

This is much better. It’s still readable, but is also more expressive. The third way (that I prefer) is to use a Boolean operator in assignment, like so:

1

var Foo = userInput || defaultValue;

This works exactly like the ternary: if userInput is ‘falsey’, the evaluation of the Boolean continues, and Foo is assigned the value of defaultValue. If userInput is “truthy”, however, evaluation of the OR statement stops, because one side of the Boolean has evaluated to true.

A similar trick can be done using the AND operator:

1
2
3

var Bar = false;
var Baz = 'string';
var Foo = Bar && Baz; //results in false

but

1
2
3

var Bar = 'prerequisite';
var Baz = 'string';
var Foo = Bar && Baz; //results in Foo == 'string';

These two way of conditionally assigning value to a variable can be used to make javascript quite expressive while maintaining readability. Go forth and code.

I wanted to do a quick post to mark the launching of my wife’s venture: The Root Sellers, and their first event, Taste of Place.

It’s a great idea in the spirit of Joel Salatin, the renegade farmer from “The Omnivore’s Dilemma”. Food is generally over regulated by the government, often to no effect (see the recent egg recalls). People who are passionate about food deserve to meet each other and build a vibrant community. This is what the Root Sellers promises: old-timey methods and techniques of preparing and preserving food, available to learn and purchase at various events.

Taste of Place is a “pop up market”, limited to club members. On September 26th a warehouse in the Boulder, CO area will be hosting this market and allowing culinary traditions from the area to continue unfettered by needless oversight. Trust your farmers, trust your nose, and get the best food from the peak of the season.

Quick gloating: I had a blast making their website. I took the concept and developed the aesthetic and made it live in HTML/PHP/JavaScript. The mini-JavaScript functions are also a welcome change from the behemoths that frequently get instantiated at work. Fun!

I’m not sure if this is a tour through web design history or of a budding designer’s development. Either way I took 15 minutes tonight to make some examples of buttons you might find around the internet:

• a) Web 2.0 – Our first experience with gradients and buttons that can look like physical objects. Best avoided today except out of irony.
• b) Grunge/Worn – As soon as everyone began to see the glossy web 2.0 buttons as tired, the resulting movement was to go as far the other way as possible: destroy the website a bit around the edges. Like Abercrombie and Fitch.
• c) Letter Press – Many designers come from a traditional arts background and have somewhat of a fetish for letterpress (and rightly so). This is an attempt to add subtle realism and a bit of an “ooh” factor. I’d say we’re in the midst of this here in 2010.
• d) Startup Page – A startup’s success is often determined by early user acquisition and user retention, with a good product a distant third. In an effort to get visitors to convert to users, sites are A|B tested and examined by psychologists until you can’t help but give them your email address and contact information. This huge bright button can be seen on almost any site featured in Hacker News.

Rogue Amoeba is one of the better software developers for the Mac platform. They make excellent, though admittedly niche, audio software. Their co-founder Paul Kafasis recently gave an interview with Mac Observer. It’s always interesting to hear other programmers hold forth, but he hinted at something I had never heard of before:

I believe that a couple of our apps are on an Apple internal white list so that they say: “…if our OS update breaks any of these 100 apps, then we need to figure out what’s up and maybe contact the developer. Or maybe figure out if we’re doing something wrong.”

This is interesting. A more sensationalist write would attack the “Secret Policy” angle and demand equality for all purveyors on the platform. I’m more interested in how responsive this could (read: probably does) make them. By recognizing quality, know-how, and investment in the platform the OS X team at Apple can in a subtle, non-communicated way, grow with their developers. This is a very different mindset from a typical platform manager’s take of “Let’s update, push far in our own direction, and I hope you can keep up”.

This isn’t to say that Rogue Amoeba (or Panic or MacroMates or MacRabbit) are secretly steering the direction of Cocoa and Objective-C. It’s an observation that by having a list of applications that Apple believes is important to the ecosystem that is OS X, they stand to gain more loyal developers and users by maintaining their typical high standards than they could by forging ahead towards the future of their platform without external influence.

Javascript is nice. It has a tiny set of native functions, and allows you to do almost anything you’d like. A quick trick I learned today is how to sort an array of objects rather painlessly. Let’s say you have the following array full of objects:

1
2
3
4
5
6

var friendsArray = [
    { name : 'Alex', age : 26 },
    { name : 'Andrew', age : 23 },
    { name : 'Alice', age : 31 },
    { name : 'Amy', age : 15 }
];

You want to sort these people by their age. Javascript has a native .sort function for arrays, that either lexically or numerically sorts an array… but that won’t quite cut it for our use case. Luckily, this method also accepts a function as a parameter to help you sort. Documentation at Mozilla Developer Center. Suitable code would look something more like this:

1
2
3
4
5
6
7
8
9
10
11

var sortByAge = function (first, second) {
    if (first.age < second.age) {
        return -1;
    }
    if (first.age > second.age) {
        return 1;
    }
    return 0;
}

friendsArray.sort(sortByAge);

So you can literally put in any method of comparing first and second that you want and set the return value to be 1 or -1 and the function will sort it appropriately. You could ping two servers and sort by latency, or request a series of recent tweets from an array of Twitter username and sort by most recently posted… The list goes on, but it’s a pretty powerful function beyond face value.

I’ve always wondered what Twitter-user distribution looks like across the world. I assume it falls off at night in the US, but who knows? Can I be sure of myself in assuming that most users are in the Mission in San Francisco? Like any fiddler with a penchant for coding and some free time, I decided to figure out myself.

Step 1: Get some tweets.

Twitter offers a sampling API that gives you random tweets from up to 3 years or so ago. I set up an instance of Phirehose and let it run for about half an hour, saving the geo and created_at fields in a MySQL table. It swiftly dumped ~1.3 million tweets, consuming 58 MB. Awesome!

Step 2: Normalize the data.

So Tweets are a complex chunk of data delivered in either JSON or XML. It’s fidelity to the official standard is at the mercy of the client used to create the tweet as well as the user. Needless to say, the data was ugly. Basic steps taken (along with tweets left after the filter):

• Remove empty geo fields (~200,000 left)
• Regex for XX.XXXX, XX.XXXX (35,462 left)
• Removed “true” lat/long with North/N/n values to leave just UTM coordinates(~29,000 left)
• Remove identical UTM pairs (21,750 left)
• Check for out-of-bounds values for date/time (~19,000 left)

So now I was left with 19,000 rows in a DB similar to: 40.4410, -105.25529, "Feb 2 2009 4:41:44 EST"

Step 3: Put it on to <canvas>, a drawing element supported by browsers that play nicely with HTML5 (newish Firefox, Safari, and Chrome builds).

The earth isn’t flat, so a grid is hard to project onto it. Luckily someone else has solved this problem by creating Equirectangular Projections. This family of maps are equal-distance projections that maintains distances between spaces (with sacrificing with more distortion around the poles). I used the Creative Commons map available on Wikipedia.

I built the page up with this image placed behind the <canvas> element with CSS, and started in on the Javascript. For a quick project where page heaviness is fine, jQuery is a good choice. I made some basic functions and threw in a jQueryUI slider (all of which is visible in the source).

Results: So I wound up with a pretty cool way of showing who tweets where, and when. The different hemispheres do indeed encounter lower usage in their night-time, which matches my assumptions. Neat!

Caveats: A few words of warning:

• There is a sampling bias in how I “cleaned” my data. No Kanji characters, for example, possibly explaining the lower-appearing usage in Japan.
• I also opted against geocoding locations such as “Boulder, CO” due to computational overhead. Google does offer this API through Google Maps, but I deemed it outside the scope of the project.
• This will not render on older browsers or any version of Internet Explorer. There is a project called Excanvas to get <canvas> rolling on IE, but this was also outside of my scope.

Check it out

Thanks for looking!