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?

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'd use … because I already used 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

is much cleaner than , but it turns out that a few extra zeros compresses better than 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()