前端工程師技能圖譜skill-map

# 前端工程師技能圖譜

## 瀏覽器
- IE6/7/8/9/10/11 (Trident)
- Firefox (Gecko)
- Chrome/Chromium (Blink)
- Safari (WebKit)
- Opera (Blink)

## 編程語言
- JavaScript/Node.js
- CoffeeScript
- TypeScript

## 切頁面
- HTML/HTML5
- CSS/CSS3
- Sass/LESS/Stylus
- PhotoShop/Paint.net/Fireworks/GIMP/Sketch

## 開發工具

### 編輯器和IDE
- VIM/Sublime Text2
- Notepad++/EditPlus
- WebStorm
- Emacs EmacsWiki
- Brackets
- Atom
- Lime Text
- Light Table
- Codebox
- TextMate
- Neovim
- Komodo IDE / Edit
- Eclipse
- Visual Studio/Visual Studio Code
- NetBeans
- Cloud9 IDE
- HBuilder
- Nuclide

### 調試工具
- Firebug/Firecookie
- YSlow
- IEDeveloperToolbar/IETester
- Fiddler/Charles
- Chrome Dev Tools
- Dragonfly
- DebugBar
- Venkman

### 版本管理
- Git/SVN/Mercurial
- Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge

## 代碼質量

### Coding style
- Eslint/JSLint/JSHint/jscs
- CSSLint
- Markup Validation Service
- HTML Validators

### 單元測試
- QUnit/Jasmine
- Mocha/Should/Chai/Expect
- Unit JS

### 自動化測試
- WebDriver/Protractor/Karma Runner/Sahi
- phantomjs
- SourceLabs/BrowserStack

## 前端庫/框架
- jQuery/Underscore/Mootools/Prototype.js
- YUI3/Dojo/ExtJS/KISSY
- Backbone/KnockoutJS/Emberjs
- AngularJS
- Batarang
- Bootstrap
- Semantic UI
- Juice UI
- Web Atoms
- Polymer
- Dhtmlx
- qooxdoo
- React
- Brick
- Vue.js

## 前端標準/規範
- HTTP/1.1: RFCs 7230-7235
- HTTP/2
- ECMAScript 5/6/7
- W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...
- CommonJS Modules/AMD
- HTML5/CSS3
- Semantic Web
- MicroData
- RDFa
- Web Accessibility
- WCAG
- Role Attribute
- WAI-ARIA

## 性能
- JSPerf
- YSlow 35 rules
- PageSpeed
- HTTPWatch
- DynaTrace's Ajax
- 高性能JavaScript

## SEO

## 編程知識儲備
- 數據結構
- OOP/AOP
- 原型鏈/做用域鏈
- 閉包
- 編程範型
- 設計模式
- Javascript Tips

## 部署流程

### 壓縮合並
- YUI Compressor
- Google Clousure Complier
- UglifyJS
- CleanCSS

### 文檔輸出
- JSDoc
- Dox/Doxmate/Grunt-Doxmate

### 項目構建工具
- make/Ant
- GYP
- Grunt
- Gulp
- Yeoman
- FIS
- Mod
- Webpack

## 代碼組織

### 類庫模塊化
- CommonJS/AMD/ES6 Module
- YUI3模塊

### 業務邏輯模塊化
- bower/component

### 文件加載
- LABjs
- SeaJS/Require.js/Webpack

### 模塊化預處理器
- Browserify

## 安全
- CSRF/XSS
- CSP
- Same-origin policy
- ADsafe/Caja/Sandbox

## 移動Web
- HTML5/CSS3
- 響應式網頁設計
- Zeptojs/iScroll
- V5/Sencha Touch
- PhoneGap (Cordova)
- Ionic
- jQuery Mobile
- W3C Mobile Web Initiative
- W3C mobileOK Checker
- Open Mobile Alliance
- React Native/Weex

## 前沿技術社區/會議
- D2/WebRebuild
- NodeParty/W3CTech/HTML5夢工廠
- JSConf/滬JS(JSConf.cn)
- QCon/Velocity/SDCC
- JSConf/NodeConf
- CSSConf
- YDN/YUIConf
- HybridApp
- WHATWG
- MDN
- codepen
- w3cplus
- CNode

## 計算機知識儲備
- 編譯原理
- 計算機網絡
- 操做系統
- 算法原理
- 軟件工程/軟件測試原理
- Unicode

## 軟技能
- 知識管理/總結分享
- 溝通技巧/團隊協做
- 需求管理/PM
- 交互設計/可用性/可訪問性知識

## 可視化 - SVG/Canvas/VML - SVG: D3/Raphaël/Snap.svg/DataV - Canvas: CreateJS/KineticJS - WebGL/Three.JS