您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

大前端开发工具集

时间：12-14来源：作者：点击数：

前端组织 / 前端博客

虽混过外企俩家，但劳资英文这项的技能点还是灰色的，俺关注的站点主要以中文为主

GitHub( github /) - 没 Github 都不好意思面基有木有！！！
MDN( developer.mozilla 组织网/zh-CN/) - 无数的资源再等着你探索，追标准和新特性肯定得关注的网站
Awesomes 国内网( www.awesomes 国内网/) - 国人维护的前端资源库，深度对接到 Github ，分类和展现清晰，值得收藏
如何跟上前端开发的最新前沿( uptodate.frontendrescue 组织网/zh/) - RT，不解释
慕课( www.imooc 商业网/) - 大量的在线计算机课程。虽然初、中级居多，但是不乏有巨作值得细细品尝
阮一峰( javascript.ruanyifeng 商业网/) - 关注多年，拜读其 ES6( es6.ruanyifeng 商业网/) 系列。虽网传靠写书进鸟阿里，但博客内容确实够丰富
W3Cplus( www.w3cplus 商业网/) - 大漠(《图解 CSS3》作者) 在国内的影响力杠杠的， Sass 专家级
淘宝前端团队( taobaofed 组织网/) - 内容涵盖 Web 和 Node ，要深度游深度，要广度有广度
奇舞团博客( www.75team 商业网/) - 坚持是最宝贵的，别人的奇舞周刊早已经过百期了
百度 FEX( fex.baidu 商业网/) - 代表作 FIS 、 UEditor 、 WebUploader 、 KityMinder
腾讯全端 AlloyTeam( www.alloyteam 商业网/) - 腾讯 Web 前端团队，博客真的有点丑...
粉丝日志 for 张丹( blog.fens me/) - 大爱作者写的 Node 系列
张鑫旭( www.zhangxinxu 商业网/wordpress/) - 成名多年的、高产的前端大湿， CSS 猛人

博客搭建

Hexo( hexo io/zh-cn/) - 快速、简洁且高效的博客框架，照着文档分分钟就可以在本地跑起来。 Github 地址: Hexo( github /hexojs/hexo)
Jekyll( jekyll.bootcss 商业网/) - 将纯文本转化为静态网站和博客。由于环境依赖的问题，所以安装起来可能稍费劲那么一点。 Github 地址： Jekyll( github /jekyll/jekyll)
GithubPages( pages.github 商业网/) - 免费的静态站点。配合着 Hexo 或 Jekyll 的模板，分分搭建出一套炫酷的个人博客
Tumblr( www.tumblr 商业网/) - 轻博客的祖师爷，各种各样的主题感觉不错
Wordpress( zh-cn.wordpress 商业网/) - 这玩意古老到都不想介绍

使用 Hexo/Jekyll + GitPage ，前端搭建静态博客那是相当 easy。用 Markdown 写文章做记录，再 push 到 Github 上，分分钟高大上有木有

再推荐三款视觉效果极佳的 Hexo 主题，且在 Github 上的 star 都很不错：

NexT( github /iissnan/hexo-theme-next)
Yilia( github /litten/hexo-theme-yilia)
Tranquilpeak( github /LouisBarranqueiro/hexo-theme-tranquilpeak)

不能偏心，所以也推荐三款 Jekyll 的好主题：

