Daniel LeCheminant (Contact)

Stack Overflow in 4096 bytes

Lemme see it


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?


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

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>

(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…


(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 Trello Inc.

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

Most recent post:

The most popular things I've written: