Scott Hanselman

Put Missing Kids on your 404 Page - Entirely Client-Side Solution with YQL, jQuery, and MSAjax

February 25, 2010 Comment on this post [51] Posted in ASP.NET | ASP.NET Ajax | Open Source
Sponsored By

image 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.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
February 25, 2010 18:27
Just wish we, as a dev community, had thought of this many years ago!!!
February 25, 2010 18:29
What a great idea. Going through all my sites and adding this. Thank you for passing this along!
February 25, 2010 18:35
I really like this idea. It gives me a warm fuzzy feeling. But...

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.
February 25, 2010 18:37
Not to besmirch the good intentions of the idea, but why not put the missing persons on pages like Google and Bing? They can make use of your current geographical location to post more relevant pictures too.

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.
February 25, 2010 19:09
Great idea. To those saying "I don't see 404s" or "put it on google instead" ... you're missing the point, this is actionable *today* by most people reading this, whether it's the optimal solution or not is irrelevant - it doesn't hurt anything or preclude a more optimal approach.
February 25, 2010 19:10
This really is a great idea. I've often thought that ATMs, gas pumps that have video screens and other places where mundane transactions happen should display a list of missing children.

February 25, 2010 19:13
I echo what the first commenter said - it's such a simple but brilliant idea and now its out there it's a shame we never thought of it sooner.

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.
February 25, 2010 19:14
This is a great idea, it's simple, has no cost, and every website on the net could potentially implement it. This isn't meant to solve all problems with missing children. It's just putting a busted link to good use. It's the modern equivalent to a picture on a milk carton.
February 25, 2010 19:24
We just pitched this to the higher-ups and they approved. Going live with it as soon as we can. Great idea!
February 25, 2010 19:29
"To those saying "I don't see 404s" or "put it on google instead" ... you're missing the point"

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.
February 25, 2010 19:30
I use ipinfodb.com for geolocation by IP. They bring back the full state name, but that can easily be converted to a 2-letter code
February 25, 2010 20:16
Not to trivialize this great effort, but we are, as a whole, bombarded with other dialogs of import throughout our day. Even experienced users rarely pause to read them (i.e. I'm stealing your ID right NOW!!! Click OK below. !Click!)
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.
February 25, 2010 20:21
Brilliant idea. If you can find similar data sources for other countries an international version based on part of the ip address would be great.
February 25, 2010 20:33
This started as a 4chan meme, e.g:
http://img88.imageshack.us/img88/1431/ld7179276afab4dca823290.jpg

Glad someone's taken the next step and made it useful.
February 25, 2010 20:58
I'm not sure I go for this, sorry guys. Yeah, boo all you like. But while this is a cute idea, and might even save a child's life (not likely), if everyone did this it would get really old in a month or two.

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.
February 25, 2010 21:17
Very cool idea. Going to recommend it to my higher ups and add it to my own site as well.
February 25, 2010 21:27
I'm putting this on all my error pages great idea
February 25, 2010 22:11
Real very very cool idea.
February 25, 2010 22:19
Jon, what would the logistics be in deploying your suggestion of a dynamic-404-approximation-content-suggestion-engine across every website in the world vs Scotts script?

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?
Tom
February 25, 2010 23:20
Tom I just think it's a bad idea, unless it's a government or social site. As I said, I think it's a worse idea than showing nothing but 404, as it distracts the user from the focus of your site.
February 25, 2010 23:21
"I think it's a worse idea than showing nothing but 404" .. er .. nothing but "Resource Not Found", rather.
February 25, 2010 23:59
Has any missing kid ever been found by a person who happened to see their picture and thought "ooh, I'll look out for that kid", and then later bumped into them? Seems to me like the chances would be extremely slim.

We don't have the whole "missing kids on milk cartons" around here so to me the concept is foreign. Just curious.

-Matt
February 26, 2010 0:12
Jon Davis: +1

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)
February 26, 2010 0:42
Great idea. Just added it to our site.
http://www.sandyspringsga.org/SpecialPages/Page-Not-Found.aspx

