My pal and fellow Cubano, Juan has always hated how I track my links on this site. When I first started it up, I wanted to create a shared library on here, where I could sync up all of my links from del.icio.us in a table in my local database, and use those links all over, in my posts, etc., track their clicks, and then have a listing of all my links by tag, and, from tracking clicks, also be able to sort them by popularity. It still might happen eventually, but I haven't been thoroughly motivated to finish it up. I used to want to finish it really badly so I could use it for my own purposes. I use Firefox along with the Delicious plugin, and I always want to search links by all of the tags I enter. For example, if I put in 'Subversion Manual' (that combo is used a lot), I only want to see the links that have both of those tags, not either of them. Well it seems with the update to Firefox 3 there was also an update to the Delicious plugin that takes care of this for me. Motivation fully depleted.

Either way, I have been thinking of reworking the link tracking for quite some time. I've been using the format '/links/go/123' to track the links, rather than the URL itself. I think this frustrated Juan because he likes to see his status bar update at the foot of his browser and decide if he wants to go to that link or not. There have been a number of projects I've worked on where link tracking has been asked for by the client, so I decided to throw something together today.

I created a MooTools class called 'LinkTrack' that, in a simple 19 lines of code, scans the page for the links you specify, and, on the click event, sends the link information to a specified URL via AJAX. Here's what the class looks like:

var LinkTrack = {
    track: function(links, url) {        
        links.each(function(item) {
            item.addEvent('click', function() {
                var request = new Ajax(url, {
                    method: 'post', 
                    data: {
                        'url': item.getProperty('href'),
                        'title': item.getProperty('title')
                    },
                }).request();
            });
        });
    }
};

And here's what the function call looks like:

window.addEvent('domready', function() {
    LinkTrack.track($$('a[target=_blank]'), '/links/track/');
});

So here I passed in all 'a' tags with a '_blank' target, so I track every link leading away from the site. You could easily change this to track all links with the class 'link', or whatever else you can think up. I've got this site running in CakePHP, so I made a 'track' method in my 'links' controller that looks like this:

<?php

class LinksController extends AppController {
    
    ...
    
    function track() {
        $this->autoRender = false;
        if (preg_match('/http:\/\/(www\.)?ascendvisual.com(.*)/', $_SERVER['HTTP_REFERER']) && $this->RequestHandler->isAjax() && !empty($_POST['url'])) {
            
            $data = $_POST;

            if ($find = $this->Link->find(array('url' => $data['url'])) {
                $this->id = $find['Link']['id'];
                $out = $this->Link->saveField('clicks', ($find['Link']['clicks'] + 1));
            } else {
                $data['clicks'] = 1;
                $out = $this->Link->save($data);
            }
            
        }
    }
}

?>

I run a check to make sure the request is coming from my own site, that it's an AJAX request (using CakePHP's RequestHandler Component), and that a URL is set. The I scan my links table to see if that URL is already in there. If it is, I increment the click count, if not, the record is created with a click value of '1'. Pretty simple eh?

Feel free to let me know what you think, and, if you'd like, you can download the MooTools LinkTrack class I made by clicking here or over on the right under 'Related Snippets'. That's all for now folks, have a fantastic 4th of July weekend!

Hey folks! It's been a while! Sorry it's been a while but that's just how I roll. I've actually been thinking up all sorts of nerdy subject matter, it's just been crazy as always and I haven't forced myself to post. I finally got myself into a corner to post for you today, awesome right?

It's been live for a while now, but I finally got my wife Ashley's photography portfolio website launched, go check it out! Today I'm going to spill the beans on how I made it, and hopefully give some of you folks some good ideas. It was a fairly quick and simple build using CakePHP, the Flickr API and some MooTools magic.

So the coolest thing about the site is that it's all Flickr-fed. Ashley chose a set of categories she wanted to use and I had her create Flickr sets for each of them. Each category you click on references a specific Flickr set that's pulled in and cached via a nice, reusable table-less Flickr model I created for CakePHP. Why is that even cool you ask? Because I didn't have to worry about handling and storing uploads or anything—the site requires no admin interface at all—and it also works as a bit of extra exposure for her shots, being both on the Flickr site and her portfolio site. The Flickr model I've created has proven useful in a number of cases—I even use it on this very site for when user comments are posted. I basically just disable Cake's table linkage and used a few methods to access Flickr's various API methods.

The most challenging part of the site was the Javascript. If you check the site out, you can see that the image is preloaded (using the MooTools Assets class), the thumb menu is animated, and there are some nice fade transitions in there too. I accomplished it all in a custom MooTools class called 'Photoset'. It ended up being about 180 lines of code—not too bad—and handles all of the javascript on the site—the loading, fades, menu, everything. The load/fade transition was the trickiest part, but I used the Asset class along with MooTools chaining and did it in about 12 lines of code:

this.loader.start(1).chain(function() {
    new Asset.image(load, { 
        onload: function() {
            this.loader.start(0).chain(function() {
                this.photoFade.start(0).chain(function() {
                    this.photo.src = load;
                    this.photoFade.start(1);
                    this.showing.setText((index + 1));
                    this.loading = false;
                }.bind(this));
            }.bind(this));ˇ
        }.bind(this)
    });
}.bind(this));

Basically I fade in the 'loading' indicator, preload the image via Asset.image, fade out the loader, fade out the previous photo, change the photo source, and fade it back up. Whew! Chaining is a little tricky to structure in a nice, readable way, but so nice to use! With MooTools chaining, you can set a stack of time-based functions in line to occur one after the other. It's basically like using an onComplete event to call another function, just much easier and cleaner.

And that's all! Check out the site and you know where to go if you need a good (and sexy) photographer. Feel free to post comments if you have any questions and look out for plenty more updates coming soon.