前端组织
虽混过外企俩家，但劳资英文这项的技能点还是灰色的...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 |
★★★★☆ |
比较喜欢其作者... 所以劳资正在看源码学习学习 |
| emojify.js |
★★★★ |
能够将emoji关键词转换为emoji图片的JS插件 可以快速的为你的网站提供emoji表情支持 |
| Highcharts |
★★★★ |
Highcharts中文网，又是一个图表库 确实功能强大，但是觉得不好看... PS：官网就做的不好看，脏脏的赶脚 |
| 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时有更好的展示样式 |
supervisor和nodemon这俩都是监控Node代码，使得每次修改代码后会，开发Node程序必备
以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:)
Node学习指南
| 名称 |
推荐指数 |
备注/说明 |
| node.js中文资料导航 |
★★★★★ |
Node的中文资料导航，start1300+ |
| 从零开始nodejs系列文章 |
★★★★★ |
基本上每一篇都看过，强烈推荐 |
| Node.js 包教不包会 |
★★★★★ |
值得阅读，看完绝不用买书鸟 |
| 七天学会NodeJS |
★★★★★ |
劳资还没看，不过看目录还不错:) |
Build 项目构建
Gulp+Webpack的使用套路参考:learning-gulp
Gulp资料收集：use-gulp
推荐篇与Webpack相关的文章《CSS Modules》
Webpack用起来吼吼：webpack-howto
| 名称 |
推荐指数 |
备注/说明 |
| Webpack |
★★★★★ |
项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。精选阅读中有篇资料就是介绍Webpack和React的工作机制。 |
| Gulp |
★★★★★ |
Gulp是基于Node实现Web前端自动化开发的工具。 学习资料附上GulpBook |
| Bower |
★★★★☆ |
前端项目的包管理其实是件复杂的事 谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本...卧槽 Bower就是搞定这件事儿的，亲爹是Twitter 推荐篇Bower的中文文章：《bower解决js的依赖管理》 |
| Grunt |
★★★★☆ |
和Gulp类似，都是项目构建的常见选择 对比这俩的文章可谓不少，推荐篇《Gulp vs Grunt》英盲又想看文档，可以去Grunt中文网 |
| Gitlab CI |
★★★★ |
一套基于Gitlab的持续集成服务 |
Gulp推荐包
Gulp最基础的库就不列在下表格中鸟，其中包括：
- gulp-concat作用是连接/合并文件
- gulp-cssshrinkCSS文件压缩
- gulp-uglifyJS文件压缩
| 名称 |
推荐指数 |
备注/说明 |
| gulp-webpack |
★★★★★ |
webpack与gulp配合，开启前端Build新纪元 webpack plugin for gulp |
| gulp-rev |
★★★★☆ |
高大上第一步，静态文件名称变成HASH名称 |
| gulp-rev-collector |
★★★★☆ |
配合gulp-rev使用，自动用HASH替换模板内静态文件名 |
| run-sequence |
★★★★ |
Gulp任务机制为并行，RS使得有依赖的任务可串行执行 使用gulp-rev时得用RS配合 要不并行的生成配置和处理.html文件不能同事生效 |
| gulp-util |
★★★★ |
内含一套方法库，功能太多 个人感觉更喜欢功能单一的包，不太喜欢这种大杂烩 |
| gulp-connect |
★★★★ |
有reload功能的Run Webserver工具 我一般用来livereload，即保存之后自动刷新页面 |
| gulp-load-plugins |
★★★★ |
可加载package.json内与Gulp相关的插件 省去鸟一行一行require的功夫咯 |
| gulp-clean |
★★★☆ |
移除文件或文件夹的包 |
| gulp-replace |
★★★☆ |
其功能看名字就知道，用做字符串替换的 |
| gulp-autoprefixer |
★★★☆ |
叼炸天的自动处理浏览器前缀的包 文档地址：usage |
| gulp-rename |
★★★ |
把文件重命名 结构设计的好不太会用到这个 |
| gulp-flatten |
★★★ |
删除或替换文件的相对路径； 一般我这用来移动img或者其他静态文件到新目录 同上：结构设计的好不太会用到这个 |
精选阅读
以下内容不包括NodeJS和面试相关的，俺已经单独准备好鸟
| 名称 |
推荐指数 |
备注/说明 |
| stream-handbook |
★★★★★ |
如果学习Nodejs，那么流一定是需要掌握的概念 |
| ReactNative 中文版 |
★★★★☆ |
翻译自官方的中文文档 |
| Mac设置指南 |
★★★★☆ |
Mac使用必看 尤其适合 偏执狂/强迫症 患者:) |
| MongoDB极简实践入门 |
★★★★☆ |
入门推荐的套路，非常浅显易懂 |
| ReactWebpackCookBook |
★★★★☆ |
此书会引导读者是进入React和Webpack的世界。 俩都是非常前沿的技术，同时使用会更有趣。 |
| ReactNative学习指南 |
★★★★ |
新玩意层出不穷... 对于能持续学习的童鞋，这是个美好的时代 |
| HTML/CSS 编码规范 |
★★★☆ |
编写灵活、稳定、高质量的HTML和CSS代码的规范 |
| GulpBook |
★★★☆ |
Gulp是基于Node实现Web前端自动化开发的工具 |
| Markdown资料 |
★★★☆ |
简单看些语法入门，快速用起来 |
前端面试
| 名称 |
推荐指数 |
备注/说明 |
| 在LinkedIn做面试官的故事 |
★★★★★ |
非面试题，介绍LinkedIn的面试过程 文章有很多中肯的建议和想法，推荐阅读 |
| 大漠：写给前端面试者 |
★★★★★ |
这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受... |
| 前端面试题 |
★★★★☆ |
Git上非常火的前端面试题，start17k+ |
工具/软件
Web
| 名称 |
推荐指数 |
备注/说明 |
| CanIuse |
★★★★★ |
前端必备；查看浏览器对各种新特性的兼容情况 |
| 百度脑图 |
★★★★★ |
非常方便的思维导图工具 |
| ProcessOn |
★★★★☆ |
和百度脑图的功能类似，脑图工具。 |
| VimAwesome |
★★★★☆ |
Vim插件集合，Vim党必备 |
| Tower |
★★★★☆ |
小而美的多人协同工具。 不光只有Web版，还有iPhone、iPad、Android、微信版。 |
| smallpdf |
★★★★ |
提供各种格式和pdf互相转换 |
| Cmd Markdown |
★★★★ |
好用的Web版Markdown编辑器 |
| StackEdit |
★★★★ |
又是一款Web版Markdown编辑器 |
| 墨刀 |
★★★★ |
一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。 |
| htm2pdf |
★★★★ |
HTML to PDF |
| Speaker Deck |
★★★★ |
在线的演讲稿展示平台 |
APP
以下列表中的APP都是不区分系统平台的
| 名称 |
推荐指数 |
备注/说明 |
| 印象笔记 |
★★★★★ |
免费账号完全够用，跨平台跨终端的记录软件 |
| 多看阅读 |
★★★★ |
kindle确实好，但是懒得随身带着 多看还算不错，书较多且偶尔有特价比较爽 |
Android
| 名称 |
推荐指数 |
备注/说明 |
| 小米桌面 |
★★★★☆ |
多好看、多漂亮谈不上，关键是没有广告 |
iPhone
| 名称 |
推荐指数 |
备注/说明 |
| Monkey |
★★★★ |
Monkey是iPhone上一个GitHub第三方客户端。 展示 GitHub 上的开发者的排名，以及仓库的排名 |
Mac
对于美好事务的追求无论何时都不算晚，前年公司给配了台Mac用做测试开发机，于是开始在Mac下办公。Windows？回不去鸟...
| 名称 |
推荐指数 |
备注/说明 |
| Homebrew |
★★★★★ |
没它程序猿没法好好干活...Homebrew使OS X更完美。 使用gem来安装gems、用brew来搞定那些依赖包 |
| iTerm2 |
★★★★☆ |
Mac终端功能少又不好看，iTerm2可以解救你~ |
| BrowseShot |
★★★★☆ |
我正在使用的网页截图工具，强烈推荐 |
| WebStorm |
★★★★☆ |
功能超强的前端IDE，不多介绍，谁用谁知道 |
| Atom |
★★★★ |
2015年7月之前，在桌面环境下我最喜欢的编辑器是Sublime。 但之后就是Atom，俺也专门为它写了篇使用纪要 |
| 马克鳗 |
★★★★ |
MarkMan，非常强大好用的标注、测量工具。 日常工作免费版就完全可以满足，强烈推荐 |
| Wireshark |
★★★☆ |
说实话，Mac下木有Fiddler挺不习惯，不过在有更强大的替代品 |
| SourceTree |
★★★☆ |
一款好用的的Git客户端工具，重点是支持中文:) |
| focus booster |
★★★ |
因为比较在意时间管理，所以这软件是俺工作时间的必备之物 |
| Mou |
★★ |
小清新的Markdown编辑器 |
Linux
| 名称 |
推荐指数 |
备注/说明 |
| oh-my-zsh |
★★★★★ |
终端党必用的好工具，强烈推荐 |
| tree |
★★★★ |
linux以树状图逐级列出目录的内容 |
| oneapm |
★★★★ |
强大的运维工具，提供多种监控客户端； 有采集、分析、展示等一套功能； PS：我这用了服务器监控(免费哦) |
| httpie |
★★★☆ |
一个CLI中的HTTP客户端 用法简单、易读 |
Chrome浏览器插件
| 名称 |
推荐指数 |
备注/说明 |
| JSONView |
★★★★★ |
麻麻再也不用担心偶调试接口啦 |
| wappalyzer |
★★★★☆ |
分析网站使用的技术 它可以检测网页的web服务器、JS框架等等 |
| 二维码生成器 |
★★★★☆ |
RT |
| User-Agent Switcher |
★★★★ |
模拟各种终端的UA，达到调试目的 |
| GitPlug |
★★★☆ |
在Git项目页中嵌入有关的图表信息 |
| Infinity |
★★☆ |
针对Chrome的插件，新标签页会让你耳目一新 |
Git
| 名称 |
推荐指数 |
备注/说明 |
| Git教程-廖雪峰 |
★★★★☆ |
俺有看过不少Git的文章，确实这个系列是最通俗易懂的 |
| GitAwards |
★★★★ |
Git工具，可以查看Git排名 |
| Git速查 |
★★★★ |
分类清晰的速查表 |
| Git简明指南 |
★★★☆ |
入门Git的简明指南，木有高深内容:) |
| git学习资料整理 |
★★★ |
内容包括很多git的相关资料，star1200+ |
Redis
MongoDB
| 名称 |
推荐指数 |
备注/说明 |
| Mongoose |
★★★★☆ |
让NodeJS更容易操作Mongodb数据库。 附上一篇Mongoose学习参考文档 |
杂七杂八
放些开发中较有用的杂物在这儿
| 名称 |
推荐指数 |
备注/说明 |
| QQ群规 |
★★★★☆ |
突然某天，有个QQ群让我加群 原本我是拒绝的，但当我看完这篇QQ群规后... 劳资真的被感动到了，太牛逼、够专业！ 最后，我默默加群鸟:) |
| .gitignore文件 |
★★★★☆ |
介绍不同语言项目的gitignore模板 |
| Codebabes |
★★★ |
学编程的网站。 重点是每通过一个测试，尼玛对应的妞会脱一件衣服... PS:要哦~ |
| ReadmeSample |
☆ |
项目高大上的第一步就是包装，所以来看看README的书写套路吧 PS：劳资怎么这么无聊... |
前端炫技-_炫酷狂拽叼炸天站点_
| 名称 |
推荐指数 |
备注/说明 |
| windows93 |
★★★★☆ |
模拟Win93桌面，思路、体验和整体效果比较有意思 |
| GeekTyper |
★★★★☆ |
好玩又具有Geek精神的网站，虽然创建的目的是个恶作剧 PS：网站需要 |
| Mapbox |
★★★★ |
非常叼的开源项目，有方便的JSAPI(还有SDK)。 不过免费版只能浅尝，流量有限。 PS：网站需要 |
| SuperScrollorama |
★★★☆ |
好玩好看的动画库，链接是SuperScrollorama的展示页 |
| parallax.js |
★★★ |
一个视差引擎的官网，在电脑和手机上都有很好的体验 |
| 墨刀 |
★★ |
一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。 |
以下是拔赤总结的前端技能图：![\"拔赤总结的前端技能图\"](\"https://img.it610.com/image/info8/96fb6b02cee84ba085dc3ccf564a9f3f.jpg\")
转自:https://github.com/nieweidong/fetool