🚀10 Trending projects on GitHub for web developers - 5th February 2021

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.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

…

View on GitHub

---

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&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…

View on GitHub

---

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:

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

View on GitHub

---

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

…

View on GitHub

---

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…

View on GitHub

---

6. Mocha

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

mochajs / 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…

View on GitHub

---

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)

…

View on GitHub

---

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…

View on GitHub

---

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…

View on GitHub

---

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

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"

   

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.

View on GitHub

---

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.

Comments

[Ernesto Campese]

Hey thanks!

[Visit me on 🐦 @ciberninjas]

Beautifull, thank´s for this work!!! 🔥💪