Total Pageviews

Sunday 4 September 2016

前端开发资料

3.切页面

4、开发工具

（1）编辑器和IDE
VIM：是一个类似于Vi（Vi:Unix及Linux系统下标准的编辑器）的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。
Sublime Text2：是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器，Sublime Text是为程序员准备的最好的文本编辑器之一（尽管不是最最好的）。Sublime 囊括了众多特性并且拥有很棒的界面外观，在三大主流桌面操作系统上均能运行，即 Windows, Mac 还有 Linux 之上。
Notepad++：Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。
EditPlus：是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。
WebStorm ：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
IntelliJ IDEA（推荐）：IDEA 全称 IntelliJ IDEA，是java语言开发的集成环境，IntelliJ在业界被公认为最好的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、各类版本工具(git、svn、github等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。它的旗舰版本还支持HTML，CSS，PHP，MySQL，Python等。免费版只支持Java等极少数语言。达维营
Emacs ：著名的集成开发环境和文本编辑器。Emacs被公认为是最受专业程序员喜爱的代码编辑器之一，另外一个vim。
EmacsWiki ：是Emacs编辑器的一个插件，它允许你从本地系统创建一个Wiki并输出为HTML页面。
Brackets ：Adobe Brackets是一款开源、简洁强大的HTML、CSS和JavaScript集成开发环境，支持增加外挂程式以提供额外的功能扩展，目前可用的外挂程式例如支持增加侦错、浏览器特定CSS前缀、JSDoc注解等。
Atom ：它由 Github 出品的一款各方面体验都很像 Sublime Text 的编辑器，目前免费。
Lime Text ：Lime Text 的后端采用 Go 实现，前端则使用了 ermbox，Qt (QML) 及 HTML/JavaScript。开发正根据完全明确可见的目标逐步进行中。你能够在它的 Github 页面中为项目贡献自己的力量。
Light Table ：是由Microsoft Visual Studio部门项目经理Chris Granger离职后开发的全新理念的IDE，支持多种语言。Light Table的理念也非常简单念：写程序需要的是真正的工作台，不只是编辑器和项目浏览器。
Codebox ：Codebox 是一个完整的且模块化的云端 IDE。它可以运行在任何类 Unix 设备上(Linux、Mac OS X)。它是 codebox.io 的开源组件。
TextMate：是Mac下的著名的文本编辑器软件，与BBedit一起并称苹果机上的emacs和vim。尤其适合程序员使用，可以定制许多贴心使用的功能。
Neovim ：VIM的fork项目。Vim 不支持异步并发，Neovim 支持。
Komodo IDE / Edit ：可以在 Windows、Mac OS X 和 Linux 上运行，并支持通用的开源语言 —— Python、Perl、PHP 和 Ruby。代码智能引擎非常可靠。
Eclipse ：是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具（Java Development Kit，JDK）。
Visual Studio/Visual Studio Code ：Microsoft Visual Studio（简称VS）是美国微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境(IDE)等等。所写的目标代码适用于微软支持的所有平台
NetBeans ：由Sun公司（2009年被甲骨文收购）在2000年创立，它是开放源运动以及开发人员和客户社区的家园，旨在构建世界级的Java IDE。NetBeans当前可以在Solaris、Windows、Linux和Macintosh OS X平台上进行开发，并在SPL(Sun公用许可)范围内使用。
Cloud9 IDE ：是一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。
HBuilder ：一款国产的ID，我只想呵呵~
Nuclide ：是Facebook开发的开发React Native的开发工具,基于Github的Atom开发,以Atom插件的形式存在。
Aptana：是一个非常强大,开源,JavaScript-focused的AJAX开发IDE。它的特点包括： JavaScript,JavaScript函数,HTML,CSS语言的Code Assist功能。
CygWin:是一个在windows平台上运行的类UNIX模拟环境，是cygnus solutions公司开发的自由软件（该公司开发的著名工具还有eCos，不过现已被Redhat收购）
（2）调试工具
Firebug ：Firebug是firefox下的一个扩展,能够调试所有网站语言，如Html,Css等。
Firebug-lite：Firebug Lite是Firebug的一个子集，支持IE、Opera和Safari这三款主流浏览器。目前有些功能还不太完整，对CSS式样进行实时分析还不错，但Firefox版的Yslow功能却不可用。
Firecookie ： 是一款基于firebug的cookie调试工具,可以方便的查看firefox上各个站点的cookie信息。
YSlow：是Yahoo发布的一款基于FireFox的插件，可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。
IEDeveloperToolbar ：IE开发者工具
IETester ：是一个WebBrowser控件，包含有5.5到11等几个版本的IE浏览器，界面美观。
Fiddler ：是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。
Chrome Dev Tools Chrome开发者工具。
Dragonfly ：（Opera Dragonfly）是适用于 Opera 浏览器的跨设备、跨平台的调试环境 – 调试 JavaScript、检查和编辑 CSS 与 DOM，以及查看手机或计算机上的任何错误。
DebugBar ：DebugBar插件是一款功能很强大的IE插件，用户可以从各个不同的角度剖析Web页面内部，包括页面 详细代码、CSS样式表、所有链接、所有图片代码、脚本信息等等
Venkman ：作为基于Mozilla的浏览器（如Firefox）的扩展，Venkman JavaScript调试器提供了一个功能完整的JavaScript调试环境。
Web Inspector：Web检查器，是Safari浏览器提供的一组javascript工具。
Smushit：是一款免费在线图片压缩小工具，可最优化压缩你的图片文件大小，却不会影响图片的质量和视觉效果，比通过Photoshop软件来压缩图片好多了。
SuperPreview：是微软发布的网页开发调试工具，自带有很多元素查看工具，如箭头、移动、辅助线、对比……，在查看网页的IE6/IE7/IE8不同表现的同时，可以对比效果。
JsBeautifier：（在线版，可汉化）微型的美化器可以重新调整 bookmarklet 和丑陋的JavaScript的格式和缩进，也可以对使用流行的 Dean Edward 的 Packer 打包的脚本进行拆包，对通过javascriptobfuscator.com 混淆的脚本进行反混淆。具体可以参考：http://jsbeautifier.org/
Wireshark：（前称Ethereal）是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包，并尽可能显示出最为详细的网络封包资料。
TcpDump：可以将网络中传送的数据包完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。
（3）版本管理
工具：Git/SVN/Mercurial

5、代码质量

（1）Coding style
JSLint ：是一个JavaScript验证工具（非开源），可以扫描JavaScript源代码来查找问题。
JSHint ：跟JSLint非常像，都是Javascript代码验证工具，这种工具可以检查你的代码并提供相关的代码改进意见。
CSSLint ：CSS Lint 能线上分析并检测你的网站 CSS 样式表有无任何潜在问题，http://csslint.net/。
Markup Validation Service ：W3C提供免费的Markup Validation Service ,这是一个可以验证Html/XHtml文档的语法规范的公共服务。http://validator.w3.org/
HTML Validator ：代码规范性检测。
（2）单元测试
QUnit ：是一个强大的JavaScript单元测试框架，该框架是由jQuery团队的成员所开发，并且是jQuery的官方测试套件。http://qunitjs.com/
Jasmine :是一款 JavaScript 测试框架，它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法，让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说，它是一款不错的测试框架选择。http://jasmine.github.io/
Mocha ：测试框架，是一个简单、灵活有趣的 JavaScript 测试框架,用于Node.js和浏览器上的JavaScript应用测试。http://mochajs.org
Should ：断言库 should : https://github.com/tj/should.js
Chai ：是一套TDD(测试驱动开发)/BDD(行为驱动开发)的断言框架。http://chaijs.com/
Expect ：追求极简的 BDD 风格断言库。
better-assert：C-style TDD 断言库，
istanbul ：测试率覆盖工具
assert
（3）自动化测试
WebDriver ：webdriver自动化俗称Selenium 2.0测试Web应用程序工具。
Testacular：又名Karma。Google 已开源 Testacular，一个基于Node.js的JavaScript 测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到 CI （Continuous integration）工具，也可和其他代码编辑器一起使用，可以在不同的桌面或移动设备浏览器上，或在持续集成的服务器上测试JavaScript代码。
Watir：全称是“Web Application Testing in Ruby”，发音类似“water”。它是一种基于网页模式的自动化功能测试工具。

6、前端库/框架

Dhtmlx ：是一个JavaScript 库，提供了一套完整的Ajax驱动的UI 组件。使用 dhtmlxSuite 生成企业级 web 应用程序有干净的界面、 快速的性能和丰富的用户体验。
qooxdoo ：是一个全面和创新的AJAX。利用面向对象的JavaScript允许开发令人印象深刻的跨浏览器的应用。没有HTML，CSS知识，也不是必要的。
vue.js ：数据驱动的组件，为现代化的 Web 界面而生
（1）MVC框架
React :React.js（React）是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。Facebook开源了React，这是该公司用于构建反应式图形界面的JavaScript库，已经应用于构建Instagram网站及Facebook部分网站。最近出现了AngularJS、MeteorJS 和Polymer中实现的Model-Driven Views等框架，React也顺应了这种趋势。React基于在数据模型之上声明式指定用户界面的理念，用户界面会自动与底层数据保持同步。与前面提及的框架不同，出于灵活性考虑，React使用JavaScript来构建用户界面，没有选择HTML。
AngularJS ：诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
Batarang ：Angular chrome 插件 Batarang
Backbone.js ：是一个开源的、轻量级的MVC框架。它诞生于2010年，发展的非常迅速，很快就成长为一种替代笨重的、全功能MVC架构（比如ExtJS）的JavaScript框架。
Ember.js ：EmberJS要追述源头得回到2007年，它源于SproutCore MVC框架，SproutCore框架最初是由SproutIt公司开发，后来由Apple接手并演进和维护。直到2011年，Yehuda Katz（他是jQuery项目和Ruby on Rails项目的核心贡献者）发起了EmberJS项目。
Polymer：polymer是Google创造的一个web components规范的一个实现。而angularjs是一个MVVM的框架。本质上的区别在于一个是创造小而美的组件，一个是创造大而全的框架。
Knockout.js ：严格来说并不是MVC框架，而是MVVM(Model -View-ViewModel)框架
（2）DOM操作
jQuery ：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
Underscore ：是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题：“如果我面对一个空白的 HTML 页面，并希望立即开始工作，我需要什么？” 他弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。Underscore 提供了100多个函数，包括常用的：map、filter、invoke — 当然还有更多专业的辅助函数，如：函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。
Mootools ：MooTools是一个简洁，模块化，面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js、css、html时候。它提供了一个比普通js更面向对象的documentAPI。
Prototype.js ：prototype.js 是Sam Stephenson写的一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国内外有多个基于此类库实现的效果库，也做得很棒。prototype.js不仅是一个有很大实用价值的js库，而且有很高的学习价值。
Zepto
YUI Library(YUI2/YUI3)
Django ：是由 Python 开发的一个免费的开源网站框架，可以用于快速搭建高性能，优雅的网站！
（3）模板引擎
A、Underscore.js
B、Handlebars.js ：是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。
C、mustache.js
（4）UI框架
（5）图表
A、three.js
B、D3.js
C、KineticJS
D、EaselJS
E、Processing.js
（5）JavaScript的取代品
在为了提高运行速度而意图取代JavaScript的语言或工具中，人气最高的为以下五个：
A、CoffeeScript
B、TypeScript
C、Dart
D、Haxe
E、JSX
（6）CSS预处理器
A、Less
B、Sass
C、Stylus
（7）JavaScript测试工具
最后，在测试JavaScript脚本代码时可以使用的工具中，人气最高的为以下四个：
A、QUnit
B、Jasmine
C、Mocha（支持Node.js）
D、JsTestDriver
Smarty
YUI Test ：对JavaScript 进行单元测试的工具
Zend

7、前端标准/规范

HTTP/1.1: RFCs 7230-7235


POSH、XOXO、RSS/ATOM,RDF
YAML,JSON_RPC,Bayeux,
Microformat,WF2.0

8、性能


WebPageTest
ShowSlov/YSlow/34Rule
Charles

9、编程知识储备

OOP/AOP
原型链/作用域链
面向对象、切面编程
函数式编程

10、流程/部署

（1）压缩合并
JSMin
TPacker-minifier
（2）文档输出
（3）项目构建工具

11、代码组织

（1）类库模块化
（2）业务逻辑模块化
（3）文件加载
（4）模块化预处理器

12、安全

CSRF ：即 CSRF, CSRF（Cross-site request forgery 跨站请求伪造，也被称成为 “one click attack”或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（ XSS），但它与 XSS 非常不同，并且攻击方式几 乎相左。 XSS 利用站点内的信任用户，而 CSRF 则通过伪装来自受信任用户的请求来 利用受信任的网站。与 XSS 攻击相比，CSRF 攻击往往不大流行（因此对其进行防范 的资源也相当稀少）和难以防范，所以被认为比 XSS 更具危险性。
ADsafe/Caja/Sandbox

13、移动Web

HTML5/CSS3
iPhone/iPad/IOS/Android

14、JavaScript生态

MongoDB/CouchDB

15、开放服务

YAP，BOSS，SearchMonkey,
AppEngine
GoogleAjax API，Flickr Services,Search API,
Google Map,51Map等 地图服务

16、前沿技术社区/会议

QCon/Velocity/SDCC
YDN/YUIConf
HybridApp
UED Teams

17、计算机知识储备

编译原理
算法原理
软件工程/软件测试原理

18、软技能

知识管理/总结分享
沟通技巧/团队协作
需求管理/PM
交互设计/可用性/可访问性知识
SEO

19、可视化

SVG/Canvas/VML

20、后端工程师

（1）编程语言
C/C++/Java/PHP/Ruby/Python/…
（2）网页服务器
LAMP：Linux+Apache+Mysql/MariaDB+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件，本身都是各自独立的程序，但是因为常被放在一起使用
（3）数据库
SQL
（4）数据缓存
（5）文件缓存/代理
（6）操作系统
Unix/Linux/OS X/Windows
（7）数据结构
参考资料：

附：前端工具合集：

前端组织

虽混过外企俩家，但劳资英文这项的技能点还是灰色的…so，俺关注的站点主要以中文为主
名称推荐指数备注/说明
Git★★★★★劳资清楚这不是个纯粹的前端社区… 但作为全球最大的搞基社区，无数前端项目在这启航 没Git都不好意思面基有木有！
MDN★★★★★不解释，无数的资源再等着你探索
Awesomes.cn★★★★☆国人维护的前端资源库，深度对接到 Github
慕课★★★★☆大量的在线计算机课程。 虽然初、中级居多，但是不乏有巨作值得细细品尝
W3Cplus★★★★☆大漠(《图解CSS3》作者)在国内的影响力杠杠的 Sass专家级
百度Web前端研发部★★★★确实对得起“研发”这个称呼 FIS、UEditor等就是他们搞出来的
前端乱炖★★★☆前端社区太多，乱炖还算做的不错的
极客学院★★★和慕课类似，但是内容更杂、更丰富 PS：貌似比较新颖的教程都是收费的
Div.IO★★★主要内容是最新的前端库和前沿技术
腾讯全端AlloyTeam★★★腾讯Web前端团队

前端博客

值得长期占坑的前端个人博客，都是偶经常关注的
名称推荐指数备注/说明
如何跟上前端开发的最新前沿★★★★★RT
阮一峰★★★★★关注多年，拜读其ES6系列… 虽网传靠写书进鸟阿里，但博客内容确实够丰富
粉丝日志for张丹★★★★★大爱作者写的Node系列
张鑫旭★★★★★成名多年的、高产的前端大湿

博客搭建

名称推荐指数备注/说明
hexo★★★★★快速、简洁且高效的博客框架
jekyll★★★★将纯文本转化为静态网站和博客
Tumblr★★★轻博客的祖师爷
WordPress★这玩意古老到我都不想介绍鸟
使用hexo/jekyll + GitPage，前端搭建静态博客那是相当easy。用Markdown写文章做记录，再push到Git上，分分钟高大上有木有

CSS

名称推荐指数备注/说明
LoadersCSS★★★★☆用CSS技术实现loading动画； 补一句，想熟悉、理解keyframes、animation、transform、transition的童鞋可以直接去读其源码(只有千把行代码)，读完就算出师鸟:)
WeUI★★★★☆一套同微信原生视觉体验一致的基础样式库 为微信Web开发量身设计，令用户的使用感知更加统一
HINT.css★★★★一款非常小巧的提示框效果
Hover.css★★★★很多鼠标Hover态的效果，可以给产品学习一下:)
csscss★★★★用于检查css代码冗余
purecss★★★☆小巧的响应式CSS库，Yahoo!出品

