Lemme see it

Trello4k

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…

• All the HTML used
• All the CSS used
• All the Javascript used
• Embedded SVGs for the badge icons

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?

• Initiate a token authorization request
• Lists all the boards that you are a member of
• View a board
  • Shows all lists and cards
  • Cards include card covers, badges, and assigned members
• View a card
  • Shows the card description (with very basic markdown formatting)
  • Lists the card attachments
  • Lists the checklists on the card, and the current state of all checkitems
  • Lists "important" activity on the card (card creation, comments, move actions)
• Display a cute favicon
• Re-ordering cards via drag and drop
• Do realtime updates (using a web socket)

Why?

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

• All the stuff that I normally let jQuery and underscore handle
• SVG
• Some HTML5 features
• Flexboxes

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
4096

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

• I wrote a utility that tried rearranging my CSS, in an attempt to find the ordering that was the most compressible
• I wrote a utility that helped with some of the variable renaming (I did run the code through the closure compiler, but I was able to squeeze out a few extra bytes)
• When possible, I tried to minimize the number of unique functions I called. For example, instead of using RegExp.test and RegExp.exec, I'd just used exec everywhere
• I optimized for compression by doing things the same way everywhere; e.g. I always put the class attribute first in my tags
• I tried implementing most of the code in several different ways, and kept the one that resulted in the smallest overall file size
• I learned a lot about SVGs; knowing to use relative coordinates saved some bytes
• I spent hours on lots and lots of micro-optimization
• … and I did lots of hacky things, which you might see if you look through the web page source!