大前端工具百宝箱

2017-05-14 本文已影响689人 bffbcfcf7418

大前端工具百宝箱 Awesome

这个项目是我整理的前端知识体系的一个分支，这篇的定位是 大前端程序猿的工具箱。主要针对前端方向和后台Node 方向；主要内容是前端学习资源合集、国内外优秀的库、工具、设计/交互或关注的前端组织/博客等等。

本合集其他系列之前端工程杂谈，前端面试经验，经典图书，不定期更新中。。。。。

感谢和期待大家的 PR，我会及时回复的~

前端综合资源
优秀前端博客
博客搭建
HTML
- HTML5
- Websocket
- Template
CSS
JS
- React & RN
- Vuejs
构建工具
Webgl／数据可视化
动画
浏览器兼容解决方案
移动端
Node
- Node 学习资料
- Node Package
- Node Project
精选阅读
- 前端技术
- 其他技术
工具/软件
- 翻墙软件
- Web
- APP
- Mac 软件篇
- Linux
Chrome Plugins
Git
服务端
数据端
客户端
设计/交互
速查手册
杂七杂八
前端炫技-炫酷狂拽叼炸天的 Web
小结
TODO

正文

<h3 id="resource">前端综合资源</h3>

MDN - 无数的资源再等着你探索，追标准和新特性肯定得关注的网站
Awesomes.cn - 国人维护的前端资源库，深度对接到 Github，分类和展现清晰，值得收藏
fks 前端技能汇总 - 包含前端知识架构，后端知识，linux，书籍推荐等。star:10000+
mobile-web-favorites - 移动端web开发收藏夹。

<h3 id="blogs">优秀前端博客</h3>

阮一峰 - 关注多年，拜读其 ES6 系列。虽网传靠写书进了阿里，但博客内容确实够丰富
W3Cplus - 大漠(《图解 CSS3》作者)在国内的影响力杠杠的，Sass 专家级
淘宝前端团队 - 内容涵盖 Web 和 Node，要深度有深度，要广度有广度
网易FEG前端团队 - 也是很高产的团队
奇舞团博客 - 坚持是最宝贵的，别人的奇舞周刊早已经过百期了
大搜车前端 - 前端网红小芋头君所在的团队，文章质量高，尤其是 Node 方向的
百度 FEX - 代表作 FIS、UEditor、WebUploader、KityMinder
腾讯全端 AlloyTeam - 腾讯 Web 前端团队，博客真的有点丑...
粉丝日志 for 张丹 - 大爱作者写的 Node 系列
张鑫旭 - 成名多年的、高产的前端大湿，CSS猛人

Hexo - 快速、简洁且高效的博客框架，照着文档分分钟就可以在本地跑起来。Github 地址:Hexo
GithubPages - 免费的静态站点。配合着 Hexo 或 Jekyll 的模板，分分搭建出一套炫酷的个人博客

使用 Hexo + GitPage，前端搭建静态博客那是相当 easy。我是用 Hexo + 云服务器（腾讯云学生优惠每个月只要1块钱，hin划算的），自己搭建了个人网站，用Markdown 写文章做记录，再部署到服务器上。

顺便再推荐几款hexo主题

Next 文档很丰富，主题也很好看
Yilia 这个我之前也用过，蛮喜欢的一款。主题作者litten人超级nice，去腾讯远程面试的时候，还被他指点过几次。开熏......

video.js 开源的HTML5和Flash视频播放器。支持自定义进度条、按钮以及工具栏的底色。star:16.1K
html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:8K(7.15更新)
brunch 快速的前端 HTML5 构建工具。star:6K
ulkit 一个轻量级的、模块化前端框架，它被用于快速开发强大的web界面。也是一款优秀的响应式HTML5 框架。star:9.4K

<h4 id="websocket">Websocket</h4>

使用Node.js+Socket.IO

实战：基于vue和websocket的多人在线聊天室

<h4 id="template">Template</h4>

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

HEAD - 最全的 <head> 列表，真心佩服这种偏执的整理能力
AdminLTE - 很小清新的后台模板，每次看preview 页面都觉得很有视觉冲击
gentelella - 模板实现的功能比较全，比如登录、注册甚至各种 widget，
material-design-lite - Star 数超过2W的开源模板项目，包含了多套简洁的 templates，可以用于博客、后台或者企业首页。

ant.design - 蚂蚁金服搞的良心项目，文档美好的令人发指样式优雅，强烈推荐内部系统尝试此库
iView一套基于 Vue.js 的高质量 UI 组件库
Semantic-UI - 让你使用任何HTML标签来表现UI控件。
这是一款语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。star:34000+
MetroUI - 好看好用，重点是样式特别、个性
Font-Awesome - 图标字体库。相类似的库有不少，大厂都喜欢造轮子嘛:)
LoadersCSS - 用 CSS 技术实现 loading 动画；补一句，想熟悉、理解 keyframes、animation、transform、transition 的童鞋可以直接去读其源码(只有千把行代码)，读完就算出师鸟:)
text-spinners - 又是一款 spinners 效果的库，用来做 loading 正合适。
WeUI - 一套同微信原生视觉体验一致的基础样式库为微信 Web 开发量身设计，令用户的使用感知更加统一
PostCSS - 最近才知道大名鼎鼎Autoprefixer是其插件推荐大漠的文章《PostCSS深入学习》，有关 PostCSS 不是什么？PostCSS 是什么？PostCSS 可以做什么等等问题，文章里面有答案
CSSgram - 图片滤镜库，终于可以用 CSS 在 web 上实现滤镜的效果鸟 IE不支持，不过新的移动设备支持没问题 Can I Use
HINT.css - 一款非常小巧的提示框效果
Balloon.css - 同上，一款非常小巧的提示框效果
Hover.css - 很多鼠标 Hover 态的效果，可以给产品学习一下:)
Cursor - 记录各浏览器对Cursor的支持情况
csscss - 用于检查 CSS 代码冗余
purecss - 小巧的响应式 CSS 库，Yahoo!出品
hamburgers - 简单的动画库，让 Click(or Tap) 变得美妙
cssmatic - 一个帮忙调试CSS效果的工具

awesome-javascript - 一系列很棒的javascript 库，资源。star:9000+
todomvc - 帮你挑选一款框架，它使用不同的最流行的js MV框架实现了一个相同的Todo应用。star:20K
requirejs - JS模块化是构建复杂项目的第一步中文学习文档奉上：RequireJS 中文网
Swiper - 强大的 Slider 库其实这类效果库非常多，但文档能那么专业的就很少鸟
babel - ES6 用起来。这个插件可以让我们用新的 标准/提案 写 JavaScript 代码，然后再向下 转换编译，最终生成随处可用的 JavaScript 代码。中文文档奉上《babel-handbook》
dvajs - 基于 Redux 的一层封装，推荐的原因是因为阿里同学写文档都比较大而全，还可以顺道学习周边知识:)
fullPage - 非常好用的全屏滑动库，看 Demo 就明白
PhotoSwipe - 偶常用的 js 库官网上有这么一句很关键、重要"no dependencies"
TimelineJS 轻松制作时间轴。star:8000+
iscroll - 高性能，体积小，无外部依赖，跨平台的滚动组件 star:9K
ScrollReveal - star 10000+ 轻量级 JS 库。作用为当元素进入视窗的时候展示它们，README 中有示例，上手非常简单。官网体验地址：ScrollReveal
vue-admin - 基于 Vue.js 开发的后台，示例地址：demo
mixitup 一款基于 jQuery 的 排序/过滤 的JS库，最关键是有着美妙的动画效果
favico.js - 动态改变浏览器标签栏中的网站图标，非常好玩
highlightjs - 代码高亮库，支持非常多的语言
daterangepicker - 时间选择插件的不二选择，基于 Bootstrap 和 Moment.js
excellentexport - 纯前端的 Excel 导出，非常之方便
Sortable - 拖拽神器，用了就知道
toastr - 信息提示的库，推荐的原因是卖相好、功能强大 demo
peity.js - jQuery的图表插件，特别cute，感觉萌萌哒将HTML转换成一个小的<svg>饼图、圆环图、折线图等等
emojify.js - 能够将emoji关键词转换为emoji图片的JS插件可以快速的为你的网站提供emoji表情支持
Push.js - 基于 Notification API 实现的桌面效果的提示栏。浏览器支持情况不错，如http://caniuse.com/#search=Notification
NProgress - 使页面加载时有更好的loading效果
Noticejs - 一个简单的通知库，木有依赖
onepage-scroll - 依赖 jQuery 的单页滚动库，和 fullPage 类似
clipboard - 仅 2KB 大小，搞定剪贴板功能，屌不屌~ 但是，Safari 不支持...
Cropper - 国人开发的图片裁剪库

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

<h4 id="react">React & RN</h4>

awesome-react-native - 不解释

<h4 id="vue">Vuejs</h4>

Vuejs - 比较喜欢其作者，所以正在看源码学习，也做了一个移动app和vue socket在线聊天室

Webpack - 项目构建工具。自己整理了个资源合集：webpack 教程资源收集