浏览端JS

名称推荐指数备注/说明
Echarts★★★★★好用，最关键的是支持的图表展示非常之多，强烈推荐
Swiper★★★★★强大的Slider库 其实这类效果库非常多，但文档能那么专业的就很少鸟
fullPage★★★★☆非常好用的全屏滑动库，看demo就明白
PhotoSwipe★★★★☆偶常用的js库 官网上有这么一句很关键、重要”no dependencies”
Vuejs★★★★☆比较喜欢其作者… 所以劳资正在看源码学习学习
emojify.js★★★★能够将emoji关键词转换为emoji图片的JS插件 可以快速的为你的网站提供emoji表情支持
Highcharts★★★★Highcharts中文网，又是一个图表库 确实功能强大，但是觉得不好看… PS：官网就做的不好看，脏脏的赶脚
videojs★★★☆当下视频需求都用上<video>鸟 样式和交互统一的问题交给videojs搞定:)
clipboard★★★☆仅2kb大小，搞定剪贴板功能，屌不屌~ 但是，Safari不支持…
impress.js★★☆用来写PPT不错，偶也曾为其写过一篇impress.js初体验
Cropper★★☆国人开发的图片裁剪库
Swiper/PhotoSwipe/fullPage有这仨库，微信里常见的H5页完全不是问题哒

