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?
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.
Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.