animxyz.com

AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.

For example here is how you make an element fade and shrink in from above:

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

Changing the class to xyz-out reverses the direction of the animation:

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

See it in action here

For simple animations, that's all you need, but AnimXYZ can do so much more! Check out the AnimXYZ docs!

Just include the library (~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

Provided by:

Then use the following elements:

1. <textarea> with the class text-to-copy (can be readonly but not disabled)
2. <button> with the class js-copy-btn

The library takes cares of the rest.

📰 You don't have to write any JavaScript to use it!

Alternatively, you can use the project with npm:

npm install cheval

Almost everywhere!

Desktop:

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

Android:

• Chrome 42+
• Firefox 41+

iOS:

• 10+

Everywhere else (old versions of Safari), it will select the text. The library detects iDevices and will change the inital button text to Select text (to avoid confusing the user). After clicking it will say either Now tap 'Copy' (iPhone) or Now tap the text, then 'Copy' (iPad), to account for the strange…

Communicate with web Workers and other Windows using a simple Promise based API

With post-me it is easy for a parent (for example the main app) and a child (for example a worker or an iframe) to expose methods and custom events to each other.

• 🔁 Parent and child can both expose methods and/or events.
• 🔎 Strong typing of method names, arguments, return values, as well as event names and payloads.
• 🤙 Seamlessly pass callbacks to the other context to get progress or partial results.
• 📨 Transfer arguments/return values/payloads when needed instead of cloning.
• 🔗 Establish multiple concurrent connections.
• 🌱 No dependencies: 2kb gzip bundle.
• 🧪 Excellent test coverage.
• 👐 Open source (MIT)

In this live demo the main window communicates with a web worker and an iframe (source).

1. Install
2. Basic Usage
3. Typescript Support
4. Other Uses
   • Windows
   • MessageChannels
5. Callbacks as…

Lightweight Charts™

Demos | Documentation | Discord community | Reddit

TradingView Lightweight Charts™ are one of the smallest and fastest financial HTML5 charts.

The Lightweight Charts™ library is the best choice for you if you want to display financial data as an interactive chart on your web page without affecting your web page loading speed and performance.

It is the best choice for you if you want to replace static image charts with interactive ones The size of the library is close to static images but if you have dozens of image charts on a web page then using this library can make the size of your web page smaller.

npm install lightweight-charts

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

Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use

Demo and API • Key Features • How To Use • Installation • Docs • License

RevoGrid material theme.

• High Performance: Handles millions of cells in the viewport with a powerful core built by default.

• Accessibility: Follows WAI-ARIA best practices.

• Keyboard Support:

  • Excel-like focus for efficient navigation and editing.
  • Seamless copy/paste from Excel, Google Sheets, or any other sheet format.

• Lightweight: Minimal initial bundle size . Can be imported with polyfills or as a module for modern browsers.

• Intelligent Virtual DOM: Smart row recombination to minimize redraws.

• Virtual Scroll: Handles large datasets with infinite scroll.

• Formula Support: Evaluate formulas in cell data.

• Master Detail/Subtables/Forms: Expand rows to reveal child data.

• Drag and Drop…

☕️ Simple, flexible, fun JavaScript test framework for Node.js & The Browser ☕️

• Documentation
• Release Notes / History / Changes
• Code of Conduct
• Contributing
• Development
• Discord (ask questions here!)
• Issue Tracker

Become a backer and show your support to our open source project on our site.

Does your company use Mocha? Ask your manager or marketing team if your company would be interested in supporting our project. Support will allow the maintainers to dedicate more time for maintenance and new features for everyone. Also, your company's logo will show on GitHub and on our site - who doesn't want a little extra exposure? Here's the info.

You might want to know that:

• Mocha is one of the most-depended-upon modules on npm (source: libraries.io), and
• Mocha is an independent open-source project, maintained exclusively by volunteers.

You might want to help:

• New to contributing to…

Use Axios interceptors to automatically retry failed requests. Super flexible. Built in exponential backoff.

npm install retry-axios

To use this library, import it alongside of axios:

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

Or, if you're using TypeScript / es modules:

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

You can attach to the global axios object, and retry 3 times by default:

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

Or you can create your own axios instance to make scoped requests:

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

Unpack your meal and get coding. An invasive CSS library to get your style started. Official webpage (with live demo/test).

There are many ways of using Picnic CSS in your projects. Here a brief introduction of the recommended two methods:

Use Picnic CSS in the CDN jsDelivr for linking to the static file.

To install Picnic with bower just write this in your terminal (you'll need bower installed):

bower install picnic

Then, to use it within your scss development cycle, just do:

// 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';

Just do

npm install picnic --save

To add it to your repository. Then you…

This repository contains the original CSS used for the components at www.flexboxpatterns.com Feel free to use these styles however you like!

Assuming you have Node installed, you can install the project dependencies with npm install. This will install PostCSS and Autoprefixer; two critical tools for making your CSS cross-browser compatible.

npm run build

This command will concatenate the source CSS files into a single CSS file, and then use PostCSS to add various vendor-prefixed properties. Open up dist/index.html to see a demo page of the various flexbox patterns in the browser.

I don't recommend copy-pasting these examples directly into production code. I'm only trying to demonstrate different ways of using flexbox through these examples, so they may not incorporate some accessibility best practices (such as using semantic HTML5 elements and the role attribute). Before using this code in…

Automated typing in Visual Studio Code. Great for live coding on stage =)

It types out code!

1. $ npm install

2. $ npm run package

3. Right click on the generated vscode-typer-X.X.X.vsix file and select "Install Extension VSIX"

   

1. Create a typer/steps.json file with more than one step:

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

2. Use the VS Code Typer: Reset command via CMD+Shift+P
3. Use CMD + -> / CMD + <- to navigate between steps

Check this Flutter repo for a usage example.