NodeJS

作为一名大前端甚至是多端，Node绝逼是必备的一块
社区活跃、部署方便都是令我对Node爱不释手的主要原因

推荐Package

这里介绍些有特色且前端有必要知道的包
名称推荐指数备注/说明
anywhere★★★★★随时随地将你的当前目录变成一个静态文件服务器的根目录
supervisor★★★★★监控Node代码，自动重启。 A supervisor program for running nodejs programs
nodemon★★★★★监控Node代码，自动重启。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
pm2★★★★★是一个带有负载均衡功能的Node应用的进程管理器
async★★★★☆一个流程控制工具包，提供直接而强大的异步功能
lodash★★★★☆JS工具库Underscore.js的一个fork发展而来
socket.io★★★★☆预计Node的实时框架 聊天室、页游等对实时性有高要求的较适用
Mongoose★★★★☆让NodeJS更容易操作Mongodb数据库； 附上一篇Mongoose学习参考文档
koa★★★★☆玩Node都知道express，但使用koa的就少很多，门槛比Ex稍高 通过generator避免繁琐的回调函数嵌套，强烈推崇官方的文章教程
Shipit★★★★☆一个强大的自动化部署工具。 shipit很多地方非常类似gulp，他们的核心都是任务系统。
node-inspector★★★★☆Node调试工具，使用起来跟Chrome的JS调试器很相似
winston★★★★☆Node服务最流行的日志库之一
thenify-all★★★★把异步的方法变成Promise的 Promisifies all the selected functions in an object
PhantomJS★★★★一般用来做抓取截图和无界面测试 也可以用来操作DOM和网络监测，很好玩的库Quick Start
Mocha★★★★Node里最常用的测试框架； 它支持多种node的assert libs； 同时支持异步和同步的测试，同时支持多种方式导出结果； 也支持直接在browser上跑JS代码测试。
everyauth★★★★OAuth的集成解决方案
shelljs★★★☆写Node时难免需要用shell去操作些神马 shelljs是基于Node的shell工具，Api及其简单
hashids★★★☆看名称就懂，给userid加解密用的
colors★★☆花俏的小工具 让打印console.log时有更好的展示样式
supervisor和nodemon这俩都是监控Node代码，使得每次修改代码后会，开发Node程序必备
以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:)

