前端工程师技能图谱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
前端工程师技能图谱skill-map的更多相关文章
- Java软件工程师技能图谱
原文链接:Java软件工程师技能图谱 最近在考虑"拥有怎样的技能才能算一名合格的java软件工程师呢?"这个问题.碰巧在github发现一个很棒的开源项目--程序员技能图谱.@Zh ...
- 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- PHP 工程师技能图谱
# PHP 工程师技能图谱## 基础知识 - HTTP - HEADER - REQUEST - RESPONSE - GET/POST/PUT/DELETE/PATCH/CONNECT/OPTION ...
- Python 工程师技能图谱skill-map
# **Python 工程师技能图谱** ## **入门**- 笨办法学Py- 官方教程- Hitchhiker- coursera * codeskulptor.org ## **进阶/脚本** # ...
- 前端工程师技能之photoshop巧用系列第三篇——切图篇
× 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切 ...
- 前端工程师技能之photoshop巧用系列第二篇——测量篇
× 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...
- 前端工程师技能之photoshop巧用系列第一篇——准备篇
× 目录 [1]作用 [2]初始化 [3]常用工具[4]快捷键 前面的话 photoshop是前端工程师无法回避的一个软件,这个软件本身很强大,但我们仅仅需要通过这个工具来完成基本的切图工作即可.本文 ...
- web前端工程师技能总结
编辑器: 1 webstorm(建议版本10.0), 2 sublimeTEXT(建议版本3), 3 dreamweaver (建议版本CS6, CC2015) 浏览器: 1 firefox 建议 ...
- 前端工程师技能之photoshop巧用系列第四篇——图片格式
× 目录 [1]图片格式 [2]保存设置 前面的话 对于前端来说,图片格式是需要重要掌握的知识.本文是photoshop巧用系列第四篇——图片格式 图片格式 目前在前端的开发中常用的图片格式有jpg. ...
随机推荐
- [CSP-S模拟测试]:water(BFS)
题目描述 有一块矩形土地被划分成$n\times m$个正方形小块.这些小块高低不平,每一小块都有自己的高度.水流可以由任意一块地流向周围四个方向的四块地中,但是不能直接流入对角相连的小块中.一场大雨 ...
- 2019-2020-1 20175223 《信息安全系统设计基础》MyOD
目录 一.要求 二.设计流程 1. 需求分析 2. 概要设计 伪代码 3. 详细设计 main.c tans_0x.c tans_pr.c tansp.h 三.编写Makefile,并制作动.静态库 ...
- APPium连接真机输入框中输入的内容与代码中不一致
今天解决了上一个问题,又碰到了一个新的问题. 问题:连接真机输入框中输入的内容与代码中不一致. 描述: 想实现登录页面输入用户名和密码自动登录,可是在输入用户名和密码的框中输入的内容总是与代码中的不一 ...
- bat 需注意
1. 注释 :: 注释内容,下一行不能是空行,必须是语句否则报错. goto blabla rem 注释内容,则无上述限制. goto blabla 2. if rem 1. 要注意左括号前的空格以及 ...
- 工控PLC中,关于定时器TON,TOF,的一点新认知,或者说醒悟吧!
PLC 中的定时器,都是放在一个具体PRG任务单元中的,而PRG单元需要放在具体固定的周期循环任务中才能被执行,而这个周期循环任务的循环周期 T: 与定时器的定时时间T0: T与T0 的数量级 ...
- python post 发送字符串
python post 发送一段字符串 把字符串写在表单里,表单用字典格式,字符串作value import requests data={key:str} r=requests.post(url,d ...
- 52-python基础-python3-列表-常用列表方法- reverse()方法
reverse()方法 永久性地修改列表元素的排列顺序,但可随时恢复到原来的排列顺序,为此只需对列表再次调用reverse() 即可. 实例:
- 牛客网挑战赛24 青蛙(BFS)
链接:https://www.nowcoder.com/acm/contest/157/E来源:牛客网 有一只可爱的老青蛙,在路的另一端发现了一个黑的东西,想过去一探究竟.于是便开始踏上了旅途 一直这 ...
- zoj 3777 Problem Arrangement(壮压+背包)
Problem Arrangement Time Limit: 2 Seconds Memory Limit: 65536 KB The 11th Zhejiang Provincial C ...
- fieldset与legend,label
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...