Gulp - Gulp 是基于 Node 实现 Web 前端自动化开发的工具。俺总结了篇《gulp使用小结》，推荐您阅读:)
pm2 - 是一个带有负载均衡功能的 Node 应用的进程管理器；是 Forever 的进阶库，想了解的可以看这篇文章《拥抱PM2》
Bower - 前端项目的包管理其实是件复杂的事谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本...卧槽 Bower 就是搞定这件事儿的，亲爹是 Twitter 推荐篇 Bower 的中文文章：《bower 解决 js 的依赖管理》
Grunt - 和 Gulp 类似，都是项目构建的常见选择对比这俩的文章可谓不少，推荐篇《Gulp vs Grunt》英盲又想看文档，可以去Grunt 中文网
FIS - 度厂出品的前端构建工具文档清晰，功能强大，推荐了解和使用
Gitlab CI - 一套基于Gitlab的持续集成服务
Travis CI - 为 Github 上的项目打造的 CI 服务。记得 2013年开始陆续看到文章介绍，刚在官网上看到，目前已经有 30W 开源项目和 23.5W 用户在使用。大概看了一下 getting started，简单几步就可以实现开源项目的持续集成。

Gulp + Webpack 的使用套路参考: learning-gulp

Gulp 资料收集：use-gulp

Webpack 用起来吼吼：webpack-howto

<h3 id="visualize"> Webgl/数据可视化 </h3>

three.js - JavaScript 3D 库。超多的 examples 等着你去发现，你只需要关注内存和风扇就行了
ECharts - 基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。star:18000+
Chart.js - 使用<canvas>标签的简易HTML5图表。star:30000+
d3 - 一个基于数据操作文档的js数据可视化框架，最流行的可视化库之一。star:64000+
c3 - 一个基于 D3.js 的可重用 JavaScript 图表库。几乎零学习曲线。star:6.7k
img2css - 将图片转为纯css代码。star:2000

animate.css - 一个跨浏览器的CSS动画库。简单易用易上手。star:41000
move.js - 极小的 JavaScript 库,支持 CSS3 的动画效果,非常简单优雅。star：4000
TweenJS - 一个简单但强大的 Javascript 动画库。CreateJS 套件的一部分。star:2200+
bounce.js - 一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript
库,使用其特有的方式生成的动画效果。star:5000
Swipe - 号称最精确的Slider触摸库，专为移动设备优化。star:6.2K
tween.js - 一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。star:4.1K
parallax.js - 一个视差引擎的官网，在电脑和手机上都有很好的体验。star:11K

<h3 id="compat">浏览器兼容方案</h3>

Babel 是一款为了写下一代js的编译器，无需等待浏览器支持就可以使用新的语法。star：21K
es6-shim - 提供兼容性垫片，使ES6能兼容于传统的JavaScript引擎。star:2.2K
Modernizr 用来检测浏览器功能支持情况的JavaScript库,可以检测18项CSS3功能以及40多项关于HTML5的功能。star:20000
normalize.css 一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准。支持IE8+。star:26000
html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:8k

Zepto 一款面向移动端设备、API与jQuery兼容的基础库。star:12k
ionic - 先进的HTML5 移动端开发框架。帮助开发者使用HTML5, CSS3和js做出不可思议的hybrid app。star:30000

hammer.js - 一个支持多点触摸的手势库。star:16000
Swiper纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。star:12K

amazeui - 移动优先的跨屏前端框架。面向HTML5开发，使用css3做动画和交互。star:9.5K

mui 最接近原生APP体验的高性能框架。star:6k
Swipe - 加速移动触摸滑块与硬件之间的转换。star:6200。

Mars 腾讯移动Web前端知识库。star:5.2k

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

<h4 id="node_read">Node学习资料</h4>

awesome-nodejs - 关于Nodejs 包和资源的收集。star:17k+

Node.js 中文资料导航 - Node 的中文资料导航，start：1300+
从零开始 NodeJS 系列文章 - 基本上每一篇都看过，强烈推荐
Node.js 包教不包会 - 值得阅读，看完绝不用买书了
七天学会 NodeJS - 阿里出品，必出精品:)
饿了么大前端 Node.js 进阶教程
Style Guide - 这是一份关于如何写出一致且美观的 Node 代码的风格指南
koa实战 - “明河出品”这四字已经说明一切。PS：正在连载中
stream-handbook - 如果学习 NodeJS，那么流一定是需要掌握的概念

<h4 id = "node_package"> Node Package </h4>

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

