tatotime-mobile

Getting Started on Linux / Mac OS X

Installing node.js and NPM

Get the code

> git clone git://github.com/peterwmwong/tatotime-mobile.git
> cd tatotime-mobile/src

Run development server

-- Open new terminal --
> make dev-server

In a browser, visit http://localhost:3000/index-dev.html?mock-service=true.

Why a development server?

It's JUST for live.js and Chrome. live.js uses XHR to automatically reload JavaScript and CSS, Chrome does not allow XHR over the file:// protocol (issue 41024).

Run Stylus/CoffeeScript compilers

-- Open new terminal --
> make dev-stylus

-- Open new terminal --
> make dev-coffee

This will compile .styl to .css and .coffee to .js.
File changes will automatically be recompiled. No need to Alt-Tab and F5. Cool, yah? Thank you live.js!

Build for production

> make clean; make

In a browser, visit http://localhost:3000/?mock-service=true.

What just happened?

All AMD Modules (JS) and CSS relevant for a page load are concatenated and minified into bootstrap.js and bootstrap.css.

How? You might think this is a nightmare to maintain (giant-whitelist-of-doom), but it's not. One require.js command and Cell plugin handles all the tracing of dependencies and packaging. Check out the Makefile target that gets it done.

Getting Started on Windows

Haven't tried, but should work with Node v5.X with the same steps above...

Edit Stylus/CoffeeScript like a Pro

• Sublime Text 2
  • Use the TextMate bundles below
• Vim or MacVim
  • vim-stylus
  • vim-coffee-script
• TextMate
  • Stylus TextMate Bundle
    • The Stylus.tmbundle directory can be found in tatotime-mobile here: {tatotime-mobile Project Directory}/node_modules/stylus/editors
  • CoffeeScript TextMate Bundle

Credit

• CoffeeScript - Better than JavaScript
• Stylus - Better than CSS
• jQuery - Better than DOM
• live.js - Better than Alt-Tab, F5, Alt-Tab, Ctrl+S, Alt-Tab, F5, ...
• RequireJS - Modular JavaScript
• cell - Modular HTML/CSS/JavaScript