Put Missing Kids on your 404 Page - Entirely Client-Side Solution with YQL, jQuery, and MSAjax
I noticed a post over at a blog called "The other side of the moon" where the author suggests that we put pictures and details of missing children on on 404 pages. It's a simple and brilliant idea. Millions of 404s are delivered every day. We are reporting on missing pages, but not on missing children. He includes a simple PHP solution. I set out to create an ASP.NET solution, but then realized that a server-side solution wasn't really necessary.
Could I do it all on the client side? This way anyone could add this feature to their site, regardless of their server-side choice. This could make the solution much more palatable to folks who may not be into .NET.
Here's what I came up with. You can see it in action if you request a file that doesn't exist from my site, like http://www.hanselman.com/foo.aspx.
The file is called missingkids404.html and it's just static html. You will need to configure your webserver to serve this page when it needs to serve a 404. For me, as I do run ASP.NET and IIS, I needed to add this to my web.config in the System.Web section:
<customErrors mode="On">
<error statusCode="404" redirect="/missingkids404.html" />
</customErrors>
The file, in its entirety, is this:
<html>
<head>
<title>Missing Kids 404</title>
<style type="text/css">
.sys-template { display:none; }
.missingkid { clear:both; }
</style>
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
Sys.require([Sys.components.dataView, Sys.scripts.jQuery], function() {
$("#missingkids").dataView();
var statecode = "ZZ";
var dataurl = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20From%20xml%0D%0A%20Where%20url%3D'http%3A%2F%2Fwww.missingkidsmap.com%2Fread.php%3Fstate%3D" + statecode + "'%0D%0A&format=json&callback=?";
var data = $.getJSON(dataurl, function(results){
Sys.get("$missingkids").set_data(results.query.results.locations.location);
}
);
});
function getSrc(url) {
var lastIndex = url.lastIndexOf('=');
return url.substring(lastIndex+1);
}
</script>
<p>
<strong>Sorry, the page you're trying to find is missing.</strong>
</p>
<p>
We may not be able to find the page, but perhaps you could help find one of these missing children:
</p>
<div id="missingkids" class="sys-template">
<div class="missingkid">
<img sys:width="60" sys:align="left" sys:src="{binding medpic, convert=getSrc}" />
<strong>{{firstname + " " + lastname}}</strong>, Age: {{age}} from
{{city}}, {{st}}</br>
Contact: {{policeadd}} at {{policenum}}<br/>
<br/>
</div>
</div>
</body>
</html>
I'm using the standard {{token}} syntax as well as one custom syntax with a convert=callback so I can pre-process the data. The source data feed includes an unfortunate chunk of html, rather than a direct link to a picture. I need to strip everything after the last equals sign (=) in order to get the image src URL. That method is called getSrc, and the binding looks like:
<img sys:width="60" sys:align="left" sys:src="{binding medpic, convert=getSrc}" />
If this is useful, the next step is to add geolocation. You can look at http://www.hanselman.com/missingkids404geo.html for the beginnings of a geo-location aware one. The open issue right now is that the missing kids feed works only in the US, Canada and the UK. I would need to figure out now to determine the two-letter STATE code from the geolocation API, which doesn't provide codes in that way. Worst case scenario, I'd have a lookup table of state names to abbreviations.
Enjoy! Thoughts?
About Scott
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
About Newsletter
As a parent, if one of my children were to go missing I'd like to see more proactive involvement in finding them as soon as possible. I'm sure I could find some stats to support my belief that the longer a child remains lost, the slimmer the chances of finding them. I have a bunch of "neat" topics swirling around in my head right now that stew things like GPS, mobile phones, Twitter or Messenger (IM) into a system where anyone who loses a child can tweet it and anyone registered with the system who is in the vicinity gets an IM/Tweet with a picture of the child, their name and what they were wearing at the time. This'll help find them quickly, before they appear on lists like the one you're offering here.
Sadly, like all systems designed for good, I can see "poachers" abusing the system to seek and steal children who stray by accident, especially the very little ones. There are times I just want to give up on the human race - we live with pure evil around us at times.
Going to town with the whole thing, you could use desktop gadgets, IE8 accelerators, iPhone apps, etc to report this information.
I don't see many 404s these days.
In terms of the actual implementation, I think making it more location-based is definitely key to its effectiveness. Personally, my approach to this would be to use some kind of server-side technology for determining where the visitor was located (generally speaking) based on their IP and serving up the appropriate content accordingly. Having some kind of service which provides this and allows anyone to hook it up to their own site through javascript (think Google Adwords perhaps?) would seem an approach worth trying out in my opinion.
Seeing as though "those" are currently only me - lol ...
I wasn't missing the point. Google and Bing are just as actionable "today" as anything else web-based. I was more carrying on the point of Scott's initial comment "Millions of 404s are delivered everyday"... there are other high traffic areas that are even more prolific than 404s.
I was also making the point that was actually more accurately touched upon by Greg - we should put it in more relevant areas. 404s aren't really relevant, they are just cute because of the similarity "missing page, missing people".
And I still don't see many 404s these days, so its not a case of being a "not optimal" solution, its almost non-existant.
I can't say I wouldn't read one or two, but generally after the novelty runs out, most will just mentally 'OK' then hit Back.
http://img88.imageshack.us/img88/1431/ld7179276afab4dca823290.jpg
Glad someone's taken the next step and made it useful.
You need to think about the user here. The user accesses your site looking for information about anything, say, fish hooks. The World Wide Web is just horrible about leading its users off on tangents because of subtly presented but sometimes severe distractions. If you offer something completely unrelated data instead, like missing children, you're showing the user that a) you really don't care about what the user is looking for, you site is distracted by the missing children, and b) the user should now be distracted by the missing children and focus on that now. This is even worse than not showing anything at all except "not found", as at least then the user is still focusing on the fact that they were looking for something.
Instead, do what some web sites do that glean from the URL what you might have been looking for and provide approximations of alternate content.
And do you really think that viewing a 404 page is a social contract to act on anything displayed therein? Do you really think people would be offended?
We don't have the whole "missing kids on milk cartons" around here so to me the concept is foreign. Just curious.
-Matt
What _is_ the rationale? It seems to be: well... it's a useless page now, so we might just as well?
Yeah go ahead, you might as well substitute an even more useless page. If you are concerned about missing kids, add a BANNER to your sites frontpage and have people click through.
(I could think of a more humorist response here, but it involves the word p0rn and I'm afraid people might take it the wrong way. SEO, audience interests, statistics: you do the math)
http://www.sandyspringsga.org/SpecialPages/Page-Not-Found.aspx
Thanks!
What would make a hell of a lot more sense would be a cooperative program with cellular companies where the images of children who were reported missing in your actual area were sent to your phone for free. This puts the image of a missing child in front of someone who might actually do some good (people out and about). People surfing the web either aren't going out anytime soon or are concentrating on getting something done and aren't going to be so moved by compassion as to drop what they are doing and go search their community for missing children.
It's an idea that simply won't yield fruit, but wrapped in the sugary appearance of concern, and that's what makes the concept so offensive.
I find this idea useful, because it raises the public awareness of the issue of missing children and in long term it will contribute towards emergence of higher quality and more dedicated solutions to this problem.
And the engineers working to rid their system of 404's - should they feel guilt, especially if their 404's are frequent?
If I had to spend X amount of effort, I'd like it to be as effective as possible, and the l think the telephone pole strategy is just as easy and more effective.
And now you want to fill them with (zesty?) "advertisements"? Like ... domain grabbers who fill up mistyped urls with their advertisements? Just to distract me and the rest of the world from the totally uninteresting and unimportant things we are just pursuing?
Sorry, but to me that is just another idea born out of the "Won't somebody please think of the (missing) children?"-meme. Add this idea to a sidebar on Facebook/Xing/MySpace/Whatever. That is where I and most people are, most important of all: receptive.
Thanks.
Great idea though
there is also a possiblity to convert inside normal bindings. You can reference the current element with $dataItem. sys:src="{{getSrc($dataItem.medpic)}}"
We already talked at the VSone yesterday. Could you please inform the AJAX team about the quality of the library documentation? That would be great!
Last Seen - with his FATHER; yes, the person who was not awarded custody but saved the child from alcoholic mother.
Last Seen - bus station; the day after finally had enough courage to leave abusive home.
<0.00001% Case: kidnapped by a vicsous mad-man, but still walking the streets, hoping someone recognizes her from a 404 page.
Not saying its a bad idea, but this type of messy business is best left to experts. But, unfortunately, we it ends up handled by goverments.
But I'll bite - Yea! Great idea! We're saving babies!
[I feel good after that last line; the first three paragraphs of my comment made me feel bad]
From a business presepective is awful.
the best thing to do is track 404 pages, log them, and fix them.
A real site should not offer 404 pages other than if the customer made up a url.
In that case, it should direct the customer to the nearest recommended page.
Here is the problem with displaying missing children.
Its depressing, like the st judes or wwf commercials.
And, exposing your visitor to those thoughts can really hurt your visitors thought process while you have worked hard to get them to visit.
This is a great idea for hobby sites, or sites that dont sell anything or relate to a business.
Those sites rarely get good traffic.
What would make this really work, as another reader stated, is having it show up in google search results, or bing results. Instead of public service ads, id rather see missing children there.
Or rather see a 30 second video ad for missing kids on a youtube video, rather than on a commercial site.
Love your blog.
Love that you care.
Sorry to be a negative bastard.
Frank
There is a much greater chance of doing harm than there is of doing any good. That is my experience. Think about it for a minute. No one steals a kid. Unless they love them.
Now back to technology.
I believe it's a great idea.
and by the way your opening at the Cairo Code Camp yesterday was amazing
thanks
Here is more info on my implementation: http://blog.aggregatedintelligence.com/2010/02/use-404-page-to-find-missing-children.html
And here is the implementation: http://www.aggregatedintelligence.com/404.html
i think I'll put it to use. but it probably better to find missing kids all over the globe and not only in the us.
Side note, unrelated: The page displays U+0027 characters escaped with a backslash. Don't know where those come from, though.
This entire idea is misfounded in the idea that a 404 page is a page lacking purpose- and that this cute script gives it one. A key principle of good usability is helping users recover from errors. A 404 page should suggest alternate paths to commonly sought information, trying to help the user get back on the road. Anybody implementing this on a "real" non-hobby website is making a conscious decision to reduce the site's usability.
Further, I agree with SeaCat: the "humor" in this seems to be in bad taste (page not found, child not found). It does seem to mock the plight missing children as opposed to helping. I have to side with the comments that suggest people that really want to help can put a dedicated page on their site with this info.
Maybe you can even provide a direct link to the "Missing Children" page from your 404. Now that would be usable and helpful!
If this technique is not for you or not for your organization, then so be it, don't implement it and move on.
Your negative opinions on the subject are not needed, end of story. They just show an incredible amount of insensitivity and plain out assholishness.
Comments are closed.