Node学习指南

名称推荐指数备注/说明
node.js中文资料导航★★★★★Node的中文资料导航，start1300+
从零开始nodejs系列文章★★★★★基本上每一篇都看过，强烈推荐
Node.js 包教不包会★★★★★值得阅读，看完绝不用买书鸟
七天学会NodeJS★★★★★劳资还没看，不过看目录还不错:)

Build 项目构建

Gulp+Webpack的使用套路参考:learning-gulp
Gulp资料收集：use-gulp
推荐篇与Webpack相关的文章《CSS Modules》
Webpack用起来吼吼：webpack-howto
名称推荐指数备注/说明
Webpack★★★★★项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。精选阅读中有篇资料就是介绍Webpack和React的工作机制。
Gulp★★★★★Gulp是基于Node实现Web前端自动化开发的工具。 学习资料附上GulpBook
Bower★★★★☆前端项目的包管理其实是件复杂的事 谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本…卧槽 Bower就是搞定这件事儿的，亲爹是Twitter 推荐篇Bower的中文文章：《bower解决js的依赖管理》
Grunt★★★★☆和Gulp类似，都是项目构建的常见选择 对比这俩的文章可谓不少，推荐篇《Gulp vs Grunt》英盲又想看文档，可以去Grunt中文网
Gitlab CI★★★★一套基于Gitlab的持续集成服务

