

Lemmings 404 page - thibaut_barrere
http://www.romainbrasier.fr/404.php?lang=en

======
Cushman
I've said it before, but: What's the deal with 404 pages?

If the content has moved, I should get a 30x redirect. If the server has a way
of guessing what I wanted, I should get 300 Multiple Choices. If the server
knows that what I'm looking for isn't anywhere, I should get 410 Gone. 404 is
supposed to mean that the server has no idea what I'm looking for, no idea how
to find it, no idea where to look.

In that case, I don't want a page to load. I don't want a tab to open. I
_definitely_ don't want to download a Flash game, or a 500kb JPEG, or infinity
many Lemming images. I just want my browser to mark that link as dead and let
me know in as unobtrusive a way as possible, "Hey, you clicked on some
bullshit!" Let me either search the domain or _click something else_.

Not to rag on creative 404s, and I know it's a bit of a pipe dream. Just a
peeve of mine.

~~~
tripzilch
You're heartless, those poor lemmings were plummeting to their deaths!

~~~
egeozcan
Don't you worry my friend, I saved them all: <http://i.imgur.com/EbvgPyT.png>

------
iMark
As much as I love the 404, even more so I adore the immediate response of the
hacker news community to find the best way to save all the lemmings. Bravo!

~~~
mmanfrin
Followed by the inevitable snark denouncing what a waste of time and function
it is.

------
zaius
Save them all! (firefox only)

    
    
        MutationObserver(function(event) {
          $(event[0].addedNodes[0]).mouseover();
        }).observe($('body')[0], {childList: true});
        $('img').mouseover();

~~~
gravitystorm
I just resized my browser to be about an inch wide, and then they all fall in
a straight line past the cursor.

I guess you could call that a workaround :-)

~~~
SonicSoul
hmm... i was planning to run out and buy a taller monitor, but your workaround
just saved me hours!

------
martin-adams
One of my favourite 404 pages was this:
<http://www.homestarrunner.com/systemisdown.html>

~~~
MichaelApproved
That's not not a 404 page (missing page). It seems like it's supposed to be a
500 page (server error) or 503 page (unavailable) but it incorrectly returns a
200 status which means everything is OK.

Edit: Corrected the 50X error information thanks to the responses below.

~~~
Hello71
It is correct for a request for a page named "error" to result in a 200 OK
status meaning that the page named "error" was successfully retrieved.

It would not be correct for a request for a page named "error" to return 404
Not Found if the page named "error" was retrieved successfully.

It would also not be correct for a request for a page that does not exist to
return the page named "error" with a 200 OK status.

~~~
MichaelApproved
1) This page in no way is related to page missing (404). My response that it
is not a 404 page is correct. This page has nothing to do with 404 error.

2) I made an assumption, based on the context, that this page was serving a
role that is used when the server is overloaded or otherwise unavailable. In
that case, this page should not be serving a 200 status, it should be serving
a 50X response.

Now, it's possible that this page is just a demonstration of the error that
would normally be produced when the website is unavailable. In that case,
sure, 200 status is proper since it's not meant to actually be the literal
error page which is served when the site has gone down. It's also possible the
page has logic in it to serve 200 error when requested directly and 50X when
the server is down.

In really, I bet this page is served as-is when the website is unavailable and
sends a 200 error. It's difficult to know whether or not this is true until we
see a real problem with the server.

~~~
estel
It's probably technically incorrect, but the page title is "404 Doodoo error".

~~~
MichaelApproved
Didn't notice the title. That page is all over the place. The discussion the
two characters were having was something like "Don't worry, the page will come
back soon." Meaning, it's just a temporary error.

It's a fun page but horribly executed. The customer has no idea what's
actually happening. Is this a server problem or is the page actually missing?

------
obituary_latte

        var ims = document.getElementsByTagName('img');
        var event = document.createEvent("MouseEvent");
        event.initMouseEvent("mouseover", true, true, window);
        for(var i=0;i<ims.length; i++){
            ims[i].dispatchEvent(event);
        }
    

