Web前端最新导航
本文列出了很多与前端有关的常见网站、博客、工具等,整体来看比较权威。有些东西已经过时了,我就不列出来了。学是一方面,也是最主要的方面;但还有一个作用,比如,“这个前端框架你都不知道啊”、“这个前端大牛你都没听说过啊” ,此时,这份清单就能起到作用了。如果你能把清单里列出的内容都了解下,逼格也会高很多。
技术社区
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,绝对火得一塌糊涂。现在的 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 作为示例,可以看看。
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.apache.org/zh/index.html
使用 JavaScript 实现的开源可视化库。ECharts 正在 Apache 开源基金会孵化中。
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/
PostCSS: https://www.postcss.com.cn/
vite: https://vitejs.cn/
下一代前端开发与构建工具
调试抓包
whistle: https://wproxy.org/whistle/代理抓包工具,很好很强大。
Fiddler: https://www.telerik.com/fiddler
Mock数据
Easy Mock:https://www.easy-mock.comMock.js: http://mockjs.com/
生成随机数据,拦截 Ajax 请求
编辑器 && 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
figma: https://www.figma.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/
dribbble:https://dribbble.com/
iconmonstr:https://iconmonstr.com/
deviantart:https://www.deviantart.com/
Fontello:https://fontello.com/
1001 Free Downloads:https://www.1001freedownloads.com/
CSS Author:https://cssauthor.com/
GraphicBurger:https://graphicburger.com/
Flaticon:https://www.flaticon.com/
Icons8:https://icons8.com/
Freepik:https://www.freepik.com/
Iconfinder:https://www.iconfinder.com/
Font Awesome:https://fontawesome.com/
Good Stuff No Nonsense:https://goodstuffnononsense.com/
The Noun Project:https://thenounproject.com/
Iconshock:https://www.iconshock.com/
Pixeden:https://www.pixeden.com/
IconsFlow:https://iconsflow.com/
Streamline:https://streamlinehq.com/
设计素材
设优 SHEUI: http://www.sheui.com/Contact/工具综合类
CanIUse: https://caniuse.com/浏览器兼容性查询。前端同学必须要知道。
通过这个网站,我们可以查到任何一家公司的基本信息(成立时间、法定代表人等)。如果你在这个网站上没有找到某公司的信息,放心吧,这个公司一定是个骗子。
在线制作流程图。推荐。
极简大纲笔记、一键生成思维导图。非常好用。
草料二维码: https://cli.im/
短链生成:http://www.sina.lt
GitHub短网址: https://git.io/
图片压缩: https://www.yasuotu.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/weeklyJs中文网周刊: 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
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
GitHub: https://github.com/phodal
博客: https://www.phodal.com/
知乎: https://www.zhihu.com/people/phodal
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:核心技术与案例实战》。
博客: 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/
GitHub: https://github.com/bailicangdu
GitHub: https://github.com/JacksonTian
博客: http://jacksontian.org/
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
GitHub: https://github.com/MuYunyun
发表评论 (审核通过后显示评论):