Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. AnimXYZ
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.
ingram-projects
/
animxyz
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
AnimXYZ
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>
For simple animations, that's all you need, but AnimXYZ can do so much more! Check out the AnimXYZ docs!
Installation
Using a package
โฆ2. Cheval
Copy to the clipboard using JavaScript without writing JS. A full solution for all browsers and all devices.
ryanpcmcquen
/
cheval
๐ Copy to the clipboard using JavaScript without writing JS. A full solution for all browsers and all devices. LibreJS compliant.
Cheval ๐
Just include the library (~2kB!):
<script src="https://cdn.jsdelivr.net/gh/ryanpcmcquen/cheval@latest/cheval.min.js"></script>
https://cdn.jsdelivr.net/gh/ryanpcmcquen/cheval@latest/cheval.min.js
Provided by:
Then use the following elements:
-
<textarea>with the classtext-to-copy(can bereadonlybut notdisabled) -
<button>with the classjs-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โฆ
3. post-me
Communicate with web Workers and other Windows using a simple Promise based API
alesgenova
/
post-me
๐ฉ Use web Workers and other Windows through a simple Promise API
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:
4. Lightweight Charts
Financial lightweight charts built with HTML5 canvas
tradingview
/
lightweight-charts
Performant financial charts built with HTML5 canvas
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.
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โฆ5. Revo Grid
Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance
revolist
/
revogrid
Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance ๐
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
-
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โฆ
6. Mocha
Simple, flexible, fun JavaScript test framework for Node.js & The Browser
โ๏ธ Simple, flexible, fun JavaScript test framework for Node.js & The Browser โ๏ธ
Links
- Documentation
- Release Notes / History / Changes
- Code of Conduct
- Contributing
- Development
- Discord (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โฆ
7. retry-axios
A super flexible interceptor for Axios that makes it easy to retry requests.
JustinBeckwith
/
retry-axios
๐ฆ A super flexible interceptor for Axios that makes it easy to retry requests.
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)โฆ8. Picnic CSS
A beautiful CSS library to kickstart your projects. An invasive CSS library to get your style started.
franciscop
/
picnic
๐ A beautiful CSS library to kickstart your projects
Picnic CSS
Unpack your meal and get coding. An invasive CSS library to get your style started. Official webpage (with live demo/test).
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โฆ
9. Flexbox Patterns
Patterns for using flexbox CSS to build awesome UI components.
cjcenizal
/
flexbox-patterns
Patterns for using flexbox CSS to build awesome UI components.
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โฆ
10. VSCode Typer
Automated typing in Visual Studio Code. Great for live coding on stage
domesticmouse
/
vscode-typer
Adding automagic typing to VSCode
VSCode Typer
Automated typing in Visual Studio Code. Great for live coding on stage =)
Features
It types out code!
Install
-
$ npm install -
$ npm run package -
Right click on the generated
vscode-typer-X.X.X.vsixfile and select "Install Extension VSIX"
Usage
- Create a
typer/steps.jsonfile with more than one step:
[
{
"file": "test.js", // file to change
"content" : "test-2.js", // changed state
"charsPerChange": 5 // characters per change
}
]
- Use the VS Code Typer: Reset command via CMD+Shift+P
- Use CMD + -> / CMD + <- to navigate between steps
Check this Flutter repo for a usage example.
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (2)
Hey thanks!
Beautifull, thankยดs for this work!!! ๐ฅ๐ช