theluyuan/Web
1
0
Fork 1
mirror of https://github.com/qianguyihao/Web.git synced 2024-11-01 21:44:45 +08:00
Code Issues Projects Releases Wiki Activity
1fec01c5a5
Web/18-推荐链接/01-2020年Web前端最新导航.md
qianguyihao 1fec01c5a5 update: 增加标题，适配 vuepress 主题
2021-07-29 11:08:52 +08:00

532 lines
13 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

> 本文的最新内容将在[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应用程序的开发。
也就是说，我们可以用 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/>
## 设计素材
- 设优 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：<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 作者推荐
### 晴小篆
- GitHub：<https://github.com/yanlele>
### MuYunyun
- GitHub：<https://github.com/MuYunyun>
## 总结
如果你有发现新的内容，欢迎在 GitHub 上提交 [issues](https://github.com/qianguyihao/web/issues)。
Reference in New Issue View Git Blame Copy Permalink