Nerd like futzing, and real nerds hate Wordpress. That’s really the only reason my site is now hosted with Octopress. It’s a slick setup using a static site generator from the Ruby/Github community (Jekyll), with some solid congifuration done for you.

It comes ‘blog aware’, which is more than many static site generators can say, and also boasts solid markup and a good theme to boot. Add to this that it requires the command line and white text on a black screen to run, and well, that put me over the edge.

The main reasoning behind generating your static files ahead of time is that you’re basically memoizing the work that something like Wordpress needs to do every pageload: parse the URL segments, route the request, query the data base (and join up to 40+ other queries in Wordpress’ case), template that into HTML… all that work for something that doesn’t change much.

What (could) change on this site are the comments and my Twitter feed, and both of those are loaded on the delay with javascript. This means that in a 10 pageload test my old WP blog averaged about a second and a half to fire the .ready() event, where the new one is ~120ms. My page doesn’t -need- to load fast, but now it does, which makes any nerd happy.

It also supports some great code insertion with the Solarized color scheme by default:

1
2
3
4
5

   var foo = function(){}
  foo.prototype.init = function() {
      //init code here please
      console.log("initializing a foo object");
  }

Pretty dang slick.

Basically it means that you’ve over-used and abused a templating system like ASP or PHP, and have to break in and out of ‘code’ tags constantly, leaving you with lines like this:

1

<% } %>

or

1