Gulp推荐包

Gulp最基础的库就不列在下表格中鸟，其中包括：
名称推荐指数备注/说明
gulp-webpack★★★★★webpack与gulp配合，开启前端Build新纪元 webpack plugin for gulp
gulp-rev★★★★☆高大上第一步，静态文件名称变成HASH名称
gulp-rev-collector★★★★☆配合gulp-rev使用，自动用HASH替换模板内静态文件名
run-sequence★★★★Gulp任务机制为并行，RS使得有依赖的任务可串行执行 使用gulp-rev时得用RS配合 要不并行的生成配置和处理.html文件不能同事生效
gulp-util★★★★内含一套方法库，功能太多 个人感觉更喜欢功能单一的包，不太喜欢这种大杂烩
gulp-connect★★★★有reload功能的Run Webserver工具 我一般用来livereload，即保存之后自动刷新页面
gulp-load-plugins★★★★可加载package.json内与Gulp相关的插件 省去鸟一行一行require的功夫咯
gulp-clean★★★☆移除文件或文件夹的包
gulp-replace★★★☆其功能看名字就知道，用做字符串替换的
gulp-autoprefixer★★★☆叼炸天的自动处理浏览器前缀的包 文档地址：usage
gulp-rename★★★把文件重命名 结构设计的好不太会用到这个
gulp-flatten★★★删除或替换文件的相对路径； 一般我这用来移动img或者其他静态文件到新目录 同上：结构设计的好不太会用到这个