anywhere -随时随地将你的当前目录变成一个静态文件服务器的根目录
socket.io - 适用于 Node 的实时框架聊天室、页游等对实时性要求较高的应用。我也基于socket.io做了一个在线聊天室，适用于初学者做参考。
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 应用的进程管理器；是 Forever 的进阶库，想了解的可以看这篇文章《拥抱PM2》
cz-cli - 刚用上的一个 git ci 工具，让我们的项目提交代码更规范、更有套路。
async - 一个流程控制工具包，提供直接而强大的异步功能
optimist - 当需要处理 CLI 中的 argv 时(即命令行传参)，用它就行了
lodash - JS 工具库 Underscore.js的一个 fork 发展而来
Commander - 用 Commander.js 可以方便的创建基于 Node 的命令行工具，比如 vue-cli 这类，瞬间觉得自己又高大上了呢~
Inquirer.js - 实现的效果比 Commander 简单、有趣，贴个 GIF供大家参考：loc
Mongoose - 让 NodeJS 更容易操作 Mongodb 数据库；附上一篇Mongoose 学习参考文档
CNPM - 淘宝 NPM 镜像，提供了 NPM 同步的服务当然可不仅仅这样，利用 CNPM 可以打造企业/个人私有的 NPM 服务推荐篇搭建私有NPM的文章：《CNPM搭建私有的NPM服务》
koa - 玩 Node 都知道 express，但使用 koa 的就少很多，门槛比 Ex 稍高通过 generator 避免繁琐的回调函数嵌套，强烈推崇官方的文章教程
node-inspector - Node 调试工具，使用起来跟 Chrome 的 JS 调试器很相似
winston - Node 服务最流行的日志库之一
co - 用 generator 写法让异步代码同步
thenify-all - 把异步的方法变成 Promise 的 Promisifies all the selected functions in an object
PhantomJS - 一般用来做抓取截图和无界面测试也可以用来操作 DOM 和网络监测，很好玩的库 Quick Start
ava -ava 未来的测试运行器
Mocha - Node 里最常用的测试框架；它支持多种 Node 的 Assert libs；同时支持异步和同步的测试，同时支持多种方式导出结果；也支持直接在 browser 上跑 JS 代码测试。
koa-validate - koa 的校验库可以非常方便的对 queryString 或 postBody 的信息进行验证
line-reader - 基于steam的按行读文件，偶处理日志时用哒要不实现一个按行读文件，又得 steam、又得 chunk，还是比较麻烦的
binary 作者是大神 substack，对应的处理 PHP/Python 中的 unpack 方法。英文解释：Unpack multibyte binary values from buffers and streams.
everyauth - OAuth 的集成解决方案
shelljs - 写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具，API 及其简单
hashids - 看名称就懂，给 userid 加解密用的
node-pool - 让 Node 有连接池的概念
colors - 花俏的小工具让打印console.log时有更好的展示样式
n - 控制Node的版本，想升级一行代码搞定

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

<h4 id="node_project">Node Project</h4>

待更新

2015D2前端论坛 - Node方向非常值得看，有干货。
前端开发规范手册 - 此手册主要实现的目标：代码一致性和最佳实践
《babel-handbook》 - 可以用新的规范(如 ES6)写代码，经过 babel 编译后生成没有兼容问题的代码
JavaScript Standard Style - 强烈推荐，尤其适合技术 Leader。优秀的 JS 编码规范是好前端团队的开始
ECMAScript 6入门 - 阮一峰大神所著，一本开源的JS教程全面介绍 ECMAScript 6新引入的语法特性
ReactNative 中文版 - 翻译自官方的中文文档
ReactWebpackCookBook - 此书会引导读者是进入React和Webpack的世界。俩都是非常前沿的技术，同时使用会更有趣。
Sass指南 - Sass指南主要作用是用来帮助大家更好的书写 Sass和维护 Sass。
ReactNative 学习指南 - 新玩意层出不穷... 对于能持续学习的童鞋，这是个美好的时代
HTML/CSS 编码规范 - 编写灵活、稳定、高质量的HTML和CSS代码的规范
移动前端入门 - 入门价值高，移动方向常见问题的较好总结
GulpBook - Gulp 是基于 Node 实现 Web 前端自动化开发的工具

微信小程序开发资源汇总 - 天津第一程出品。微信小程序开发资源汇总。
命令行的艺术 - 熟练使用命令行是优秀工程师的基础
MongoDB 极简实践入门 - 入门推荐的套路，非常浅显易懂
Mac 设置指南 - Mac 使用必看尤其适合偏执狂/强迫症患者:)
Markdown 资料 - 简单看些语法入门，快速用起来

Shadowsocks - 翻墙软件小飞机Shadowsocks 也非常棒，同样推荐：“轻量级科学上网姿势，改变您的生活体验！”
Lantern -免费版有流量限制，不过也还ok

百度脑图 - 非常方便的思维导图工具。功能强、样式佳、无广告，算百度出的良心产品之一。除了 Evernote，脑图是我非常依赖的记录工具
CanIuse - 前端必备；查看浏览器对各种新特性的兼容情况
overapi - 最全的开发人员在线速查手册
ProcessOn - 和百度脑图的功能类似，脑图工具。但是还有社交、通讯的功能，提倡 协作绘图 的理念。感觉网页跳转的时候有点慢，模板样式比百度脑图好看(个人观点)，而且团队协作的功能真的相当好用。
Slides - 一个所见即所得的 WebPPT 编辑器。虽然装X效果一般，但是比较推荐，因为无论懂不懂 UI，做出来的效果不会太难看
nodePPT- 基于node制作的ppt，支持各种模版特效啥的，蛮好用的。
impress.js - 一个css动画特效展示网页，可以用它来做PPT或者简历。但是，要记住，用它做的不只局限于此，唯一的限制是你的创造力！
reveal.js 基于CSS3的3D幻灯片工具。能够制作绚丽的演示文稿并生成HTML格式，将它发布到web上。star:34k view demo
smallpdf - 提供各种格式和 PDF 互相转换
VimAwesome - Vim 插件集合，Vim 党必备
Tower - 小而美的多人协同工具。不光只有 Web 版，还有 iPhone、iPad、Android、微信版。
StackEdit - 又是一款 Web 版 Markdown 编辑器
墨刀 - 一个在线移动应用原型制作工具。旨在帮助产品经理快速制作可在手机端展示的移动应用原型。
htm2pdf - HTML to PDF
Speaker Deck - 在线的演讲稿展示平台
RunJS - 在线编辑、展示、分享、交流你的 JavaScript 代码
Bootswatch - Bootstrap 的免费模板
AdminLTE - 又是一个 Bootstrap 的免费管理后台

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

印象笔记 - 免费账号完全够用，跨平台跨终端的记录软件
365日历 - 首先肯定比系统自带的日历强大，俺一般用来搞目标管理，比如学习计划和工作计划生活中会订阅演唱会、电影首映的信息
多看阅读 - kindle 确实好，但是懒得随身带着多看还算不错，书较多且偶尔有特价比较爽
Surge - 非免费牛逼的网络开发与调试工具，前端必备
Monkey - Monkey 是 iPhone 上一个 GitHub 第三方客户端。展示 GitHub 上的开发者的排名，以及仓库的排名

对于美好事物的追求无论何时都不算晚。

Mac 下的软件那么多，又是免费又是付费，应该怎么选呢？我来分享下我的推荐列表，推荐的优先级老规矩，从上往下依次降低。

再放个福利，以下说的所有付费mac软件，都可以在xclient.info上获得免费版。

Alfred - 免费，绝对的推荐Top1，很提效率，高级版 Powerpack 售价 £17。除了能快速搜索和打开应用程序之外，查找文本文件、全文检索、调起浏览器搜索和计数器都是俺经常使用的功能。如果想知道具体咋用，推荐阅读老池(池建强)的文章：《神兵利器—Alfred》
iTerm2 - 免费。Mac 终端功能少又不好看，iTerm2 可以解救你~ 推荐篇文章：《 iTerm2 使用方法》。iTerm2配合zsh + on-my-zsh,简直就是大杀器
WebStorm - $129，可试用一个月。功能超强的前端 IDE，谁用谁知道
MacDown学习需要坚持记录。MacDown可以说是我用过的MAC下最优秀的Markdown编辑器了。他的开发者借鉴 Mou,使用体验更好。MacDown编辑器 + 自定义Alfred工作流，把图片自动上传到七牛云图床上，写起博客那叫一个酣畅淋漓，可以说是无往而不利了！！！
HyperDock - 售价 ￥68，感觉还是很值的(特么我还想说，Windows 数年前就自带的功能，在 Mac 上还收费，略忧伤)。预览和快速切换窗口太有必要了，能用快捷键控制窗口，能让拖拽到边缘的窗口自动调整大小，真心能提高效率。推荐个文章：HyperDock，让Mac的窗口飞
CheatSheet - 免费。能够显示当前程序的快捷键列表，默认的快捷键是长按 ⌘
ATOM - 免费。非常强大的编辑器，可以参考官方文档
Surge - $49.99。关注 IOS 开发或者常备梯子的同学，肯定都知道这大名鼎鼎的软件。价钱从 ￥68 涨到 $99 也让偶咋舌，背后的故事就不细说了，感兴趣可自行去谷歌百度一下。
LICEcap - 免费。屏幕录制工具，支持导出 GIF 动画图片格式轻量级、使用简单，录制过程中可以改变录屏范围。我一般写博客或者项目文档时，附上动图更直观些。
tree命令 - 有时需要列出项目的结构树,Mac下可以使用brew install tree进行安装tree命令列出项目结构。
Go2Shell - 一款适合程序员的神器。可以快速在当前目录打开 Shell 的工具，比如直接在 Finder 里打开 ITerm2。
Sequel Pro - 免费。好用的 Mysql工具
OmniPlan - 免费试用 14天。甘特图工具，项目 Leader必备。
Manico - 免费版已经很好用了，全功能版售价 ￥25。快捷启动和切换 APP 的工具，高效的第一步
Moom - 售价 $10，有试用版。个人觉得这钱花的值，设置快捷键之后可以方便的调整每个窗口的位置。我不管在家还是公司都是开双屏，外接屏幕三分之一 iTerm，三分之二 ATOM，日常使用时各种全屏、居中、靠左、靠右等用快捷键来回着换，幸福感满满的。
马克鳗免费版已经够用啦，收费版是 60/年。英文名 MarkMan，非常强大好用的长度标注、测量工具，强烈推荐
BrowseShot - 免费。偶正在使用的网页截图工具，强烈推荐
Charles - 付费 Charles 是在 Mac 下常用的网络封包截取工具。蛮好用的。
Wireshark - 免费。说实话，Mac 下木有 Fiddler 挺不习惯，不过好在有更强大的替代品，虽然有点复杂...

