# 前端工程师技能图谱

## 浏览器
- 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. [CSP-S模拟测试]:春思(数学)

    蝶恋花·春景花褪残红青杏小.燕子飞时,绿水人家绕.枝上柳绵吹又少.天涯何处无芳草!墙里秋千墙外道.墙外行人,墙里佳人笑.笑渐不闻声渐悄.多情却被无情恼.(本词是伤春之作,写春景清新秀丽.同时,景中又有 ...

  2. (转)springboot应用启动原理(一) 将启动脚本嵌入jar

    转:https://segmentfault.com/a/1190000013489340 Spring Boot Takes an opinionated view of building prod ...

  3. phpredis报错信息:protocol error, got 'o' as reply type byte解决方案

    今天在前端调用PHP的接口时,有报错信息为:protocol error, got 'o' as reply type byte另外此错误有几率会重现,并不是必现的.十分疑惑,遂百度一下,发现是red ...

  4. English-GIS

    "Toposheet" 是 "Topographic sheet" 的简称,既地形图图幅的意思.

  5. mac 上查看python3的各种安装路径

    1.mac chromedriver的安装目录:/usr/local/bin 2.mac htmltestrunner的存放目录:命令行下 import sys sys.path/Library/Fr ...

  6. 有根树的表达 Aizu - ALDS1_7_A: Rooted Trees

    有根树的表达 题目:Rooted Trees Aizu - ALDS1_7_A  A graph G = (V, E) is a data structure where V is a finite ...

  7. md5加密报错解决方法(TypeError: Unicode-objects must be encoded before hashing)

    update()必须指定要加密的字符串的字符编码

  8. Java程序的设计环境配置

    一.下载主要的开发工具 JDK的下载 www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html Ecli ...

  9. bitset归结,一个实例

    我是蒟蒻一名,请大佬勿喷. 绝大部分来自https://www.cnblogs.com/magisk/p/8809922.html   ,  可以去大佬博客逛一逛 bitset是C++中类似数组的一种 ...

  10. 年度重大升级,IntelliJ IDEA 2019.2 稳定版发布

    文章转载自 OSCHINA 社区 [http://www.oschina.net] 期待已久. 7月24日,JetBrains 正式发布了 IntelliJ IDEA 2019.2 稳定版. 作为 I ...