精选阅读

以下内容不包括NodeJS和面试相关的，俺已经单独准备好鸟
名称推荐指数备注/说明
stream-handbook★★★★★如果学习Nodejs，那么流一定是需要掌握的概念
ReactNative 中文版★★★★☆翻译自官方的中文文档
Mac设置指南★★★★☆Mac使用必看 尤其适合 偏执狂/强迫症 患者:)
MongoDB极简实践入门★★★★☆入门推荐的套路，非常浅显易懂
ReactWebpackCookBook★★★★☆此书会引导读者是进入React和Webpack的世界。 俩都是非常前沿的技术，同时使用会更有趣。
ReactNative学习指南★★★★新玩意层出不穷… 对于能持续学习的童鞋，这是个美好的时代
HTML/CSS 编码规范★★★☆编写灵活、稳定、高质量的HTML和CSS代码的规范
GulpBook★★★☆Gulp是基于Node实现Web前端自动化开发的工具
Markdown资料★★★☆简单看些语法入门，快速用起来

前端面试

名称推荐指数备注/说明
在LinkedIn做面试官的故事★★★★★非面试题，介绍LinkedIn的面试过程 文章有很多中肯的建议和想法，推荐阅读
大漠：写给前端面试者★★★★★这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受…
前端面试题★★★★☆Git上非常火的前端面试题，start17k+

工具/软件

Web

名称推荐指数备注/说明
CanIuse★★★★★前端必备；查看浏览器对各种新特性的兼容情况
百度脑图★★★★★非常方便的思维导图工具
ProcessOn★★★★☆和百度脑图的功能类似，脑图工具。
VimAwesome★★★★☆Vim插件集合，Vim党必备
Tower★★★★☆小而美的多人协同工具。 不光只有Web版，还有iPhone、iPad、Android、微信版。
smallpdf★★★★提供各种格式和pdf互相转换
Cmd Markdown★★★★好用的Web版Markdown编辑器
StackEdit★★★★又是一款Web版Markdown编辑器
墨刀★★★★一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。
htm2pdf★★★★HTML to PDF
Speaker Deck★★★★在线的演讲稿展示平台

APP

以下列表中的APP都是不区分系统平台的
名称推荐指数备注/说明
印象笔记★★★★★免费账号完全够用，跨平台跨终端的记录软件
多看阅读★★★★kindle确实好，但是懒得随身带着 多看还算不错，书较多且偶尔有特价比较爽
Android
名称推荐指数备注/说明
小米桌面★★★★☆多好看、多漂亮谈不上，关键是没有广告
iPhone
名称推荐指数备注/说明
Monkey★★★★Monkey是iPhone上一个GitHub第三方客户端。 展示 GitHub 上的开发者的排名，以及仓库的排名

