DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 5th February 2021

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ・2 min read

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.

GitHub logo 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 Logo

AnimXYZ

npm version

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

…

2. Cheval

Copy to the clipboard using JavaScript without writing JS. A full solution for all browsers and all devices.

GitHub logo ryanpcmcquen / cheval

πŸ“‹ Copy to the clipboard using JavaScript without writing JS. A full solution for all browsers and all devices. LibreJS compliant.

Cheval πŸ“‹

Downloads GitHub license

Cheval glass

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:

jsDelivr

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

πŸ“° 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!

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

GitHub logo alesgenova / post-me

πŸ“© Use web Workers and other Windows through a simple Promise API

workflow status npm package codecov

post-me

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

diagram

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
  5. Callbacks as…

4. Lightweight Charts

Financial lightweight charts built with HTML5 canvas

GitHub logo tradingview / lightweight-charts

Financial lightweight charts built with HTML5 canvas

Lightweight Charts

CircleCI npm version npm bundle size Dependencies count Downloads

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
Enter fullscreen mode Exit fullscreen mode
import { createChart } from 'lightweight-charts';
const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries()
…
Enter fullscreen mode Exit fullscreen mode

5. Revo Grid

Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance

GitHub logo revolist / revogrid

Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance πŸ”‹

RevoGrid

Latest Version on NPM Software License Tree shaking Tree shaking

Powerful data grid component built with StencilJS.

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

Demo and API β€’ Key Features β€’ How To Use β€’ Installation β€’ Docs β€’ License

Material grid preview

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 Min size. Can be imported with polifill or as module for modern browsers;
  • Intelligent Virtual DOM and smart row 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 bottom);
  • …





6. Mocha

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

GitHub logo mochajs / mocha

β˜•οΈ simple, flexible, fun javascript test framework for node.js & the browser

Mocha test framework

β˜•οΈ Simple, flexible, fun JavaScript test framework for Node.js & The Browser β˜•οΈ

GitHub Actions Build Status Coverage Status FOSSA Status Gitter OpenCollective OpenCollective

NPM Version Node Version


Mocha Browser Support h/t SauceLabs

Links

Backers

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

MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer MochaJS Backer

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.

MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor MochaJS Sponsor

Development

You might want to know that:

  • Mocha is the most-depended-upon module 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 Mocha? Check out this…

7. retry-axios

A super flexible interceptor for Axios that makes it easy to retry requests.

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

NPM Version GitHub Actions Dependency Status Known Vulnerabilities codecov style badge

Installation

npm install retry-axios
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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

import * as rax from 'retry-axios';
import axios from 'axios';
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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)
…
Enter fullscreen mode Exit fullscreen mode

8. Picnic CSS

A beautiful CSS library to kickstart your projects. An invasive CSS library to get your style started.

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

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';
Enter fullscreen mode Exit fullscreen mode

NPM

Just do

npm install picnic --save
Enter fullscreen mode Exit fullscreen mode

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


9. Flexbox Patterns

Patterns for using flexbox CSS to build awesome UI components.

GitHub logo 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

GitHub logo domesticmouse / vscode-typer

Adding automagic typing to VSCode

Gitpod Ready-to-Code

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
    }
]
Enter fullscreen mode Exit fullscreen mode
  1. Use the VS Code Typer: Reset command via CMD+Shift+P
  2. 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.

Discussion (2)

pic
Editor guide
Collapse
ravenjedev profile image
Ernesto Campese

Hey thanks!

Collapse
ciberninjas profile image
Pablo Álvarez Corredera

Beautifull, thankΒ΄s for this work!!! πŸ”₯πŸ’ͺ