Skip to content

iq9891/awesome-frontend

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 

Repository files navigation

front-end-awesome

前端资源总览

Fork front-end-awesome Star front-end-awesome watchers in front-end-awesome

目录


Vue.js 专栏

⬆️ 返回首页

JavaScript 框架

知名流行的框架

⬆️ 返回首页

框架的学习

⬆️ 返回首页

JavaScript 库

⬆️ 返回首页

物理引擎

⬆️ 返回首页

工具函数类

⬆️ 返回首页

调试工具

⬆️ 返回首页

其他

学习资源

⬆️ 返回首页

数据模拟

⬆️ 返回首页

动画库

⬆️ 返回首页

二维码

  • qrious - Pure JavaScript library for QR code generation using canvas。
  • qart.js - Generate artistic QR code.

⬆️ 返回首页

UI 框架

基于 Vue.js

⬆️ 返回首页

基于 react

⬆️ 返回首页

基于 angular

⬆️ 返回首页

基于 jquery

⬆️ 返回首页

打包工具

⬆️ 返回首页

前端脚手架

⬆️ 返回首页

Node.js 方面

框架

⬆️ 返回首页

好用的插件

  • ngrok 本地 https 工具
  • http-server 零配置的命令行 http 服务器
  • http-serve 零配置的命令行 http 服务器
  • nvm node 版本控制
  • cropperjs 图片截取器,图片截图
  • svgo Node.js tool for optimizing SVG files
  • express-gateway A microservices API Gateway built on top of ExpressJS
  • node-rpio 这是一个高性能node.js插件,可以访问Raspberry Pi GPIO接口,支持常规GPIO以及i²c,PWM和SPI。
  • strapi Node.js内容管理框架(headless-CMS)可以毫不费力地构建功能强大的API。
  • jsPDF jsPDF 提供了一系列 API,可以在客户端生成图文并茂的 PDF 文档。
  • sharp 高性能Node.js图像处理,是调整JPEG,PNG,WebP和TIFF图像大小的最快模块。使用libvips库。
  • faast.js 批量计算,让并发请求更高效
  • sofa-rpc-node 阿里系 NodeJs 版 RPC
  • wildduck 邮箱服务器
  • tink tink是JavaScript的实验包管理器
  • dotenv 在 nodejs 项目中通过 .env 文件加载环境变量
  • chokidar 监听文件的变化

⬆️ 返回首页

其他

  • Node.js-Troubleshooting-Guide Node.js 应用线上/线下故障、压测问题和性能调优指南手册(更新中...)
  • NodeBB Node.js基于为现代网络构建的论坛软件

