DEV Community

Iain Freestone
Iain Freestone

Posted on

πŸš€10 Trending projects on GitHub for web developers - 21st January 2022

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. React-Text-transition

Animate your text changes.

GitHub logo WinterCore / react-text-transition

Animate your text changes

React-Text-transition

Animate your text changes

text-transition

Edit r03264p26n

Installation

npm install -S react-text-transition

Using the demo

npm run dev

How to use

Example

import React                       from "react";
import TextTransition, { presets } from "react-text-transition";
const TEXTS = [
  "Forest",
  "Building",
  "Tree",
  "Color"
];

const App = () => {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    const intervalId = setInterval(() =>
      setIndex(index => index + 1),
      3000 // every 3 seconds
    );
    return () => clearTimeout(intervalId);
  }, []);

  return (
    <h1>
      <TextTransition
        text={ TEXTS[index % TEXTS.length] }
        springConfig={ presets.wobbly }
      />
    </h1>
  );
}
…
Enter fullscreen mode Exit fullscreen mode

2. SunCalc

A tiny JavaScript library for calculating sun/moon positions and phases.

GitHub logo mourner / suncalc

A tiny JavaScript library for calculating sun/moon positions and phases.

SunCalc

Build Status

SunCalc is a tiny BSD-licensed JavaScript library for calculating sun position sunlight phases (times for sunrise, sunset, dusk, etc.) moon position and lunar phase for the given location and time created by Vladimir Agafonkin (@mourner) as a part of the SunCalc.net project.

Most calculations are based on the formulas given in the excellent Astronomy Answers articles about position of the sun and the planets. You can read about different twilight phases calculated by SunCalc in the Twilight article on Wikipedia.

Usage example

// get today's sunlight times for London
var times = SunCalc.getTimes(new Date(), 51.5, -0.1);
// format sunrise time from the Date object
var sunriseStr = times.sunrise.getHours() + ':' + times.sunrise.getMinutes();

// get position of the sun (azimuth and
…
Enter fullscreen mode Exit fullscreen mode

3. Simple.css

Simple.css is a classless CSS template that allows you to make a good looking website really quickly.

GitHub logo kevquirk / simple.css

Simple.css is a classless CSS template that allows you to make a good looking website really quickly.

Simple.css {}

Simple.css is a classless CSS template that allows you to make a good looking website really quickly.

Find out more at https://simplecss.org.

Screenshot of Simple.css

Supported Browsers

Any evergreen browser > IE11 (why is IE still a thing?)





4. Danfo.js

Danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

GitHub logo javascriptdata / danfojs

Danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.



Danfojs: powerful javascript data analysis toolkit

Node.js CI Coverage Status Twitter Patreon donate button

What is it?

Danfo.js is a javascript package that provides fast, flexible, and expressive data structures designed to make working with "relational" or "labeled" data both easy and intuitive. It is heavily inspired by Pandas library, and provides a similar API. This means that users familiar with Pandas, can easily pick up danfo.js.

Main Features

  • Danfo.js is fast and supports Tensorflow.js tensors out of the box. This means you can convert Danfo data structure to Tensors.
  • Easy handling of missing-data (represented as NaN) in floating point as well as non-floating point data
  • Size mutability: columns can be inserted/deleted from DataFrame
  • Automatic and explicit alignment: objects can be explicitly aligned to a set of labels, or the user can simply ignore the labels and let Series, DataFrame, etc. automatically align the data for you in computations
  • Powerful, flexible groupby functionality…

5. canvas-datagrid

Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.

GitHub logo TonyGermaneri / canvas-datagrid

Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.

canvas-datagrid

Demo - City of Chicago government employee list. Thanks to data.gov.

canvas-datagrid

NPM License Published on webcomponents.org

  • Works with Firefox, Edge, Safari and Chrome.
  • Native support for touch devices (phones and tablets).
  • Rich documentation, tutorials, and slack support.
  • Single canvas element, drawn in immediate mode, data size does not impact performance.
  • Support for unlimited rows and columns without paging or loading.
  • Rich API of events, methods and properties using the familiar W3C DOM interface.
  • Extensible styling, filtering, formatting, resizing, selecting, and ordering.
  • Support for hierarchal drill in style row level inner grids as well grids in cells.
  • Customizable hierarchal context menu.
  • Built in and custom styles.
  • W3C Web Component. Works in all frameworks.
  • Per-user styles, column sizes, row sizes, view preferences and settings using localStorage.
  • Small file size

Documentation

Tutorials

Slack Support (message author for invite)

Style Builder

Download latest version (minified)

Tests

Source Code

Latest Test Coverage

Installation

With npm

…
Enter fullscreen mode Exit fullscreen mode

6. Vest

Vest is a form-validation framework inspired by unit testing libraries like Mocha or Jest; It is designed to be easy to use and easy to learn by introducing their declarative syntax.

GitHub logo ealush / vest

Vest βœ… Declarative validations framework

Vest - Declarative validations framework

Vest Documentation

Join Discord Github Stars Version Downloads bundlephobia Status

Vest

Vest is a form-validation framework inspired by unit testing libraries like Mocha or Jest; It is designed to be easy to use and easy to learn by introducing their declarative syntax.

The idea behind Vest is that your validations can be described as a suite - a contract that reflects your form or feature structure. Vest is framework agnostic, meaning it can be used with any UI framework, or without any framework at all.

Using Vest for form validation can reduce bloat, improve feature readability and maintainability.

test('username', 'Username is required', () => {
  enforce(data.username).isNotBlank();
});
test('username', 'Username must be at least 3 chars', () => {
  enforce(data.username).longerThanOrEquals(3);
})
…
Enter fullscreen mode Exit fullscreen mode

