Google Blogoscoped

Forum

The Number of Google Employees...  (View post)

Charles [PersonRank 0]

Thursday, February 7, 2008
6 years ago5,681 views

Someone is bored!

Datrio [PersonRank 1]

6 years ago #

Suggestion: generate this page with JavaScript and use one transparent PNG image, with different colored backgrouds.

Or I'll do it when I'll get back home ;)

to make it faster [PersonRank 0]

6 years ago #

just use div and css with background image url instead of img.

Philipp Lenssen [PersonRank 10]

6 years ago #

> Suggestion: generate this page with JavaScript and
> use one transparent PNG image, with different
> colored backgrouds.

Yeah, I pondered that, but usually try go for accessibility (and even added alt attributes so you can turn off images, not to say that's a common use-case for that page!). But maybe in this case the dramatically reduced file size would make it more accessible :)

> just use div and css with background image
> url instead of img.

But that would get rid of the randomized color order effect wouldn't it?

Benjamin [PersonRank 0]

6 years ago #

I guess the Javascript version would probably be the smallest in size but could lead to problems if the browser hangs while adding thousands of elements to the document. Using divs could save some space but would reduce accessibility. I think one of the things which you could easily do to improve the size is to move the pngs to the employees folder and then have src="1.png" instead of src="image/1.png". This should save you about 80KB on the document size. Additionally you could gzip the html page and do a redirect to the gzipped page when the browser supports it.

So the colors are really randomized? I somehow tried to find a hidden message or something in it ;)

I hope you keep the page up and update it from time to time. Would be funny if I someday in the future I would work at Google and can say "the second red guy in the 600th line is me" ^^

Philipp Lenssen [PersonRank 10]

6 years ago #

> So the colors are really randomized?

They are partly randomized, partly fixed :)
(But no, no hidden message I'm aware of :))

> I think one of the things which you could easily do
> to improve the size is to move the pngs to the
> employees folder and then have src="1.png" instead
> of src="image/1.png"

Done, good idea!

Kevin Fox [PersonRank 4]

6 years ago #

I think you should run a quick competition to see who can re-create this page using the smallest number of bytes, with bonus points for no-javascript support.

Philipp Lenssen [PersonRank 10]

6 years ago #

OK, the contest is on :)

I suppose a JavaScript document.write loop without using alt-texts would go pretty far.

Here's the PHP that created the page by the way (updated to latest version), you can see the first 6 person images are in "Google logo order":

$sequence = array(1, 2, 3, 1, 4, 2);
$counter = 0;
for ($i = 1; $i <= 16805; $i++) {
   $n = ($i <= count($sequence)) ? $sequence[$counter++] : rand(1, 4);
   echo '<img src="' . $n . '.png" alt="*" /> ';
}

Tony Ruscoe [PersonRank 10]

6 years ago #

Kevin, that reminds me of something we did a few years ago where we tried to create a page that would provide a box to search Google but with the least amount of (non-validating) HTML as possible. The results were impressive!

Philipp Lenssen [PersonRank 10]

6 years ago #

> Kevin, that reminds me of something we did a few
> years ago where

Think it's this one:
blogoscoped.com/archive/2005-0 ...

Tony Ruscoe [PersonRank 10]

6 years ago #

That's the one. I just found it too. It's a shame g.cn redirects, otherwise that would reduce its size by another 2 bytes!

Tony Ruscoe [PersonRank 10]

6 years ago #

> OK, the contest is on :)

I assume the number of bytes has to include all images, stylesheets, javascript, etc? And does it need to validate?

Philipp Lenssen [PersonRank 10]

6 years ago #

Nah, no accessibility and validation needed for the contest. The page should look roughly the same as now tho :)

On a totally unrelated issue, are Moire patterns supposed to be self-referential? I just made a screenshot of the whole page and zoomed out of the screenshot in PhotoPaint, only to see new persons forming out of the groups of person images (not sure if that is Moire actually). The white part you can see below is the full page length of 1280 pixels, zoomed out, the gray part is PhotoPaint.


blogoscoped.com/files/google-e ...

Haochi [PersonRank 10]

6 years ago #

Javascript (135 bytes, not including the SCRIPT tag):

c=Array('F00','0F0','00F','FF0')
for(i=0;i<16806;i++){
   document.write(" <u style=background:#"+c[Math.floor(Math.random()*4)]+">G</u>")
}

googlified.com/files/temp/visu ...
It runs pretty quick actually.

TOMHTML [PersonRank 10]

6 years ago #

I've recognized Matt Cutts! :-P

If the page is too long to load, you can see the evolution here:
zorgloob.com/2008/01/evolution ...

Tony Ruscoe [PersonRank 10]

6 years ago #

OK... I'm *almost* there in 133KB with NO external files... and it validates (tentatively):

