animxyz.com

AnimXYZ 助您轻松创建、自定义和组合网站动画。它基于 CSS 变量，无需编写任何关键帧即可实现几乎无限数量的独特动画。节省时间，完全掌控元素的运动方式。AnimXYZ 专为 Vue、React、SCSS 和 CSS 而打造，让您的网站栩栩如生。

例如，以下是如何使元素从上方淡入并缩小：

<div class="xyz-in" xyz="fade up big">I will animate in!</div>

更改类名可以xyz-out反转动画方向：

<div class="xyz-out" xyz="fade up big">I will animate out!</div>

点击这里观看演示

对于简单的动画来说，这些就足够了，但 AnimXYZ 的功能远不止于此！快去看看 AnimXYZ 的文档吧！

只需包含库文件（约 2kB！）：

<script src="https://cdn.jsdelivr.net/gh/ryanpcmcquen/cheval@latest/cheval.min.js"></script&gt

https://cdn.jsdelivr.net/gh/ryanpcmcquen/cheval@latest/cheval.min.js

提供者：

然后使用以下元素：

1. <textarea>与该类text-to-copy（可以是readonly但不是 disabled）
2. <button>和班级js-copy-btn

图书馆会处理剩下的事情。

📰 你无需编写任何 JavaScript 代码即可使用它！

或者，您也可以使用 npm 来使用该项目：

npm install cheval

几乎到处都是！

桌面：

• 铬/铬42+
• Firefox 41+
• Internet Explorer 9+
• Opera 29+
• Safari 10+

安卓：

• Chrome 42+
• Firefox 41+

iOS：

• 10岁以上

在其他所有浏览器（旧版 Safari）中，它会选中文本。该库会检测 iOS 设备，并将初始按钮文本更改为Select text（以避免用户混淆）。点击后，它会显示Now tap 'Copy'（iPhone）或Now tap the text, then 'Copy'（iPad），以解释这种奇怪的现象……

使用基于简单 API 的方法与 WebWorkers和其他设备进行通信。WindowsPromise

使用post-me，父级（例如主应用程序）和子级（例如 worker 或 iframe）可以轻松地相互公开方法和自定义事件。

• 🔁 父组件和子组件都可以暴露 方法和/或事件。
• 🔎方法名称、参数、返回值以及事件名称和有效负载的强类型化。
• 🤙 将回调无缝传递到另一个上下文以获取进度或部分结果。
• 📨根据需要传递参数/返回值/有效载荷，而不是克隆。
• 🔗 建立多个并发连接。
• 🌱无依赖项：2kb gzip 压缩包。
• 🧪 出色的测试覆盖率。
• 👐 开源（MIT）

在这个实时演示中，主窗口与 Web Worker 和 iframe 进行通信（来源）。

1. 安装
2. 基本用法
3. TypeScript 支持
4. 其他用途
   • 视窗
   • 消息通道
5. 回调函数作为……

轻量级图表™

演示|文档| Discord 社区| Reddit

TradingView Lightweight Charts™ 是体积最小、速度最快的金融 HTML5 图表之一。

如果您想在网页上以交互式图表的形式显示财务数据，而不影响网页加载速度和性能，那么 Lightweight Charts™ 图表库是您的最佳选择。

如果您想用交互式图像图表替换静态图像图表，那么这是您的最佳选择。该库的大小与静态图像接近，但如果您在网页上有数十个图像图表，那么使用此库可以减小网页的大小。

npm install lightweight-charts

import { createChart } from 'lightweight-charts';
const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries

支持轻松高效地处理数百万个单元格和数千列，实现快速数据渲染。易于使用。

演示和 API •主要功能•使用方法•安装•文档•许可

RevoGrid材质主题。

• 高性能：默认内置强大的核心，可处理视口中数百万个单元格。

• 无障碍设计：遵循 WAI-ARIA 最佳实践。

• 键盘支持：

  • 类似 Excel 的界面，便于高效导航和编辑。
  • 可从 Excel、Google Sheets 或任何其他表格格式无缝复制/粘贴。

• 轻量级：初始打包体积极小。可通过 polyfill 导入，也可作为模块导入到现代浏览器中。

• 智能虚拟DOM：智能行重组以最大限度地减少重绘。

• 虚拟滚动：通过无限滚动处理大型数据集。

