I decided I'd add a little something to my site that I'll call 'Nerdy Morsels'. Working with code all day, I'm bound to stumble on weird stuff here and there that will throw me for a loop and force me into hours of debugging over something insanely simple. Something just like this happened today (though it didn't take me too long to figure out) and I figured I'd share it with you. You might think some of these posts will be the most retarded thing in the world, but likely so do I, but I hope they help someone.

I was working on some MooTools Javascript magic today, applying some events to an <a> tag to animate open a menu:

<a id="btn">Click/blur me for some stuff to happen</a>

Basically I wanted the menu to expand onclick and I was trying to work some trickery to hide it onblur:

window.addEvent("domready", function(){
    $("btn").addEvent("blur", function() {
        // Do some stuff when focus is removed
    });
});

You might already see the problem, but I was setting both 'focus' and 'blur' events with no result, and I ran a few circles trying to figure it out. The simple reason why? I did not set my 'href' property! If you want blur/focus events to occur on a link element, you have to set one! I simply added "href='#'" to the tag and it worked fine. Obviously when you're thorough with your markup you'd almost never have no 'href' property in a link tag, but since I was just using it to trigger an event, I didn't think too much of it.

Simple as that—that concludes my nerdy morsel for the day, hope it was nerd-liscious for you...

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!