1. 使用Sublime Text + Emmet 自動產生標準index.html
2. 套用Bootstrap 到index.html
3. 使用 畫圓
4. Consider JavaScript Closure
5. 練習亂數
6. 獨立出JavaScript 程式碼 (main.js)
7. Use JavaScript Module Pattern
8. 產生 10 個 Balls
9. 加入背景圖

• Sublime text
  • Package Control
  • EditorConfig
  • Emmet
• Github
• NodeJS
  • npm
  • Express
• Bower
  • Bootstrap
  • jQuery
  • jQuery-tmpl

import urllib.request,os; pf = 'Package Control.sublime-package';ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

Ctrl + Shift + P
type 'Install Package'
type 'Editorconfig'

; top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
3insert_final_newline = true
trim_trailing_whitespace = true

Ctrl + Shift + P
type 'Install Package'
type 'Emmet'

html:5
.class
#id

$ npm install -g express

$ npm install -g bower

bower init
bower install bootstrap --save
bower install query --save
bower install jquery-tmpl --save
bower install

Refactor 912492d7adb5c4368c1496af87a632f694f30b62

• Move JavaScript code to main.chat.js
• Using JavaScript closure (module)
• Using yepnope loader

Mapping view and data

• Using key-value pairs (ViewModel): use JSON to present key-value data
• Using Backbone (fully application framework) for applying ViewModel, or
• Simple template library (eg. jquery template)
• UI made easy: use Bootstrap CSS framework

Application

• Use Bootstrap navbars
• Responsive design by Bootstrap

Send data

• Use WebSocket send()
• Connect Open API: AJAX and RESTful
• Not use AJAX method: if so, either jQuery way or Backbone way is good
• Not use RESTful API: refactor URL query string to REST spec

Going mobile

• Use PhoneGap: build.phonegap.com or Eclipse+PhoneGap
• Use viewport
• Use Mixins (LESS) to set media query of 'screen' height

Using PhoneGap APIs

• Camera web app

Enter Nodejs: Developing Web service

• Create a Web server
• Handling URL routing
• Create WebSocket server
• Handling requests

Using package.json

• for releasing software

• Use jQuery AJAX and JSON data instead of query string
• use preventDefault()
• use jQuery UI Touch Punch ('touchmove' event)
• Try Express.js and understanding RESTful