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…
- All the HTML used
- All the CSS 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 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)
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
- Some HTML5 features
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.exec, I'd just used
- I optimized for compression by doing things the same way
everywhere; e.g. I always put the
classattribute 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!
About the author:
Most recent post:
- A bug in the Sundown and Redcarpet markdown parsers may lead to XSS
- XSS via a spoofed React element
- HackerOne's First XSS
- Hacking stackoverflow.com's HTML sanitizer
The most popular things I've written: