> 本文的最新内容将在[GitHub](https://github.com/qianguyihao/Web)上实时更新。欢迎在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 pro](https://pro.ant.design/) 作为示例,可以看看。
- 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:
## 设计工具
- **墨刀**:原型设计工具。网址:
- **蓝湖**:一款产品文档和设计图的在线协作平台。网址:
- **PxCook(像素大厨)**:高效易用的自动标注工具。软件下载链接:
## 图标
- 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:
- 博客:
- 知乎:
### 大漠
**链接**:
- GitHub:
大漠的GitHub上没啥东西。
- 博客:
- 知乎:
**介绍**:
常用昵称“大漠”,W3CPlus创始人,目前就职于淘宝。对HTML5、CSS3和CSS处理器等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3和动画的研究,是国内最早研究和使用CSS3和CSS处理器技术的一批人。现在主要在探讨学习JavaScript、React和Vue相关技术知识。CSS、CSS处理器和Web动画中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。
### EGOIST
- 博客:
- GitHub:
### 冴羽
**链接**:
- GitHub:
- 博客:
- 知乎:
### 李靖/小胡子哥(淘宝网)
- GitHub:
- 博客:
- 知乎:
### cangdu
- GitHub:
### Jackson Tian
- GitHub:
- 博客:
### 题叶(饿了么、前 Teambition)
- GitHub:
- 博客:
### 杨健(今日头条)
- GitHub:
- 知乎:
### 流形
> (阿里巴巴数据技术与产品部前端团队负责人)
- 知乎:
## 总结
如果你有发现新的内容,欢迎在 GitHub 上提交 [issues](https://github.com/qianguyihao/web/issues)。