Skip to main content

Making a better 404 page!

The old time 404 Pages are inherently dull. All they are supposed to tell you is: Sorry the file you are looking for is missing. Check spelling, or update Bookmarks. But with a little bit of creativity, you can actually make your 404 page Worthwhile!! Better yet, make it Ajaxy!!

The point is, the did already land on an non existing url! Reasons could be many; the page is in a new location now. or is completely deleted. But you dont want to really close the door on the visitor. Look at google's main site.. (It provides a search box on top. (isnt that what you were there for? in the first place). However, our users dont come to search. They ARRIVE on a link. My Idea is if its a missing spot, Ask the visitor to look around. Help him with a search page built into the 404 page.

One way is to point the 404 to a CGI or server script. Looking at the headers, you will have a pretty decent idea about where your visitor wanted to go. Then, instead of showing a boring message. Show him some search results. Yeah! Also Show the INFORMATIONAL message We dont want the user to look at a spam-like page eh? (:D). The other problem is 404 are executed even when some robotic web-spiders, or DoS attackers do their thing, burning down your bandwidth/resources. You just dont want to burn your server for stupid stupid robotic 404 traffic.

Now, Ajax gives you far more power in this situation. Use the Google Custom Search Engine. and Ajax Search API. I created a very simple one here. What it does is, looking at the url, it runs an ajax search to get related stuff from google. Now you want to HAVE this searrch done on YOUR site only. replace the value of siteToLookFor in the file to something like "*.yoursite.com". Thats it. The html file is droppable into any server. Once you put this file in your site send all 404s to this file, The only condition is that the 404 should NOT be a REDIRECT it should be a referrel (the url in the location barshould not change).

If you find better solutions, comment on! :) click here To see my 404 in action

image by Willem Velthoven

Popular posts from this blog

Javascript: Convert Strings to Binary (and representing in a nerdy way!)

I follow those GoogleDevelopers Videos . Sometime back, in one of the presentations on GoogleIO, there was this interesting string of dots at the bottom of each page of the presentation . They looked like random big and small dots. A similar bunch of dots were also on the T-shirt of a presenter was wearing in another presentation . While it seemed something in the pattern, I could not find what it was. Finally, another presenter cleared the matter that those dots are just binary representation of "GOOGLEIO" (So much for advertizing Google IO, Impressive!). So I wanna do it. Takes me back to days of those DSP classes at school. Nerdy me had to churn some old brain cells. I remember those first programming language classes in Pascal and C when you were asked to do fibonacci series and converting a binary string to ascii codes. That *experience* came handy here: Check it out! Text to Binarize: For those who came to copy the javascript code to convert string to binary,

MySql Copying Table Structures.

Some times you need to copy only table structures across databases. This article describes two ways of doing it. If the whole database schema need to be exported, mysqldump is very effective. A --nodata flag will dump all tables' schema. Like this. mysqldump --nodata -p -u username databaseName But if you want to copy a specific table, individually, you could use "create table like" feature. You could create it even from a different database. However it must be on the same mysqld instance. Like this. create table newtable like oldtable; --Or from a table in other database create table mytable like otherdatabase.tablename;

Add jquery in Chrome console

Many a time, a page you are debugging doesnot have jquery. This simple js will add(or prompt you to overwrite) jquery to any page from chrome console. javascript:if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))(function(d,s){s=d.createElement('script');s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';(d.head||d.documentElement).appendChild(s)})(document);