So Simple( github /mmistakes/so-simple-theme) 如果你看过俺的博客，对这个主题就肯定不会陌生啦
HPSTR( github /mmistakes/hpstr-jekyll-theme) 当初 fefork( www.fefork 商业网/) 差点选这个主题:)
beautiful( github /daattali/beautiful-jekyll#readme)

HTML

纯 HTML 相关其实没有好玩的项目，所以这儿展示的内容主要都是一些模板，而且以下列出来的都是免费的，方便拿取搭架后台或者博客

HEAD( github /joshbuchea/HEAD) - 最全的 <head> 列表，真心佩服这种偏执的整理能力
blur-admin( github /akveo/blur-admin) - 视觉冲击极强的管理后台，各种动画效果。PS：因为团队有 ant-design( github /ant-design/ant-design) 的使用经验，感觉使用起来不是很顺畅，这套后台又是基于 AngularJS ，所以再三权限之后还是没实际使用，劳资还是别给团队添乱了，囧...
AdminLTE( github /almasaeed2010/AdminLTE) - 很小清新的后台模板，每次看 preview( almsaeedstudio 商业网/preview) 页面都觉得很有视觉冲击
gentelella( github /puikinsh/gentelella) - 刚用这个搭建了我司内部用的的数据平台，效果喜人。模板实现的功能比较全，比如登录、注册甚至各种 widget ，所以最终交付的时候，自己几乎没写几行 CSS。
material-design-lite( github /google/material-design-lite) - Star 数超过 2W 的开源模板项目，包含了多套简洁的 templates ，可以用于博客、后台或者企业首页。

CSS

MetroUI( metroui 组织网.ua/) - 好看好用，重点是样式特别、个性
LoadersCSS( connoratherton 商业网/loaders) - 用 CSS 技术实现 loading 动画；补一句，想熟悉、理解 keyframes、animation、transform、transition 的童鞋可以直接去读其源码（只有千把行代码)，读完就算出师鸟:)
WeUI( github /weui/weui) - 一套同微信原生视觉体验一致的基础样式库为微信 Web 开发量身设计，令用户的使用感知更加统一
PostCSS( github /postcss/postcss) - 最近才知道大名鼎鼎 Autoprefixer( github /postcss/autoprefixer) 是其插件推荐大漠的文章《PostCSS 深入学习》( www.w3cplus 商业网/PostCSS/postcss-deep-dive-what-you-need-to-know.html) ，有关 PostCSS 不是什么？PostCSS 是什么？PostCSS 可以做什么等等问题，文章里面有答案
CSSgram( github /una/CSSgram) - 图片滤镜库，终于可以用 CSS 在 web 上实现滤镜的效果鸟 IE 不支持，不过新的移动设备支持没问题 Can I Use( caniuse 商业网/#search=CSS%20Blend%20Modes)
HINT.css( github /chinchang/hint.css) - 一款非常小巧的提示框效果
Balloon.css( kazzkiq.github io/balloon.css/) | |同上，一款非常小巧的提示框效果
Hover.css( ianlunn.github io/Hover/) - 很多鼠标 Hover 态的效果，可以给产品学习一下:)
Cursor( css-cursor.techstream 组织网/) - 记录各浏览器对 Cursor 的支持情况
csscss( github /zmoazeni/csscss) - 用于检查 CSS 代码冗余
purecss( purecss io/) - 小巧的响应式 CSS 库，Yahoo!出品
hamburgers( jonsuh 商业网/hamburgers/) - 简单的动画库，让 Click(or Tap) 变得美妙
cssmatic( www.cssmatic 商业网/) - 一个帮忙调试 CSS 效果的工具

浏览端 JS

requirejs( github /requirejs/requirejs) - JS 模块化是构建复杂项目的第一步中文学习文档奉上： RequireJS 中文网( www.requirejs 国内网/)
ECharts( echarts.baidu 商业网/index.html) - 好用，最关键的是支持的图表展示非常之多，强烈推荐
Swiper( www.swiper 商业网.cn/) - 强大的 Slider 库其实这类效果库非常多，但文档能那么专业的就很少鸟
babel( babeljs io/) - ES6 用起来。这个插件可以让我们用新的 标准/提案 写 JavaScript 代码，然后再向下 转换编译，最终生成随处可用的 JavaScript 代码。中文文档奉上《babel-handbook》( github /thejameskyle/babel-handbook/blob/master/translations/zh-Hans/README.md)
fullPage( alvarotrigo 商业网/fullPage/) - 非常好用的全屏滑动库，看 Demo 就明白
PhotoSwipe( photoswipe 商业网/) - 偶常用的 js 库官网上有这么一句很关键、重要"no dependencies"
Vuejs( cn.vuejs 组织网/) - 比较喜欢其作者... 所以劳资正在看源码学习学习
favico.js( lab.ejci 网络网/favico.js/) - 动态改变浏览器标签栏中的网站图标，非常好玩
ant.design( ant.design/) - 蚂蚁金服搞的良心项目，文档美好的令人发指样式优雅，强烈推荐内部系统尝试此库
highlightjs( highlightjs 组织网/) - 代码高亮库，支持非常多的语言
daterangepicker( www.daterangepicker 商业网/) - 时间选择插件的不二选择，基于 Bootstrap 和 Moment.js( momentjs 商业网/)
nodePPT( github /ksky521/nodePPT) - 前同事三水的大作，好用必须得支持:) 用 Markdown 写 PPT，还可以 HTML 混排，上手飞快
Sortable( github /RubaXa/Sortable) - 拖拽神器，用了就知道
toastr( github /CodeSeven/toastr) - 信息提示的库，推荐的原因是卖相好、功能强大 demo( codeseven.github io/toastr/demo.html)
peity.js( benpickles.github io/peity/) - jQuery 的图表插件，特别 cute，感觉萌萌哒将 HTML 转换成一个小的 <svg> 饼图、圆环图、折线图等等
emojify.js( github /Ranks/emojify.js) - 能够将 emoji 关键词转换为 emoji 图片的 JS 插件可以快速的为你的网站提供 emoji 表情支持
Push.js( github /Nickersoft/push.js) - 基于 Notification API 实现的桌面效果的提示栏。浏览器支持情况不错，如 http://caniuse 商业网/#search=Notification( caniuse 商业网/#search=Notification)
Highcharts( www.hcharts 国内网/) | |Highcharts 中文网，又是一个图表库确实功能强大，但是觉得不好看... PS：官网就做的不好看，脏脏的赶脚
NProgress( github /rstacruz/nprogress/) - 使页面加载时有更好的 loading 效果
Noticejs( github /jaredreich/notie.js) - 一个简单的通知库，木有依赖
onepage-scroll( github /peachananr/onepage-scroll) - 依赖 jQuery 的单页滚动库，和 fullPage( alvarotrigo 商业网/fullPage/) 类似
videojs( videojs 商业网/) - 当下视频需求都用上 <video> 鸟样式和交互统一的问题交给 videojs 搞定:)
clipboard( zenorocha.github io/clipboard.js/) - 仅 2KB 大小，搞定剪贴板功能，屌不屌~ 但是，Safari 不支持...
impress.js( github /impress/impress.js) - 用来写 PPT 不错，偶也曾为其写过一篇 impress.js 初体验( www.cnblogs 商业网/Darren_code/archive/2013/01/04/impressjs.html)
Cropper( fengyuanchen.github io/cropper/) - 国人开发的图片裁剪库