Bartender 2 - 售价 $20.97，但是可免费试用四周。Mac右上角菜单的管理工具，试用之后右上角的菜单瞬间清爽了，反正试用下也不花钱:)
BeyondCompare - 免费。在Windows下就开始用了比对文件和文件夹杠杠好使，Merge必备工具
SourceTree - 免费。属于大名鼎鼎的 Atlassian，一款好用的的 Git 客户端工具，重点是 支持中文，哈哈:)
focus booster - 免费已经够用，当然还有更高级的 INDIVIDUAL/PROFESSIONAL，售价分别是 $3/$5。因为比较在意时间管理，所以当工作压力较大时，这软件是俺的必备之物
WebTorrent - 免费。直接播放种子，你懂得。年轻的斯坦福大神 Feross 开发，Git上的开源项目哦。

MindNode - 售价 $29.99，有免费试用版。这是款漂亮的思维导图工具。其实百度脑图这类 Web 上的工具绝对够用了，不太推荐...
Fliqlo - 我是视觉控，超级喜欢的屏保软件。纯深色界面上铺满着大大的时间，非常好的简约效果。

以上列出来的都是偶觉得比较有意思、有特点的软件。

<h3 id="linux">Linux</h3>

作为一名程序员兼工具控，我期待自己无比高效

首先，都是免费哒；然后，所列项目都是针对 CLI(命令行界面) 哒；最后，探索无止境

oh-my-zsh - 终端党 必备，好处太多太多，比如炫酷的外观，超强的易用性...推荐大家阅读知乎的问题：《为什么说 zsh 是 shell 中的极品？》
spf13-vim - 对于 Vim 偶之前做了好多文档和记录，但是自从了解有这个套路，那些记录都可以丢掉了。不过建议想了解的去看看 .vimrc 中的 Plugin，确实足够大而全。PS：如果遇见 neocomplete does not work 之类的错误，可以参考 Problems with Vim and lua?
Vundle - Vim 党必备。用于管理各种 Vim 插件，有 Git 就可以安装 $ git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
tree - linux 以树状图逐级列出目录的内容，装逼效果和实用功能都不错
cloc - 可用来计算文件夹中各种语言的代码占比情况。展示内容非常直观，如某目录下 JavaScript 有多少个文件，共多少空格行数、注释行数、代码行数，就这些简单粗暴的内容。常见的安装方式可通过 npm 来进行安装。
oneapm - 强大的运维工具，提供多种监控客户端；有采集、分析、展示等一套功能； PS：我这用了服务器监控(免费哦)
httpie - 一个 CLI 中的 HTTP 客户端，用法简单，非常适合用来搞调试、测试
ESLint - 前端大神Nicholas C. Zakas创建。JavaScript 辅助编码的规范工具，有效控制偶们的代码质量
Lucario 暗色系主题，支持 Vim, Atom, Sublime Text, TextMate, Terminal.app, iTerm, Xcode and XTerm

