• Zif (unregistered) in reply to bs
    bs:
    Assuming Timmy was generating these by hand at the pace of one per second (highly optimistic!) it would take at least 27 days.

    Something about this story doesnt add up.

    ...Your math is broken sir. At 1 per second this many images would take about 194 days. Although I think we're pretty certain if this is a real story, the images were generated programatically as mentioned by the many other comments.

  • Arne (unregistered) in reply to Next task please

    I don't think your solution is working very well: http://s3.imgimg.de/uploads/xa3f2ebc1png.png

  • (cs) in reply to Not a dev
    Not a dev:
    On an unrelated note, can someone generate a bmp with all 16M colors? I just, you know, wanna see what it looks like.
    I'm feeling generous. 
    $ cat palette.sh 
#!/bin/bash
echo P3 4096 4096 255
for ((x=0; x-4096; x++))
do
	for ((y=0; y-4096; y++))
	do
		echo $((x%256)) $((y%256)) $(( (x/256)*16 + (y/256) ))
	done
done

$ time ./palette.sh >palette.ppm

real	9m21.633s
user	7m50.290s
sys	1m31.120s
$ time convert palette.ppm palette.png

real	0m6.421s
user	0m6.300s
sys	0m0.120s

    http://www.cheddarmonk.org/palette.png

  • nasch (unregistered)

    Wow pjt, that looks really weird. The image kind of swims.

  • Josiah C (unregistered)

    Great story, but it sounds potentially ... untrue.

    There are a little over 600,000 seconds in 7 days. Either he was able to manually create 28 jpegs/second by hand every second for a full week... or he wrote a script to generate the jpegs. The former is effectively impossible, the latter shouldn't take a week: http://www.imagemagick.org/Usage/draw/#circles .

    Or am I missing something?

  • (cs) in reply to pjt33
    pjt33:
    Not a dev:
    On an unrelated note, can someone generate a bmp with all 16M colors? I just, you know, wanna see what it looks like.
    I'm feeling generous.

    [snip]

    The libpng guys were way ahead of you.

    (Also, Akismet spam filter is TRWTF.)

  • Pat (unregistered)

    So how was he meant to have generated these images? If it was by hand then, assuming he performed only this task, he would have had to continuously create 28 images per second to have 16 million by the end of the week. On the other hand, if he was using an automated system why did he need to baby sit it all weekend? I suppose some kind of hybrid between the two is possible, or maybe writing the code to automate it took him a long time...

  • weronika (unregistered)

    adf.ly/183291/weronika

  • Almafuerte (unregistered) in reply to dgvid

    Or, considering we are in 2011, he could have used border-radius. I know, it doesn't work in IE, but IE users aren't human, so we don't care.

  • (cs) in reply to Meneth
    Meneth:
    Wouldn't work; the image would be too big to either be generated, transferred or loaded.

    What amazes me is how Dropbox actually managed to display a directory with 16 million files inside. My computer starts chugging with only a few thousand files per directory.

    Dropbox likely doesn't map your directories into physical directories on a real file system. What you see in their UI are just entries in a database. The files themselves are stored on a filesystem, sure, but I bet they're numerically named (not necessarily in base 10 nor 16) and kept in directories having an upper bound on the number of files. That's what the web cache squid does, for example, and I've seen it in a few other places, too.

  • Nick (unregistered)

    Is TRWTF that he used JPGs for a single colour image instead of PNGs?

  • abdullah (unregistered)

    to add my 2c to the time frame matter, i'm sure most of the time was spent discovering and overcoming limits in the filesystem / FTP / hard disk / network. having millions of files is not normal

  • (cs) in reply to DaveK
    DaveK:
    Mathy:
    604800 seconds in a week. 16,777,216 JPGs.

    0.036 seconds each.

    That's pretty impressive. The made up ones really annoy me.

    Perhaps you and the other cynics should read the HTML comments in the story. Your objection has been anticipated.
    So now I have to read the article in unformatted HTML, either that or read it once, then once again scanning for comments?
  • (cs) in reply to amischiefr
    amischiefr:
    DaveK:
    Mathy:
    604800 seconds in a week. 16,777,216 JPGs.

    0.036 seconds each.

    That's pretty impressive. The made up ones really annoy me.

    Perhaps you and the other cynics should read the HTML comments in the story. Your objection has been anticipated.
    So now I have to read the article in unformatted HTML, either that or read it once, then once again scanning for comments?

    F3 <!--

  • Blub (unregistered) in reply to DonaldK

    I'm shocked about your assumption, that in GIF the color palette is preset.

  • daveime (unregistered) in reply to dgvid

    I suppose it's just a blessing they didn't ask him to handle the Alpha channel also.

  • Robert Hanson (unregistered)

    OK, lets talk about how you'd do this in real life.

    1. Nested DIVs. Outer div is square shaped; it contains an image that is mostly the page's background color; it has a center area that is round and transparent.
    2. Inner div is sized the same size as the outer div; it is absolutely positioned with respect to the containing div so that it occupies the same real estate as the outer div.
    3. the outer div's z-index is set larger than the inner div (or, conversely, the inner div's z-index is set to a negative number) so that the outer div's image covers the inner div; and the inner div "shines through" the transparent circular part of the image.
    4. when the user selects the color, some javascript sets the background color of the inner div to the selected color (using CSS style="background-color: #xxxxxx")

    Done; 1 image and about 4 lines of javascript.

  • droid (unregistered) in reply to dgvid

    Don't forget to use an optimal packing so you don't waste space.

  • Svend (unregistered)

    A better way would have been to create a background colored png with a circular transparent mask, and then change the div bg color?

  • Arvind (unregistered) in reply to Uncle Al
    Uncle Al:
    Or, if one is an intern, one might not be expected to know tricks like the masking technique and assume that one was handed this job *because* of the grunt work of creating all those images. -1 to Matthew for not checking in on the intern's approach when the job started to take longer than expected.

    +1 to your comment. -1 to Matthew for not supervising the intern.

  • Anon (unregistered)

    This is a super illustration of why you should question requirements - they probably didn't care whether it was round or square.

  • (cs)
    In fact, this is actually the 24 billionth universe created by this process
    And we are becoming exceedingly efficient at it.
  • Neil (unregistered)

    No images needed. Do it all in CSS (note: current browser releases may need vendor-specific prefixes):

  • Miah (unregistered) in reply to dgvid
  • Lea Verou (unregistered)

    TRWTF is that it's 2011 and neither the employees in this firm, nor Alex, nor almost anyone in the comments knew what the eff border-radius is (only 2 comments mentioned it).

  • Daniel (unregistered) in reply to dgvid

    That's a joke right? Can you imagine how big that file would be? Send that over the network a couple million times and see how it does. Hope your ISP offers unlimited bandwidth. Talking out my a** here, but I seem to remember a certain image format supporting an alpha channel. Make a table cell or DIV the backcolor you want, then alpha blend a white circle onto it. You could probably just use a GIF with transparency (which is a 1 bit alpha channel). Except unlike most partially transparent images, the transparent part is the circle, while the area around it is solid.

    Don't get discouraged, Timmy. We all have old embarassing code snippets that, 10 years later we're like "Wow, I could do that so much better now." Ask 10 programmers how to do a certain task and you'll get 10 different answers.

    How big was the directory with all 16 million images, out of curiosity?

  • Patrick (unregistered)

    Without CSS3? Probably should have made a GIF of a square (whatever the page colour was) with a transparent circle in it, then put that in a DIV with the background set to the display colour. Better yet: use PNG, that way you can use alpha blending to smooth the edges. Better again: generate the circle image on the fly, that way you don't need to change the mask every time you use a different page background. The list goes on.

  • mz (unregistered)

    Fail. Timmy should have made them PNGs! Duh.

  • tom (unregistered) in reply to dgvid

    He should've been told to prepare more sets with different background colours :)

  • The Lord of Cheese (unregistered)

    My nae's Jimmy.

  • The Lord of Cheese (unregistered)

    Why isn't there a link to go back to the full article?

    For a site filled with a bunch of douches submitting poorly worded and misspelled stories about how other people don't know how to make quality computer programs this site sure is full of its own fail.

  • The Lord of Cheese (unregistered)

    Wait... shoved up at the top, squeezed between the logo banner and an animated banner ad? USABILITY FLAW! Just put the damn link on the headline in the comments page.

  • Conrad Buck (unregistered) in reply to dgvid

    Naaaah no good. It would have been far easier for him to just nest a few thousand one pixel floated divs in a circular pattern and set the background color on each of them.

  • Some guy (unregistered) in reply to dgvid

    A single bit map with that many colors x the number of pixels of each map? are you trying to kill the bandwidth? Do you want to destroy the page load?

    Bandwidth may be cheap, but it isn't free.

  • anonymous (unregistered)

    There are two good ways to do this. One is by changing the color of a bullet character. The other is a image generated on-the-fly with a transparent background. There's no reason to get fancy; a monochrome GIF works just fine, and since it's palette-based, the only thing that needs to be dynamically created is the palette entry for the foreground color.

    <!DOCTYPE html>
