One thing that has always impressed me with websites is how they present you with the most important information when you login. This could be a deadline, some updates from other users, or just general announcements.

Some of the sites I use at work and on a personal level are perfect examples, GitHub and Basecamp.

But how is this technically feasible? Sure, you are probably thinking just gather all the data you need and loop through it. Right? No, I will explain why. I didn’t understand this for the longest time, and I hope to help solve any your questions about using them.

With Garrett and Larry both having many comments, messages and connections, we already have the data we need.

Problem is we need to sort them accordingly (by date) and keep all associations tied. It is harder than it sounds.

In this case we have 3 datasets, some comments, some messages and some connections. If we were to put all 3 collections in a list in order of when we gather them, they will be out of order. What we need to do is make one collection that references any type of data we need to list out. What makes this useful is we can also track other information that is helpful to users and not possible if we loop through the actual data. That is what a Polymorphic Association is.

Within the Feed model we need to keep track of the model it will reference, the actual reference to the specific item within that model, and any other information you would like to have. I like to keep track of it’s action, as well as the user who performed that action.

How would this look like in the database?

For this example I will use Ruby to try to show you how easy it is to display a dashboard like interface for your users.

Within the view you can loop and render a custom template for each item, this will give you the desired look that simulates the dashboard feel.

I am going to leave this here, you can create the views however you want. I have this repo stored on GitHub so you can clone it and mess with it however you like. I have uploaded a demo on Heroku for you to see as well.

Recently, a port of OpenCV, a library of object detection functions, was created for AS3 which has sparked a lot of interest and creativity in the flash and flex community. Stemming from this came facial recognition for AS3.

It is often difficult to find useful applications for these new technologies. Luckily, BKWLD was recently approached by .net magazine and was asked to write 2 articles. Jeff Toll, who’s article can be seen in this month’s issue, worked with me to come up with a design for a facial recognition application that will be featured in an upcoming issue of .net magazine. Together we came up with an idea for a virtual window, where the users can essentially fly through a 3D flickr gallery.

For the true experience you can visit the following link (you must have a web cam): http://bkwld.com/headtracking/. If you do not have a web cam, I have uploaded a demo video onto Vimeo at the following link: http://vimeo.com/7092048.

Here is the source if your feeling adventurous.
HeadTracking.zip

There are a couple things to note about the source code. First, this was developed using flex, so if you want use it in flash you will have to set HeadTracking.as as your document class. Second, I did not leave my Flickr API key in the source for obvious reasons. So, you will have to apply for a Flickr API key if you don’t already have one and enter it in the init function of the HeadTracking.as class file where it says “Enter your API key here”. If you find any errors in the source code be sure to yell at me in comments.

The following resources were used:
http://www.squidder.com/2009/02/26/realtime-face-detection-in-flash/
http://www.quasimondo.com/archives/000687.php
http://www.youtube.com/watch?v=Jd3-eiid-Uw

It’s been a two day quest, but I’ve finally gotten our web server to talk to a remote SQL server over VPN.  I wish I could document the steps as a how to (I’d like it for myself if I have have to do this again), but I’ve tried so many things I’m not sure which steps are true dependencies and which are extraneous.  First, the server in question is a LAMP server, running Plesk, hosted at Media Temple.  For the most part, it’s a vanilla configuration.  Here’s some of the things I learned in the process of getting this up:

• The VPN is of the Cisco type, but using their linux software was a dead end.  I couldn’t get it to compile, it needed kernel headers and patches and on and on.  Eventually, I was directed to using VPNC.  There are scripts that convert pcf files to the format VPNC uses.  Also, you can store the VPN password within the config file, which is perfect for my situation.  If I feel like enduring further pain, it may be useful to get this working locally and stop using the Cisco Mac client altogether.
• It turns out you need to be running as root to use VPNC.  Thus, for the users that would be running this, I had to add entries to the sudoers file.  I made it passwordless because I knew I’d be calling it from PHP.

• I had to allow /usr/local/sbin as an open_basedir in php so that I could call VPNC.
• From exec(), I needed to use the full path to VPNC.

• Lastly, and this was particularly painful because I knew I was sooo close at this point, I had to comment out “Defaults requiretty” within sudoers.  When this is on, it prevents you from running sudo outside of the command line.

This was a very frustrating journey so hopefully this helps someone else.  Or me in the future.

SODA's Click 2009 - 10/01/2009

