FAT

Today I’m open sourcing a project called Coffin. Coffin is a facebook/path style drawer implementation for the mobile web, which is also responsive (that means it looks pretty boss on regular browsers as well). It’s built to work on top of the Skeleton framework which is written by my good friend @dhg – and is therefore super lightweight and a great starting point. If you’re bored, you should play with a demo of coffin on your iphone or your favorite browser (I’m hoping chrome is your favorite browser here – because that’s all I’ve really tested it on at this point).

If you have any issues or feedback please file an issue on github or let me know on twitter. Thanks <3!

Back Story

I’ve been thinking about trying to write this for a while and naively set asside about 20 minutes yesterday to make that happen. Somewhere between 6-7 hours later, amidst a pool of tears, it appears to be working pretty well in the latest mobile safari and chrome. Better browser support will likely come over the next few weeks. Also, if you’re reading this, and you’re a mobile web boss – look at my source and tell me all your secrets!

Some Things I Learned

• The mobile web is not the web. It’s a b**** – If you are a relatively compentent web developer, don’t think that your skills will automatically transfer to mobile. I did, and that makes me a n00b. This is a new world with new hacks, new tools, new sad times. The single best piece of advice I can give anyone starting a new mobile web project: spend the time to learn the tools. It’s crazy how much we rely on tools today to make our lives even a little less painful. I spent a good hour using alerts before searching for tools… don’t make that mistake.

• translate3d is also a b*** – If you use translate3d to do your animations it’s going to look really great (the animation portion). But as soon as you go to use your app (post animation), expect all kinds of crazy shit to break – particularlly weird scroll bugs. I found that in order to get scrolling to work on a 3d translated object I needed to manually toggle overflow on a parent object (or add a margin, or anything really) on transition complete, in order to force it to render correctly. This is still a little jank. If you have a better idea, please let me know!

• Why so buggy? – Actually, most of the time I spent working on this project was desperately trying nonsensical hacks in an attempt to make