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…

• All the HTML used
• All the CSS used
• All the Javascript used
• Embedded SVG for the Stack Overflow logo

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?

• List the most recently active questions
• List unanswered questions
• List questions for a tag
• View a question, and any answers or comments
• List the most popular tags on the site, including an excerpt from the tag wiki
• List the 30 users with the most rep on the site
• View user profiles
• Log in and out (it'll show your avatar and rep for the site)

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.

• I wrote a tool that randomly rearranged all my CSS rules, attempting to find the ordering that resulted in the smallest final file size. This actually saved me a surprising about of space, something like 100+ bytes.
• I learned SVG, so I could make a cute little stackoverflow logo
• I tried lots of different ways of writing the same code, attempting to find the one the compressed the most
• I threw DRY out the window, and instead went with RYRYRY. Turns out just saying the same things over and over compresses better than making reusable functions
• I made sure to use as few unique built-in functions as possible, e.g. instead of using /foo/.test(bar), I'd use /foo/.exec(bar)… because I already used .exec elsewhere.
• I tried to use as few unique CSS attributes as possible. border-bottom: 4px is much cleaner than border:0 0 4px, but it turns out that a few extra zeros compresses better than -bottom
• I was careful to order my tag attributes in ways that resulted in the longest possible strings of repeated bytes.
• I replaced all the CSS class names with single character names, unless there was a case where a two character name would compress bettter. (e.g. .px ends up being smalled than .J)

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.)