Edd's Log

Don’t Tell Me, Show Me!

Over on Malarkey’s blog Relly is currently doing a series on posts on how to write copy to convert your audience in to customers. After reading her posts I thought I would chime in with some badly written copy that has been written to target the wrong audience.

modx is, as far as I can work out, some kind of php based framework. However, as a developer who cares about developing websites, after 15 minutes on their site looking for a compelling reason for me to use it all I come away with is some marketing crap about “my clients”.

Even on the page entitled ‘develop’ I was still left wondering what exactly it can do and how it does it.

[…] the MODx project has been concerned (probably overly so) with being a great solution for developers. We still are firmly in that camp today. The resources below should help you get up to speed fast.

The page then goes on to list things such as job listings, the fact they use SVN and a link to the bug tracker. None of these answered the simple questions of: how easy is it to develop using?

Two sites that, as a developer, had me hooked within a couple of moments of finding them were Django and jQuery. On the Django site one of the first links you come across is:

Dive in by reading the overview

This overview shows you real code that can make a Django site run and on first reading its damn easy to make a Django site run. The jQuery website has mastered showing people what makes it awesome as they have this line of code on their homepage:

$("p.neat").addClass("ohmy").show("slow");

With a “run code” button bellow it. In one line and a button they show you how ridiculously easy and quick it is for you to create neat effects and animations. Both of these sites show you their code up front. They don’t hide anything back and it all looks really easy to accomplish something real.

Now I am sure modx is a really good php framework. But in a world with so many php frameworks, having a pretty website is only half the battle, it needs to show developers why its a really good framework.

Previewing Short URL’s

The instructions in how to do this are written for OS X but should translate fine on to any other operating system

With the rise in short url services the internet (but mainly twitter) is becoming a spammers dream. They can now create a URL that comes from a website you trust tinyurl.com, is.gd, bit.ly, j.mp, tr.im, etc. and takes you to myspamsite.com. The first url shortener that really gained traction, tinyurl.com, had a method that enabled you to preview urls. Unfortunately the newer shortening services often fail to provide this service. So when you click on a short url you could be being taken anywhere.

To combat this I decided to create a script that could use the longurl service to display a click through to the actual destination site.

Step 1: Hijack Requests To URL Shorteners

Launch Terminal.app from the /Applications/Utilities folder.

We want to divert requests from the popular url shorteners to your local apache. To do this we need to edit your hosts file.

If you’re using TextMate and have installed the UNIX mate command, then you can edit the file like this:

mate /etc/hosts

You will need to add the following lines to the bottom of that file:

127.0.0.1   bit.ly
127.0.0.1   tinyurl.com
127.0.0.1   tr.im
127.0.0.1   is.gd
127.0.0.1   j.mp

This tells your computer to send requests for those domain names to your local server. Now if you try and go to any of those domains you will should get a message telling you you can’t connect to the server.

Step 2: Configuring Apache

The next thing you need to do is to tell Apache to listen for these requests so it can serve a page for you. To do this you need should edit the httpd.conf to tell it to include the virtual hosts configurations. Start by loading up httpd.conf:

mate /private/etc/apache2/httpd.conf

Scroll to the bottom of that file and there should in a list of external files. You need to ensure the line under the heading Virtual Hosts reads:

Include /private/etc/apache2/extra/httpd-vhosts.conf

With no hash (#) at the beginning of the line. Once you have made that modification save the file and close it. You then need to open httpd-vhosts.conf using the line:

mate /private/etc/apache2/extra/httpd-vhosts.conf

In this file there will two dummy virtual hosts. You first need to comment them out by placing a hash symbol at the beginning of every line. You then need to add the following virtual host:

<VirtualHost *:80>
    DocumentRoot "/Users/YOUR_SHORT_NAME/Sites/expand_url"
    ServerName bit.ly
    ServerAlias tinyurl.com
    ServerAlias tr.im
    ServerAlias is.gd
    ServerAlias j.mp
</VirtualHost>

Changing YOUR_SHORT_NAME for your short name. The only lines that should not start with a hash in that file should then be the virtual host that you have just pasted in and the NameVirtualHost *:80 line.

Once this is done, save that file and close it. You then need to start apache. To do this you can load up System Prefrences, click on sharing, then tick ‘Web Sharing’ (if it is already checked, uncheck it then tick it again so the server gets a restart).

Step 3: Creating the Un-Shortener

Next we need to create the folder that we told Apache to look at in the virtual host. You can do this by typing in your terminal window:

mkdir ~/Sites/expand_url

You then need to create two files to put in there. The first of which is the .htaccess file. This file is hidden from view in the finder so the easiest way to create it is by typing in the terminal:

mate ~/Sites/expand_url/.htaccess

Paste in to this file:

RewriteEngine On
RewriteRule ^.*$ expand.html [PT,L]

This turns on mod_rewrite and sends all requests at a file called expand.html. expand.html is the next file that you need to create. It can be created using the line:

mate ~/Sites/expand_url/expand.html

This file is going to take the url that you are trying to look at and change it into a long url that you can look at before decided whether to proceed to the destination or not. You need to paste the following in to this file.

<!doctype html>

<title>Preview</title>

<script type="text/javascript">
    function expandURL(){ 
        var url = window.location.href;
        var script = document.createElement("script");
        script.src = 'http://api.longurl.org/v2/expand?url='+url+'&format=json&callback=dataLoaded';
        document.getElementsByTagName("head")[0].appendChild(script);
    } 
    function dataLoaded(data){
        var h1 = document.getElementsByTagName("h1")[0];
        h1.innerHTML = '<a href="'+data["long-url"]+'">'+data["long-url"]+'</a>';
    }
    window.onload = expandURL;
</script>

<h1>loading...</h1>

Once this file is saved you have then successfully set up the url expander.

Step 4: Enjoy Knowing Where Your Browser is Heading

Well this isn’t really a step. To test your new expander you can try and load a short url. I find that this is invaluable against being taken off to sites that you don’t know what are. If you got stuck with any of the steps feel free to and I will try and help.