Thanks!
February 26, 2010 2:15
Doesn't work for directories e.g. http://www.hanselman.com/blogs shows standard 404 page.
Joe
February 26, 2010 2:21
I'm going to sound like an asshole, but this is a horribly bad idea because it gives the appearances of community concern and giving back. Not only are web-surfers completely the wrong audience to be targeting for this sort of service but it trivializes the message (and in a morbid, black-humor way: page not found, child not found -- I get it... verrry classy). Moreover, if showing images of missing children was truly effective at helping to find lost kids, why reserve this service to a 404 page? Why not the FRONT page of Facebook, Google, or MSN?

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.
February 26, 2010 2:44
Also doesn't work for non aspx pages http://www.hanselman.com/hello.html
Joe
February 26, 2010 3:13
To enable this for non aspx pages and directories you need to configure the 404 page in IIS. Most hosting providers offer a tool for doing this (could be called 'Custom Errors', or something like that).
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.
Fil
February 26, 2010 4:19
I don't see the harm in it, but question the effectiveness of this. It is actionable *today* but it's also actionable *today* to print out the list and post it on telephone poles. I think more people will see the telephone pole version.

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.
February 26, 2010 7:01
It is not only not effective but a horrible idea. 404s aren't pages I want to see. They are not pages I really am interested in at the moment I see them. They say: Oops, you went wrong!
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.
February 26, 2010 7:53
This is a brilliant idea. I think I am gonna use this idea from now on. I am really impressed.

Thanks.
February 26, 2010 9:28
It seems like a good idea but when you run the demo page it comes with the classic 'Sys' undefined error ..... I really wanted to see it working :(

Great idea though
February 26, 2010 12:24
Hey Scott,

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!
February 26, 2010 15:27
>99.99999% Case:
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]
February 26, 2010 20:57
From a heart perspective this is a great idea.

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
February 28, 2010 10:48
Though I see the point of those who see this as a bad idea. I still think it has a purpose and could actually help. It may be as little as 0.000001% of a chance that a user may recognize a child on the list, or let alone take time to read the entire list. But THERE IS STILL A CHANCE, and that's what makes this worth the try.
February 28, 2010 17:55
Sorry, people, but I still strongly disagree with this idea. Maybe it depends on what your particular life experiences have been; I contend that there is an equal chance that you will screw-up someone’s life BIG TIME by “finding” them as there is that you will rescue a stolen child. None of these children are stolen; most are much better off where they are. Don’t let the government-controlled “protectors of society” get to you – we are not saving babies here. They can have the milk cartons, not our web sites.

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.
March 01, 2010 1:05
Hi Scott
I believe it's a great idea.
and by the way your opening at the Cairo Code Camp yesterday was amazing
thanks
March 01, 2010 9:25
Liked this idea so much that I had to steal it and modify it. I think there is a higher probablility of a person finding/seeing a missing kid if we show only kids from the same state as the person viewing the site. So in my implementation I use the IP to geolocate the user (as most people dont have geo-enabled browsers/computers.
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
March 02, 2010 11:20
I found, it you do not use private 404 page, your web browsers will give your one, a search interface that will redirect your audiences out
March 02, 2010 13:22
great idea.
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.
March 04, 2010 19:20
really wonderful idea!!
March 05, 2010 20:20
I love this! I'm going to make use of this as well. Great Idea!
March 06, 2010 14:35
I'm sorry to join the crowd of people who don't think this isa good idea. First of all, it's much too localized—I don't know how many visitors you get from the US vs. the rest of the world but anyone not from the US will just wonder what the hell this is. And the effectiveness is doubtful at best.

Side note, unrelated: The page displays U+0027 characters escaped with a backslash. Don't know where those come from, though.
March 07, 2010 19:58
Great idea! If you want to make the world a better place, start with yourself. And here is Polish version too: http://tinyurl.com/yfznn5e
March 08, 2010 22:10
+1 for Scott, Seth. +2 for SeaCat.

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!
March 24, 2010 7:56
For the people saying there should be mobile phone alerts about missing kids - the future is now - Amber alerts. Most mobile phone companies won't charge you for the text messages. And yes, iPhonies, there is an app for that.
June 15, 2010 9:20
Just a suggestion, would like to view these via RSS!
July 08, 2010 2:40
For the people saying there should be mobile phone alerts about missing kids - the future is now - Amber alerts. Most mobile phone companies won't charge you for the text messages. And yes, iPhonies, there is an app for that.
October 05, 2010 19:08
Wow, regardless of whether it's a good idea or not, I am actually appalled at the negative responses to this.

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.
Ed

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.