# 前端工程师技能图谱

## 浏览器
- 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

前端工程师技能图谱skill-map的更多相关文章

  1. Java软件工程师技能图谱

    原文链接:Java软件工程师技能图谱 最近在考虑"拥有怎样的技能才能算一名合格的java软件工程师呢?"这个问题.碰巧在github发现一个很棒的开源项目--程序员技能图谱.@Zh ...

  2. 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析

    http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...

  3. PHP 工程师技能图谱

    # PHP 工程师技能图谱## 基础知识 - HTTP - HEADER - REQUEST - RESPONSE - GET/POST/PUT/DELETE/PATCH/CONNECT/OPTION ...

  4. Python 工程师技能图谱skill-map

    # **Python 工程师技能图谱** ## **入门**- 笨办法学Py- 官方教程- Hitchhiker- coursera * codeskulptor.org ## **进阶/脚本** # ...

  5. 前端工程师技能之photoshop巧用系列第三篇——切图篇

    × 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切 ...

  6. 前端工程师技能之photoshop巧用系列第二篇——测量篇

    × 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...

  7. 前端工程师技能之photoshop巧用系列第一篇——准备篇

    × 目录 [1]作用 [2]初始化 [3]常用工具[4]快捷键 前面的话 photoshop是前端工程师无法回避的一个软件,这个软件本身很强大,但我们仅仅需要通过这个工具来完成基本的切图工作即可.本文 ...

  8. web前端工程师技能总结

    编辑器: 1 webstorm(建议版本10.0), 2 sublimeTEXT(建议版本3), 3 dreamweaver (建议版本CS6, CC2015)  浏览器: 1 firefox  建议 ...

  9. 前端工程师技能之photoshop巧用系列第四篇——图片格式

    × 目录 [1]图片格式 [2]保存设置 前面的话 对于前端来说,图片格式是需要重要掌握的知识.本文是photoshop巧用系列第四篇——图片格式 图片格式 目前在前端的开发中常用的图片格式有jpg. ...

随机推荐

  1. 1-什么是 Prometheus

    什么是 Prometheus Prometheus 是由 SoundCloud 开源监控告警解决方案,从 2012 年开始编写代码,再到 2015 年 github 上开源以来,已经吸引了 9k+ 关 ...

  2. python数据储存

    python数据储存 csv文件的操作 安装csv包打开cmd 执行 pip install csv引入的模块名为csv 读取文件 with open("xx.csv"," ...

  3. 两个图层一上一下div view

    <view class="main"> <view class="user-info"> </view> <view ...

  4. PHP的Session机制解析 2

    在鸟哥的博客看到对php session的过期时间的一篇文章,在此记录. 原文地址:http://www.laruence.com/2012/01/10/2469.html 以下是鸟哥博客原文: 今天 ...

  5. Java基本数据类型内存分配

    1.java程序运行时有6中地方存储数据,分别是:寄存器.栈.堆.静态存储.常量存储.非RAM(随机存储器),主要是堆与栈的存储.   2.堆与栈是java用来在RAM中存储数据的地方,java自动管 ...

  6. web测试点

    一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#¥%……&*?[]{}”特别要注意单引号和&符号. 禁止直接输入特殊字符时, ...

  7. CSS 6种完全居中最佳实践(整理)

    2016年4月28日 1.最佳法: .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position ...

  8. androidmanifest.xml 解码工具又来一发

    背景: 最近这几天在研究facebook的协议,但是facebook的采用 SSL Pinning 技术,正常通过fiddler是不能解开SSL观察协议. 听说facebook app在 manife ...

  9. eclipse搭建jmeter编译环境(Jmeter二次开发)

    jmeter是开源项目,方便大家对代码进行改动. 写了一个简单教程,帮助入门者进行搭建jmeter编译环境! 下载地址 文件格式为zip,解压后为docx微软office2007文档. 或者直接访问我 ...

  10. 系统安装1---U盘启动器制作

    1.下载PE制作工具,现在有很多的PE制作工具,如老毛桃,大白菜等.下面我使用的是IT天空的U盘PE制作工具. 下载地址:https://www.itiankong.net/thread-369670 ...