本篇文章记录了一枚程序猿的百宝箱。
主要内容是一些使用过的库、工具、套路或关注的前端组织等等，反正用 前端瑞士军刀 来总结这篇文章再合适不过鸟。
虽混过外企俩家，但劳资英文这项的技能点还是灰色的...so，俺关注的站点主要以中文为主
| 名称 |
推荐指数 |
备注/说明 |
| Git |
★★★★★ |
劳资清楚这不是个纯粹的前端社区... 但作为全球最大的搞基社区，无数前端项目在这启航 |
| MDN |
★★★★★ |
不解释，无数的资源再等着你探索 |
| 慕课 |
★★★★☆ |
大量的在线计算机课程。 虽然初、中级居多，但是不乏有巨作值得细细品尝 |
| W3Cplus |
★★★★☆ |
大漠(《图解CSS3》作者)在国内的影响力杠杠的 Sass专家级 |
| 百度Web前端研发部 |
★★★★ |
确实对得起“研发”这个称呼 |
| 前端乱炖 |
★★★☆ |
前端社区太多，乱炖还算做的不错的 |
| 极客学院 |
★★★ |
和慕课类似，但是内容更杂、更丰富 |
| Div.IO |
★★★ |
主要内容是最新的前端库和前沿技术 |
| 腾讯全端AlloyTeam |
★★★ |
腾讯Web前端团队 |
值得长期占坑的前端个人博客，都是偶经常关注的
使用 hexo/jekyll + GitPage，前端搭建静态博客那是相当easy。用Markdown写文章做记录，再push到Git上，分分钟高大上有木有
| 名称 |
推荐指数 |
备注/说明 |
| LoadersCSS |
★★★★★ |
用CSS技术实现loading动画； 补一句，想熟悉、理解 keyframes、animation、transform、transition 的童鞋可以直接去读其源码(只有千把行代码)，读完就算出师鸟:) |
| Hover.css |
★★★★ |
很多鼠标Hover态的效果，可以给产品学习一下:) |
| purecss |
★★★★ |
非常小巧、强大的响应式CSS库,Yahoo!出品 |
| csscss |
★★★★ |
用于检查css代码冗余 |
Swiper/PhotoSwipe/fullPage 有这仨库，微信里常见的H5页完全不是问题哒
| 名称 |
推荐指数 |
备注/说明 |
| 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 |
★★★★★ |
一个流程控制工具包，提供直接而强大的异步功能 |
| Mongoose |
★★★★★ |
让NodeJS更容易操作Mongodb数据库； 附上一篇Mongoose学习参考文档 |
| koa |
★★★★☆ |
玩Node都知道express，但使用koa的人就少很多，门槛比Ex稍高 通过generator避免繁琐的回调函数嵌套，强烈推崇。官方的文章教程 |
| Shipit |
★★★★☆ |
一个强大的自动化部署工具。 shipit很多地方非常类似gulp，他们的核心都是任务系统。 |
| thenify-all |
★★★★ |
把异步的方法变成Promise的 Promisifies all the selected functions in an object |
| node-inspector |
★★★★ |
Node调试工具 |
| Mocha |
★★★★ |
JS测试框架，可用于Node或者浏览器中 |
supervisor 和 nodemon 这俩都是监控Node代码，使得每次修改代码后会，开发Node程序必备
| 名称 |
推荐指数 |
备注/说明 |
| Webpack |
★★★★★ |
项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。 精选阅读中有篇资料就是介绍Webpack和React的工作机制。 |
| Gulp |
★★★★★ |
Gulp是基于Node实现Web前端自动化开发的工具。 学习资料附上GulpBook |
| Gitlab CI |
★★★★ |
一套基于Gitlab的持续集成服务 |
| Bower |
★★★★ |
一句话解释：A package manager for the web |
以下内容不包括 NodeJS 和 面试相关 的，俺已经单独准备好鸟
| 名称 |
推荐指数 |
备注/说明 |
| 在LinkedIn做面试官的故事 |
★★★★★ |
非面试题，介绍LinkedIn的面试过程 文章有很多中肯的建议和想法，推荐阅读 |
| 大漠：写给前端面试者 |
★★★★★ |
这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受... |
| 前端面试题 |
★★★★☆ |
Git上非常火的前端面试题，start17k+ |
以下列表中的APP都是不区分系统平台的
| 名称 |
推荐指数 |
备注/说明 |
| 印象笔记 |
★★★★★ |
免费账号完全够用，跨平台跨终端的记录软件 |
| 名称 |
推荐指数 |
备注/说明 |
| 小米桌面 |
★★★★★ |
多好看、多漂亮谈不上，关键是没有广告 |
| 名称 |
推荐指数 |
备注/说明 |
| Monkey |
★★★★ |
Monkey是iPhone上一个GitHub第三方客户端。 展示 GitHub 上的开发者的排名，以及仓库的排名 |
对于美好事务的追求无论何时都不算晚，前年公司配了台Mac用做测试开发机，于是开始在Mac下办公。
Windows？ 回不去了...
| 名称 |
推荐指数 |
备注/说明 |
| Homebrew |
★★★★★ |
没它程序猿没法好好干活... Homebrew使OS X更完美。 使用gem来安装gems、用brew来搞定那些依赖包 |
| BrowseShot |
★★★★★ |
我正在使用的网页截图工具，强烈推荐 |
| 马克鳗 |
★★★★☆ |
MarkMan，非常强大好用的标注、测量工具。 日常工作免费版就完全可以满足，强烈推荐 |
| WebStorm |
★★★★☆ |
功能超强的前端IDE，不多介绍，谁用谁知道 |
| Atom |
★★★★ |
2015年7月之前，在桌面环境下我最喜欢的编辑器是Sublime。 但之后就是Atom，俺也专门为它写了篇___使用纪要___ |
| Wireshark |
★★★☆ |
说实话，Mac下木有Fiddler挺不习惯，不过在有更强大的替代品 |
| SourceTree |
★★★☆ |
一款好用的的Git客户端工具，重点是支持中文:) |
| focus booster |
★★★ |
因为比较在意时间管理，所以这软件是俺工作时间的必备之物 |
| Mou |
★★ |
快速好用的Markdown编辑器 |
| 名称 |
推荐指数 |
备注/说明 |
| oh-my-zsh |
★★★★★ |
___终端党___必用的好工具 |
| oneapm |
★★★★ |
强大的运维工具，提供多种监控客户端； 有采集、分析、展示等一套功能； PS：我这用了服务器监控(免费哦) |
| tree |
★★★★★ |
linux以树状图逐级列出目录的内容 |
| httpie |
★★★★☆ |
一个CLI中的HTTP客户端 用法简单、易读 |
| 名称 |
推荐指数 |
备注/说明 |
| Infinity |
★★★★ |
针对Chrome的插件，__新标签页__会让你耳目一新 |
放些开发中较有用的杂物在这儿
| 名称 |
推荐指数 |
备注/说明 |
| windows93 |
★★★★★ |
模拟Win93桌面，思路、体验和整体效果比较有意思 |
| GeekTyper |
★★★★★ |
好玩又具有Geek精神的网站，虽然创建的目的是个恶作剧 PS：网站需要翻墙 |
| Mapbox |
★★★★★ |
非常叼的开源项目，有方便的JSAPI(还有SDK)。 不过免费版只能浅尝，流量有限。 PS：网站需要翻墙 |
| SuperScrollorama |
★★★★ |
好玩好看的动画库，链接是SuperScrollorama的展示页 |
| parallax.js |
★★★ |
一个视差引擎的官网，在电脑和手机上都有很好的体验 |
| 墨刀 |
★★ |
一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。 |
以下是拔赤总结的前端技能图：
完善ing，慢慢把 Evernote 和 浏览器书签 里面的好东西慢慢捣腾到这儿，更欢迎PR，谢谢。