<h3 id="BrowserPlugins">Chrome 浏览器插件</h3>

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

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

Postman - POST 接口调试终结者，异常强大的接口调试工具。稍稍有一点学习成本，推荐之
JSONView - 就是个 JSON 格式的查看工具，可以很方便的展示数据，麻麻再也不用担心偶调试接口啦。PS：同类插件有不少，所以用的开心就行
二维码生成器 - RT。还蛮好用的
WEB前端助手(FeHelper) - 百度FE出品，功能超全的 Chrome 插件。简单列一下其功能：QR码生成器、字符串编解码工具、JSON格式化查看器、前端编码规范检测、代码压缩工具、页面取色工具、统计并分析网页加载性能等等
Eye Dropper - 前端必备的颜色提取神器，操作简单容易上手
Vimium 和 Vim 快捷键一样，浏览网站时不需要鼠标咯
Page Ruler - 前端必备的尺子。计算页面元素间距、位置等信息的时候，你就知道它的好了，无脑上手，你值得拥有
FireShot - 可以截取整个网页、部分页面，然后支持导出为各种格式。俺微博上发的网页全景图都是靠这个插件截取的
Infinity - 好不好用有点见仁见智了，但是我个人比较喜欢。使用后会让你的 新标签页 耳目一新，有漂亮的背景和各种常用的功能，比如地图、天气、Gmail、Chrome商店等等。当然，在这个插件的设置中还可以设置壁纸、动画效果等等
Momentum - 同样也是 新标签页 的插件，但是不管是视觉上(高清大图)还是功能上，都比 Infinity 高大上不少，Setting 里面有不少设置和快捷键，都很好上手的。Infinity胜在中文和直观，Momentum胜在视觉冲击。俺基本上这俩款看心情换着用，所以希望你也都能喜欢:)
Google翻译 - 英文不好又得经常浏览英文资料的，一般都准备好了翻译工具。不过能在浏览器里达到划词翻译的方案就不多了，偶推荐这个Google翻译(PS：如不能翻墙，有道词典的扩展也同样支持划词翻译)。
Octotree - 在浏览器左侧展示 Github 项目的文件导航，使目录结构一目了然，而且我们国内 Github 的访问速度又不稳定，用这个工具也就很提效率了。对经常使用 Github 的同学强烈推荐
BuiltWith / wappalyzer / Chrome Sniffer Plus - 几款超强的网站分析工具，可以给出网站非常多的技术栈信息。大到 Web Servers、服务端的 Frameworks 或 JS 框架，小到 meta、编码格式甚至 Analytics，非常推荐
Adblock Plus - 非常非常有名的免费的过滤广告的插件。PS：广告屏蔽这个见仁见智，其实俺个人还是比较接受一些个性化推荐的广告
Wide Github - 无聊又实用的 Github 插件。无聊是因为这个插件就特么一个功能，加宽，能让 Github 页面变宽，每行展示更多的内容，尤其配合着Octotree，展示效果极佳。非常推荐 Mac 用户实用，因为屏幕比较不大，变宽后阅读感觉更好
Imagus 鼠标指针悬停在链接或缩略图上时直接在当前页面的弹出视图上显示这些图片、HTML5 视频/音频和内容专辑...看新浪微博时贼有用:)
DevTools Author - 纯装逼的插件，可以选择你的 Chrome 开发者工具的主题，且支持的主题超过25种，视觉装逼控必备。设置分大概三步，官网有文字说明，youtube 上的视频教程奉上Customization With DevTools Author
GitPlug - 在 Github 项目页中嵌入有关的图表信息，直观的展示当前项目的 Star Trend，能方便看到当前这个开源项目的发起时间，火爆趋势；对比较知名的项目还有相关的 News 展示
OctoLinker - 在 package.json 或任意 .js 文件中，可以方便的对 require() 的 package 进去点击，跳转去对应的 Github 页面。PS：特么不太好表达，建议你去这个插件的概述页，里面有个十来秒的视频，看完就明白鸟
GitHub Hovercard - GitHub 增强工具，悬停可显示对应的用户、仓库、issue 等的详情。
ReRes - 可以用来更改页面请求响应的内容。通过指定规则，您可以把请求映射到其他的url，也可以映射到本机的文件或者目录。ReRes支持单个url映射，也支持目录映射。

Git 教程-廖雪峰 - 俺有看过不少 Git 的文章，确实这个系列是最通俗易懂的
GitAwards - Git 工具，可以查看 Git 排名
Git 速查 - 分类清晰的速查表
Git 简明指南 - 入门Github的简明指南，木有高深内容:)
Git 学习资料整理 - 内容包括很多 Git 的相关资料，star 1200+
GitHub 漫游指南 - 一篇还算不错的 Git 学习总结，就是乱了点... 我理解作者漫游的意思是漫无目的想到哪写到哪~ 看到作者为了达成 Git 连击的成就，也是蛮拼的:)