<html>
<head>
<script</span> type="text/javascript">
function update(input) {
    try {
        var RGB = Math.pow(16, 6 - input.value.length) * eval("0x" + input.value);
        var f = function(i) { return i > 61 ? 43 | (i - 62) << 2 : (i > 51 ? -4 : i > 25 ? 71 : 65) + i; };
        document.getElementById("img").src = "data:image/gif;base64,R0lGODlhMAAwAIABA"
            + String.fromCharCode(f(RGB >> 20 & 15), f(RGB >> 14 & 63), f(RGB >> 8 & 63),
                f(RGB >> 2 & 63), f(RGB << 4 & 63 | 15)) + "///yH5BAEKAAEALAAAAAAwADAAAAJyjI"
            + "+JwO0Ko0yuWjBzvPzq34XVJ4nmSC7nyqQGC2NkHIN0Pd13qe9Q76MAg6+hTmWkIZOwA/MYePqkSqr"
            + "1is1qt9yu9wsOJ6PiRrEsQ7fO4SXY/RW+FXN6fNPNcG3YVN9l5eL0JCjXU/hziMizsujXgVgAADs=";
        input.style.outline = "";
        document.getElementById("span").style.color = "#" + input.value;
    } catch (e) {
        input.style.outline = "dotted 2px red";
    }
}
</script>
</head>
<body>
<form</span> onsubmit="return false;">
Background:
<input</span> type="text" name="bgcolor" onkeyup="document.body.style.background = '#' + this.value;" value="FFFFFF"/>
    
Foreground:
<input</span> type="text" name="color" onkeyup="update(this);" value="000000"/>
<img</span> id="img" style="height:16px;width:16px;vertical-align:text-bottom;"/>
<span</span> id="span" style="display:inline-block;*display:inline;position:relative;height:16px;width:16px;">
    <div</span> style="position:absolute;left:-3px;height:16px;width:16px;font-size:64px;line-height:23px;">•

<script</span> type="text/javascript">document.forms[0].color.onkeyup();</script>
</form>
</body>
</html>
  • Douglastab (unregistered)

    pharmacie en ligne avec ordonnance https://kamagraenligne.shop/# pharmacie en ligne france livraison internationale

Leave a comment on “Twenty-Four Bits Per Intern”

Log In or post as a guest

Replying to comment #:

Log Out

« Return to Article