Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Monospace: A JavaScript demo in 1021 bytes, winner of the demo competition

p01.org

Post reply on HN
Print view View original

51–60 of 131 posts

Re: Monospace: A JavaScript demo in 1021 bytes, winner of the demo competition

#51

Post by nneonneo »

The real version of this, which is actually 1021 bytes, is here: http://www.p01.org/MONOSPACE/monospace.htm. It uses the very clever trick of compressing the JavaScript code as the pixels of a PNG image (which uses Deflate internally), then including the page itself in an tag and decompressing the JS code from the resulting pixels.

Unfortunately, the developer made a bit of a mistake when uploading this file: it appears to have been uploaded in ASCII mode rather than binary mode, meaning that all the 0x0d (CR) bytes in the file have gone missing (an artifact of the standard "CRLF -> LF" translation performed in text mode uploads). Therefore, it doesn't work: all you get to see is a screenful of binary junk. (Author, if you're seeing this - it's hopefully an easy fix!)

I've uploaded the correct version (obtained from http://www.p01.org/MONOSPACE/monospace.zip) here: https://robertxiao.ca/misc/monospace.htm. This works out-of-the-box on Firefox (modulo being really slow, thanks to https://bugzilla.mozilla.org/show_bug.cgi?id=1190398), but fails on newer Chrome because of click-to-play audio. You'll have to "allow" my site under chrome://settings/content/sound, then refresh.

But! Once you've jumped through those hoops, you can appreciate the real ingenuity that manages to pack this demo into a cool 1021 bytes (the compatible version that most of you would have seen is much larger, at 2338 bytes).

Re: Monospace: A JavaScript demo in 1021 bytes, winner of the demo competition

#56

Post by ricksharp »

lifthrasiir wrote: post #49
ricksharp wrote: post #37

Amazing! Very impressive how you got all the details in. I'd be interested in hearing what the development process is like. Do you work directly in the minified code, or do you create the demo in normal code first then look for ways to minimize it?

I'm not the author but I've done this before [1], so here's what I can quickly make up (EDIT: updated using informations gathered from p01's comment below): // c is a canvas created outside d = [ // 2 times audio frequencies used, I think 2280, 1280, 1520, c.width = 1920, // d[4] is not used, not sure why this stmt was stuffed into d // required to hide the PNG bootstrap; the bare minimum would be `0'`, probably this…

Thanks for the expansion and comments! On your project, I noticed the comments were about 5 times longer than the source code :) - so that makes sense how to work with it.

Re: Monospace: A JavaScript demo in 1021 bytes, winner of the demo competition

#58

Post by jansan »

bulka wrote: post #32

I, for one, liked the "firefox version" of the demo. No way to close, mute or go back. And after a minute someone starts talking to you. Pretty cool.

No problem. The beauty about open source software is that the code is freely available, so you can fix bugs yourself. /sarc

Re: Monospace: A JavaScript demo in 1021 bytes, winner of the demo competition

#60

Post by import »

j4nt4b wrote: post #26

I'm getting the same issues as all of the other Firefox users. Guess I'll never watch it, because I have a hard policy of never, ever installing Chrome malware on my personal computer. Maybe the title should be changed to "Chrome demo"?

Works pretty well on Safari
Post reply on HN