<% { %>

That code smells, and means that the rest of the file that poor sap wrote is probably garbage as well. Hiyaaaa!

When used in programs, this idea is called memoization. Essentially what you are doing is trading computational complexity for memory; that is, if something is hard to compute, you only do it once and save the result in memory. This is not always a good option, however, because memory is always finite. Here are two examples of when to use it:

jQuery Selectors – jQuery offers amazingly powerful selectors that let you pull precisely the node you want out of the DOM using CSS-like notation. For example

1

$("#wrapper ul#nav > li.first")

lets you select all list-items with a class of ‘first’, whom are children of a ul with an id ‘nav’, which is itself contained inside a div of id ‘wrapper’. Phew!

This is super handy, but few realize the complexity that jQuery is wrapping up for them: with only a few shortcuts from native DOM methods (getElementById, notably) it is basically traversing the entire DOM and applying various rules to each node it encounters. On a page of any size, this computational effort adds up quickly and show up as a laggy UI.

A way to cache this function is to write code that avoids making that jQuery selection every time the collection of nodes is required:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//Bad!
for (var i = 0; i < $('#myPage a').length; i++ {
    //do something with each anchor element
    //this traverses the DOM each loop
}

//Good!
var elements = $('#myPage a');
var len = elements.length;

for (var j = 0; j < len; j++) {
    //do something with each anchor
    //this only compares two integers each loop that you've saved off
}

AJAX call caching – AJAX is sweet. Using a an XHR object to call a server for data is now the bread and butter of the web. Each call though has a transaction cost associated with it: XHR overhead, network latency, remote server CPU time… Yuck. Let’s see how to cache a buffer call:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//a function that makes an AJAX call to a remote source
//NOTE: This isn't practical for rapidly changing data

myObject.prototype.callTwitterAPI = function() {
    var self = this; //to preserve context
    var Data;
    $.get('twitter.com/RESTfulAPI.html?query...', function(data) {
        Data = data;
    });

    this.callTwitterAPI = function() {
        return Data;  //this is the key. This overwrites the current function with one skipping the AJAX call
    }

    return Data; //Finally return the data
}

So this is a function that when first called with make an AJAX request, but then it redefines itself to simply return the already retrieved data for future calls. Powerful stuff that can start to make your client side code fly.

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.

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!

• 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.

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.

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.

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!

It is entirely composed of Javascript, HTML, and CSS. It uses the HTML5 cache-manifest to store all of the files locally so it can be used perfectly well offline (a boon to iPod Touch owners). It also uses a few proprietary Apple <meta> tags to hide the Mobile Safari chrome (search bar, back buttons etc) and show a custom application icon so it really feels and acts like a native iPhone app.

Bridge-wise, it is not a “complete” scoring app. It has hard-coded player names and only follows our house rules for rubber bridge scoring (which unbeknownst to be are a bit different from the Wikipedia entry). Overtricks are 20/30 for minor/major suits, whereas getting set awards 50/100 over-the-line points to the opposing team. Vulnerability is tracked and accounted for, and play can stretch beyond a classic rubber.

To use the app:

• Direct your iPhones, iPods Touch, or WebKit-enabled browser (Safari) to the starting page: Bridge Score
• On an Apple mobile device, press the “+” below the screen
• Select “Add to Home Screen”
• Give it your own title:
• It is now at home on the Home Screen and can be accessed off-line with all capabilities, just like a native Obj-C iPhone application, but this is in HTML5, CSS, and Javascript. Awesome!

This is a great option for a lot of developers who don’t want to pick up a whole new language and set of API calls (Objective-C and Cocoa-Touch) to get their ideas mobile. Developing in HTML5 has the added benefit of “develop once, deploy everywhere” (at least on A-Grade mobile devices, such as Android-based phones and iPhones). The source code is there for browsing. Let me know if you have any questions.

… working in the woods. But when I got back to the city, I played on my computer. I went to the library. I stayed interested. I read. I tinkered. I played. I convinced people to let me make their websites. I stayed up late. I launched failed projects. I sold my first webapp. And now, I am officially a full-time web developer for a leading financial services firm. This is awesome.

The result is quite neat, and I’ll explain a few of the finer points.

The Javascript Flipping Clock is a direct borrow from a NetTuts tutorial. Javascript wizard I ain’t, but it looks pretty swell.

The current activities are stored in one array per activity for a total of 6. To determine which array to pull from, I did a fairly straight forward elseif tree:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$array_to_use = ''; //always initialize

if ($now < 1258783201) {
  $array_to_use = $boston;
}
elseif (1258783201 < $now && $now < 1258956001 ) {
  $array_to_use = $driving;
}
//many other elseif
else {
  $array_to_use = $default; //in case the page is viewed later
}

$quote = $array_to_use[rand(0,count($array_to_use)-1)]; //picks one from the array

Some key points are highlighted, and these lead to robust code: Always initialize your variables and provide default values. There’s a potentially confusing part at the end to choose the actual phrase to display.

To access an array element, you provide it with an index. The first element in $Array is $Array[0], for example. This uses several nested functions. First it counts the elements in $array_to_use and subtracts 1 (to make the first element = 0). Then it picks a random number from 0-(# of elements in array), and uses that as the index for the array. The result is that each time to access the page, it shows a pseudo-random phrase.

The timeline was all displayed using CSS and HTML. It’s hard to be semantic for something so abstract, but the code is there for your inspection. There was a fair amount of math to ensure the chart was actually to scale, and I believe I wound up at roughly 8px per day. The final bit was making the yellow indicator move (slowly) as time passed. The HTML is a fairly straightforward

$Diff is calculated by some subtraction and scaling of times, like so:

1
2
3

$start = 1258092001; //midnight start date
$now = time() + 3600; //plus an hour for EST
$diff = round(($now-$start)/10800); //division puts it in the 3hrs/pixel range

This is a good demonstration of some basic PHP scripting. Let me know if you have any questions about it.

I had taken screenshots of the various “chromes” that a designer has to create for a fan page, tabbed view, canvas view, friend pickers, dialogue boxes… The list of designs was huge and they all had my targeted ads in the rail and my name and message count sprayed about. Nonsense, I say!

So I made an anonymized .PSD that I’d like to share. Highlights include:

• Generic names for all application areas
• Pleasant image placeholders that are the same size as those on Facebook
• Text treatments that are as close as possible to what Facebook shows you (it appears that Safari and Photoshop don’t quite render Tahoma identically)

This will be updated as I take on more projects that necessitate generic templates; let me know what you’d like to use most.

Download

Robert Scoble, for example, made this list of important tech folk to listen to. Indexing information is a documented problem, but I believe Lists force the user into a decision to use Twitter for information gathering and ground-listening, or to use it socially. Twitter doesn’t excel as a tool for both simultaneously. You can use it to replace your feed reader and listen to Scoble’s 38 new folks, or use it to make snarky comments into the listening void of your friends, but I don’t think it’s a both/and decision.

You’ll see the different pages fill in as I roll through my templates, and the copy with undoubtedly change as the method of the studio is refined a bit, but that’s that. A website. Built. Out there. Waving at the googlebot as it whizzes by. Hello!