It started with a simple question:
Ever come across a suspicious short URL and wanted to know where it really goes?
I'd just encountered one too many bit.ly links, and decided that I wanted to know where it went before I clicked on it. It's a simple exercise to find out (you can probably do it in one line in Linux, for example), but I thought I'd use it as a way to learn something new.
After reading more than a few How-To articles, I was able to cobble together a simple web application for tracing the redirect logs of a given URL.
I found that each individual how-to raised more questions than it answered, but by combing through a few of them I was able to get things sorted out. The main challenge was understanding how the "ng-*" data parameters activated regions of a page & tied them to the proper controller. To be honest, I'm still a little bit fuzzy on the cleanest way to handle that. Moreover, by having an application in mind before following a how-to post, I found it difficult to synthesize the behaviour I wanted from the concepts and snippets in the how-to articles - they all had their own end goals in mind, which didn't entirely line up with my application's concept.
The articles I found most useful:
With all that squared away, a bit of Bootstrap magic got the interface ready to go:
The "Show Where It Goes" button drops into an AngularJS controller, overriding the default form submit. The controller talks to my "/deref" endpoint on the Silex side of things, and receives a JSON output containing the resulting redirect log - or else an error message.
AngularJS's neat Model logic automatically fills in the fields in the results box:
Since there isn't a full page refresh when the form is submitted, the results box just pops up beside the form.
Normally I would host a demo of the app and let you click straight over, but given that it's actually going out and talking to remote servers based on user input, I wouldn't be comfortable with the liability if the hosted instance were to be abused.
UPDATE: I decided I'd take a shot and put up a hosted instance, so now you can give deref a spin at http://deref.link (please be kind)
To check out the project source or host your own copy, head over to the GitHub page, which has some installation and usage instructions.