Swiper/PhotoSwipe/fullPage 有这仨库，微信里常见的 H5 页完全不是问题哒！

Project Build

pm2( www.npmjs 商业网/package/pm2) - 是一个带有负载均衡功能的 Node 应用的进程管理器；是 Forever( www.npmjs 商业网/package/forever) 的进阶库，想了解的可以看这篇文章《拥抱 PM2》( se77en cc/2013/06/27/goodbye-node-forever-hello-pm2-translation/)
Webpack( webpack.github io/) - 项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。
Gulp( github /gulpjs/gulp/) - Gulp 是基于 Node 实现 Web 前端自动化开发的工具。俺总结了篇《gulp 使用小结》( www.fefork 商业网/gulp_1/) ，推荐您阅读:)
Bower( bower io/) - 前端项目的包管理其实是件复杂的事谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本...卧槽 Bower 就是搞定这件事儿的，亲爹是 Twitter 推荐篇 Bower 的中文文章：《bower 解决 js 的依赖管理》( blog.fens me/nodejs-bower-intro/)
Grunt( gruntjs 商业网/) - 和 Gulp 类似，都是项目构建的常见选择对比这俩的文章可谓不少，推荐篇《Gulp vs Grunt》( www.benben cc/blog/?p=407) 英盲又想看文档，可以去 Grunt 中文网( www.gruntjs 网络网/)
FIS( fex-team.github io/fis3/) - 度厂出品的前端构建工具文档清晰，功能强大，推荐了解和使用
Gitlab CI( ci.gitlab 组织网/) - 一套基于 Gitlab( about.gitlab 商业网/) 的持续集成服务

Gulp + Webpack 的使用__套路__参考: learning-gulp( github /demohi/learning-gulp)

Gulp 资料收集： use-gulp( github /Platform-CUF/use-gulp)

推荐篇与 Webpack 相关的文章《 CSS Modules( boke io/tan-tan-css-modules/) 》

Webpack 用起来吼吼： webpack-howto( github /petehunt/webpack-howto)

Node Package

作为一名大前端甚至是多端， Node 绝逼是必备的一块

有关 Node 的学习资料，请访问

这里介绍些有特色且前端有必要知道的包：

anywhere( www.npmjs 商业网/package/anywhere) - 随时随地将你的当前目录变成一个静态文件服务器的根目录
supervisor( www.npmjs 商业网/package/supervisor) - 监控 Node 代码，自动重启。 A supervisor program for running nodejs programs
nodemon( github /remy/nodemon) - 监控 Node 代码，自动重启。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
pm2( www.npmjs 商业网/package/pm2) - 是一个带有负载均衡功能的 Node 应用的进程管理器；是 Forever( www.npmjs 商业网/package/forever) 的进阶库，想了解的可以看这篇文章《拥抱 PM2》( se77en cc/2013/06/27/goodbye-node-forever-hello-pm2-translation/)
async( www.npmjs 商业网/package/async) - 一个流程控制工具包，提供直接而强大的异步功能
lodash( www.npmjs 商业网/package/lodash) - JS 工具库 Underscore.js 的一个 fork 发展而来
socket io( github /socketio/socket io) - 预计 Node 的实时框架聊天室、页游等对实时性有高要求的较适用
Mongoose( github /Automattic/mongoose) - 让 NodeJS 更容易操作 Mongodb 数据库；附上一篇 Mongoose 学习参考文档( cnodejs 组织网/topic/504b4924e2b84515770103dd)
CNPM( npm.taobao 组织网/) - 淘宝 NPM 镜像，提供了 NPM 同步的服务当然可不仅仅这样，利用 CNPM 可以打造__企业/个人__私有的 NPM 服务推荐篇搭建私有 NPM 的文章：《CNPM 搭建私有的 NPM 服务》( blog.fens me/nodejs-cnpm-npm/)
koa( koajs 商业网/) - 玩 Node 都知道 express，但使用 koa 的就少很多，门槛比 Ex 稍高通过 generator 避免繁琐的回调函数嵌套，强烈推崇官方的文章教程( github /guo-yu/koa-guide)
Shipit( github /shipitjs/shipit) - 一个强大的自动化部署工具。 shipit 很多地方非常类似 gulp，他们的核心都是任务系统。
node-inspector( www.npmjs 商业网/package/node-inspector) - Node 调试工具，使用起来跟 Chrome 的 JS 调试器很相似
winston( www.npmjs 商业网/package/winston) - Node 服务最流行的日志库之一
co( www.npmjs 商业网/package/co) - 用 generator 写法让异步代码同步
thenify-all( www.npmjs 商业网/package/thenify-all) - 把异步的方法变成 Promise 的 Promisifies all the selected functions in an object
PhantomJS( phantomjs 组织网/) - 一般用来做抓取截图和无界面测试也可以用来操作 DOM 和网络监测，很好玩的库 Quick Start( phantomjs 组织网/quick-start.html)
ava( www.npmjs 商业网/package/ava) - 偶是应 TJ 大神推荐而得之的 ava 未来的测试运行器
Mocha( github /mochajs/mocha) - Node 里最常用的测试框架；它支持多种 Node 的 Assert libs；同时支持异步和同步的测试，同时支持多种方式导出结果；也支持直接在 browser 上跑 JS 代码测试。
koa-validate( www.npmjs 商业网/package/koa-validate) - koa 的校验库可以非常方便的对 queryString 或 postBody 的信息进行验证
line-reader( www.npmjs 商业网/package/line-reader) - 基于 steam 的按行读文件，偶处理日志时用哒要不实现一个按行读文件，又得 steam 、又得 chunk ，还是比较麻烦的
everyauth( www.npmjs 商业网/package/everyauth) | |OAuth 的集成解决方案
shelljs( documentup 商业网/shelljs/shelljs) - 写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具，API 及其简单
hashids( www.npmjs 商业网/package/hashids) - 看名称就懂，给 userid 加解密用的
node-pool( github /coopernurse/node-pool) - 让 Node 有连接池的概念
colors( www.npmjs 商业网/package/colors) - 花俏的小工具让打印 console.log 时有更好的展示样式
n( www.npmjs 商业网/package/n) - 控制 Node 的版本，想升级一行代码搞定

supervisor 和 nodemon 这俩都是监控 Node 代码，使得每次修改代码后会，开发 Node 程序必备

以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:)

Node Project

暂无

精选阅读

前端技术

2015D2 前端论坛( www.imooc 商业网/learn/590) - Node 方向非常值得看，有干货，相信东哥推荐哈
前端开发规范手册( zhibimo 商业网/read/Ashu/front-end-style-guide/index.html) - 此手册主要实现的目标：代码一致性和最佳实践
《babel-handbook》( github /thejameskyle/babel-handbook/blob/master/translations/zh-Hans/README.md) - 可以用新的规范（如 ES6 ) 写代码，经过 babel 编译后生成没有兼容问题的代码
ECMAScript 6 入门( es6.ruanyifeng 商业网/) - 阮一峰大神所著，一本开源的 JS 教程全面介绍 ECMAScript 6 新引入的语法特性
ReactNative 中文版( wiki.jikexueyuan 商业网/project/react-native/) - 翻译自官方的中文文档
ReactWebpackCookBook( fakefish.github io/react-webpack-cookbook/index.html) | |此书会引导读者是进入 React 和 Webpack 的世界。俩都是非常前沿的技术，同时使用会更有趣。
ReactNative 学习指南( github /ele828/react-native-guide) - 新玩意层出不穷... 对于能持续学习的童鞋，这是个美好的时代
HTML/CSS 编码规范( www.css88 商业网/doc/codeguide/) - 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范
移动前端入门( gold.xitu io/entry/56c29abfa34131005b8cb1f3) - 入门价值高，移动方向常见问题的较好总结
GulpBook( github /nimojs/gulp-book) - Gulp 是基于 Node 实现 Web 前端自动化开发的工具

Node 学习资料

Node.js 中文资料导航( github /youyudehexie/node123) - Node 的中文资料导航， start1300+
从零开始 NodeJS 系列文章( blog.fens me/series-nodejs/) - 基本上每一篇都看过，强烈推荐
Node.js 包教不包会( nqdeng.github io/7-days-nodejs/) - 值得阅读，看完绝不用买书鸟
七天学会 NodeJS( github /alsotang/node-lessons) - 劳资还没看，不过看目录还不错:)
Style Guide( github /dead-horse/node-style-guide) - 这是一份关于如何写出一致且美观的 Node 代码的风格指南
koa 实战( book.apebook 组织网/minghe/koa-action/index.html) - “ 明河( github /minghe) 出品”这四字已经说明一切。PS：正在连载中
stream-handbook( github /jabez128/stream-handbook) - 如果学习 NodeJS，那么流一定是需要掌握的概念

前端面试

在 LinkedIn 做面试官的故事( dongfei.baijia.baidu 商业网/article/52449) - 非面试题，介绍 LinkedIn 的面试过程文章有很多中肯的建议和想法，推荐阅读
大漠：写给前端面试者( www.w3cplus 商业网/css/write-to-front-end-developer-interview.html) - 这篇文章不涉及任何的面试题大漠与大家聊聊面试者与被面者之间的感受...
前端面试题( github /h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese) - Git 上非常火的前端面试题， start17k+
前端面经( github /paddingme/Front-end-Web-Development-Interview-Question) - 主要内容是些前端面试笔试题和面试套路，值得阅读

其他技术

MongoDB 极简实践入门( github /StevenSLXie/Tutorials-for-Web-Developers/blob/master/MongoDB%20%E6%9E%81%E7%AE%80%E5%AE%9E%E8%B7%B5%E5%85%A5%E9%97%A8.md) - 入门推荐的套路，非常浅显易懂
Mac 设置指南( github /macdao/ocds-guide-to-setting-up-mac) - Mac 使用必看尤其适合偏执狂/强迫症患者:)
Markdown 资料( github /xirong/my-markdown) - 简单看些语法入门，快速用起来

工具/软件

Web

CanIuse( caniuse 商业网/) - 前端必备；查看浏览器对各种新特性的兼容情况
overapi( overapi 商业网/) - 最全的开发人员在线速查手册
百度脑图( naotu.baidu 商业网/) - 非常方便的思维导图工具
ProcessOn( www.processon 商业网/) - 和百度脑图的功能类似，脑图工具。
VimAwesome( vimawesome 商业网/) - Vim 插件集合，Vim 党必备
Tower( tower im/) - 小而美的多人协同工具。不光只有 Web 版，还有 iPhone、iPad、Android、微信版。
Slides( slides 商业网/) - 一个所见即所得的 WebPPT 编辑器，非常推荐
faviconer.co( www.faviconer co/) - 一个所见即所得的 icon 生成器，很好用
smallpdf( smallpdf 商业网/cn) - 提供各种格式和 PDF 互相转换
Cmd Markdown( www.zybuluo 商业网/mdeditor) - 好用的 Web 版 Markdown 编辑器
StackEdit( stackedit io/editor) - 又是一款 Web 版 Markdown 编辑器
墨刀( modao cc/) - 一个在线移动应用原型制作工具。旨在帮助产品经理快速制作可在手机端展示的移动应用原型。
htm2pdf( www.htm2pdf co.uk/) | |HTML to PDF
Speaker Deck( speakerdeck 商业网/p/featured) - 在线的演讲稿展示平台
RunJS( runjs 国内网/) - 在线编辑、展示、分享、交流你的 JavaScript 代码
Bootswatch( bootswatch 商业网/) - Bootstrap 的免费模板
AdminLTE( github /almasaeed2010/AdminLTE/) - 又是一个 Bootstrap 的免费管理后台

APP

以下列表中的 APP 都是不区分系统平台的

印象笔记( www.yinxiang 商业网/) - 免费账号完全够用，跨平台跨终端的记录软件
365 日历( www.365rili 商业网/) - 首先肯定比系统自带的日历强大，要不推荐个蛋蛋俺一般用来搞目标管理，比如学习计划和工作计划生活中会订阅演唱会、电影首映的信息
多看阅读( www.duokan 商业网/) - kindle 确实好，但是懒得随身带着多看还算不错，书较多且偶尔有特价比较爽
Surge( itunes.apple 商业网/cn/app/surge-web-developer-tool-proxy/id1040100637?mt=8&v0=WWW-GCCN-ITSTOP100-PAIDAPPS&l=&ign-mpt=uo%3D4) - 非免费牛逼的网络开发与调试工具，前端必备
Monkey( github /coderyi/Monkey) - Monkey 是 iPhone 上一个 GitHub 第三方客户端。展示 GitHub 上的开发者的排名，以及仓库的排名

Mac

对于美好事务的追求无论何时都不算晚，前年公司给配了台 Mac 用做测试开发机，于是开始在 Mac 下办公。 Windows？ 回不去鸟...

Homebrew( brew.sh/) - 没它程序猿没法好好干活... Homebrew 使 OS X 更完美。使用 gem 来安装 gems 、用 brew 来搞定那些依赖包
iTerm2( www.iterm2 商业网/) - Mac 终端功能少又不好看，iTerm2 可以解救你~ 推荐篇文章：《让你的命令行丰富多彩》( swiftcafe io/2015/07/25/iterm/?hmsr=toutiao io&utm_medium=toutiao io&utm_source=toutiao io)
BrowseShot( itunes.apple 商业网/cn/app/browseshot/id615916400) - 偶正在使用的网页截图工具，强烈推荐
BeyondCompare( www.scootersoftware 商业网/) - 在 Windows 下就开始用了比对文件和文件夹杠杠好使，Merge 必备工具
CheatSheet( www.mediaatelier 商业网/CheatSheet/) - 能够显示当前程序的快捷键列表，默认的快捷键是长按 ⌘
Sequel Pro( www.sequelpro 商业网/) - 免费好用的 Mysql 工具
LICEcap( www.cockos 商业网/licecap/) - 屏幕录制工具，支持导出 GIF 动画图片格式轻量级、使用简单，录制过程中可以改变录屏范围
Manico( manico im/) - 快捷启动和切换 APP 的工具，高效的第一步 AppStore 上收费，不过可以免费试用
WebStorm( www.jetbrains 商业网/webstorm/) - 功能超强的前端 IDE，不多介绍，谁用谁知道 PS：貌似俺插件装多了，用着卡卡的，风扇呼呼转...
Atom( atom io/) - 2015 年 7 月之前，在桌面环境下我最喜欢的编辑器是 Sublime。但之后就是 Atom，俺也专门为它写了篇___ 使用纪要( github /nieweidong/learn-atom) ___
马克鳗( www.getmarkman 商业网/) - MarkMan，非常强大好用的标注、测量工具。日常工作免费版就完全可以满足，强烈推荐
Wireshark( www.wireshark 组织网/) - 说实话，Mac 下木有 Fiddler 挺不习惯，不过在有更强大的替代品
SourceTree( www.sourcetreeapp 商业网/) - 一款好用的的 Git 客户端工具，重点是支持中文:)
focus booster( www.focusboosterapp 商业网/) - 因为比较在意时间管理，所以这软件是俺工作时间的必备之物
Mou( 25 io/mou/) - 我曾使用过的 mk 编辑器。原本准备去掉这个推荐，但是我想让大家了解下这个有意思的事情：《一年了，那个闻名遐迩的 Mou 你还记得吗？》( matrix.sspai 商业网/p/c7a3c9c0)

Linux

oh-my-zsh( ohmyz.sh/) - 终端党 必用的好工具，强烈推荐
tree( www.cnblogs 商业网/iadanac/p/3859481.html) - linux 以树状图逐级列出目录的内容
oneapm( www.oneapm 商业网/) - 强大的运维工具，提供多种监控客户端；有采集、分析、展示等一套功能； PS：我这用了服务器监控（免费哦)
httpie( github /jkbrzt/httpie) - 一个 CLI 中的 HTTP 客户端用法简单、易读

Chrome 浏览器插件

Chrome 应用商店必定是需要翻墙的哈。

以下插件都是俺多年积累淘出来的，数量不多，所以就不区分 Github 插件和非 Github 插件了。按照俺推荐的强度自上向下展示，且大多数插件就是偶工作和生活必备，希望能对大家有用。后续如有新发现好插件，偶也会及时更新哒。

Postman( chrome.google 商业网/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop) - POST 接口调试终结者，异常强大的接口调试工具。稍稍有一点学习成本，推荐之
JSONView( chrome.google 商业网/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc) - 就是个 JSON 格式的查看工具，可以很方便的展示数据，麻麻再也不用担心偶调试接口啦。PS：同类插件有不少，所以用的开心就行
二维码生成器( chrome.google 商业网/webstore/detail/%E4%BA%8C%E7%BB%B4%E7%A0%81qr%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/pflgjjogbmmcmfhfcnlohagkablhbpmg) - RT。PS：这 FF 早已经自带生成二维码工具了， Chrome 还得装插件才行，任性...
Eye Dropper( chrome.google 商业网/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka) 前端必备的颜色提取神器，操作简单容易上手
Page Ruler( chrome.google 商业网/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn) 前端必备的尺子。计算页面元素间距、位置等信息的时候，你就知道它的好了，无脑上手，你值得拥有
FireShot( chrome.google 商业网/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg) 可以截取整个网页、部分页面，然后支持导出为各种格式。俺微博上发的网页全景图都是靠这个插件截取的
Infinity( chrome.google 商业网/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg) - 好不好用有点见仁见智了，但是我个人比较喜欢。使用后会让你的 新标签页 耳目一新，有漂亮的背景和各种常用的功能，比如地图、天气、 Gmail 、 Chrome 商店等等。当然，在这个插件的设置中还可以设置壁纸、动画效果等等
Momentum( chrome.google 商业网/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca) 同样也是 新标签页 的插件，但是不管是视觉上（高清大图) 还是功能上，都比 Infinity( chrome.google 商业网/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg) 高大上不少， Setting 里面有不少设置和快捷键，都很好上手的。 Infinity( chrome.google 商业网/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg) 胜在中文和直观， Momentum( chrome.google 商业网/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca) 胜在视觉冲击。俺基本上这俩款看心情换着用，所以希望你也都能喜欢:)
Octotree( chrome.google 商业网/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) - 在浏览器左侧展示 Github 项目的文件导航，使目录结构一目了然，而且我们国内 Github 的访问速度又不稳定，用这个工具也就很提效率了。对经常使用 Github 的同学强烈推荐
BuiltWith( chrome.google 商业网/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn) / wappalyzer( chrome.google 商业网/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) / Chrome Sniffer Plus( chrome.google 商业网/webstore/detail/chrome-sniffer-plus/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh) - 几款超强的网站分析工具，可以给出网站非常多的技术栈信息。大到 Web Servers 、服务端的 Frameworks 或 JS 框架，小到 meta 、编码格式甚至 Analytics ，非常推荐
Adblock Plus( chrome.google 商业网/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb/related) 非常非常有名的免费的过滤广告的插件。PS：广告屏蔽这个见仁见智，其实俺个人还是比较接受一些个性化推荐的广告
Wide Github( chrome.google 商业网/webstore/detail/wide-github/kaalofacklcidaampbokdplbklpeldpj/related) 无聊又实用的 Github 插件。无聊是因为这个插件就特么一个功能，加宽，能让 Github 页面变宽，每行展示更多的内容，尤其配合着 Octotree( chrome.google 商业网/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) ，展示效果极佳。非常推荐 Mac 用户实用，因为屏幕比较不大，变宽后阅读感觉更好
GitPlug( chrome.google 商业网/webstore/detail/porter-plug/lngoojfoglemfpbeiomhgheccpdheilp) - 在 Github 项目页中嵌入有关的图表信息，直观的展示当前项目的 Star Trend ，能方便看到当前这个开源项目的发起时间，火爆趋势；对比较知名的项目还有相关的 News 展示
OctoLinker( chrome.google 商业网/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp) - 在 package.json 或任意 .js 文件中，可以方便的对 require() 的 package 进去点击，跳转去对应的 Github 页面。PS：特么不太好表达，建议你去这个插件的概述页，里面有个十来秒的视频，看完就明白鸟

补充：

翻墙代理的插件偶没使用，偶手机和电脑的翻墙都是配的 Surge 无脑搞定，不过翻墙代理插件推荐 Proxy SwitchySharp( chrome.google 商业网/webstore/detail/proxy-switchysharp/dpplabbmogkhghncfbfdeeokoefdjegm) ，熊掌公司里大多用的都是它
日常开发相关的插件就以上这些，还有几款如知乎的插件、购物插件等这类与开发效率不沾边的，俺就不这上头列了哈

Git

Git 教程-廖雪峰( www.liaoxuefeng 商业网/wiki/0013739516305929606dd18361248578c67b8067c8c017b000) - 俺有看过不少 Git 的文章，确实这个系列是最通俗易懂的
GitAwards( github-awards 商业网/) - Git 工具，可以查看 Git 排名
Git 速查( github /flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md) - 分类清晰的速查表
Git 简明指南( rogerdudler.github io/git-guide/index.zh.html) - 入门 Github 的简明指南，木有高深内容:)
Git 学习资料整理( github /xirong/my-git) | |内容包括很多 Git 的相关资料， star 1200+
GitHub 漫游指南( github /phodal/github-roam) - 一篇还算不错的 Git 学习总结，就是乱了点... 我理解作者___漫游___的意思是漫无目的想到哪写到哪~ 看到作者为鸟达成 Git 连击的成就，也是蛮拼的:)

数据端