blogoscoped.com/files/more/emp ...

I just can't get the men to stand next to each other while retaining their dimensions. I'm sure there's some trick to do that with CSS but display:inline doesn't work. I tried display:table-cell too but that didn't work either.

I could actually save some space (and make it work in IE) by using an actual image rather than the data: URI scheme but I figured that reduces HTTP connections and therefore makes it load quicker...

ash [PersonRank 1]

6 years ago #

Now make a page to visualise the number of people with adsense accounts...

Philipp Lenssen [PersonRank 10]

6 years ago #

That is some interesting source code Tony... can you elaborate on what you did?

By the way, can't you use "{ display: block; float: left; }" on the little persons so the line up side by side?

Tony Ruscoe [PersonRank 10]

6 years ago #

Well, as Datrio suggested above, I'm using one PNG with a transparent middle section so that I can use a background color to change the color of the men. Instead of referencing it directly, I've embedded a base64 encoded version of the image in the page using the data: URI scheme. (This doesn't seem to work in IE7 though.)

I then figured there was no point is using DIVs when other HTML elements were already available and not already in use in the page – and they actually used shorter tags than DIV too – i.e. <b> <i> <s> and <u>

I did have to change the DOCTYPE to HTML 4.01 so that I could use some of the single character tags and still let it validate though.

I tried using { display: block; float: left; } but it crashed Firefox. As soon as I added any position or float properties, Firefox completely froze... although that does seem to work fine in IE7.

Philipp Lenssen [PersonRank 10]

6 years ago #

Update: I replaced the HTML-based version with a JavaScript version now.

Tony Ruscoe [PersonRank 10]

6 years ago #

And this post is already #5 in Google for "How many employees does Google have?" :-)

Haochi [PersonRank 10]

6 years ago #

Philipp, I don't think you are using the setTimeout() right.

Philipp Lenssen [PersonRank 10]

6 years ago #

Can you explain what you mean Haochi? E.g. doesn't it work for you?
By the way, I'm just using it as a dummy delay to give the browser some time to render the display... oddly enough, otherwise, even though I'm using the onload event, Firefox sometimes decided to display a blank page instead of the "loading" message while the content was calculated.

Haochi [PersonRank 10]

6 years ago #

Oh, never mind then. I thought you were using it as setInterval() so that the page won't freeze (it _almost_ crash my FF).

sctronlinux [PersonRank 1]

6 years ago #

OMG. The page is down in IE 6 and Firefox 2.

Philipp Lenssen [PersonRank 10]

6 years ago #

Sctronlinux, what are you seeing?
Can't reproduce the issue on FF2 right now, and don't have IE6 (and can't see IE6 on browserpool.de either).

Tony Ruscoe [PersonRank 10]

6 years ago #

Works fine in FF2 and IE6 for me. Perhaps sctronlinux didn't wait long enough?

Maybe it should draw them progressively so that the user can see something is happening. And by the time they've finished counting them, it will have finished loading! :-)

Philipp Lenssen [PersonRank 10]

6 years ago #

This progressive loading was actually the behavior of the old "accessible" version, and that's why I kinda figure the longer loading time is OK... because the page has something you can look at while it's loading. I'm using a similar approach here: coverbrowser.com/covers/house- ... . If you look at the loading time of the whole page, I think you'd conclude it's much too long. However, if you additionally take into account the use-case the site targets – looking at every gorgeous cover easily without distraction – then filling up a non-thumbnailed page with good-resolution pics starts to make sense... because while you're still looking at the top pics, the bottom pics get a chance to finish loading. (That's the thinking behind not using thumbnails, anyway... thumbnails seem to be more oriented if you know what image or type of image you're looking for, but it's less gallery/ explorative-like.)

Jens Meiert [PersonRank 1]

6 years ago #

Nice. Reminds me of the World's Longest Website [1] – but the site doesn't include me yet [2], presumably? ;)

[1] worlds-highest-website.com/
[2] meiert.com/en/blog/20080118/jo ...

Moiz [PersonRank 0]

6 years ago #

This eerily reminds me of a project I did many months ago visualizing the causalities of the Israel-Lebanon war in 2006.

moiz.ca/coffin.htm

Javascript is great for making such isotype-like graphics.

en.wikipedia.org/wiki/Isotype_ ...

Mathieu 'p01' Henri [PersonRank 1]

6 years ago #

139 bytes of HTML+JS and 57 bytes of IMAGE = 196 bytes in total.

Requires JavaScript, but works also with images off.

p01.org/releases/DHTML_contest ...

This thread is locked as it's old... but you can create a new thread in the forum. 

Forum home

Advertisement

 
Blog  |  Forum     more >> Archive | Feed | Google's blogs | About
Advertisement

 

This site unofficially covers Google™ and more with some rights reserved. Join our forum!