It is designed to leverage the CMS and category tagging aspects of WordPress to make it super easy for him to add photos and have the flexibility to display them wherever he needs them.

The front end queries the DB filtering by category tags which correspond to the different sections of his site. Adding a new category will create a new tab on the top linking to a slideshow which displays all the photo posts that have that category tag. This allows him to easily share photo collections across sections by giving photo posts multiple tags. This also allows him to still have a blog section by tagging the post with a blog category tag.

For the UI, I am using jQuery to create a light weight slideshow for users to either scroll through the images or if you look closely click on the little play button on the bottom right corner to run through the slideshow automatically (This feature was added specifically for Dan to show off his site to potential clients which is why it is more of a discoverable feature).

Blinklab is a digital retouch studio based in San Francisco and they hired me last year to build their site. The site was built using resourcespace an opensource php digital asset management system. I extended the system to include a templateing system for the front end so that they can both use the system as a cloud based storage and cataloging system and a consumer facing website. Design was done by them and I did all coding – PHP/HTML/CSS. I also set up their in house server and deployed their site.

and after doing a little poking around and reading up on it I decided that I wanted to try my hand at creating a little app and deploying it on my personal server just to see how easy node.js is to use as a viable solution for future projects.

Enter the Russian River Beer Finder

You can see the app here: http://www.otterbrau.com (hopefully it is up when you check it out)

Problem:
I like Russian River Brewing Co. beer but their beer is super hard to find because they are a small micro-brewery in Northern California (Santa Rosa, Ca.) and have limited production. It would be awesome to have an app that will tell me if I am near a store or bar that sells their beer.

Solution:
Create a small web app using node.js to pull stores and bars from a database of Russian River Brewing Co. beer resellers. This app needs to be able to open a connection to a mysql database and return the proper data in the proper format ie JSON to the front end so I can then construct a google map and list of stores in California in the browser using JavaScript.

Luckily node.js makes creating a service that listens on a specific port that queries the database and returns JSON pretty easy…

For the data, I found that Russian River publishes their reseller directory on their site in a table based format. It wasn’t hard to grab that data, format it into a suitable format to import into mysql. — I converted it to csv, created the table with the proper fields and did a standard import.

Once I got the data in the database I constructed my node.js server. I am using node.js v.0.2.2 yea out of date by now… I am needing to update that… maybe my server will crash less… anyways here is the code to create the server. Check out the comments for explanation of what everything means. If you are following along at home you will need to get node.js from here and you are also going to want to download and install npm, the node package manager and the node mysql package. There are a couple but they pretty much work exactly the same. You can search for them here.

var gently = new (require('gently'));

var  sys = require("sys"),
http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs"),
events = require("events");

// Create node.js server
http.createServer(function(request, response) {
// Require mysql plugin
  var Client = require('mysql').Client,
  client = new Client();
// MYSQL username and password
  client.user = 'foo';
  client.password = 'bar';

//client.debug = true;
// Connect to the db
  client.connect();
// This grabs the pathname after the base url from the request.
// i.e. the /beer after http://www.otterbrau.com
  var uri = url.parse(request.url).pathname;
  if(uri === "/beer") {
// do the mysql db stuffs
    client.query('USE russian_river;');
    client.query(
    'SELECT * FROM sellers',
    gently.expect(function selectCb(err, results, fields) {
    if (err) {
     throw err;
    }

    response.sendHeader(200, { "Content-Type" : "text/plain" });
    console.log(results);
    response.write("getMarkerData("+JSON.stringify(results)+")");
    response.close();
    client.end();
    })

   );
  }
  else {
   response.write("oh no you didn't!");
  }
// this is the port the server listens on
}).listen(4020);

sys.puts("Server running at http://localhost:4020/");

Not that bad, huh? Less than 50 lines of code and you have a server that queries a mysql database and returns the results as JSON wrapped in a callback function called getMarkerData… To start up your app you can do one of two different things. You can actually create a bootable service where you can start and stop your server by going start {appname} or stop {appname} or you can use initctl start {appname} initctl stop {appname} I prefer the former solution. For more info on how to do this check out Kevin van Zonneveld’s blog. Now I am using Ubuntu server 10 so this only really applies to that… im sure their are similar or exactly the same ways to do this on other flavors of linux, OSX or heaven forbid Windows…

Now to the front end.

I created an basic HTML page which uses JavaScript to ping my node.js server for the JSON and then renders everything on the front end using the google maps api and my own rendering functions.

Here are my scripts… I’ll leave it to you to check out the full HTML here to see how it all works together.


  var map;
  var markersArray = [];

