interface

This is not a planned continuation of the previous post. I thought about making this shortening service a few times before but I admit the catalyst was the previous post.

TLDR: this is it hvm.pw.
TLDR2: yes, the trick in the previous post is allowed but there is a limit on the size of the URL (~8kB). I’m working on raising that limit just for the heck of it.

What it does

My first plan was to create an URL shortening service which yields pronounceable URLs. That way one could tell the URL verbally to someone else. It can also help if you’re trying to copy an URL from the computer to a phone or something with cumbersome input. It’s easier to remember and write something that rolls off the tongue (klondike vs yxrkt).

The project started with just that, the shortening of URLs and producing somewhat readable URLs. During development I started to get frustrated with the number of steps I needed to take to test my service and the UI I created. I then started to improve the UI a bit.

The first step was selecting the URL when clicking on it but shortly after I changed it to selecting it on hover. Then one night it hit me that the slowest and most annoying part is selecting the text box and pasting text in there. I realised that I can (and should) streamline the process as much as possible.

Now, the user interaction looks like this:

  • user enters site
  • user pastes (using CTRL+V) the URL
  • the page automatically requests the short URL (no action required from user)
  • the resulting short URL is preselected, waiting for user to copy (using CTRL+C)
  • user copies the short URL and goes on his merry way
  • (the URL still gets selected on hover if the user accidentaly clicks somewhere)

This is the least complicated flow one can have in a webpage because browsers don’t allow access to the clipboard (the location where data is stored when one copies something). There are ways to get around it using flash or java but those are also limited – they require some user action (a click) making the workaround useless.

About the implementation

I have apache running for managing virtual hosts and serving static files. The dynamic content is created in python with cherrypy. The database is postgresql (using psycopg2 in python). Since the interface is very light and simple I opted to write the html code directly in the python methods and not use any templating engine.

There are basic limitations on the number of accesses and URLs created in a short period of time.

The “image hosting” trick

Yes, I’m allowing the use of the trick described in the previous post but I ran into issues with raising the limit on the size of the URL. I’ve narrowed the problem down to mod_proxy, an apache module that I use to communicate with my cherrypy server. The solution is using mod_wsgi, a custom python interface for apache. Once I set that up, I will write another post or update this one.

It’s worth mentioning that the URLs are actually properly received and saved by the server (up to 1MB in size), it’s just that when the user opens the short URL the large URL gets clamped to about 8kB. This is the size of the buffer mod_proxy uses when parsing the response of the inner server.

In conclusion

If you have questions or suggestions on how I can improve it, please leave them in the comments below. If you want to stress test and/or test the security you are also welcome to do so :D.

I’d especially like suggestions on colors, I suck at choosing colors apparently.

The code is open source, you can find it here: https://github.com/hvm2hvm/urldable.