> 本文的最新内容将在[GitHub](https://github.com/qianguyihao/Web)上实时更新。欢迎在GitHub上关注我，一起入门和进阶前端。 ## 前言 本文列出了很多与前端有关的常见网站、博客、工具等，整体来看比较权威。有些东西已经过时了，我就不列出来了。 学是一方面，也是最主要的方面；但还有一个作用，比如，“这个前端框架你都不知道啊”、“这个前端大牛你都没听说过啊” ，此时，这份清单就能起到作用了。如果你能把清单里列出的内容都了解下，逼格也会高很多。 ## 技术社区 - GitHub：<https://github.com/> 高质量的内容创作和分享平台。 请记住，作为一个码农，GitHub 代表了你的名片。 - stackoverflow：<https://stackoverflow.com/> 遇到技术问题请先Google，很多答案都能在 stackoverflow 上找到。 ## 技术博客 - 掘金：<https://juejin.im/> 掘金已经被前端同学攻陷了。目前来看，国内的很多优质前端文章，都在掘金上。 如果你刚开始写前端博客，可以考虑在掘金上发文章。当然，文章最好在**掘金、博客园、知乎**上做同步。 - 博客园：<https://www.cnblogs.com/> 一个很纯粹的技术博客平台。 - 知乎：<https://www.zhihu.com/> 很多做技术的同学也开始玩知乎了，阿里的不少前端大牛在知乎上就非常活跃。 - CSDN：<https://www.csdn.net/> 广告太多，但奈何你这么老牌。 - segmentfault：<https://segmentfault.com/> 比较低调的技术博客平台。 ## GitHub 排名统计 - GitHub 中国区排名：<https://githuber.cn/search?language=JavaScript> 这个网站虽然比较小众，但排名还是相对比较准的。 - GitHub 中国区排名：<http://githubrank.com/> 这个排名很久没更新了，早就不准了；而且还经常打不开。 - GitHub 全球排名：<https://gitstar-ranking.com/> 这个排名，就比较权威了。 - GitHub trending（官网推荐）：<https://github.com/trending> 你的项目要是能上 GitHub trending，绝对火得一塌糊涂。 ## 资讯 - 虎嗅网：<https://www.huxiu.com/> - 36氪：<https://36kr.com/> - 利器：<https://liqi.io/> 采访优秀的创造者，邀请他们来分享工作时所使用的工具。 - 湾区日报：<https://wanqu.co/> 每天推送 5 篇优质英文文章。 - Solidot：<https://www.solidot.org/> - 品玩：<https://www.pingwest.com/> - 极客公园：<http://www.geekpark.net/> ## 框架 - Vue.js：<https://cn.vuejs.org/> - React：<https://reactjs.org/> - Angular：<https://angular.cn/> - AngularJS：<https://angularjs.org/> - Koa：<https://koa.bootcss.com/> 基于 Node.js 平台的下一代 Web 开发框架。 - Express：<http://www.expressjs.com.cn/> 基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 - Egg：<https://eggjs.org/zh-cn/> Egg 继承于 Koa。 Koa 是一个非常优秀的框架，然而对于企业级应用来说，它还比较基础。而 Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。 - Electron：<https://www.electronjs.cn/> Electron（原名为Atom Shell）是GitHub开发的一个开源js框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。 也就是说，我们可以用 js 语言开发客户端软件了。其实呢，VS Code 这个客户端软件就是用 js 语言写的。 - Redux：<https://www.redux.org.cn/> Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 - ReactNative：<https://reactnative.cn/> 使用JavaScript编写原生移动应用。 - mpvue：<http://mpvue.com/> 基于 Vue.js 的小程序开发框架。 ## UI框架 - Bootstrap：<http://www.bootcss.com/> - ElementUI：<http://element-cn.eleme.io/> 基于 Vue.js 的组件库。 - iView：<https://www.iviewui.com/> 一套基于 Vue.js 的高质量 UI 组件库。 - Ant Design：<https://ant.design> 基于 React 的 UI 组件库，主要用于研发企业级中后台产品。官网推出了 [Ant Design pro](https://pro.ant.design/) 作为示例，可以看看。 - Ant Design Mobile：<https://mobile.ant.design/> 一个基于 Preact / React / React Native 的 移动端 UI 组件库。 - Ant Design of Vue：<https://vue.ant.design/docs/vue/introduce-cn/> Ant Design 的 Vue 实现，开发和服务于企业级后台产品。 ## 类库 - jQuery：<http://jquery.com/> - Zepto.js：<https://zeptojs.com/> 可以理解成是移动端的 jQuery。 - ECharts：<https://echarts.baidu.com/> 使用 JavaScript 实现的开源可视化库。 ## CSS - Sass：<https://sass-lang.com/> Sass 是成熟、稳定、强大的 CSS 扩展语言。入门文档可以看：<http://sass.bootcss.com/> - Less：<http://lesscss.org/> 给 CSS 加点料。入门文档可以看：<https://less.bootcss.com/> - Stylus：<http://stylus-lang.com/> ## 构建 - NPM：<https://www.npmjs.com/> - Yarn：<https://yarnpkg.com/zh-Hans/> - Webpack：<https://webpack.js.org/> - Gulp：<https://www.gulpjs.com.cn/> - Babel：<https://babeljs.io/> - ESLint：<https://cn.eslint.org/> 可组装的JavaScript和JSX检查工具。 - PostCSS：<https://www.postcss.com.cn/> 用 JavaScript 工具和插件转换 CSS 代码的工具 ## 调试抓包 - whistle：<https://wproxy.org/whistle/> 代理抓包工具，很好很强大。 - Fiddler：<https://www.telerik.com/fiddler> 代理抓包工具。 ## Mock数据 - Easy Mock：<https://www.easy-mock.com> ## 编辑器 && IDE - VS Code：<https://code.visualstudio.com/> - Sublime Text：<https://www.sublimetext.com/> - WebStorm：<https://www.jetbrains.com/webstorm/> - Atom：<https://atom.io/> ## 编码规范 - Bootstrap编码规范：<https://codeguide.bootcss.com/> - es6编程风格：<http://es6.ruanyifeng.com/#docs/style> - Airbnb Javascript Style Guide：<https://github.com/airbnb/javascript> ## 静态站点搭建工具 - Hexo：<https://hexo.io/zh-cn/> - VuePress：<https://www.vuepress.cn/> - GitBook：<https://www.gitbook.com/> ## 设计工具 - **墨刀**：原型设计工具。网址：<https://modao.cc/> - **蓝湖**：一款产品文档和设计图的在线协作平台。网址：<https://lanhuapp.com> - **PxCook（像素大厨）**：高效易用的自动标注工具。软件下载链接：<https://www.fancynode.com.cn/pxcook> ## 图标 - Font Awesome：<http://www.fontawesome.com.cn/> - Iconfont：<https://www.iconfont.cn/> - icomoon：<https://icomoon.io/> - EasyIcon：<https://www.easyicon.net/> - icons8：<https://icons8.cn/> - IconStore：<https://iconstore.co/> - iconninja：<http://www.iconninja.com/> ## 工具 - CanIUse：<https://caniuse.com/> 浏览器兼容性查询。前端同学必须要知道。 - 国家企业信用信息公示系统：<http://www.gsxt.gov.cn> 通过这个网站，我们可以查到任何一家公司的基本信息（成立时间、法定代表人等）。如果你在这个网站上没有找到某公司的信息，放心吧，这个公司一定是个骗子。 - ProcessOn：<https://www.processon.com/> 在线制作流程图。推荐。 - **幕布**：<https://mubu.com> 极简大纲笔记、一键生成思维导图。非常好用。 - JSON格式化：<http://www.bejson.com/> - 草料二维码：<https://cli.im/> - 短链生成：<http://www.sina.lt> - GitHub短网址：<https://git.io/> - **图片压缩**：<https://www.yasuotu.com/> - 在线PS：<https://www.photopea.com/> - 图片在线裁剪：<https://www.asqql.com/gifc/> - 多数据源IP地址查询：<https://haoip.cn/> - Gif添加字幕：<http://www.yingjingtu.com/> - Photoshop的投影参数转换为 CSS代码：<https://psd2css.mezw.com/> 将Photoshop设计文件图层中的混合选项参数快速转换为CSS3代码，以节省前端开发人员的时间和精力。 - Get Emoji：<https://emoji.svend.cc/> - 图片转Ascii：<http://picascii.com/> - 视频转GIF：<https://github.com/vvo/gifify> - OCR文字识别：<https://app.xunjiepdf.com/ocr> ## 团队 - 腾讯AlloyTeam：<http://www.alloyteam.com/> - 腾讯社交用户体验ISUX：<https://isux.tencent.com/> - 淘宝FED | 淘宝前端团队：<http://taobaofed.org/> - 阿里巴巴国际UED：<http://www.aliued.com/> - 京东 | 凹凸实验室：<https://aotu.io/> - 饿了么前端:<https://zhuanlan.zhihu.com/ElemeFE> - 百度前端研发部FEX：<http://fex.baidu.com/> - 360 | 奇舞团：<https://75team.com/> - 知道创宇FED：<https://knownsec-fed.com/> ## 前端大牛 ### 阮一峰（蚂蚁金服） - GitHub：<https://github.com/ruanyf> - 博客：<http://www.ruanyifeng.com/blog/> ### 尤雨溪 - GitHub：<https://github.com/yyx990803> - 博客：<http://blog.evanyou.me/> - 知乎：<https://www.zhihu.com/people/evanyou> ### 玉伯 - GitHub：<https://github.com/lifesinger> - 博客：<https://github.com/lifesinger/blog> - 知乎：<https://www.zhihu.com/people/lifesinger> ### 司徒正美（去哪儿） - GitHub：<https://github.com/RubyLouvre> - 博客：<http://www.cnblogs.com/rubylouvre/> - 知乎：<https://www.zhihu.com/people/si-tu-zheng-mei> ### 张鑫旭（腾讯） - GitHub：<https://github.com/zhangxinxu> - 博客：<https://www.zhangxinxu.com/> - 知乎：<https://www.zhihu.com/people/iamzhangxinxu> ### 迷渡 - GitHub：<https://github.com/justjavac> - 知乎：<https://www.zhihu.com/people/justjavac.com> ### 羡辙 | Ovilia - GitHub：<https://github.com/Ovilia> - 知乎：<https://www.zhihu.com/people/ovilia> ### 云谦（陈成） - GitHub：<https://github.com/sorrycc> - 博客：<https://sorrycc.com/> 云谦装了啥：<https://github.com/sorrycc/awesome-tools> ### 偏右 - GitHub：<https://github.com/afc163> - 知乎：<https://www.zhihu.com/people/afc163> ### 黄峰达/Phodal Huang（ThoughtWorks） - GitHub：<https://github.com/phodal> - 博客：<https://www.phodal.com/> - 知乎：<https://www.zhihu.com/people/phodal> ### 贺师俊/Hax（百姓网） - GitHub：<https://github.com/hax> - 博客：<http://johnhax.net/> - 知乎：<https://www.zhihu.com/people/he-shi-jun> ### 大漠 **链接**： - GitHub：<https://github.com/airen> 大漠的GitHub上没啥东西。 - 博客：<https://www.w3cplus.com> - 知乎：<https://www.zhihu.com/people/w3cplus> **介绍**： 常用昵称“大漠”，W3CPlus创始人，目前就职于淘宝。对HTML5、CSS3和CSS处理器等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3和动画的研究，是国内最早研究和使用CSS3和CSS处理器技术的一批人。现在主要在探讨学习JavaScript、React和Vue相关技术知识。CSS、CSS处理器和Web动画中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。 ### EGOIST - 博客：<https://egoist.sh/> - GitHub：<https://github.com/egoist> ### 冴羽 **链接**： - GitHub：<https://github.com/mqyqingfeng> - 博客：<https://github.com/mqyqingfeng/Blog> - 知乎：<https://www.zhihu.com/people/qing-feng-yi-yang> ### 李靖/小胡子哥（淘宝网） - GitHub：<https://github.com/barretlee> - 博客：<https://www.barretlee.com/> - 知乎：<https://www.zhihu.com/people/barretlee/> ### cangdu - GitHub：<https://github.com/bailicangdu> ### Jackson Tian - GitHub：<https://github.com/JacksonTian> - 博客：<http://jacksontian.org/> ### 题叶（饿了么、前 Teambition） - GitHub：<https://github.com/jiyinyiyong> - 博客：<http://tiye.me/> ### 杨健（今日头条） - GitHub：<https://github.com/hardfist> - 知乎：<https://www.zhihu.com/people/hardfist> ### 流形 > （阿里巴巴数据技术与产品部前端团队负责人） - 知乎：<https://www.zhihu.com/people/arcthur/> ## 总结 如果你有发现新的内容，欢迎在 GitHub 上提交 [issues](https://github.com/qianguyihao/web/issues)。