The Sale of eBay Item № 151990485080

Success! eBay Item № 151990485080 sold for $0.99!

If you recall, this auction was for one printed copy of the auction page’s source content (Html, Css, Javascript, and so on), with proceeds going to the American Refugee Committee.

While $0.99 isn’t exactly a generous donation, I’m glad I was able to see the project to completion. Plus, I really hate trees.

Links

But before taking a look at the result, gather round for a tale of technological woe.

Printing the Internet

A terrible realization came upon me when the auction ended: now I had to actually ship something to someone. Who’d have thought? But printing one little webpage should be easy, right? Not so!

Well actually, it’s easy if you just ⌘P the webpage like a chump, or would be satisfied with a simple black and white wireshark dump. And it’s not like I was trying to create a masterpiece here, but I did at least want a halfway decent looking document, along with some syntax-highlighting for the code content. Not too much to ask. But just getting to halfway decent turned out to be quite the adventure in modern computing.

Collecting the Sample

My goal was to print out all the requests and responses from visiting the completed auction’s webpage in a browser. I chose to take the sample at the HTTP application layer, so I used Fiddler to collect the requests and responses.

The completed auction page was loaded from a clean instance of Internet Explorer, with the page left open for about a minute to collect everything.

A total of 186 requests were captured, almost all of them within the first five seconds of requesting the page (some of these were Fiddler proxy requests that I later filtered out). I then saved these requests as a *.saz Fiddler session archive, which is really just a zip file.

All told, this was about 3mb of data (much of it gzipped). At 200 characters per minute, typing with 100% accuracy, it would take a human around eight hours just to enter all the HTTP requests by hand. Similarly, it would take an eBay employee around seven days to type out all the responses.

Breaking Everything

Time to turn that SAZ into a printable document.

LaTeX was my first tool of choice. Its markup is easy to generate, and Tex produces nice looking documents. The Listings package even provides syntax highlighting.

So I hacked together some terrible, terrible Python code to transform the request and response data into simple markup. Everything was going great, until it came time to typeset the generated document.

Like most production websites, eBay minifies much of their content. Great for saving a few bytes, not so great for printing.

These minified lines of code were too long for Tex, hitting a buffer limit or something.

So I broke the lines up into more manageable 10000 character chunks, and set the typesetter loose on the document once again. A continuous flow of “hbox too wide” warnings was encouraging at first, but after five minutes of watching these scroll by, I gave up on LaTeX. On to plan B: HTML.

Besides upping the meta quotient considerably, almost any design can be brute forced using Html, Css, and Javascript. Jekyll is my tool of choice for generating web documents these days, and it includes syntax highlighting too. So I updated the script to output markdown, and fed the result into Jekyll. And waited. And waited. And then waited some more. Finally, I gave up and Ctrl-Ced. From the stack trace, it looks like Jekyll’s syntax highlighter also stalled when faced with the minified source code. Another one bytes the dust.

Disable syntax highlighting, and Jekyll worked just great though. So I moved the syntax highlighting to client Javascript with Prism. An easy enough change. I went to load the page for the first time and… not again! The browser locked up. But this time, waiting did pay off and, after about a minute, I was finally looking at the complete document. Progress.

The initial document styling and layout was done in a browser, but my target was always a printer. And only PrinceXML really supports more advanced print layout features, such as page headers and footers.

Now, Prince can run Javascript but, as I quickly realized, it cannot run all Javascript. And Prism unfortunately falls into that latter category. Switching to Highlight.js sped up page rendering by an order of magnitude, and at least got Prince to start processing the document. It just never completed… Et tu ቶ? It’s almost as if no one does this sort of thing…

Down to pretty much my last option now. I knew that a browser rendered the document well enough, so why not just print from the browser itself? Say goodbye to all that fancy print layout and whatnot, but at least most browsers support page breaks. That’s all I really needed.

So with a ⌘P, I finally generated a PDF of the document, complete with syntax highlighting and images. It was 274 pages long.

Then came the actual printing.

Printing

274 pages is a lot of paper.

It’s one thing to open a 274 page PDF and quite another to plop 274 pages worth of dead tree onto your desk. When I submitted all 274 pages in a single print job, the printer crashed.

The pages are all single sided and in full color. This produces an inch high stack; two and a half pounds worth of paper.

I cavalierly had promised to ship this document in a manilla envelope, which had seemed perfectly reasonable, but turned out to be quite a stretch.

Result

Seeing the content of a webpage in physical form makes quite an impact.

Kind of mind blowing to see how much information is exchanged for a single webpage load. Again, it’s one thing to see that Chrome loaded three megabytes of data, but quite another to actually see those three megabytes in physical form.

All in all, I’m happy with the result. It’s both much more hilarious, and much more beautiful, than expected.

The source code specifically looks awesome. It’s almost noise at first glance, until you start picking out words or notice interesting patterns. You can look at the code and know what each element does individually, but still have no clue what the larger picture is. And is not this the human condition?</PretentiousBastardVoice>

Plus, how awesome is it that someone purchased and received 274 pages worth of printed source code for the auction page itself in the mail!

So where to go from here?

Although transfer efficiency could be improved by decreasing the font size or printing double sided, I think this experiment shows that printing the internet is generally not a very good idea (The more you know⭐). Still, fun to imagine the mountain of paper that even a little browsing would produce.

The physical copy was a one time deal, but you can view the final document as a PDF or as a webpage.

A lot of work for a $0.99 auction, but oh well.

(PS: As a $0.99 donation would be in rather poor taste, I shifted the decimal point around a few places for that component of the experiment)