Daniel LeCheminant (Contact)

Trello in 4096 bytes

Lemme see it


What is this?

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

The single file includes…

It doesn't use any libraries… and it'll probably only work on recent versions of Chrome and Firefox.

Why 4096 bytes?

Because it's such a nice, round number!

Honestly, it was an arbitrary limitation I came up with at the start of the project. I knew jQuery 2.1.0 was about 30K, and underscore.js was about 5K, and Backbone.js was 6K, so I was shooting for something smaller than those.

It ended up being a little more ambitious than I thought; it turns out CSS takes up a lot of space.

How big is actual Trello?

The biggest javascript file it loads is 438,280 bytes* (gzipped). (That file includes all the HTML templates)

The CSS file it loads is 56,333 bytes (gzipped). (That file contains a few embedded images)

Features of Trello4k

Sadly, I couldn't fit all of Trello into such a small space, but I did fit enough that you could probably do something useful with it.

What can it do?


For fun! Also, I figured that giving myself a difficult constraint would force me to learn/try some new things. I got a chance to play with

It was interesting to see how fast you could get things rendered when you didn't have a bunch of clunky libraries in the way!

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/4k | wc -c

What are some of the things you did to make it fit?

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: