Daniel LeCheminant (Contact)

Stack Overflow in 4096 bytes

Lemme see it

St4k

What is this?

This is my attempt to pack as much Stack Overflow as possible into a single 4096 byte file. (The file is gzipped).

The single file includes…

It doesn't use any libraries (no jQuery, underscore, etc) … and it'll probably only work on recent versions of Chrome and Firefox.

Why 4096 bytes?

In a previous personal challenge, I'd tried to fit as much Trello as possible into 4096 bytes and that turned out pretty well, so I figured I'd give myself the same limitation this time around.

Features of St4k

This is mostly a "Stack Overflow viewer"… I'd initially included voting as a feature, but realized that people would probably be hesitant to give my application write access to their account.

(I decided to add a site switcher instead of the write features, so you can use St4k to view any site in the Stack Exchange network)

What can it do?

Why?

I had a lot of fun last time I did this, and this seemed like a fun way to try out the Stack Exchange API

Wait, I don't believe you!

Uh… you can take a look at your browser's network inspector, or view the web page source. You can see that there isn't a lot there.

$ curl -s http://danlec.com/st4k | wc -c
4096

What did it take to do this?

Lots and lots of micro-optimization. I pretty much traded everything (readability, maintainability, compatibility, stability, and sanity) for size.

The stackoverflow logo is embedded?

Yeah, it looks something like this:

<svg viewBox="0 0 50 64"class="b">
    <path stroke="#888"d="M8 53h25M2 38v24h38v-24"></path>
    <path stroke="#a86"d="M8 44l25 2"></path>
    <path stroke="#b95"d="M10 32l24 7"></path>
    <path stroke="#c83"d="M15 20l22 13"></path>
    <path stroke="#f80"d="M27 7l14 21"></path>
    <path stroke="#f71"d="M43 1l4 25"></path>
</svg>

(There's also a bit of CSS to control the stroke-width and fill)

It's basically drawing 7 lines; fortunately Stack Overflow has a pretty simple logo.

It's a bit smaller than the ones available on stackapps.com

The favicon is embedded?

Yeah, just for kicks…

c=f.createElement("canvas");c.height=c.width=16;
c.getContext("2d").fillText("St",0,8);
c.getContext("2d").fillText("4K",0,16);
f.querySelector(".iv").href=c.toDataURL()

(Yeah, it uses c.getContext("2d") twice, to save space. It's the RYRYRY principle.)

About the author:

I'm Daniel LeCheminant, a developer at Fog Creek Software, where I'm helping to build Trello.

You can follow me on Twitter or e-mail me.

Most recent post:

Hacking stackoverflow.com's HTML sanitizer

The most popular things I've written: