Marcin Bunsch

21 Sep 2014

Building Offline Mobile HTML5 apps

Recently, at the Base Lab Hackathon, I’ve been playing around with building a mobile app in HTML5 with offline support. There’s a lot of material on the subject scattered all over the web. I wanted a single place where I could find all this information, to I wrote everyting down with links, and here it is.

I also built a demo which supports everything I write about in this post. You can see it working at http://marcinbunsch.github.io/offline-mobile-html5-demo/ and the source code is available here. Make sure you view it on a mobile and use “Add to home screen” feature for best experience.

Pack light

An ideal mobile app is fast and snappy. Lowering the number of resources will dramatically improve the first load experience. Afterwards, it will use cache, but you only make a first impression once.

As much as I love jQuery, zepto.js is a much better alternative for mobile HTML5 apps. It’s 9kb gzipped and has a largely jQuery-compatible API.

Don’t bring in Bootstrap. It’s huge and you most likely won’t use most of it (see Addy Osmani’s presentation on CSS Performance Tooling). Either use something smaller, like Pure and Picnic, or roll your own. You’re on a much smaller screen, with less clutter - you need less boilerplate.

14 Sep 2014

Dotz

tl;dr You can check out the game here.

Recently, to learn new programming techniques, I’ve been reading up on game development.

I thought it would be a fun experiment to try to clone an existing game, so I would be able to focus on the game engine and code, with the hard part of game design already done. During vacation, I’ve been playing Dots by Betaworks, which is why I chose it as a source of inspiration.

I’ve decided to build it in CraftyJS and Brunch as a build tool. I’ve also added jQuery for some basic DOM manipulation.

Here’s the result, which I’ve named Dotz: http://marcinbunsch.github.io/dotz. It is a simplified clone, so it only consists of one level in which you have to connect as many dots as possible in 20 moves.

As I found the whole experiment mighty interesting, I also thought it would be fun to highlight a few interesting problems I bumped into and how I solved them.