GitHub精选资源
# 综合资源
# javascript (opens new window)(Star:108k)
airbnb 出品写 js 最佳的姿势,已成众多公司 js 代码风格的标准
# awesome-wechat-weapp (opens new window)(Star:34.9k)
微信小程序开发资源汇总 💯
# gold-miner (opens new window)(Star:28.8k)
🥇 掘金翻译计划,可能是世界最大最好的英译中技术社区,最懂读者和译者的翻译平台
# Blog (opens new window)(Star:22.7k)
冴羽写博客的地方,预计写四个系列:JavaScript 深入系列、JavaScript 专题系列、ES6 系列、React 系列
# mars (opens new window)(Star:15.4k)
腾讯移动 web 前端知识库
# Besr-App (opens new window)(Star:14.9k)
收集&推荐优秀的 Apps/硬件/技巧/周边等
# Awsome-Front-End-learning-resource (opens new window)(Star:7.4k)
GitHub 最全的前端资源汇总仓库(包括前端学习、开发资源、求职面试等)
- github 仓库地址:https://github.com/helloqingfeng/Awsome-Front-End-learning-resource (opens new window)
- 线上地址:https://helloqingfeng.github.io/front-end-index/index.html (opens new window)
# front-end-collect (opens new window)(Star:5.3k)
作者分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者
# Front-end-tutorial (opens new window)(Star:4.4k)
最全的资源教程-前端涉及的所有知识体系
# mobile-web-favorites (opens new window)(Star:1.7k)
移动端 H5 开发经验、资源、以及踩坑汇总
# 面试相关
# fe-interview (opens new window) (Star:17.5k)
前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!
# CS-Interview-Knowledge-Map (opens new window)(Star:17k)
一份前端面试资源,作者很用心,还配有专门的网页
- github 仓库地址:https://github.com/InterviewMap/CS-Interview-Knowledge-Map (opens new window)
- 线上地址:https://yuchengkai.cn/home/ (opens new window)
# 样式/UI/css
# Semantic-UI (opens new window)(Star:49.2k)
让你使用任何 html 标签来表现 UI 控件,这是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架
- github 仓库地址:https://github.com/Semantic-Org/Semantic-UI (opens new window)
- 线上文档地址:https://semantic-ui.com/ (opens new window)
# normalize.css (opens new window)(Star:43.5k)
一个可定制的 css 文件,使浏览器呈现的所有元素,更一致和符合现代标准。支持 IE8+
# materialize (opens new window)(Star:38.5k)
materialize 是 material design 一套轻量级的纯 CSS 框架。material design 是 Goole 提出的一套 UI 设计方案,并应 Goole 用于所有产品中
- github 仓库地址:https://github.com/Dogfalo/materialize (opens new window)
- 线上文档地址:https://materializecss.com/ (opens new window)
# weui (opens new window)(Star:25.6k)
为微信 web 服务量身设计的一套 ui 框架
- github 仓库地址:https://github.com/Tencent/weui/blob/master/README_cn.md (opens new window)
- 演示地址:https://weui.io/ (opens new window)
# pure (opens new window)(Star:21.6k)
一组很小的,响应式的 css 组件,你可以在网页的项目上到处使用
- github 仓库地址:https://github.com/pure-css/pure (opens new window)
- 线上文档地址:https://purecss.io/ (opens new window)
# uikit (opens new window)(Star:16.8k)
一个轻量级的、模块化前端框架,它被用于快速开发强大的 web 界面。也是一款优秀的响应式 html5 框架
- github 仓库地址:https://github.com/uikit/uikit (opens new window)
- 线上文档地址:https://getuikit.com/ (opens new window)
# iCSS (opens new window)(Star:9.8k)
一系列 css 有趣的话题,有开发中常用 css 代码;CSS 奇技淫巧,在这里,都有
- github 仓库地址:https://github.com/chokcoco/iCSS (opens new window)
- 作者博客地址:https://www.cnblogs.com/coco1s/ (opens new window)
# css-doodle (opens new window)(Star:3.5k)
一个用 css 绘制图形的 web 组件
- github 仓库地址:https://github.com/css-doodle/css-doodle (opens new window)
- 线上地址:https://css-doodle.com/ (opens new window)
# 构建工具/预编译
# TypeScript (opens new window)(Star:70.5k)
有类型的 js 预编译语言,非常强大的预编译与代码报错提示,赋予了 JS 构建大型项目的可能
- github 仓库地址:https://github.com/microsoft/TypeScript (opens new window)
- 线上文档地址:https://www.typescriptlang.org/zh/ (opens new window)
# webpack (opens new window)(Star:58.1k)
一个模块打包工具,你可以使用 webpack 管理你的模块依赖,并编绎输出模块们所需的静态文件
- github 仓库地址:https://github.com/webpack/webpack (opens new window)
- 线上文档地址:
# babel (opens new window)(Star:38.9k)
是一款为了写下一代 js 的编译器,无需等待浏览器支持就可以使用各种 ES6,ES7 新的语法
- github 仓库地址:https://github.com/babel/babel (opens new window)
- 线上文档地址:https://babel.dev/ (opens new window)
# parcel (opens new window)(Star:38k)
一个零配置的新一代前端构建工具,识别各种常用类型文件,最优加载模块,代码拆包等,非常值得尝试的一款打包工具
- github 仓库地址:https://github.com/parcel-bundler/parcel (opens new window)
- 线上文档地址:https://parceljs.org/ (opens new window)
# gulp (opens new window)(Star:32.2k)
基于 node.js 流构建系统,只有原生几个 api,和庞大的插件生态,使用非常简单
- github 仓库地址:https://github.com/gulpjs/gulp (opens new window)
- 线上文档地址:https://gulpjs.com/ (opens new window)
# postcss (opens new window)(Star:24.5k)
用 js 插件来对 css 样式文件,进行转换、预编译等操作,并且实现了模块化,支持非常多插架
- github 仓库地址:https://github.com/postcss/postcss (opens new window)
- 线上文档地址:https://postcss.org/ (opens new window)
# less.js (opens new window)(Star:16.6k)
轻量级的,动态 CSS 预编语言,具有 CSS 所有特性,并提供了动态编程方式编写 CSS 代码。也是各大 UI 框架所选用的样式语言,比如 bootstrap,ant design 等
- github 仓库地址:https://github.com/less/less.js (opens new window)
- 线上文档地址:https://lesscss.org/ (opens new window)
# stylus (opens new window)(Star:10.7k)
富有表现力的,健壮的 css 预编译语言, 除了代码简洁,可读性强外,函数功能非常强大,可与 js 混合使用,实现动态 css 编程
- github 仓库地址:https://github.com/stylus/stylus (opens new window)
- 线上文档地址:https://stylus-lang.com/ (opens new window)
# node-sass (opens new window)(Star:7.7k)
动态 CSS 预编语言, 并有拥有强大 sass compass 的生态圈,可以直接引入并使用,sass 是由 ruby 编写的,node-sass 是 node 重构版本,方便 npm 直接使用 富有表现力的,健壮的 css 预编译语言, 除了代码简洁,可读性强外,函数功能非常强大,可与 js 混合使用,实现动态 css 编程
- github 仓库地址:https://github.com/sass/node-sass (opens new window)
- npm 地址:https://www.npmjs.com/package/node-sass (opens new window)
# canvas/数据可视化
# d3 (opens new window)(Star:96.7k)
一个基于数据操作文档的 js 数据可视化框架,最流行的数据可视化库之一
- github 仓库地址:https://github.com/d3/d3 (opens new window)
- 线上文档地址:https://d3js.org/ (opens new window)
# Chart.js (opens new window)(Star:53.4k)
使用 canvas 标签的简易 html5 图表
- github 仓库地址:https://github.com/chartjs/Chart.js (opens new window)
- 线上文档地址:https://www.chartjs.org/ (opens new window)
# echarts (opens new window)(Star:46.2k)
基于 canvas 的纯 js 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表
- github 仓库地址:https://github.com/apache/echarts (opens new window)
- 线上文档地址:https://echarts.apache.org/zh/index.html (opens new window)
# G2 (opens new window)(Star:10.6k)
是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,可定制的颗粒度极细,相比项目 echart 大而全且易用的图表库,这个库会让你有不一样的体验,且官方提供了 g2-react 的 react 封装包
- github 仓库地址:https://github.com/antvis/G2 (opens new window)
- 线上文档地址:https://g2.antv.vision/zh (opens new window)
# highcharts (opens new window)(Star:10k)
基于 svg 的 javascript 图表框架
- github 仓库地址:https://github.com/highcharts/highcharts (opens new window)
- 线上文档地址:https://www.highcharts.com/ (opens new window)
# c3 (opens new window)(Star:9.1k)
一个基于 d3.js 的可重用 javascript 图表库,几乎零学习曲线
- github 仓库地址:https://github.com/c3js/c3 (opens new window)
- 线上文档地址:https://c3js.org/ (opens new window)
# G6 (opens new window)(Star:7.8k)
是一个由纯 JavaScript 编写的关系图基础技术框架。开发者能基于 G6 进行关系图的分析视图和编辑视图进行快速的二次开发
- github 仓库地址:https://github.com/antvis/G6 (opens new window)
- 线上文档地址:https://g6.antv.vision/zh (opens new window)
# zrender (opens new window)(Star:4.8k)
一个轻量级的 canvas 类库,mvc 封装,数据驱动,提供类 dom 事件模型,让 canvas 绘图大有不同
- github 仓库地址:https://github.com/ecomfe/zrender (opens new window)
- 线上文档地址:https://ecomfe.github.io/zrender-doc/public/ (opens new window)
# 动画
# animate.css (opens new window)(Star:69.9k)
一个跨浏览器的 css 动画库,实现了多种 css3 动画效果,简单易用易上手
- github 仓库地址:https://github.com/animate-css/animate.css (opens new window)
- 线上文档地址:https://animate.style/ (opens new window)
# anime (opens new window)(Star:39.1k)
极小的 js 动画引擎,支持 css3、svg 的动画效果,能编写出各种复杂动画效果,gzip 后 6K 左右
- github 仓库地址:https://github.com/juliangarnier/anime (opens new window)
- 线上文档地址:https://animejs.com/ (opens new window)
# 插件
# fullPage.js (opens new window)(Star:32.1k)
pc 端的全屏滚动插件
- github 仓库地址:https://github.com/alvarotrigo/fullPage.js (opens new window)
- 线上文档地址:https://alvarotrigo.com/fullPage/zh/ (opens new window)
# video.js (opens new window)(Star:31.3k)
开源的 html5 和 flash 视频播放器,支持自定义进度条、按钮以及工具栏的底色
# awesome-browser-extensions-for-github (opens new window)(Star:2.1k)
收集关于 github 上优秀的浏览器插件,非常实用
- github 地址:https://github.com/stefanbuck/awesome-browser-extensions-for-github (opens new window)
- 线上地址:https://stefanbuck.com/awesome-browser-extensions-for-github (opens new window)
# front-end-plugins (opens new window) (Star:956)
前端常用插件汇总
# 框架、库和组件
# three.js (opens new window)(Star:70.3k)
是 js 编写的 webgl 第三方库,提供了非常多的 3D 显示功能
- github 仓库地址:https://github.com/mrdoob/three.js (opens new window)
- 线上地址:https://threejs.org/ (opens new window)
# reveal.js (opens new window)(Star:56.2k)
基于 css3 的 3D 幻灯片工具,能够制作绚丽的演示文稿并生成 html 格式,将它发布到 web 上
- github 地址:https://github.com/hakimel/reveal.js (opens new window)
- 线上地址:https://revealjs.com/ (opens new window)
# impress.js (opens new window)(Star:36.3k)
创建令人兴奋的演示。使用 css3 的转换和过渡,这个库允许你创建令人印象深刻的演示文稿
# highlight.js (opens new window)(Star:18.4k)
js 语法高亮,既可以运行在浏览器端也可以运行在服务端
# ice(飞冰) (opens new window)(Star:16.3k)
阿里飞冰,从此再也不担心管理系统的开发。(简单项目还是可以,复杂的做不了)
- github 仓库地址:https://github.com/alibaba/ice (opens new window)
- 线上文档地址:https://ice.work/ (opens new window)
# ScrollMagic (opens new window)(Star:13.1k)
一款非常赞的滚动交互的 js 插件,可用于官网与宣传广告场景
# nodePPT (opens new window)(Star:9.3k)
使用 nodejs 写的网络幻灯片,可能是迄今为止最好的网页版 ppt
- github 地址:https://github.com/ksky521/nodeppt (opens new window)
- 演示地址:https://nodeppt.js.org/#slide=1 (opens new window)
# webuploader (opens new window)(Star:7.5k)
一个简单的以 html5 为主,flash 为辅的现代文件上传组件。支持大文件分片并发上传,极大的提高了文件上传效率
- github 地址:https://github.com/fex-team/webuploader (opens new window)
- 线上地址:http://fex.baidu.com/webuploader/ (opens new window)
# JavaScript-Load-Image (opens new window)(Star:4.1k)
一个 js 加载和转换图像文件的库