Lemmings 404 page

http://www.romainbrasier.fr/404.php?lang=en

by thibaut_barrere • 14 years ago

320 73 14 years ago

romainbrasier.fr

ComputerGuru• 14 years ago

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

funkaster• 14 years ago

DHTML lemmings? DHTML? is this from 1998? :D - Oh, sorry... it says 2004. I don't think this is WebGL.

[edit] format

Cthulhu_2• 14 years ago

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

salad_fingers• 14 years ago

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

dougk16• 14 years ago

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.

rsingla• 14 years ago

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

mitchi• 14 years ago

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• 14 years ago

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

Why is he using eval here?

vizon• 14 years ago

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

obituary_latte3• 14 years ago

    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);
    }

tlrobinson2• 14 years ago

    $("img").mouseover()

obituary_latte3• 14 years ago

Wait...jQuery is available??

double :(

FuzzyDunlop• 14 years ago

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

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

SonicSoul2• 14 years ago

setInterval( function() { 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); }}, 2000 )

oboizt• 14 years ago

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

__abc2• 14 years ago

I feel bad the lemmings splat and die :/

thibaut_barrere• 14 years ago

You could write a script to save them all!

__abc2• 14 years ago

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

timinman• 14 years ago

None died on my watch:

var saveTheirSouls = function() { $('img').trigger('mouseover'); setTimeout( function() { if ($('img').length > 1) { return saveTheirSouls() } else { return false; } }, 1000); }; saveTheirSouls();

martin-adams• 14 years ago

One of my favourite 404 pages was this: http://www.homestarrunner.com/systemisdown.html

MichaelApproved3• 14 years ago

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.

fixedd• 14 years ago

500 isn't server busy, it's server error.

Hello71• 14 years ago

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.

DLWormwood• 14 years ago

"Last Updated 12-22-10"

Wow. I guess the income from the swag (and their 15 minutes) ran out.

andygcook• 14 years ago

This is actually Homestar Runner's 404 page. Still a good one (warning - has sound)

http://homestarrunner.com/lkjsdflkjsdlkjklfjsdf.html

freethejazz• 14 years ago

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

zopticity• 14 years ago

So many lemmings. Gotta catch 'em all!

rplnt• 14 years ago

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• 14 years ago

This is better than any of the solutions using JavaScript!

iMark• 14 years ago

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• 14 years ago

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

vidarh• 14 years ago

Personally I got so sick and tired of Lemmings back when it was released that I find a feeling of peace by letting them all fall to their death.

tantalor• 14 years ago

Solid 6 FPS in Chrome :(

bryceneal• 14 years ago

in chrome console:

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

Cushman• 14 years ago

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.

watty• 14 years ago

Well I do think that "404" should be more visible but everything else is just part of design. It's like complaining that blogs should be just text or that CSS3 is pointless. It's design, it's interesting, I like it.

TheZenPsycho• 14 years ago

if you feel the point of "design" is simply to make something look pretty, or interesting, then you missed the point.

philip1209• 14 years ago

I use Cloudflare's 404 pages feature, which incorporates possible intended destinations. I haven't had a chance to make a custom 404 page (e.g. with Google's 404 widget), so this gets the job done.

e.g. http://www.philipithomas.com/does_not_exist

cypher543• 14 years ago

Is that page customizable in any way? My first impression is that it looks like a parked domain landing page, which I instinctively ignore and close immediately.

tripzilch• 14 years ago

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

n3rdy• 13 years ago

I didn't have a choice, according to CFAA I was probably breaking the law just viewing the page!

egeozcan• 13 years ago

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

joetech• 14 years ago

What it boils down to is that 403, 404, 500, etc. pages are there to identify a problem loading the resource you're after. In the case of a 500, I might agree, but with the 404, you're getting what it's supposed to give you, and that's a heads up that the url you were shooting for was not found. Some companies get creative while others create useful links and guesses, but either way, you got the intended message, "not found".

adrockdust• 14 years ago

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

drhodes• 14 years ago

I'd say you used a tablet.

zaius2• 14 years ago

Save them all! (firefox only)

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

jasonkostempski• 14 years ago

Much cooler than mine. I just ran

    $('img').each(function() { $(this).mouseover(); });

every few seconds. Something cool should have happened.

jontas• 14 years ago

I just did:

    setInterval( function() {$('img').trigger('mouseenter'); }, 100 );

(probably burning up my cpu)

chadscira• 14 years ago

pretty awesome, this works in chrome

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

gravitystorm• 14 years ago

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 :-)

SonicSoul2• 14 years ago

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

skiplecariboo• 13 years ago

aha did that too, jquery style :

$('img').trigger('mouseenter')

andrewflnr• 14 years ago

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

rjzzleep• 14 years ago

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

housey• 14 years ago

You can't save them all! :|

snu• 14 years ago

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

krizan• 14 years ago

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);

Lemmings 404 page

Related Stories