Mongoose( github /Automattic/mongoose) - 让 NodeJS 更容易操作 Mongodb 数据库。附上一篇 Mongoose 学习参考文档( cnodejs 组织网/topic/504b4924e2b84515770103dd)

设计/交互

作为负责最终效果呈现的前端工程师，多少得了解些 设计和交互 的，这也是为什么 fetool 会单独的存在这一章...当然话又说回来了，偶毕业的第一份工作是设计:)

站酷( www.zcool 商业网.cn/works/) - 里面好东西太多，俺当年真没少再上面淘素材
UI 中国( www.ui 国内网/list.html) - 光听名字就知道有多高大上鸟:)

速查手册

RT，这篇都是些文档或者 API，一般这类东西都在大家浏览器的书签内，偶这也列一下大前端常用的手册地址

HEAD( github /joshbuchea/HEAD) - 最全的 <head> 列表，真心佩服这种偏执的整理能力
百度 CDN 公共库( cdn.code.baidu 商业网/) - 基本常见的库都收录拉，搞 demo 的时候特方便
HTML 和 CSS 代码规范( codeguide.bootcss 商业网/) - 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范
Linux 命令中文手册( linux.51yip 商业网/) - 木有系统的好好学习 Linux，所以命令更不熟悉真羡慕那些 CLI 玩的飞起的:)
Git 速查( github /flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md) - 分类清晰的速查表
jQueryAPI 1.11.3( jquery.cuishifeng 国内网/) - ZeptoAPI 基本和 jQuery 一样，所以看一份就好
CSS3( www.php100 商业网/manual/css3_0/index.html) - CSS3 的在线手册
Express API( www.expressjs 商业网.cn/4x/api.html) - 中文手册:) 4.x 和 3.x 都有
CI 用户指南( codeigniter 组织网.cn/user_guide/index.html) - 一个轻量级的 PHP 框架用户指南推荐指数低的原因是劳资 PHP 比较弱，囧
Yaf( www.laruence 商业网/manual/) - 鸟哥（惠新宸) 所写的 PHP 框架推荐指数低的原因同上...

杂七杂八

放些开发中较有用的杂物在这儿

租房要点( github /soulteary/tenant-point) - 适用于北上广深杭，大城市打拼__租房__确实是硬伤
QQ 群规( github /jsfront/src/blob/master/qq.md) - 突然某天，有个 QQ 群让我加群原本我是拒绝的，但当我看完这篇 QQ 群规后... 劳资真的被感动到了，太牛逼、够专业！最后，我默默加群鸟:)
.gitignore 文件( github /github/gitignore) - 介绍不同语言项目的 gitignore 模板
程序员如何优雅的挣零花钱？( github /easychen/howto-make-more-money) - 中肯的文章，如果读完能有些许收获，那么恭喜你
git-draw( github /ben174/git-draw) - 黑魔法，可以修改自己 Git 上的 Contributions
GitBook( www.gitbook 商业网/) - 写记录的好地方
Codebabes( codebabes 商业网/) - 学编程的网站。重点是每通过一个测试，尼玛对应的妞会脱一件衣服... PS：要翻墙哦~
emailframe( emailframe.work/) - 邮件展示确实比较坑，建议有需要的收藏
ReadmeSample( github /nieweidong/ReadmeSample) | |项目高大上的第一步就是__包装__，所以来看看 README 的书写套路吧 PS：劳资怎么这么无聊...

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

windows93( www.windows93 网络网/) - 模拟 Win93 桌面，思路、体验和整体效果比较有意思
GeekTyper( geektyper 商业网/) - 好玩又具有 Geek 精神的网站，虽然创建的目的是个恶作剧 PS：网站需要翻墙
2016.makemepulse 商业网( 2016.makemepulse 商业网/) - 帅哭了。请使用现代浏览器打开
前端技能栈( skill.phodal 商业网/) - 好玩的前端技能栈展示
Mapbox( www.mapbox 商业网/) - 非常叼的开源项目，有方便的 JSAPI(还有 SDK)。不过免费版只能浅尝，流量有限。 PS：网站需要翻墙
Clark Duvall( www.clarkduvall 商业网/) - 一枚歪果仁的个人 blog，范儿叼叼的
SuperScrollorama( johnpolacek.github io/superscrollorama/) - 好玩好看的动画库，链接是 SuperScrollorama 的展示页
parallax.js( matthew.wagerfield 商业网/parallax/) - 一个视差引擎的官网，在电脑和手机上都有很好的体验
CSS 字母( yusugomori 商业网/projects/css-sans/fonts) - 用 CSS 实现英文字母，叼叼的
墨刀( modao cc/) - 一个在线移动应用原型制作工具。旨在帮助产品经理快速制作可在手机端展示的移动应用原型。