// Initialize the google map
  function initialize() {
// Center the map and create a marker at the RR brewery in Santa Rosa
    var rrbrew = new google.maps.LatLng(38.441287, -122.71162);
      var mapOptions = {
      zoom: 7,
      center: rrbrew,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new     google.maps.Map(document.getElementById("map_canvas"), mapOptions);

// RR Brewery Marker
    var marker = new google.maps.Marker({
      position: rrbrew,
      map: map,
      title:"Russian River Brewery"
  });
  var contentString = "Russian River Brewery"
  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

// Make JSON call to my node.js server for beer listings
    $("<script/>").attr("src", "http://www.otterbrau.com:4020/beer").appendTo('head');
    }
  function addMarker(location, placeName, sellerAddy) {
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      title: placeName,
      html: "<strong>"+placeName+"<br /></strong>" + sellerAddy
    });
    var infowindow = new google.maps.InfoWindow({
      content: placeName
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(this.html);
      infowindow.open(map, this);
    });
    markersArray.push(marker);
  }

  function getMarkerData(data) {
    var city;
    var cityComp;
// Loop through Sellers and construct both map markers and business listings separated by city
    for (i in data) {
      var sellerLocation = new google.maps.LatLng(data[i].latitude, data[i].longitude);
      var sellerName = data[i].name;
      var sellerAddy = data[i].address+" "+data[i].city+", "+data[i].state+" "+data[i].zipcode+" "+data[i].phone;
      addMarker(sellerLocation, sellerName, sellerAddy);
      cityComp = data[i].city;
      if (city == cityComp) {
        city = cityComp;
      } else {
        $('<div/>').attr('class', 'rr-city-blk').append("<h2>"+cityComp+"</h2>").appendTo('.rr-body-hldr');
    city = cityComp;
  }
  $('.rr-body-hldr').append("<div class='rr-bus-listing' onclick='moveToSeller("+data[i].latitude+", "+data[i].longitude+");'><div class='rr-loc-name'>"+data[i].name+"</div><div class='rr-addy'>"+data[i].address+" "+data[i].city+" "+data[i].state+" "+data[i].zipcode+"</div><div class='rr-phone'>"+data[i].phone+"</div></div>");
  }
  $('<div/>').attr('class', 'clear').appendTo('.rr-body-hldr');

// Make seller listings clickable
  $('.rr-bus-listing').click(function(){
    $.scrollTo(0, 3000);
  });
}

function moveToSeller(sellat, sellong) {
   var centSel = new google.maps.LatLng(sellat, sellong);
  map.setCenter(centSel);
  map.setZoom(15);
}


And that is it…

Conclusions:
node.js is pretty cool, pretty fast and pretty easy to develop with but it is also pretty unstable. My server crashes every day or two… I have to continually restart it. Now it ain’t all bad because this is not a commercial app I am not going to release to the world but it does make me weary about using it as a real world solution just yet.

So you use Zootool to catalog your design inspiration but it would be cool to place them on your site, right?

Well you’re in luck. Zootool has nice little JSON api which allows you to query your account and pull your feed in JSON (you can do a ton of other things too) and in less than 20 lines of code I can show you how to do it.

Here is an example:

This code requires jQuery, mainly because I like how jQuery makes it easy to create elements and iterate through JSON but if you know javascript, you can totally do this without it… and you need to sign up for a developer account on zootool.com.

Once you have a dev account and your apikey, you are ready to go.

Here is the code:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<!-- This is where your feed images will go -->
<div class="zooToolList"></div>

<!-- Create JSON request and attach to the top of the document -->
<script>
var script = document.createElement('script');
script.src = 'http://zootool.com/api/users/items/?apikey=yourApiKey& amp;username=yourUserNam&limit=10&callback=zooRsp';
script.type = 'text/javascript';
var head = document.getElementsByTagName('head').item(0);
head.appendChild(script);

<!-- Callback function -->
function zooRsp (data) {
$.each(data, function(item) {
$("<a/>").attr({
href : this.permalink,
target : '_blank'
}).append(
$("<img/>").attr({
src : this.thumbnail,
'class' : 'zooThumb'
})
).appendTo(".zooToolList");
});
}
</script>

just replace yourApiKey with your api key and yourUserName with your username.

Here is a stand alone version that you can copy and paste the code out of…

How it works:
Basically this code appends your API request to the top of your HTML file, which fires the query, and the returned object is a JSON object with all of your data with a callback function attached to it called zooRsp. The zooRsp function takes the JSON object and just loops through it and creates the elements based on the data and plunks them in the zooToolList div…

all you have to do is style up the resulting links and images to your liking and you are done…

There is a lot of “design resource” sites out there from design blogs like smashingmagazine.com, webdesignledger.com and alistapart.com to cool tools like ajaxload.info and css-tricks.com/examples/ButtonMaker but zootool has to be one of my favorites.

Basically you can break the site into 3 parts.

1. This really cool script that you bookmark in your browser that injects javascript into the page and allows you to capture a webpage or individual image or video resources from that page and then save them to your Zooltool collections.

2. Your collection of images and resources that you can come back to and browse for inspiration

3. A cool public feed of other users inspirational images that you can see what you are missing in your everyday browsing of the web

(actually there is a fourth… their developer api so you can plug your feed into your site or whatever)

This site is awesome. The usability of the site is superb which makes it really easy to leverage this site in my everyday design life.