Alex Bosworth's Weblog

developing software, living the expat life in beijing, other fun stuff!

previous projects: alchemy, swik, open source stuff, now adylitica.

Do It (Tomorrow) Web in HTML5

We’ve now had 1 million iPhones, iPads, iPod Touches and Androids install our App Do It (Tomorrow) - So we figured we should also bring the App to the Web as well :D

If you are not interested in the dirty details of development, depart. If you are, great: read on. 

Prototype

I often like to develop in a quick style where I put together a prototype and then look and see what I learned. Sometimes I can go directly into a shipping App, sometimes tweaks are required, sometimes I throw the idea out completely.

The prototype revealed a couple major design issues with porting an iOS App to the Web:

  • In an iOS App, if you start using it you expect it to save all your data. In a web app, you expect it to lose all your data if you don’t register/login first.
  • To get the App to a level of polish that matches the iOS App, I was going to need very modern CSS features, which meant that older browsers were not going to be supported.
  • Just like we did a redesign for iPad, yet another redesign was necessary for Desktop - a flexible resolution design for computer monitors is a lot different than a fixed resolution design for iPad or iOS.

Redesign

Login and Register

If you have the smartphone version of DIT (I hope you do!) You notice that you don’t need to register. You can just type in an email and password and it will use that as syncing credentials to make sure we know whose todos are whose.

This actually turned out to be too clever by half, and something that we did as a reaction to Apple’s limited Settings feature, but the net result means that we don’t have a register feature.

This makes for a very weird Web experience, so instead I just added what is essentially a “placebo button" to register. The register button doesn’t really do anything, it just opens the book and sets up your credentials, but it is functionally almost equivalent to login, which also sets up your credentials. 

This also gives you a chance to read a blurb about the App. On the App store you can read a description of the App, but people like to just jump on in when it comes to Web sites. We debated this blurb a lot, but the basic message of Do It (Tomorrow) is represented: “blessed are the procrastinators.” :D

3d rotation transforms

One thing I began experimenting on as a wow factor is something called 3D transforms. Do It (Tomorrow) has always had an ‘opening’ effect, and we put a lot of work into making that look right. The prototype used a 2D CSS transform, but I did research into doing a cover opening in 3D, based on demos I found of this Webkit feature.

Moving divs in 3d space took some trial and error, the way it works is interesting: you set up a “stage” in which you view your transforms. You can set the stage close, so the 3d effect jumps out at you like a cheesy 3d movie, or you can set the stage far away, so the 3d effect looks like it is in the distance.

Once you have established your stage, you set axis of rotation on your div, and you can rotate it around that axis in the 3 dimensions. 

Now the tricky part is animating :D This can also be a trial and error process. To animate the cover, the cover is 3d rotated until it hits an apex, at which point some magic happens and now it’s not the cover rotating, it’s the left page! Important here is to match up all the timings correctly, and to make sure that the functions describing the animation speed are also well matched to each other.

Server architecture

The backend architecture of Do It (Tomorrow) syncing was designed for iOS, with one major goal in mind: be as simple as possible.

The tasks are stored on S3, which means that Amazon can worry about keeping them safe for us. 

To process the tasks, and to serve the web page, I used a small Node.js script that doesn’t do all that much except deal with the mundane work of storage. This script sits behind a nginx reverse proxy.

Most of the logic about tasks actually lives in the client JavaScript - when to move tasks, how to merge sync data and resolve conflicts, etc. 

I am using a S3 library I am writing as I learn Node.js - it is jQuery inspired but my reasons for developing an AWS S3 and SimpleDb library are better for another post.

CSS 3

CSS 3 and HTML 5 features are not just used in the opening transform animation. These features are critical to the polish of the App.

In fact, the CSS file has more lines than all the other project files put together, tomorrow.do is quite a complex CSS beast.

  • Media Queries: we felt the App looked weird on very large resolutions. Media Queries add polish details as the browser is resized. (All employees of Adylitica have 27” Apple monitors - btw we are hiring! )
  • Multiple Backgrounds: to do a realistic setting and not having messy non semantic elements littering the page, 7 background images are stacked on each other to achieve a layered look.
  • Custom Font support: We use a special font for Do It (Tomorrow) - that’s part of the App’s identity. Mozilla makes it a little annoying due to their font-origin policy but it was very important to get in.
  • CSS gradients: Obviously these are already having a huge effect on web design. The very good news is that Webkit and Mozilla are coming to agreement on syntax and this looks to be a standard CSS tool very soon.
  • ::-webkit-scrollbar - this is something that adds tons of polish and unfortunately Mozilla is religiously against. 

Domain Name

Apps can use any old name you like, for the most part. Web Domains on the other hand are like precious jewels, hoarded by evil dragons that will kill you with a breath. 

To find http://tomorrow.do/ I used an App called http://domai.nr/ - I highly recommend it. I like unconventional TLDs because they look cool to me, but they are usually more expensive and more of a hassle.

To get tomorrow.do took well over a month, after paying $140 for the privilege. The Dominican Republic can move quite slowly on domains as it turns out. 

We had many ideas, but I chose tomorrow.do because I feel like it is easy to remember and notable.

Deployment!

I hope that people enjoy it, I enjoyed making it. One of the strengths of developing a web app is that it is way less stressful than iOS or even Android. I can for the most part control the audience, by only showing it to friends and family, then wider and wider. I can receive also feedback - code a fix or a tweak - and roll it out to the server in the space of 5 minutes - easy!

Comments (View)
blog comments powered by Disqus