• 公式支持：计算单元格数据中的公式。

• 主从表/子表/表单：展开行以显示子数据。

• 拖放……

☕️ 简单、灵活、有趣的 JavaScript 测试框架，适用于 Node.js 和浏览器 ☕️

• 文档
• 发布说明 / 历史记录 / 变更
• 行为守则
• 贡献
• 发展
• Discord（在这里提问！）
• 问题跟踪器

成为我们的支持者，并在我们的网站上表达您对我们开源项目的支持。

贵公司是否使用 Mocha？请询问您的经理或市场团队，贵公司是否有兴趣支持我们的项目。您的支持将使维护人员能够投入更多时间进行维护，并为所有用户开发新功能。此外，贵公司的徽标将出现在 GitHub和我们的网站上——谁不想获得一些额外的曝光机会呢？详情请见此处。

您可能想知道：

• Mocha 是 npm 上最受依赖的模块之一（来源：libraries.io），
• Mocha 是一个独立的开源项目，完全由志愿者维护。

您或许愿意提供帮助：

• 初次参与……

使用 Axios 拦截器自动重试失败的请求。超级灵活。内置指数退避机制。

npm install retry-axios

要使用此库，请将其与以下库一起导入axios：

// Just import rax and your favorite version of axios
const rax = require('retry-axios');
const axios = require('axios');

或者，如果您使用的是 TypeScript / es 模块：

import * as rax from 'retry-axios';
import axios from 'axios';

您可以将其附加到全局axios对象，默认情况下重试 3 次：

const interceptorId = rax.attach();
const res = await axios('https://test.local');

或者，您可以创建自己的 axios 实例来发出作用域请求：

const myAxiosInstance = axios.create();
myAxiosInstance.defaults.raxConfig = {
  instance: myAxiosInstance
};
const interceptorId = rax.attach(myAxiosInstance)

打开包装，开始编码吧！一个功能强大的 CSS 库，助你快速打造专属风格。官方网页（含在线演示/测试）。

在项目中使用 Picnic CSS 的方法有很多种。这里简要介绍两种推荐的方法：

使用CDN jsDelivr 中的 Picnic CSS链接到静态文件。

要使用 bower 安装 Picnic，只需在终端中输入以下命令（您需要先安装 bower）：

bower install picnic

然后，要在你的 SCSS 开发周期中使用它，只需执行以下操作：

// Here go any variables you want to overwrite
$picnic-primary: #faa;

// Now import picnic and a couple of plugins
@import 'BOWER_PATH/picnic/src/picnic';
@import 'BOWER_PATH/picnic/plugins/nav/plugin';
@import 'BOWER_PATH/picnic/plugins/modal/plugin';

照做就行了

npm install picnic --save

将其添加到您的存储库。然后您……

此仓库包含www.flexboxpatterns.com网站上组件使用的原始 CSS。您可以随意使用这些样式！

假设您已安装 Node，您可以使用以下命令安装项目依赖项npm install。这将安装 PostCSS 和 Autoprefixer；这两个工具对于使您的 CSS 代码跨浏览器兼容至关重要。

npm run build

此命令会将源 CSS 文件合并成一个 CSS 文件，然后使用 PostCSS 添加各种带有厂商前缀的属性。打开dist/index.html即可在浏览器中查看各种 flexbox 布局模式的演示页面。

我不建议直接将这些示例复制粘贴到生产代码中。我只是想通过这些示例演示使用 Flexbox 的不同方法，因此它们可能没有包含一些无障碍最佳实践（例如使用语义化的 HTML5 元素和role属性）。在使用此代码之前……

Visual Studio Code 中的自动输入功能。非常适合在舞台上进行现场编程 =)

它会输入代码！

1. $ npm install

2. $ npm run package

3. 右键单击生成的vscode-typer-X.X.X.vsix文件，然后选择“安装 VSIX 扩展”。

   

1. 创建typer/steps.json包含多个步骤的文件：

[
    {
        "file": "test.js", // file  to change
        "content" : "test-2.js", // changed state
        "charsPerChange": 5 // characters per change
    }
]

2. 使用 VS Code 输入法：通过 CMD+Shift+P 执行重置命令
3. 使用 CMD + -> / CMD + <- 在步骤之间导航

请查看此 Flutter 代码库以获取使用示例。