7. Vanta JS

Animated 3D backgrounds for your website

GitHub logo tengbao / vanta

Animated 3D backgrounds for your website

Vanta JS

View demo gallery & customize effects at www.vantajs.com β†’

alt text

What is Vanta? / FAQs

  • Add 3D animated digital art to any webpage with just a few lines of code.
  • How it works: Vanta inserts an animated effect as a background into any HTML element.
  • Works with vanilla JS, React, Angular, Vue, etc.
  • Effects are rendered by three.js (using WebGL) or p5.js.
  • Effects can interact with mouse/touch inputs.
  • Effect parameters (e.g. color) can be easily modified to match your brand.
  • Total additional file size is ~120kb minified and gzipped (mostly three.js), which is smaller than comparable background images/videos.
  • Vanta includes many predefined effects to try out. More effects will be added soon!

View demo gallery & customize effects at www.vantajs.com β†’

Basic usage with script tags:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.waves.min.js"></script>
<script
…
Enter fullscreen mode Exit fullscreen mode

8. Gest

A sensible GraphQL testing tool - test your GraphQL schema locally and in the cloud

GitHub logo mfix22 / gest

πŸ‘¨β€πŸ’» A sensible GraphQL testing tool - test your GraphQL schema locally and in the cloud

Gest - A sensible GraphQL testing CLI and tool.

A sensible GraphQL testing tool.

PRs welcome tested with jest tested with gest MIT License

Usage

$ npm install -g gest
Enter fullscreen mode Exit fullscreen mode

then send queries with gest (pronounced guest [/Ι‘est/]).

$ gest [options] [query | pathToFileWithQuery]
Enter fullscreen mode Exit fullscreen mode
Examples
$ gest '{ test }'
Enter fullscreen mode Exit fullscreen mode

or

$ gest test.graphql
# with `test.graphql` containing
{
  test
}
Enter fullscreen mode Exit fullscreen mode

or multiple

$ gest test.graphql '{ test }' introspection.graphql
# will run all three queries!
Enter fullscreen mode Exit fullscreen mode

REPL

If you run gest with no arguments, it will open a REPL for you to run queries in:

$ gest

Query: { test }

{
  data: {
    test: "success!"
  }
}
Enter fullscreen mode Exit fullscreen mode

HTTP

If you specify a baseURL in your config, gest will send an POST request with your query correctly encoded in the body. Your baseURL must be a valid URL.

You can specify HTTP headers by using -H key=value flags.

This is especially convenient if you are using a Now workflow.

Example
$
…
Enter fullscreen mode Exit fullscreen mode

9. Falso

Create massive amounts of fake data in the browser and NodeJS. Tree Shakeable & Fully Typed.

GitHub logo ngneat / falso

All the Fake Data for All Your Real Needs πŸ™‚

All the Fake Data for All Your Real Needs πŸ™‚

Create massive amounts of fake data in the browser and NodeJS. Tree Shakeable & Fully Typed.


@ngneat/falso commitizen PRs coc-badge semantic-release styled with prettier

βœ… Β 140+ Functions
βœ… Β Tree Shakable
βœ… Β Fully Typed
βœ… Β Entity Functions
βœ… Β Single and Array Result

πŸ€“ Learn about it on the docs site
πŸ”₯ Run it on Stackblitz

Installation

npm i @ngneat/falso
yarn add @ngneat/falso

Usage

import { randEmail, randFullName } from '@ngneat/falso';

const user = { email: randEmail(), name: randFullName() };

const emails = randEmail({ length: 10 });
Enter fullscreen mode Exit fullscreen mode

Setting a Randomness Seed

You can set your own seed if you want consistent results:

import { rand, seed } from '@ngneat/falso';
seed('some-constant-seed');

// Always returns 2
rand([1, 2, 3, 4, 5]);
…
Enter fullscreen mode Exit fullscreen mode

10. Lazy Load

Vanilla JavaScript plugin for lazy loading images. Delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

GitHub logo tuupola / lazyload

Vanilla JavaScript plugin for lazyloading images

Lazy Load Remastered

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume.

Basic Usage

By default Lazy Load assumes the URL of the original high resolution image can be found in data-src attribute. You can also include an optional low resolution placeholder in the src attribute.

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<img class="lazyload" data-src="img/example.jpg" width="765" height="574" /&gt
<img class="lazyload" 
…
Enter fullscreen mode Exit fullscreen mode

Stargazing πŸ“ˆ

Top risers over last 7 daysπŸ”—

  1. Public APIs +1,525 stars
  2. Tauri +949 stars
  3. Free for Dev +686 stars
  4. CyberChef +649 stars
  5. Awesome +636 stars

Top growth(%) over last 7 daysπŸ”—

  1. p +18%
  2. Node Intergration Tests +14%
  3. React Preview +13%
  4. riju +10%
  5. Vitest +9%

Top risers over last 30 daysπŸ”—

  1. Awesome +4,507 stars
  2. Awesome Self Hosted +3,757 stars
  3. Public APIs +3,521 stars
  4. Tabby +3,183 stars
  5. 30 Days of JavaScript +3,163 stars

Top growth(%) over last 30 daysπŸ”—

  1. Iconoir +117%
  2. Vitest +111%
  3. Basic Computer Games +96%
  4. Fuite +95%
  5. TinySpy +52%

For all for the latest rankings please checkout Stargazing.dev


Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.

Discussion (2)

Collapse
wh0sumit profile image
SUMIT SINGH

Thank you for sharing πŸ’œ

Collapse
pierre profile image
Pierre-Henry Soria ✨

Nice! Thanks for sharing this with us 😊 They look all great