Client-Side Storage

I’m resurrecting an old project of mine now that technology has caught up. Even so, it’s amazing how much time I’ve had to spend just trying to find the right tools to use to fulfill my requirements.

Requirements

  • Cross-Browser: Needs to work in every modern browser, including mobile.
  • Persistant offline storage: In order to support all browsers I must also support the following technologies:
    • IndexedDB
    • WebSQL
    • localStorage
    • Some fallback if none of the above are available..
  • Gracefully degrade functionality on less capable browsers.
  • Encourage users to modernize their web experience.
  • Optimize layout according to the viewable space in the browser.
  • Sane, consistant starting point for styling pages.
  • A clean, extensible way of interacting with Javascript.

Client-Side Tools

  • Initializr - Provides a nice frontend scaffold:
    • Modernizr: Detect browser capabilities.
    • Jquery: Improves and tidies interactions with Javascript objects.
    • Respond.js: Responsive web, layout optimized to viewable space.
    • HTML5Boilerplate: Sane and consistant default stylesheet.
  • Lawnchair: Provides a cohesive API for client-side offline storage.

Server-Side Tools

Right now I’m using some other tools to create a functional prototype of the user experience:

  • Frank: A static website generator.
  • Haml: Because HTML’s syntax sucks.
  • Sass: Because CSS’s syntax both sucks and is lacking in many areas.
  • Mustache: Because logic doesn’t belong in views. - Frank is having issues loading Mustache templates, even after I spent some time hacking at it.
  • Coffeescript: Because Javascript is great, but its syntax sucks.

I’m not sold on Frank yet, there was some other static site generators I was considering so if Frank starts getting in my way I’ll give them a try.

⦂∀