大前端工具集

2015-10-14 12:15 2435 0

摘要: 目录前端组织前端博客博客搭建CSS浏览端JSNodeJS推荐PackageNode学习资料Build 项目构建Gulp推荐包精选阅读前端面试工具/软件WebAPPAndroidiPhoneMacLinuxChrome浏览器插件GitRedisMongoDB杂七杂八前端炫技-炫酷狂拽 ...

关键词： 前端 Node 推荐备注名称博客 nbsp 指数代码支持

正文

前端组织

虽混过外企俩家，但劳资英文这项的技能点还是灰色的...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	★★★★☆	比较喜欢其作者... 所以劳资正在看源码学习学习
Highcharts	★★★★	Highcharts中文网，又是一个图表库确实功能强大，但是觉得不好看... PS：官网就做的不好看，脏脏的赶脚
videojs	★★★☆	当下视频需求都用上鸟样式和交互统一的问题交给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`时有更好的展示样式