Category: PC Nerding

After my previous article about shortening urls using htaccess, today I’m posting a little JS snippet that will allow to shorten urls, using a JSON array to store shorter and longer urls. The script will look in url parameters for a short url and redirect to the associated longer url. Have a look:

<!-- // Function declaration
function shorturl_redirect() {
	// This JSON array contains all the shorturl/url pairs
	var urls =[	{ "shorturl":"?lndm" , "redirect":"http://www.lanoiadimuu.it" },
			{ "shorturl":"?example" , "redirect":"http://www.example.com" },
			{ "shorturl":"?twitter" , "redirect":"http://twitter.com/lanoiadimuu" },
	// Get the url parameter
	var shorturl = location.search;
	// If there's no url parameter stop script execution
	if(!shorturl || 0 === shorturl.length) { return; }
	// Now the function will look though urls array and if a valid shorturl is found it will redirect the browser to the longer url
	for(i = 0; i < urls.length; i++) {
		if(shorturl == urls[i].shorturl) {
			window.location.replace(urls[i].redirect)
			break;
		}
	 }
}
// Function call
shorturl_redirect();
// -->

Now for an example, if you point your links to www.yourexample.com/?lndm or www.yourexample.com/index.html?lndm the script redirect your browser to this site homepage.

Some quick notes:
- It will work on any hosting/subdirectory/webpage/cms/browser combination, unless the visitor is actively blocking JavaScript (eg. NoScript plugin on Firefox). All php cms still need to be fully loaded by the hosting environment before serving the script.
- I suggest placing this snippet (or .js file) between head tags, ideally you want the browser to stop loading html and go to the provided link.
- You can wrap the code into a JS anonymous function, since the code needs to be executed only once.
- The script is really small in size: the above example is only 834 bytes including comments. Byte size will vary according to your array size and url lenghts, for example I made an array with 50 entries and it was 5,3kb.
- It does not require additional libraries, eg. jQuery, or additional url shortening services, eg. Bit.ly or Yourls.
- Depending on the behavior you may want, you could change window.location.replace with window.location.href . For more information read here.

This will be a quick post.
If you, like me, really can’t read white text on black background (or can’t read purple on slighty darker glittering purple. Yes, I’m talking to you, MySpace nostalgic!) I have a quick solution for you: don’t and avoid headaches . If a site has a crap color setting, you probably can find the same copy-pasted content on other sites. If can’t find the same content on properly colored sites, use the awesome Web Developer Toolbar, available for both Firefox and Chrome (Opera too, in case your are looking for other NON-IE alternatives 🙂 ).

Once this plugin is installed and activated a new toolbar will appear. From there open the Disable menu and activate the Disable Page Colors option. Et voilà! Everything will transform into a bland black text on white background. Don’t let a bad developer decision turn you down on content!