数据可视化库

  • echarts 它是用纯 JavaScript 编写的,基于 zrender 画布。它支持以画布、SVG(4.0+) 和 VML 的形式绘制图表。除了 PC 和移动浏览器外,ECharts 还可以与 node 上的 node-canvas 一起使用,以便进行高效的服务器端渲染(SSR)。
  • Highcharts JS 是一个广受欢迎的基于 SVG 的 JavaScript 图表库,针对旧的浏览器可降级到 VML 和画布。世界上最大的 100 家公司中,有 72 家公司(Facebook、Twitter 等)使用了这个库,这使得它成为世界上最流行的 JS 图表 API。
  • G2
  • F2 移动端可视化图表
  • D3 可能是最流行和使用最广泛的 JavaScript 数据可视化库。D3 用于基于数据的文档操作,并使用 HTML、SVG 和 CSS 让数据活起来。它基于 Web 标准,结合现代浏览器,不需要与专有框架耦合,将可视化组件和数据驱动的方法结合到 DOM 操作上。它允许你将任意数据绑定到文档对象模型(DOM),然后在文档上应用数据转换。
  • Chart.js 一个非常受欢迎的开源 HTML5 图表库,它使用画布元素构建响应式 Web 应用。ChartJS 提供了混合图表类型,新的图表轴类型和漂亮的动画。它的设计简单而优雅,有 8 种基本的图表类型,你可以将该库与 moment.js 结合在一起使用,用于渲染时间轴。
  • three.js ThreeJS 用 WebGL 创建 3D 动画。该项目的灵活性和抽象性意味着它也可用于 2 维或 3 维的数据可视化。
  • Metric-Graphics 用于可视化和布局时间序列数据。它相对较小(80kb),提供了小而优雅的线条图、散点图、直方图、柱状图和数据表,以及地格图(rug plot)和基本线性回归等特性。
  • Recharts 是一个使用 React 和 D3 构建的图表库,可以作为声明性的 React 组件使用。该库提供原生 SVG 支持,轻量级依赖树(D3 子模块)高度可定制。官网文档中可以找到很多例子。
  • Raphael 是一个 JavaScript 矢量库,可在 Web 中绘制矢量图形。该库使用 SVG W3C 和 VML 作为创建图形的基础,因此每个图形对象也是 DOM 对象,你可以附加 JavaScript 事件处理程序。Raphael 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。
  • C3 是一个基于 D3 的可重用 Web 应用图表库。该库为每个元素提供了相应的类,这样你就可以通过这些类来自定义样式,并通过 D3 直接扩展结构。它还提供了多种 API 和回调来访问图表状态。借助它们,你可以更新图表,即使是已经渲染好的图标。
  • React-vis 是 Uber 开发的一系列数据可视化组件,包括线 / 面 / 柱状图、热图、散热图、等高线图、六角热图等等。使用该库不需要事先掌握 D3 或任何其他 data-vis 库的知识,并提供了低级模块化的构建块组件,如 x/y 轴。
  • React virtualized 是一组 React 组件,有效地呈现大型列表和表格数据。ES6、CommonJS 和 UMD 版本可以在每个分发版中使用,该项目支持 Webpack 4 工作流。请注意,为了避免版本冲突,必须将 react,react-dom 指定为 peer 依赖。
  • Victory 在 Web 和 React Native 应用程序中使用相同的 API,以便于跨平台绘制图表。一种优雅而灵活的方式来利用 React 组件来支持实用的数据可视化。
  • CartoDB 是一个位置智能和数据可视化工具,用于发现位置数据中的见解。你可以通过 Web 表单上传地理空间数据(Shapefiles、GeoJSON 等),并在数据集或地图上将其可视化,使用 SQL 进行搜索,并使用 CartoCSS 来应用地图样式。
  • Raw 是电子表格和数据可视化之间的连接,基于 d3.js 库创建基于向量的自定义可视化。它可以处理表格数据(电子表格和 CSV)和从其他应用程序复制和粘贴的文本。因为是 SVG 格式,所以可以使用矢量图形编辑器编辑,或直接嵌入到网页中。
  • Metabase 是一种相当快速和简单的方法,可以在不了解 SQL 的情况下创建数据仪表盘(分析师和数据专业人士可使用 SQL 模式)。你可以创建片段和度量指标,发送数据到 Slack(通过 MetaBot 在 Slack 中查看数据)等等。它可能是一个很好的工具,可用它在团队内部可视化数据,尽管可能需要做一些维护工作。
  • tauCharts 一个基于 D3 的图表库。该库提供了一个声明接口,用于将数据字段快速映射到可视化属性,它的架构允许你使用插件构建切面和扩展图表行为。
  • chartist-js 简单的响应式图表。
  • semiotic 结合了 React 和 D3 的数据可视化框架
  • nvd3 一个用 D3.js 编写的可重用的图表库。
  • viser 一个适合数据工程师的工具箱。
  • tui.chart 漂亮的数据可视化图表。
  • datamaps 使用 D3.js 在单个 JavaScript 件中自定义 SVG 地图可视化。
  • sheetsee.js 用于对谷歌表格的数据进行可视化。
  • BizCharts 基于 G2 和 React 的数据可视化库。
  • sigma.js 一个专门用于图形绘制的 JavaScript 库。
  • incubator-echarts 一个强大的、交互式的图表和可视化的浏览器库。
  • vis 一个动态的基于浏览器的可视化库。

⬆️ 返回首页

CSS 处理器

⬆️ 返回首页

测试相关

⬆️ 返回首页

状态管理

⬆️ 返回首页

性能分析工具

  • analyze-css CSS选择器的复杂性和性能分析器

⬆️ 返回首页

包管理工具

⬆️ 返回首页

前端编码规范

⬆️ 返回首页

git 版本控制

仓库

⬆️ 返回首页

git 工具

  • tig commit 信息查看工具
  • cz-cli commit 信息规范化管理工具
  • gitmoji-cli gitmoji 图标

⬆️ 返回首页

使用手册

⬆️ 返回首页

在线工具

在线编程

⬆️ 返回首页

转换

⬆️ 返回首页

查阅

图标管理

⬆️ 返回首页

其他

⬆️ 返回首页

小程序相关

⬆️ 返回首页

