热门文章

最新文章

2020年Web前端最新导航(常见前端框架、前端大牛)

发布时间:2021-06-11 01:19:31

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章。欢迎在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 作为示例,可以看看。

  • 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/

图标

  • 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/

原型设计工具

  • 墨刀:https://modao.cc/

工具

  • 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.dh6.ink/

  • 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

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/xiaojue

  • 知乎:https://www.zhihu.com/people/xiao-jue-83/

李靖/小胡子哥(淘宝网)

  • 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。


返回顶部