# 前端工程师技能图谱

## 浏览器
- 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. LR之分析

    1.Errors(错误统计) 每秒错误数:数值越小越好,通过这个图可以知道,当负载增加的时候,定位何时系统在负载下开始不稳定甚至出错. 2.Transaction(事务) average transa ...

  2. 转载:Linux下启动和关闭Weblogic(管理服务器+被管服务器)

    转载自:http://www.cnblogs.com/nick-huang/p/3834134.html  感谢! Weblogic的管理服务器和被管服务器的启动.关闭,偶尔会用到,却又不常用,导致需 ...

  3. 使用SSH方式实现Git远程连接GitHub/gitlab

    参照: https://blog.csdn.net/wuli_smbug/article/details/81480162

  4. 控制banner内容

    Spring Boot启动的时候默认的banner是spring的字样,看多了觉得挺单调的,Spring Boot为我们提供了自定义banner的功能. 自定义banner只需要在resource下新 ...

  5. WireShark 自带工具 editcap 和 text2pcap 配合完成改包操作

    一.拆包 首先声明这种方法比较复杂而且需要点技术水平,不建议菜鸟尝试(可以使用WireEdit编辑pcap包,不过要联网)其实在熟练这种方法后也可以很快的,但这种方法主要还是方便吧,不用下载其他什么软 ...

  6. ATT&CK实战系列 红队实战(一)————环境搭建

    首先感谢红日安全团队分享的靶机实战环境.红队实战系列,主要以真实企业环境为实例搭建一系列靶场,通过练习.视频教程.博客三位一体学习. 靶机下载地址:http://vulnstack.qiyuanxue ...

  7. c#生成html静态文件时出现空白行,怎么去掉utf-8中的bom

    public static void UTF8RemoveBOM(string filepath) { UTF8RemoveBOM(filepath, filepath); }   public st ...

  8. 注册服务到服务中心(Consul)

    注册服务到服务中心(Consul) 添加POM文件中的依赖 在POM文件添加如下依赖: <dependency> <groupId>org.springframework.bo ...

  9. 数据存入hive数据表之前对.csv(数据集)文件的预处理以及数据的上传

    对于数据集文件,在将其中的数据存入hive之前,需要将数据进行预处理. 1.删除文件第一行记录,即字段名称 sed -i '1d' raw_user //1d表示删除第1行,同理,3d表示删除第3行, ...

  10. bootstrap-thymeleaf-分页

    1.HTML代码 <div th:fragment="paginater"> <ul th:id="paginaterUlID" th:if= ...