1. 前端 JavaScript 框架
   1. 2016 JavaScript前端框架大調查
2. JS 轉譯器工具
   1. 前言
      1. ES6
         1. 別名
            1. ECMAScript 2015
            2. ECMAScript 6
            3. ES2015
            4. ES Harmony
         2. 阮一峰《ECMAScript 6入门》線上電子書
   2. 轉譯器 transpiler
      1. 別名
         1. ECMAScript 6 Tools
      2. 常見的轉譯器
         1. TypeScript
         2. Babel
         3. JSX (React)
3. JS 品質管理工具
   1. JSHint
   2. ESLint
   3. JSLint
   4. JSCS
   5. 比較
4. 模組化管理工具
   1. webpack module bundler
      1. What ?
         1. 管理模組化的資源
            1. JavaScript 模組化工具
            2. AMD
            3. CommonJS
            4. ES6 Module
            5. webpack可以解決三者的不足
            6. 其他可模組化的資源
            7. css
            8. png
         2. 开发服务器(Dev Server)
      2. 優點
         1. 1、忽略不用的静态资源。
         2. 2、便捷的代码分裂。
         3. 3、你来控制静态资源被执行的方式。
         4. 4、稳定的生产环境。
         5. 5、当你熟练掌握了之后用起来会非常快。
         6. 6. 可以有效避免全局变量
         7. * Webpack是React社区的主要构建工具
      3. 缺點
         1. 1、文档太烂。
         2. 2、源代码也很恐怖……
         3. 3、配置过程对于新手来说遍地都是坑。配置文件的标识符容易混淆。
         4. 4、Webpack基本上只靠作者一人来维护。
5. 前端 CSS 框架
   1. Bootstrap 3
   2. Bootstrap 2
   3. Foundation
   4. Susy
   5. Pure
   6. Baseline
   7. CSS Front-end Frameworks with comparison 各家 CSS 框架的比較表
6. CSS 前置處理器 / 預處理器 (Preprocessor)
   1. why ?
      1. 結構化
         1. 避免龐雜程式碼疊床架屋
         2. 提高效能
         3. 出現樣式的問題卻找不到問題的源頭
   2. 市面上常見
      1. Sass
         1. Scss
         2. Sass
         3. Bourbon
      2. Less
         1. LESS Hat.
      3. Stylus
         1. Cssowl mixin library
      4. PostCSS
         1. PostCSS Mixins
      5. Skeleton
      6. Myth
7. 前端工作自動化工具 / 工作管理器 / 工作執行器 task runner / 建置工具 build tool
   1. why ?
      1. 把重複性的工作自動化
   2. 市面上常見
      1. Grunt
      2. Gulp
      3. Grunt和Gulp仅仅是用来处理文件的工具， 没有Webpack依赖关系网的概念。
8. 套件管理器
   1. why ?
      1. 方便管理套件的安裝與升級
   2. 市面上常見
      1. Bower
      2. npm
9. 建模工具 Scaffolding Tool
   1. Yeoman
      1. why ?
         1. 快速建立起一個網站的骨架
         2. 把預設的目錄、檔案、設定全部寫好
      2. What ?
         1. 建模工具
            1. yo
         2. 工作管理器
            1. Grunt 或 Gulp (二選一即可)
         3. 套件管理器
            1. Bower 與 npm
      3. 一個前端網站的建置流程
         1. 先使用 yo 快速建立網站骨架
         2. 建立骨架的過程中會自動透過 Bower 與 npm 自動安裝相依套件
         3. 建立完成後可以透過 Grunt 或 Gulp 自動化完成一些預先設定好的工作
10. 文字編輯器
    1. 市面上常見
       1. Visual Studio Code
       2. Sublime Text
       3. Atom
       4. Brackets
       5. WebStorm
       6. Coda
       7. 外掛 (Plugins) 功能