来自：nieweidong (Darren) · GitHub 链接：https://github.com/nieweidong/fetool （点击尾部阅读原文前往） 作者： 微博 @聂微东 个人 Blog fefork.com 博客园 犀利的东哥 已获转载授权 目录 前端组织/前端博客 博客搭建 HTML CSS 浏览端 JS Project Build Node Package Node Project 精选阅读 前端技术 Node 学习资料 前端面试 其他技术 工具/软件 Web APP Mac Linux Chrome Plugins Git 服务端 数据端 设计/交互 速查手册 杂七杂八 前端炫技-炫酷狂拽叼炸天的 Web 小结 TODO 正文 前端组织/前端博客 虽混过外企俩家，但劳资英文这项的技能点还是灰色的…so，俺关注的站点主要以中文为主 GitHub – 没 Github 都不好意思面基有木有！！！ MDN – 无数的资源再等着你探索，追标准和新特性肯定得关注的网站 Awesomes.cn – 国人维护的前端资源库，深度对接到 Github，分类和展现清晰，值得收藏 如何跟上前端开发的最新前沿 – RT，不解释 慕课 – 大量的在线计算机课程
虽然初、中级居多，但是不乏有巨作值得细细品尝 阮一峰 – 关注多年，拜读其 ES6 系列
虽网传靠写书进鸟阿里，但博客内容确实够丰富 W3Cplus – 大漠(《图解 CSS3》作者)在国内的影响力杠杠的，Sass 专家级 淘宝前端团队 – 内容涵盖 Web 和 Node，要深度游深度，要广度有广度 奇舞团博客 – 坚持是最宝贵的，别人的奇舞周刊早已经过百期了 百度 FEX – 代表作 FIS、UEditor、WebUploader、KityMinder 腾讯全端 AlloyTeam – 腾讯 Web 前端团队，博客真的有点丑… 粉丝日志 for 张丹 – 大爱作者写的 Node 系列 张鑫旭 – 成名多年的、高产的前端大湿，CSS猛人 博客搭建 Hexo – 快速、简洁且高效的博客框架，照着文档分分钟就可以在本地跑起来
Github 地址:Hexo Jekyll – 将纯文本转化为静态网站和博客
由于环境依赖的问题，所以安装起来可能稍费劲那么一点
Github 地址：Jekyll GithubPages – 免费的静态站点
配合着 Hexo 或 Jekyll 的模板，分分搭建出一套炫酷的个人博客 Tumblr – 轻博客的祖师爷，各种各样的主题感觉不错 WordPress – 这玩意古老到都不想介绍 使用 Hexo/Jekyll + GitPage，前端搭建静态博客那是相当 easy
用 Markdown 写文章做记录，再 push 到 Github 上，分分钟高大上有木有 再推荐三款视觉效果极佳的 Hexo 主题，且在 Github 上的 star 都很不错： NexT Yilia Tranquilpeak 不能偏心，所以也推荐三款 Jekyll 的好主题： So Simple 如果你看过俺的博客，对这个主题就肯定不会陌生啦 HPSTR 当初 fefork 差点选这个主题:) beautiful HTML 纯 HTML 相关其实没有好玩的项目，所以这儿展示的内容主要都是一些模板，而且以下列出来的都是免费的，方便拿取搭架后台或者博客 HEAD – 最 全的
列表，真心佩服这种偏执的整理能力 blur-admin – 视觉冲击极强的管理后台，各种动画效果PS：因为团队有ant-design的使用经验，感觉使用起来不是很顺畅，这套后台又是基于AngularJS，所以再三权限之后还是没实际使用，劳资还是别给团队添乱了，囧… AdminLTE – 很小清新的后台模板，每次看preview 页面都觉得很有视觉冲击 gentelella – 刚用这个搭建了我司内部用的的数据平台，效果喜人
模板实现的功能比较全，比如登录、注册甚至各种 widget，所以最终交付的时候，自己几乎没写几行CSS
material-design-lite – Star 数超过2W的开源模板项目，包含了多套简洁的 templates，可以用于博客、后台或者企业首页
CSS MetroUI – 好看好用，重点是样式特别、个性 Font-Awesome – 图标字体库
这个插件可以让我们用新的 标准/提案 写 JavaScript 代码，然后再向下 转换编译，最终生成随处可用的 JavaScript 代码
中文文档奉上《babel-handbook》 fullPage – 非常好用的全屏滑动库，看 Demo 就明白 PhotoSwipe – 偶常用的 js 库 官网上有这么一句很关键、重要”no dependencies” Vuejs – 比较喜欢其作者… 所以劳资正在看源码学习学习 favico.js – 动态改变浏览器标签栏中的网站图标，非常好玩 ant.design – 蚂蚁金服搞的良心项目，文档美好的令人发指 样式优雅，强烈推荐内部系统尝试此库 highlightjs – 代码高亮库，支持非常多的语言 daterangepicker – 时间选择插件的不二选择，基于 Bootstrap 和 Moment.js nodePPT – 前同事三水的大作，好用必须得支持:) 用 Markdown 写 PPT，还可以 HTML 混排，上手飞快 Sortable – 拖拽神器，用了就知道 toastr – 信息提示的库，推荐的原因是卖相好、功能强大 demo peity.js – jQuery的图表插件，特别cute，感觉萌萌哒 将HTML转换成一个小的
Gulp – Gulp 是基于 Node 实现 Web 前端自动化开发的工具
俺总结了篇《gulp使用小结》，推荐您阅读:) Bower – 前端项目的包管理其实是件复杂的事 谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本…卧槽 Bower 就是搞定这件事儿的，亲爹是 Twitter 推荐篇 Bower 的中文文章：《bower 解决 js 的依赖管理》 Grunt – 和 Gulp 类似，都是项目构建的常见选择 对比这俩的文章可谓不少，推荐篇《Gulp vs Grunt》 英盲又想看文档，可以去Grunt 中文网 FIS – 度厂出品的前端构建工具 文档清晰，功能强大，推荐了解和使用 Gitlab CI – 一套基于Gitlab的持续集成服务 Gulp + Webpack 的使用套路参考: learning-gulp Gulp 资料收集：use-gulp 推荐篇与 Webpack 相关的文章《CSS Modules》 Webpack 用起来吼吼：webpack-howto Node Package 作为一名大前端甚至是多端，Node 绝逼是必备的一块 有关 Node 的学习资料，请访问 这里介绍些有特色且前端有必要知道的包 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 应用的进程管理器； 是 Forever 的进阶库，想了解的可以看这篇文章《拥抱PM2》 async – 一个流程控制工具包，提供直接而强大的异步功能 lodash – JS 工具库 Underscore.js的一个 fork 发展而来 socket.io – 预计 Node 的实时框架 聊天室、页游等对实时性有高要求的较适用 Mongoose – 让 NodeJS 更容易操作 Mongodb 数据库； 附上一篇Mongoose 学习参考文档 CNPM – 淘宝 NPM 镜像，提供了 NPM 同步的服务 当然可不仅仅这样，利用 CNPM 可以打造企业/个人私有的 NPM 服务 推荐篇搭建私有NPM的文章：《CNPM搭建私有的NPM服务》 koa – 玩 Node 都知道 express，但使用 koa 的就少很多，门槛比 Ex 稍高 通过 generator 避免繁琐的回调函数嵌套，强烈推崇 官方的文章教程 Shipit – 一个强大的自动化部署工具
shipit 很多地方非常类似 gulp，他们的核心都是任务系统
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 – 偶是应TJ大神推荐而得之的 ava 未来的测试运行器 Mocha – Node 里最常用的测试框架； 它支持多种 Node 的 Assert libs； 同时支持异步和同步的测试，同时支持多种方式导出结果； 也支持直接在 browser 上跑 JS 代码测试
koa-validate – koa 的校验库 可以非常方便的对 queryString 或 postBody 的信息进行验证 line-reader – 基于steam的按行读文件，偶处理日志时用哒 要不实现一个按行读文件，又得 steam、 又得 chunk，还是比较麻烦的 everyauth| |OAuth 的集成解决方案 shelljs – 写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具，API 及其简单 hashids – 看名称就懂，给 userid 加解密用的 node-pool – 让 Node 有连接池的概念 colors – 花俏的小工具 让打印console.log时有更好的展示样式 n – 控制Node的版本，想升级一行代码搞定 supervisor 和 nodemon 这俩都是监控 Node 代码，使得每次修改代码后会，开发 Node 程序必备 以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:) Node Project 暂无 精选阅读 前端技术 2015D2前端论坛 – Node方向非常值得看，有干货，相信东哥推荐哈 前端开发规范手册 – 此手册主要实现的目标：代码一致性和最佳实践 《babel-handbook》 – 可以用新的规范(如 ES6)写代码，经过 babel 编译后生成没有兼容问题的代码 ECMAScript 6入门 – 阮一峰大神所著，一本开源的JS教程 全面介绍 ECMAScript 6新引入的语法特性 ReactNative 中文版 – 翻译自官方的中文文档 ReactWebpackCookBook | |此书会引导读者是进入React和Webpack的世界
俩都是非常前沿的技术，同时使用会更有趣
ReactNative 学习指南 – 新玩意层出不穷… 对于能持续学习的童鞋，这是个美好的时代 HTML/CSS 编码规范 – 编写灵活、稳定、高质量的HTML和CSS代码的规范 移动前端入门 – 入门价值高，移动方向常见问题的较好总结 GulpBook – Gulp 是基于 Node 实现 Web 前端自动化开发的工具 Node 学习资料 Node.js 中文资料导航 – Node 的中文资料导航，start1300+ 从零开始 NodeJS 系列文章 – 基本上每一篇都看过，强烈推荐 Node.js 包教不包会 – 值得阅读，看完绝不用买书鸟 七天学会 NodeJS – 劳资还没看，不过看目录还不错:) Style Guide – 这是一份关于如何写出一致且美观的 Node 代码的风格指南 koa实战 – “明河出品”这四字已经说明一切
PS：正在连载中 stream-handbook – 如果学习 NodeJS，那么流一定是需要掌握的概念 前端面试 在 LinkedIn 做面试官的故事 – 非面试题，介绍 LinkedIn 的面试过程 文章有很多中肯的建议和想法，推荐阅读 大漠：写给前端面试者 – 这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受… 前端面试题 – Git 上非常火的前端面试题，start17k+ 前端面经 – 主要内容是些前端面试笔试题和面试套路，值得阅读 其他技术 MongoDB 极简实践入门 – 入门推荐的套路，非常浅显易懂 Mac 设置指南 – Mac 使用必看 尤其适合 偏执狂/强迫症 患者:) Markdown 资料 – 简单看些语法入门，快速用起来 工具/软件 Web CanIuse – 前端必备；查看浏览器对各种新特性的兼容情况 overapi – 最全的开发人员在线速查手册 百度脑图 – 非常方便的思维导图工具 ProcessOn – 和百度脑图的功能类似，脑图工具
VimAwesome – Vim 插件集合，Vim 党必备 Tower – 小而美的多人协同工具
Slides – 一个所见即所得的 WebPPT 编辑器，非常推荐 faviconer.co – 一个所见即所得的icon生成器，很好用 smallpdf – 提供各种格式和 PDF 互相转换 Cmd Markdown – 好用的 Web 版 Markdown 编辑器 StackEdit – 又是一款 Web 版 Markdown 编辑器 墨刀 – 一个在线移动应用原型制作工具
旨在帮助产品经理快速制作可在手机端展示的移动应用原型
htm2pdf| |HTML to PDF Speaker Deck – 在线的演讲稿展示平台 RunJS – 在线编辑、展示、分享、交流你的 JavaScript 代码 Bootswatch – Bootstrap 的免费模板 AdminLTE – 又是一个 Bootstrap 的免费管理后台 APP 以下列表中的 APP 都是不区分系统平台的 印象笔记 – 免费账号完全够用，跨平台跨终端的记录软件 365日历 – 首先肯定比系统自带的日历强大，要不推荐个蛋蛋 俺一般用来搞目标管理，比如学习计划和工作计划 生活中会订阅演唱会、电影首映的信息 多看阅读 – kindle 确实好，但是懒得随身带着 多看还算不错，书较多且偶尔有特价比较爽 Surge – 非免费 牛逼的网络开发与调试工具，前端必备 Monkey – Monkey 是 iPhone 上一个 GitHub 第三方客户端
展示 GitHub 上的开发者的排名，以及仓库的排名 Mac 对于美好事务的追求无论何时都不算晚，前年公司给配了台 Mac 用做测试开发机，于是开始在 Mac 下办公
Windows？ 回不去鸟… Homebrew – 没它程序猿没法好好干活… Homebrew使OS X更完美
使用gem来安装gems、用brew来搞定那些依赖包 iTerm2 – Mac 终端功能少又不好看，iTerm2 可以解救你~ 推荐篇文章：《让你的命令行丰富多彩》 BrowseShot – 偶正在使用的网页截图工具，强烈推荐 BeyondCompare – 在Windows下就开始用了 比对文件和文件夹杠杠好使，Merge必备工具 CheatSheet – 能够显示当前程序的快捷键列表，默认的快捷键是长按 ⌘ Sequel Pro – 免费好用的Mysql工具 LICEcap – 屏幕录制工具，支持导出 GIF 动画图片格式 轻量级、使用简单，录制过程中可以改变录屏范围 Manico – 快捷启动和切换 APP 的工具，高效的第一步 AppStore 上收费，不过可以免费试用 WebStorm – 功能超强的前端 IDE，不多介绍，谁用谁知道 PS：貌似俺插件装多了，用着卡卡的，风扇呼呼转… Atom – 2015 年 7 月之前，在桌面环境下我最喜欢的编辑器是 Sublime
但之后就是 Atom，俺也专门为它写了篇使用纪要 马克鳗 – MarkMan，非常强大好用的标注、测量工具
日常工作免费版就完全可以满足，强烈推荐 Wireshark – 说实话，Mac 下木有 Fiddler 挺不习惯，不过在有更强大的替代品 SourceTree – 一款好用的的 Git 客户端工具，重点是支持中文:) focus booster – 因为比较在意时间管理，所以这软件是俺工作时间的必备之物 Mou – 我曾使用过的 mk 编辑器
原本准备去掉这个推荐，但是我想让大家了解下这个有意思的事情：《一年了，那个闻名遐迩的 Mou 你还记得吗？》 Linux oh-my-zsh – 终端党 必用的好工具，强烈推荐 tree – linux 以树状图逐级列出目录的内容 oneapm – 强大的运维工具，提供多种监控客户端； 有采集、分析、展示等一套功能； PS：我这用了服务器监控(免费哦) httpie – 一个 CLI 中的 HTTP 客户端 用法简单、易读 Chrome 浏览器插件 Chrome 应用商店必定是需要翻墙的哈
以下插件都是俺多年积累淘出来的，数量不多，所以就不区分 Github 插件和非 Github 插件了
按照俺推荐的强度自上向下展示，且大多数插件就是偶工作和生活必备，希望能对大家有用
后续如有新发现好插件，偶也会及时更新哒
Postman – POST 接口调试终结者，异常强大的接口调试工具
稍稍有一点学习成本，推荐之 JSONView – 就是个 JSON 格式的查看工具，可以很方便的展示数据，麻麻再也不用担心偶调试接口啦
PS：同类插件有不少，所以用的开心就行 二维码生成器 – RT
PS：这FF早已经自带生成二维码工具了，Chrome 还得装插件才行，任性… Eye Dropper 前端必备的颜色提取神器，操作简单容易上手 Page Ruler 前端必备的尺子
计算页面元素间距、位置等信息的时候，你就知道它的好了，无脑上手，你值得拥有 FireShot 可以截取整个网页、部分页面，然后支持导出为各种格式
俺微博上发的网页全景图都是靠这个插件截取的 Infinity – 好不好用有点见仁见智了，但是我个人比较喜欢
使用后会让你的 新标签页 耳目一新，有漂亮的背景和各种常用的功能，比如地图、天气、Gmail、Chrome商店等等
当然，在这个插件的设置中还可以设置壁纸、动画效果等等 Momentum 同样也是 新标签页 的插件，但是不管是视觉上(高清大图)还是功能上，都比 Infinity 高大上不少，Setting 里面有不少设置和快捷键，都很好上手的
Infinity胜在中文和直观，Momentum胜在视觉冲击
俺基本上这俩款看心情换着用，所以希望你也都能喜欢:) Octotree – 在浏览器左侧展示 Github 项目的文件导航，使目录结构一目了然，而且我们国内 Github 的访问速度又不稳定，用这个工具也就很提效率了
对经常使用 Github 的同学强烈推荐 BuiltWith / wappalyzer / Chrome Sniffer Plus – 几款超强的网站分析工具，可以给出网站非常多的技术栈信息
大到 Web Servers、服务端的 Frameworks 或 JS 框架，小到 meta、编码格式甚至 Analytics，非常推荐 Adblock Plus 非常非常有名的免费的过滤广告的插件
PS：广告屏蔽这个见仁见智，其实俺个人还是比较接受一些个性化推荐的广告 Wide Github 无聊又实用的 Github 插件
无聊是因为这个插件就特么一个功能，加宽，能让 Github 页面变宽，每行展示更多的内容，尤其配合着Octotree，展示效果极佳
非常推荐 Mac 用户实用，因为屏幕比较不大，变宽后阅读感觉更好 GitPlug – 在 Github 项目页中嵌入有关的图表信息，直观的展示当前项目的 Star Trend，能方便看到当前这个开源项目的发起时间，火爆趋势；对比较知名的项目还有相关的 News 展示 OctoLinker – 在 package.json 或任意 .js 文件中，可以方便的对 require() 的 package 进去点击，跳转去对应的 Github 页面
PS：特么不太好表达，建议你去这个插件的概述页，里面有个十来秒的视频，看完就明白鸟 补充： 翻墙代理的插件偶没使用，偶手机和电脑的翻墙都是配的 Surge 无脑搞定，不过翻墙代理插件推荐Proxy SwitchySharp，熊掌公司里大多用的都是它 日常开发相关的插件就以上这些，还有几款如知乎的插件、购物插件等这类与开发效率不沾边的，俺就不这上头列了哈 Git Git 教程-廖雪峰 – 俺有看过不少 Git 的文章，确实这个系列是最通俗易懂的 GitAwards – Git 工具，可以查看 Git 排名 Git 速查 – 分类清晰的速查表 Git 简明指南 – 入门Github的简明指南，木有高深内容:) Git 学习资料整理| |内容包括很多 Git 的相关资料，star 1200+ GitHub 漫游指南 – 一篇还算不错的 Git 学习总结，就是乱了点… 我理解作者漫游的意思是漫无目的想到哪写到哪~ 看到作者为鸟达成 Git 连击的成就，也是蛮拼的:) 服务端 如 Ruby、Python、Perl 等相似的服务端语言的学习资源
暂无 数据端 Mongoose – 让 NodeJS 更容易操作 Mongodb 数据库
重点是每通过一个测试，尼玛对应的妞会脱一件衣服… PS：要翻墙哦~ emailframe – 邮件展示确实比较坑，建议有需要的收藏 ReadmeSample| | 项目高大上的第一步就是包装，所以来看看 README 的书写套路吧 PS：劳资怎么这么无聊… 前端炫技-_炫酷狂拽叼炸天站点_ windows93 – 模拟 Win93 桌面，思路、体验和整体效果比较有意思 GeekTyper – 好玩又具有 Geek 精神的网站，虽然创建的目的是个恶作剧 PS：网站需要翻墙 2016.makemepulse.com – 帅哭了
请使用现代浏览器打开 前端技能栈 – 好玩的前端技能栈展示 Mapbox – 非常叼的开源项目，有方便的 JSAPI(还有 SDK)
不过免费版只能浅尝，流量有限
PS：网站需要翻墙 Clark Duvall – 一枚歪果仁的个人 blog，范儿叼叼的 SuperScrollorama – 好玩好看的动画库，链接是 SuperScrollorama 的展示页 parallax.js – 一个视差引擎的官网，在电脑和手机上都有很好的体验 CSS字母 – 用 CSS 实现英文字母，叼叼的 墨刀 – 一个在线移动应用原型制作工具
旨在帮助产品经理快速制作可在手机端展示的移动应用原型
小结 背景 俺算个比较能自我总结的码农，所以偶尔喜欢写点东西做些记录或者自我熏陶陶醉一下
可写着写着发现Evernote里面的东西太尼玛多(乱)了，于是想着把一些技术相关的资料都整理整理，都丢到Github上沉淀下来
这样Evernote就可以只需要记录些偏生活方便的，看着清爽一些… 所以，这篇记录其实只是为偶自己而写，确信以后也一直会这样~~~ 说说目标 其实与这篇记录类似的文章太多鸟，俺也不愿意成为一个单纯的收集资料，分享资料的这么个东西
我希望 fetool 能更生动、更个性，最好能更另类点，对于每样工具的思考和解析更多点，吐槽也必须有理有据，然后再配上劳资收集的 low 图，完美！ 希望通过不停的完善这篇记录，能Push劳资多了解业内的新玩具和新创意，然后围绕这些新东西，客观的再写点好东西，比如文章、资料、开源项目这些，让其他伙伴们少走弯路或学的更顺畅点儿 所以劳资对自己的要求是：这篇记录里列出的每样东西，自己都得的去了解、去尝试，然后再列出来
能举一反三最好，如果达不到至少也能清楚的认识：列出来的这玩意对程序员有没有卵用，解决了啥痛点
TODO 1、继续完善和扩充内容 2、 “备注/说明”这一栏不够犀利，希望再多加入自己的理解、点评、吐槽，让这篇记录更犀利和生动 3、 支持导出多种格式，如.pdf、.epub、.mobi等 4、 后续看看如果有必要，可以单独搞个页面，优化下阅读和展示效果 链接：https://github.com/nieweidong/fetool （点击尾部阅读原文前往） 本文编号1666，以后想阅读这篇文章直接输入1666即可
●本文分类“ 前端 ” ， 搜索分类名可以获得相关文章