2021-07-29 11:08:52 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> 本文的最新内容将在[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://github.com/kon9chunkit/GitHub-Chinese-Top-Charts>
|
|
|
|
|
|
|
|
|
|
|
|
中国区的高分项目，都在这里了。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- GitHub 全球排名：<https://gitstar-ranking.com/>
|
|
|
|
|
|
|
|
|
|
|
|
这个排名很权威。如果你的项目超过 10k star，就能上榜，跻身全球 GitHub 项目前1000名。
|
|
|
|
|
|
|
|
|
|
|
|
- GitHub trending（官网推荐）：<https://github.com/trending>
|
|
|
|
|
|
|
|
|
|
|
|
你的项目要是能上 GitHub trending，绝对火得一塌糊涂。
|
|
|
|
|
|
|
|
|
|
|
|
2019-12备注：现在的 GitHub trending 已经不是严格按照新增的 star 数来排行了。所以说，这个排名，也不是那么权威了。
|
|
|
|
|
|
|
|
|
|
|
|
- GitHub 中国区排名：<https://githuber.cn/search?language=JavaScript>
|
|
|
|
|
|
|
|
|
|
|
|
这个网站虽然比较小众，但排名还是相对比较准的。
|
|
|
|
|
|
|
|
|
|
|
|
- GitHub 中国区排名：<http://githubrank.com/>
|
|
|
|
|
|
|
|
|
|
|
|
这个排名很久没更新了，早就不准了；而且还经常打不开。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 资讯
|
|
|
|
|
|
|
|
|
|
|
|
- 36氪：<https://36kr.com/>
|
|
|
|
|
|
|
|
|
|
|
|
- 虎嗅网：<https://www.huxiu.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应用程序的开发。
|
|
|
|
|
|
|
2021-10-12 20:37:39 +08:00
|
|
|
|
也就是说，我们可以用 js 语言开发客户端软件了。比如说，VS Code 这个客户端软件就是用 js 语言写的。
|
2021-07-29 11:08:52 +08:00
|
|
|
|
|
|
|
|
|
|
- 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/>
|
|
|
|
|
|
|
|
|
|
|
|
- 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 实现，开发和服务于企业级后台产品。
|
|
|
|
|
|
|
2021-10-09 21:30:05 +08:00
|
|
|
|
- ElementUI：<http://element-cn.eleme.io/>
|
|
|
|
|
|
|
|
|
|
|
|
基于 Vue.js 的组件库。
|
|
|
|
|
|
|
|
|
|
|
|
- iView：<https://www.iviewui.com/>
|
|
|
|
|
|
|
|
|
|
|
|
一套基于 Vue.js 的高质量 UI 组件库。
|
|
|
|
|
|
|
2021-07-29 11:08:52 +08:00
|
|
|
|
## 类库
|
|
|
|
|
|
|
|
|
|
|
|
- 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/>
|
|
|
|
|
|
|
|
|
|
|
|
## 设计素材
|
|
|
|
|
|
|
|
|
|
|
|
- 设优 SHEUI：<http://www.sheui.com/Contact/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 工具
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 综合类
|
|
|
|
|
|
|
|
|
|
|
|
- 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://tinypng.com/>
|
|
|
|
|
|
|
|
|
|
|
|
熊猫压缩。压缩后图片清晰度不会有太大变化。
|
|
|
|
|
|
|
|
|
|
|
|
- **图片压缩**：<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>
|
|
|
|
|
|
|
|
|
|
|
|
### 图片类
|
|
|
|
|
|
|
|
|
|
|
|
- 图片转base64：<http://imgbase64.duoshitong.com/>
|
|
|
|
|
|
|
|
|
|
|
|
## 前端周刊
|
|
|
|
|
|
|
|
|
|
|
|
- WecTeam 前端周刊：<https://github.com/wecteam/weekly>
|
|
|
|
|
|
|
|
|
|
|
|
- Js中文网周刊：<https://www.javascriptc.com/category/javascript-weekly>
|
|
|
|
|
|
|
|
|
|
|
|
- 政采云 前端周刊：<https://weekly.zoo.team/>
|
|
|
|
|
|
|
|
|
|
|
|
## 团队
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 腾讯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 上提交 [issues](https://github.com/qianguyihao/web/issues)。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