This past thursday (10/1/09) our creative directors, Jeff Toll and Demetre Agres and I had the pleasure of attending the Click 2009 SODA event at the Art Directors Club in NYC.  There we got to hear from amazing boutiques like Unit9 (particularly loved them), Syrup, and Poke, as well as from some of the agency juggernauts like Goodby, CP+B, JWT, and Ogilvy, all introduced and hosted by the after-hearing-him-talk-I-truly-get-why-he’s-such-a-likable-force-in-the-industry Michael Lebowitz (which I am pretty sure I learned is “lEbowitz, not lEEBowitz) from the infamous Big Spaceship.

The topic and discussion points varied from more granular subjects like “Branding with numbers” (which I found surprisingly intriguing) to more general monsters like “What is the future of entertainment”.

First off I have to say what a pleasure it is to hear from such talent in one room, on one day, and in person.  I mean Jason Zada, Lebowitz, and Mike Geiger to name a few…truly a pleasure.

Of all the nuggets of wisdom I can take away from the discussions, what is interesting to me is that despite agency head-counts, annual billings, specific focus, country of origin, or AOR vs. project-based orientation, we are all facing similar issues; digital agencies finding their autonomy from the traditional ones, an ever-changing set of tools, an even more-changing option of techniques and services we have the option to render should we decide to, and a myriad of ways we can manage the whole damn thing.  But here in-lies the beauty, though facing the same obstacles and issues, the lot of us are choosing completely different approaches to the hurdles, and its working.

We have the luxury of working in an industry that is defining itself each day, and that works for me.  After all, what are we if we are not problem solvers?  At the end of the day we are simply choosing what tool we want to solve the problem with.  So I welcome and embrace the luxury of being able to re-define, re-shape, and re-focus. What fun it is after all.

So after a wonderful day with our peers, and a couple others enjoying an amazing city with good colleagues and friends, I am glad our industry is a kid.  It has many options, and oh so much potential.  Im not sure if its the couple cups of coffee, or the Where the Wild Things Are soundtrack I am listening to as I type this, but I love this kid and want what’s best for him too.  So let’s keep talking.

Art Directors Club NYC

For a recent project, we needed to generate a point on a map for an event. Without being able to explicitly click on the map to determine the location, we had to write up a quick geo-location script to find a latitude and longitude for the event. This was quite easy with the Google Maps API.

Firstly, you need to include the Google Maps API. You’ll need to replace YOUR_API_KEY with a valid API key for your site.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_API_KEY&amp;sensor=false" type="text/javascript" language="JavaScript" charset="utf-8"></script>

We decided to use a bit of jQuery action to implement this. Here’s the final helper tool we wrote with some simple jQuery effects. I’ve populated the fields with our Seattle address for testing. Have a look at the source code and then come back:

Demo: Simple geo-coding with google maps and jquery

Here’s the bulk of the functionality with a lot of the effects stripped out. First we make sure jQuery is ready to do be used:

// make sure jquery is ready
$(document).ready(function()
{

Inside the ready callback function, instantiate a new instance of the Google geo-coder class:

var geocoder = new GClientGeocoder();

Then extend jQuery to create the geolocateAddress function. This function simply calls the getLocations method of the geocoder class. If there is a response, you can check the Placemark array of the response for your results. Usually–if your address is well formatted–the first item in the array will be your geo-located address:

$.geolocateAddress = function(address)
{
    // call the getLocations method of the geocoder class
    geocoder.getLocations(address, function(response)
    {
        if (response != null && response.Placemark != undefined)
        {
            var placemark = response.Placemark[0];
            var coords = placemark.Point.coordinates;
            var latLng = new GLatLng(coords[1], coords[0]);
        }
        else
        {
            // handle failure here
        }
    });
}

The important part is checking if the Placemark is set and then generating a latitude/longitude object from the result:

var placemark = response.Placemark[0];
var coords = placemark.Point.coordinates;
var latLng = new GLatLng(coords[1], coords[0]);

To call the code, simply add a hook to a button. In the example, I concatenated an address from the address, city and country fields in the form:

$("#submit").click(function(event)
{
    event.preventDefault();

    $("#address").attr("disabled", true);
    $("#city").attr("disabled", true);
    $("#country").attr("disabled", true);

    // generate the address
    var address = $("#address").val();
    address += " " + $("#city").val();
    address += " " + $("#country").val();

    // call the function with the address
    $.geolocateAddress(address);
});

That’s about it. If you’d like to download the demo, it’s located here. Just generate an API key on Google Maps and replace the $api_key variable at the top of the script.