:(

~~~
tlrobinson

        $("img").mouseover()

~~~
FuzzyDunlop

        window.setInterval(function() { 
          $('img').mouseover(); 
        }, 500);
    

So you can catch the ones that haven't been created yet.

~~~
Cthulhu_
$('img').live('mouseover', function() {});

Same, but nicer, listens to mouseover events on img elements that may not
exist yet. Then again, this will - if I understand correctly - cause the event
to bubble up in the DOM until it reaches the root element, where jquery's live
callback handler will check what element the event took place on and invoke
that callback.

~~~
lazerwalker
You're spot on that's the cleanest conceptual way to do it in jQuery. In more
recent versions of jQuery, though, $.live is technically deprecated (1.7+).
The equivalent new syntax is:

$(document).on('mouseover', 'img', function() {});

~~~
zaius
That creates a event handler for all images on mouseover, even images that
haven't been created yet.

You want to trigger the mouseover event, not bind to it. And you want to
trigger it after the image has been inserted. Unfortunately there's no jquery
event for dom insertions. But on firefox you can use a MutationObserver:

    
    
        MutationObserver(function(event) {
          $(event[0].addedNodes[0]).mouseover();
        }).observe($('body')[0], {childList: true});

~~~
lazerwalker
Whoops, you're 100% correct.

------
rplnt
It's much easier if you resize the tab - they all fall in a nice little column
(and it doesn't change if you resize it after the load).

~~~
foxbunny
This is better than any of the solutions using JavaScript!

------
dougk16
Obviously this is taken to a fun extreme, but it reminds me of a good
practice: error pages should be treated as yet another way to engage with your
visitor. Too many times I see people relying on the ugly default error pages
provided by a web framework.

------
mitchi
best 404 page i've seen ! I ended up playing.

Code is pretty neat. I thought you'd need more lines than this.
<http://www.romainbrasier.fr/js/lemmings.js>

~~~
hk__2
`this.img=eval($('.last'));`

Why is he using eval here?

~~~
vizon
I have no clue, and it's bothering me.

MDN says: >> If the argument of eval() is not a string, eval() returns the
argument unchanged.

I copied the code and tried it both ways, saw no apparent difference. I don't
think it does anything.. I could be wrong...

------
ComputerGuru
Half on-topic, half off-topic: WebGL Lemmings port:
<http://webglgaming.com/lemmings/index.php>

~~~
Cthulhu_
Actually, that is a copy of DHTML lemmings from before the age of WebGL, Ajax,
CSS sprites (alistapart only came up with an article about CSS sprites a year
later), html5, or any of that fancy modern stuff kids these days play with.
The original is at <http://www.elizium.nu/scripts/lemmings/>.

And background info / blogpost, written seven years later by the author:
[http://crisp.tweakblogs.net/blog/3881/dhtml-lemmings-
primer....](http://crisp.tweakblogs.net/blog/3881/dhtml-lemmings-primer.html)

~~~
salad_fingers
Here's a more up-to-date version which uses HTML5 and AJAX -
<http://bombsite.org/jslems/>

------
krizan
Tested in Chrome Version 24.0.1312.52 m

    
    
      var savedCount = 0;
      var saveFromDeathInterval = setInterval(function(){
      	for(var i=0;i<tabLemmings.length;i++){
                var lem = tabLemmings[i];
                if(lem.etat == 'tombe'){
                   lem.etat = 'para';
                   lem.paraOpen();
                   savedCount++;
                }
      	}
            if(savedCount == 404)
            {
               clearInterval(saveFromDeathInterval);
            }
      },2000);

------
rsingla
Not sure if I'd count it as "best ever" but it was amusing. Definitely a
subtle way to just have fun.

------
freethejazz
well, that's the longest amount of time I've spent on a 404 page...

------
snu
Great page, only thing that its missing is the nuke button!

------
adrockdust
What would you say if I told you I saved 396 - manually?

~~~
drhodes
I'd say you used a tablet.

------
__abc
I feel bad the lemmings splat and die :/

~~~
thibaut_barrere
You could write a script to save them all!

~~~
__abc
I wrote that prior to realizing it was a game :) I can now save a lot of them.
I feel much better.

------
andrewflnr
This is really hard on an iPad. You can trigger a mouse over with a light
touch, but it's not reliable.

------
oboizt
Way better than a simple "Oops, page not found, blah, blah, blah"

------
rjzzleep
DUDE, do you mind me taking this page? :D

------
zopticity
So many lemmings. Gotta catch 'em all!

------
bryceneal
in chrome console:

winCount = count = 404; while ($('img').length > 0) { $('img').remove(); }

------
housey
You can't save them all! :|

------
tantalor
Solid 6 FPS in Chrome :(