命令行工具

  • Bash-Snippets 重型终端用户的小型bash脚本集合
  • the_silver_searcher 一个类似于ack的代码搜索工具,但速度更快。 查找 /#/ 用法: ag '\/#\/'
  • fzf 模糊搜索神器
  • tldr 查看 linux命令帮助(Too long, Don't read)
  • autojump 快速切换常用目录 j dir_name
  • fuck 纠正工具
  • k 命令行美化工具, 美化 ll 命令
  • so SSH远程登录工具
  • hr 用于在终端展示分行符
  • nnn 文件管理器
  • autoenv 基于目录的环境配置
  • mackup .dotfile 管理工具
  • hub - 更易使用 Git 的
  • glances 系统监视(可替代 top)
  • goaccess - 运行于 *nix 系统终端中的实时 web 日志分析器及交互式查看器
  • tcplstat 网络监控工具
  • cz-cli - git commit 工具
  • tig git log 查看工具
  • cheat.sh 是一个实用的速查
  • neofetch 个性化显示Linux系统信息
  • hiper 一个查看网页加载性能的命令行程序
  • lazygit simple terminal UI for git commands
  • command-line 在一个页面中掌握命令行

⬆️ 返回首页

谷歌插件

  • WEB前端助手(FeHelper) - 一些前端常用的功能都有,方便实用
  • Vue.js devTools - Vue 开发工具
  • React Developer Tools - React 开发工具
  • Redux DevTools - Redux 开发工具
  • 书签侧边栏 - 非常方便搜索已经保存的书签,可以自由设定触发条件
  • Postman - ajax 工具
  • Json Formatter - json 解析工具
  • Allow-Control-Allow-Origin: * - 跨域工具
  • Axure RP Extension for Chrome - 预览工具
  • Clear Cache - 清除缓存工具
  • DuckDuckGo Privacy Essentials - DuckDuckGo 搜索工具
  • Enhanced Github - github 工具
  • Google 翻译
  • HTTP Status - http 状态管理
  • jQuery API 中文文档
  • Nodei.co: npm badges for GitHub - github 工具
  • Octotree - github 工具
  • Open SEO Stats(Formerly: PageRank Status) - seo 工具
  • PageSpeed Insights (with PNaCl) - 网页速度检测工具
  • User-Agent Switcher - UA 工具
  • Vimium - vim 工具
  • Web Developer - 开发者工具
  • 二维码网址
  • 掘金
  • EditThisCookie - 操作cookie的插件
  • Image Downloader - 可以自动分析网页内图片并下载你需要的

⬆️ 返回首页

UA 识别

⬆️ 返回首页

页面交互

Slider

⬆️ 返回首页

瀑布流

⬆️ 返回首页

懒加载/加载监听/预加载

⬆️ 返回首页

图片轮播(幻灯片)/图片展示

⬆️ 返回首页

图片剪裁/图片处理

⬆️ 返回首页

进度条/加载(Loading)

⬆️ 返回首页

侧滑插件(offcancas)

⬆️ 返回首页

菜单(Menu)

⬆️ 返回首页

滚动侦测(ScrollSpy)

⬆️ 返回首页

滚动加载更多/下拉刷新(Pull to Refresh)

⬆️ 返回首页

平滑滚动插件(Smooth Scroll)

⬆️ 返回首页

全屏滚动/全屏切换

⬆️ 返回首页

分屏滚动

⬆️ 返回首页

转场效果

⬆️ 返回首页

固定元素(Sticky)

⬆️ 返回首页

触控事件

⬆️ 返回首页

拖拽组件

⬆️ 返回首页

隐藏或展示页面元素

⬆️ 返回首页

滚动条(Scrollbar)

⬆️ 返回首页

视差滚动(Parallax Scrolling)

⬆️ 返回首页

缩放 (Zooming)

⬆️ 返回首页

下载组件

⬆️ 返回首页

Ajax模块

⬆️ 返回首页

字体资源

⬆️ 返回首页

表单方面

⬆️ 返回首页

引导组件

  • shepherd 引导您的用户浏览您的应用。
  • intro.js 为您的网站和项目提供新功能介绍和逐步用户指南的更好方式。可用于新手指引,功能介绍,更新指引等。

⬆️ 返回首页

其他

⬆️ 返回首页

音频/视频

⬆️ 返回首页

APP 框架

⬆️ 返回首页

CSS 框架

⬆️ 返回首页

富文本编辑器/Markdown编辑器/Markdown解析器

⬆️ 返回首页

颜色(CSS Colors)/SVG/Canvas

⬆️ 返回首页

svg

⬆️ 返回首页

颜色

⬆️ 返回首页

Canvas

⬆️ 返回首页

代码高亮插件/代码编辑器

⬆️ 返回首页

本地存储

⬆️ 返回首页

模板引擎

⬆️ 返回首页

算法

⬆️ 返回首页

加密/转码

⬆️ 返回首页

前端游戏框架

⬆️ 返回首页

计算机相关书籍

⬆️ 返回首页

WEB服务器

⬆️ 返回首页

编辑器

⬆️ 返回首页

Web 前端

⬆️ 返回首页

JavaScript

⬆️ 返回首页

Shell

⬆️ 返回首页

读书笔记及其它

⬆️ 返回首页

前端面试

面试教科书

⬆️ 返回首页

Vue.js

⬆️ 返回首页

持续集成

⬆️ 返回首页

Host相关

⬆️ 返回首页