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…
- All the HTML used
- All the CSS 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)
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
- I tried to use as few unique CSS attributes as possible.
border-bottom: 4pxis much cleaner than
border:0 0 4px, 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
.pxends up being smalled than
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
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.)