本文最初发表于，并在上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

前言

本文列出了很多与前端有关的常见网站、博客、工具等，整体来看比较权威。有些东西已经过时了，我就不列出来了。

学是一方面，也是最主要的方面；但还有一个作用，比如，“这个前端框架你都不知道啊”、“这个前端大牛你都没听说过啊” ，此时，这份清单就能起到作用了。如果你能把清单里列出的内容都了解下，逼格也会高很多。

技术社区

• GitHub：

高质量的内容创作和分享平台。

请记住，作为一个码农，GitHub 代表了你的名片。

• stackoverflow：

遇到技术问题请先Google，很多答案都能在 stackoverflow 上找到。

技术博客

• 掘金：

掘金已经被前端同学攻陷了。目前来看，国内的很多优质前端文章，都在掘金上。

如果你刚开始写前端博客，可以考虑在掘金上发文章。当然，文章最好在掘金、博客园、知乎上做同步。

• 博客园：

一个很纯粹的技术博客平台。

• 知乎：

很多做技术的同学也开始玩知乎了，阿里的不少前端大牛在知乎上就非常活跃。

• CSDN：

广告太多，但奈何你这么老牌。

• segmentfault：

比较低调的技术博客平台。

GitHub 排名统计

• GitHub 中国区排名：

这个网站虽然比较小众，但排名还是相对比较准的。

• GitHub 中国区排名：

这个排名很久没更新了，早就不准了。

• GitHub 全球排名：

• GitHub trending（官网推荐—）：

你的项目要是能上 GitHub trending，绝对火得一塌糊涂。

资讯

• 虎嗅网：

• 36氪：

• 利器：

采访优秀的创造者，邀请他们来分享工作时所使用的工具。

• 湾区日报：

每天推送 5 篇优质英文文章。

• Solidot：

• 品玩：

• 极客公园：

框架

• Vue.js：

• React：

• Angular：

• AngularJS：

• Koa：

基于 Node.js 平台的下一代 Web 开发框架。

• Express：

基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

• Egg：

Egg 继承于 Koa。

Koa 是一个非常优秀的框架，然而对于企业级应用来说，它还比较基础。而 Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。

• Electron：

Electron（原名为Atom Shell）是GitHub开发的一个开源js框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。

也就是说，我们可以用 js 语言开发客户端软件了。其实呢，VS Code 这个客户端软件就是用 js 语言写的。

• Redux：

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

• ReactNative：

使用JavaScript编写原生移动应用。

• mpvue：

基于 Vue.js 的小程序开发框架。

UI框架

• Bootstrap：

• ElementUI：

基于 Vue.js 的组件库。

• iView：

一套基于 Vue.js 的高质量 UI 组件库。

• Ant Design：

基于 React 的 UI 组件库，主要用于研发企业级中后台产品。官网推出了 作为示例，可以看看。

• Ant Design Mobile：

一个基于 Preact / React / React Native 的 移动端 UI 组件库。

• Ant Design of Vue：

Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

类库

• jQuery：

• Zepto.js：

可以理解成是移动端的 jQuery。

• ECharts：

使用 JavaScript 实现的开源可视化库。

CSS

• Sass：

Sass 是成熟、稳定、强大的 CSS 扩展语言。入门文档可以看：

• Less：

给 CSS 加点料。入门文档可以看：

• Stylus：

构建

• NPM：

• Yarn：

• Webpack：

• Gulp：

• Babel：

• ESLint：

可组装的JavaScript和JSX检查工具。

• PostCSS：

用 JavaScript 工具和插件转换 CSS 代码的工具

调试抓包

• whistle：

代理抓包工具，很好很强大。

• Fiddler：

代理抓包工具。

Mock数据

• Easy Mock：

编辑器 && IDE

• VS Code：

• Sublime Text：

• WebStorm：

• Atom：

编码规范

• Bootstrap编码规范：

• es6编程风格：

• Airbnb Javascript Style Guide：

静态站点搭建工具

• Hexo：

• VuePress：

• GitBook：

图标

• Font Awesome：

• Iconfont：

• icomoon：

• EasyIcon：

• icons8：

• IconStore：

• iconninja：

原型设计工具

• 墨刀：

工具

• CanIUse：

浏览器兼容性查询。前端同学必须要知道。

• 国家企业信用信息公示系统：

通过这个网站，我们可以查到任何一家公司的基本信息（成立时间、法定代表人等）。如果你在这个网站上没有找到某公司的信息，放心吧，这个公司一定是个骗子。

• ProcessOn：

在线制作流程图。推荐。

• 幕布：

极简大纲笔记、一键生成思维导图。非常好用。

• JSON格式化：

• 草料二维码：

• 短链生成：

• GitHub短网址：

• 图片压缩：

• 在线PS：

• 图片在线裁剪：

• 多数据源IP地址查询：

• Gif添加字幕：

• Photoshop的投影参数转换为 CSS代码：

将Photoshop设计文件图层中的混合选项参数快速转换为CSS3代码，以节省前端开发人员的时间和精力。

• Get Emoji：

• 图片转Ascii：

• 视频转GIF：

• OCR文字识别：

团队

• 腾讯AlloyTeam：

• 腾讯社交用户体验ISUX：

• 淘宝FED | 淘宝前端团队：

• 阿里巴巴国际UED：

• 京东 | 凹凸实验室：

• 饿了么前端:

• 百度前端研发部FEX：

• 360 | 奇舞团：

• 知道创宇FED：

前端大牛

阮一峰（蚂蚁金服）

• GitHub：

• 博客：

尤雨溪

• GitHub：

• 博客：

• 知乎：

玉伯

• GitHub：

• 博客：

• 知乎：

司徒正美（去哪儿）

• GitHub：

• 博客：

• 知乎：

张鑫旭（腾讯）

• GitHub：

• 博客：

• 知乎：

迷渡

• GitHub：

• 知乎：

羡辙 | Ovilia

• GitHub：

• 知乎：

云谦（陈成）

• GitHub：

• 博客：

云谦装了啥：

偏右

• GitHub：

• 知乎：

黄峰达/Phodal Huang（ThoughtWorks）

• GitHub：

• 博客：

• 知乎：

贺师俊/Hax（百姓网）

• GitHub：

• 博客：

• 知乎：

EGOIST

• 博客：

• GitHub：

冴羽

• GitHub：

• 博客：

• 知乎：

小爝

• GitHub：

• 知乎：

李靖/小胡子哥（淘宝网）

• GitHub：

• 博客：

• 知乎：

cangdu

• GitHub：

Jackson Tian

• GitHub：

• 博客：

题叶（饿了么、前 Teambition）

• GitHub：

• 博客：

杨健（今日头条）

• GitHub：

• 知乎：

流形

（阿里巴巴数据技术与产品部前端团队负责人）

• 知乎：

总结

如果你有发现新的内容，欢迎在 GitHub 上提交 。