AnimXYZ

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!

Installation

Using a package

Cheval 📋

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

Featured in MarkApp!

So what?! Where does it work?

Almost everywhere!

Desktop:

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

Android:

• Chrome 42+
• Firefox 41+

iOS:

• 10+

What about other browsers?

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…

post-me

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.

Features

• 🔁 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)

Demo

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

Content:

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

Lightweight Charts

Demos | Documentation | Discord community

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

The Lightweight Charting 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.

Installing

es6 via npm

npm install lightweight-charts

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

Powerful data grid component built with StencilJS.

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.

Key Features

• Millions of cells viewport with a powerful core in-build by default;
• Keyboard support with excel like focus;
• Super light initial starter . Can be imported with polifill or as module for modern browsers;
• Intelligent Virtual DOM and smart rgRow recombination in order to achieve less redraws;
• Sorting (multiple options, can be customized per column and advanced with events);
• Filtering
  • Predefined system filters;
  • Preserve existing collection;
  • Custom filters (extend existing system filters with your own set);
• Export to file;
• Custom sizes per Column and Row;
• Column resizing;
• Autosize support (Column size based on content);
• Pinned/Sticky/Freezed
  • Columns (define left or right);
  • Rows (define top or…

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

Links

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

Backers

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

Sponsors

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.

Development

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…

retry-axios

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

Installation

npm install retry-axios

Usage

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)

Picnic CSS

Unpack your meal and get coding. An invasive CSS library to get your style started.

Getting started

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

CDN - just give me the file

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

Bower - to personalize Picnic

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

NPM

Just do

npm install picnic --save

To add it to your repository. Then you can include it straight from…

Flexbox Patterns

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

Getting started

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.

Commands

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.

Things to keep in mind

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…

VSCode Typer

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

Features

It types out code!

Install

1. $ npm install
2. $ npm run package
3. Install from VSIX

Usage

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.