Mac

对于美好事务的追求无论何时都不算晚，前年公司给配了台Mac用做测试开发机，于是开始在Mac下办公。Windows？回不去鸟…
名称推荐指数备注/说明
Homebrew★★★★★没它程序猿没法好好干活…Homebrew使OS X更完美。 使用gem来安装gems、用brew来搞定那些依赖包
iTerm2★★★★☆Mac终端功能少又不好看，iTerm2可以解救你~
BrowseShot★★★★☆我正在使用的网页截图工具，强烈推荐
WebStorm★★★★☆功能超强的前端IDE，不多介绍，谁用谁知道
Atom★★★★2015年7月之前，在桌面环境下我最喜欢的编辑器是Sublime。 但之后就是Atom，俺也专门为它写了篇使用纪要
马克鳗★★★★MarkMan，非常强大好用的标注、测量工具。 日常工作免费版就完全可以满足，强烈推荐
Wireshark★★★☆说实话，Mac下木有Fiddler挺不习惯，不过在有更强大的替代品
SourceTree★★★☆一款好用的的Git客户端工具，重点是支持中文:)
focus booster★★★因为比较在意时间管理，所以这软件是俺工作时间的必备之物
Mou★★小清新的Markdown编辑器

Linux

名称推荐指数备注/说明
oh-my-zsh★★★★★终端党必用的好工具，强烈推荐
tree★★★★linux以树状图逐级列出目录的内容
oneapm★★★★强大的运维工具，提供多种监控客户端； 有采集、分析、展示等一套功能； PS：我这用了服务器监控(免费哦)
httpie★★★☆一个CLI中的HTTP客户端 用法简单、易读

Chrome浏览器插件

名称推荐指数备注/说明
JSONView★★★★★麻麻再也不用担心偶调试接口啦
wappalyzer★★★★☆分析网站使用的技术 它可以检测网页的web服务器、JS框架等等
二维码生成器★★★★☆RT
User-Agent Switcher★★★★模拟各种终端的UA，达到调试目的
GitPlug★★★☆在Git项目页中嵌入有关的图表信息
Infinity★★☆针对Chrome的插件，新标签页会让你耳目一新

Git

名称推荐指数备注/说明
Git教程-廖雪峰★★★★☆俺有看过不少Git的文章，确实这个系列是最通俗易懂的
GitAwards★★★★Git工具，可以查看Git排名
Git速查★★★★分类清晰的速查表
Git简明指南★★★☆入门Git的简明指南，木有高深内容:)
git学习资料整理★★★内容包括很多git的相关资料，star1200+

Redis

MongoDB

名称推荐指数备注/说明
Mongoose★★★★☆让NodeJS更容易操作Mongodb数据库。 附上一篇Mongoose学习参考文档

杂七杂八

放些开发中较有用的杂物在这儿
名称推荐指数备注/说明
QQ群规★★★★☆突然某天，有个QQ群让我加群 原本我是拒绝的，但当我看完这篇QQ群规后… 劳资真的被感动到了，太牛逼、够专业！ 最后，我默默加群鸟:)
.gitignore文件★★★★☆介绍不同语言项目的gitignore模板
Codebabes★★★学编程的网站。 重点是每通过一个测试，尼玛对应的妞会脱一件衣服… PS:要FQ哦~
ReadmeSample☆项目高大上的第一步就是包装，所以来看看README的书写套路吧 PS：劳资怎么这么无聊…

前端炫技-_炫酷狂拽叼炸天站点_

名称推荐指数备注/说明
windows93★★★★☆模拟Win93桌面，思路、体验和整体效果比较有意思
GeekTyper★★★★☆好玩又具有Geek精神的网站，虽然创建的目的是个恶作剧 PS：网站需要FQ
Mapbox★★★★非常叼的开源项目，有方便的JSAPI(还有SDK)。 不过免费版只能浅尝，流量有限。 PS：网站需要FQ
SuperScrollorama★★★☆好玩好看的动画库，链接是SuperScrollorama的展示页
parallax.js★★★一个视差引擎的官网，在电脑和手机上都有很好的体验
墨刀★★一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型
from http://www.dvy.com.cn/2016/04/16/2914.html
Posted by at
Labels: , , ,