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.

I'm proud to make a very important announcement today, that this site is now fully SpringLoops-powered. Woohoo! I mentioned before that I'm a mega cheapo and don't want to spend the $9 to get the 1GB plan and that the free 10MB wasn't enough for me. Well they've recently upped their free space to 25MB so I've managed to squeeze a couple of projects into it. Unfortunately you're limited to only 3 deploys a day, so on the days where I'm actually making updates, I'm extremely cautious, on all the other days, I'm finding excuses to use those 3 deploys. Deploying rules really hard! End nerd rant.

On a side note, I'm currently developing my wife's brand new photography website, in which her portfolio will be powered by the Flickr API and some MooTools fanciness. I'll post links and such when it's all ready. Oh and if I didn't mention it, Grand Theft Auto IV rules hard. Those damn mobsters burned down me and my cousin Roman's apartment the other day though, that sucked. There will be vengeance. Everyone have an awesome day!

It's been a crazy month (or so) of work and nothing will snap you in the ass like a strong latte and and an awesome metal album. My best, most productive days are when I can squeeze in a latte (or 2) from my über favorite coffee joint, Blue Bottle Coffee, and blast this album in the earbuds 3+ times a day. Yesss. This is indeed one of those albums that will scare Phil or any other innocent, faint-hearted passerby, but it rocks my pants off. Lots of incredible musicianship, screaming, growling, high-pitched singing—everything a boy could ask for in this one.

I heard about this band a while back with their release Kezia from my old buddy Ryan but I didn't get into them at the time. But, yet again, Colby comes through in keeping me hip with the kids and got me hooked on this one. Thanks again Colby, high 5. Rock on folks...

I'm not doing much for work on the side these days because of this strange desire to "maintain sanity"— whatever that means right? But I do make an exception for very special people. One such project was fairly recently launched called Exposaroonie. It is a really awesome photo community/challenge site created by my wife and her pal Emily.

Don't let the caption give you any dirty ideas with my wife's site, capiche?

They are a couple of talented photographers and decided to collaborate and create this site on the premise of helping aspiring and experienced photographers alike with articles and interviews and with their weekly Exposaroonie Challenge, where you submit your photography based on a different theme every week and then the winner is voted on the following week. I did the design and back end of the site including the logo (which I think is pretty sweet) and the templates were a bit of a challenge because half of the site is run in Google Blogger and half of it on my own server. I personally think my design could be much better, but my limited knowledge of the Blogger template system made it tough, but the ladies love it and I'm sure it will evolve over time.

So go check the site out! Let me know what you think! And if you are into photography, get started with this week's challenge, 'Bad Habits'. Could be fun/gross/awesome! Fungrossawesome!