如 Ruby、Python、Perl 等相似的服务端语言的学习资源。

暂无

Mongoose - 让 NodeJS 更容易操作 Mongodb 数据库。附上一篇Mongoose 学习参考文档

面对大名鼎鼎的 Electron，我懵逼了。犹豫了一会儿，不知道把其放在哪个分类中，于是我单开了一个 客户端 的类目。

Electron - 如果你想利用 web 技术构建跨平台的桌面程序，那么赶紧来了解 Electron。

作为负责最终效果呈现的前端工程师，多少得了解些 设计和交互 的。

站酷 - 里面好东西太多，俺当年真没少再上面淘素材
UI中国 - 光听名字就知道有多高大上鸟:)
sketch -简单好用的设计工具

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

JavaScript Standard Style - 强烈推荐，尤其适合技术 Leader。优秀的 JS 编码规范是好前端团队的开始
HEAD - 最全的 <head> 列表，真心佩服这种偏执的整理能力
百度CDN公共库 - 基本常见的库都收录拉，搞 demo 的时候特方便
HTML 和 CSS 代码规范 - 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范
Linux命令中文手册 - 木有系统的好好学习 Linux，所以命令更不熟悉真羡慕那些CLI玩的飞起的:)
Git 速查 - 分类清晰的速查表
jQueryAPI 1.11.3 - ZeptoAPI 基本和 jQuery 一样，所以看一份就好
CSS - CSS 在线参考手册
Redux 中文文档 - 作为个前端，React 还是得尝试下的。英文文档就不给大家推荐了~
Express API - 中文手册:) 4.x和3.x都有
.gitignore 文件 - 介绍不同语言项目的 gitignore 模板
CI用户指南 - 一个轻量级的 PHP 框架用户指南推荐指数低的原因是劳资PHP比较弱，囧
Yaf - 鸟哥(惠新宸)所写的 PHP 框架推荐指数低的原因同上...

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

提問的智慧 - RT，简体版。“當你拋出一個技術問題時，最終是否能得到有用的回答，往往取決於你所提問和追問的方式。本指南將教你如何正確的提問以獲得你滿意的答案。”——摘自原文
.gitignore 文件 - 介绍不同语言项目的 gitignore 模板
Docsify - 一个轻量级的、支持 Markdown语法的文档生成器。ps：还提供了详细的中文文档哦。
git-draw - 黑魔法，可以修改自己 Git 上的 Contributions
GitBook - 写记录的好地方

<h3 id="cool">前端炫技-炫酷狂拽叼炸天站点</h3>

three.js - JavaScript 3D 库。超多的 examples 等着你去发现，你只需要关注内存和风扇就行了
windows93 - 模拟 Win93 桌面，思路、体验和整体效果比较有意思
GeekTyper - 好玩又具有 Geek 精神的网站，虽然创建的目的是个恶作剧 PS：网站需要翻墙
2016.makemepulse.com - 帅哭了。请使用现代浏览器打开
Mapbox - 非常叼的开源项目，有方便的 JSAPI(还有 SDK)。不过免费版只能浅尝，流量有限。 PS：网站需要翻墙
mixitup 一款基于 jQuery 的 排序/过滤 的JS库，最关键是有着美妙的动画效果
earth - 全球天气的可视化项目
SuperScrollorama - 好玩好看的动画库，链接是 SuperScrollorama 的展示页
CSS字母 - 用 CSS 实现英文字母，叼叼的
墨刀 - 一个在线移动应用原型制作工具。旨在帮助产品经理快速制作可在手机端展示的移动应用原型。

<h3 id="summary">小结</h3>
这里面是我自己学习的时候收集了很多资料丢在云笔记里，现在整理出来，并结合其他人的实践做出的资料合集。

其中一部分是我亲身实践过的，一部分是列在自己的todolist里面。希望可以和大家一起学习进步！！

继续完善和扩充内容
在“备注/说明”中增加自己的理解与实践的学习笔记外链，让这篇记录更生动。
因为六月要入职腾讯，后续会增加Webgl相关的资料和学习心得，以及读书笔记。

本篇文章持续更新中，欢迎star,watch。

⬆ 返回顶部

大前端工具百宝箱

大前端工具百宝箱 Awesome

正文

文章已推送至我的github，欢迎PR

猜你喜欢

热点阅读