DEV Community

Iain Freestone
Iain Freestone

Posted on

πŸš€10 Trending projects on GitHub for web developers - 14th January 2022

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

1. PptxGenJS

Create PowerPoint presentations with a powerful, concise JavaScript API.

GitHub logo gitbrent / PptxGenJS

Create PowerPoint presentations with a powerful, concise JavaScript API.

PptxGenJS

Create JavaScript PowerPoint Presentations

PptxGenJS Sample Slides

Known Vulnerabilities npm downloads jsdelivr downloads typescripts definitions

Table of Contents

Introduction

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

Features

Works Everywhere

  • Every modern desktop and mobile browser is supported
  • Integrates with Node, Angular, React and Electron
  • Compatible with PowerPoint, Keynote, and more

Full Featured

  • All major object types are available (charts, shapes, tables, etc.)
  • Master Slides for academic/corporate branding
  • SVG images, animated gifs, YouTube videos, RTL text, and Asian fonts

Simple And Powerful

  • The absolute easiest PowerPoint library to use
  • Learn as you code will full typescript definitions included
  • Tons of demo code comes included (over 70 slides of features)

Export Your…


2. antfu/p

Toolkit for managing multiple promises.

GitHub logo antfu / p

Toolkit for managing multiple promises

@antfu/p

NPM version

Toolkit for managing multiple promises.

Without
const items = [1, 2, 3, 4, 5]
(await Promise.all(items
  .map(async i => {
    const v = await multiply(i, 3)
    const even = await isEven(v)
    return [even, v]
  })))
    .filter(x => x[0])
    .map(x => x[1])
Enter fullscreen mode Exit fullscreen mode
import P from '@antfu/p'

const items = [1, 2, 3, 4, 5]

await P(items)
  .map(async i => await multiply(i, 3))
  .filter(async i => await isEven(i))
// [6, 12]
Enter fullscreen mode Exit fullscreen mode
import P from '@antfu/p'
const p = P()

// collect promises that are
…
Enter fullscreen mode Exit fullscreen mode

3. fx

Command-line tool and terminal JSON viewer

GitHub logo antonmedv / fx

Command-line tool and terminal JSON viewer πŸ”₯

fx logo

fx example

* Function eXecution

Build Status Npm Version Brew Version

Command-line JSON processing tool

Features

  • Easy to use
  • Standalone binary
  • Interactive mode πŸŽ‰
  • Streaming support 🌊

Install

npm install -g fx
Enter fullscreen mode Exit fullscreen mode

Or via Homebrew

brew install fx
Enter fullscreen mode Exit fullscreen mode

Or download standalone binary from releases

Usage

Start interactive mode without passing any arguments.

$ curl ... | fx
Enter fullscreen mode Exit fullscreen mode

Or by passing filename as first argument.

$ fx data.json
Enter fullscreen mode Exit fullscreen mode

Pass a few JSON files.

cat foo.json bar.json baz.json | fx .message
Enter fullscreen mode Exit fullscreen mode

Use full power of JavaScript.

$ curl ... | fx '.filter(x => x.startsWith("a"))'
Enter fullscreen mode Exit fullscreen mode

Access all lodash (or ramda, etc) methods by using .fxrc file.

$ curl ... | fx '_.groupBy("commit.committer.name")' '_.mapValues(_.size)'
Enter fullscreen mode Exit fullscreen mode

Update JSON using spread operator.

$ echo '{"count": 0}' | fx '{...this, count: 1}'
{
  "count": 1
}
Enter fullscreen mode Exit fullscreen mode

Extract values from maps.

$ fx commits.json | fx .[].author.name
Enter fullscreen mode Exit fullscreen mode

Print formatted JSON to stdout.

$ curl
…
Enter fullscreen mode Exit fullscreen mode

4. http-server

A simple zero-configuration command-line HTTP server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development and learning.

GitHub logo http-party / http-server

a simple zero-configuration command-line http server

GitHub Workflow Status (master) npm homebrew npm downloads license

http-server: a simple static HTTP server

http-server is a simple, zero-configuration command-line static HTTP server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development and learning.

Example of running http-server

Installation:

Running on-demand:

Using npx you can run the script without installing it first:

npx http-server [path] [options]

Globally via npm

npm install --global http-server

This will install http-server globally so that it may be run from the command line anywhere.

Globally via Homebrew

brew install http-server

As a dependency in your npm package:

npm install http-server

Usage:

 http-server [path] [options]

[path] defaults to ./public if the folder exists, and ./ otherwise.

Now you can visit http://localhost:8080 to view your server

Note: Caching is on by default. Add -c-1 as an option to disable caching.

Available Options:

Command Description Defaults
-p or --port Port to use. Use -p 0 to look for an
…

5. color

JavaScript library for immutable color conversion and manipulation with support for CSS color strings.

GitHub logo Qix- / color

🌈 Javascript color conversion and manipulation library

color

JavaScript library for immutable color conversion and manipulation with support for CSS color strings.

const color = Color('#7743CE').alpha(0.5).lighten(0.5);
console.log(color.hsl().string());  // 'hsla(262, 59%, 81%, 0.5)'

console.log(color.cmyk().round().array());  // [ 16, 25, 0, 8, 0.5 ]

console.log(color.ansi256().object());  // { ansi256: 183, alpha: 0.5 }
Enter fullscreen mode Exit fullscreen mode

Install

$ npm install color
Enter fullscreen mode Exit fullscreen mode

Usage

const Color = require('color');
Enter fullscreen mode Exit fullscreen mode

Constructors

const color = Color('rgb(255, 255, 255)')
const color = Color({r: 255, g: 255, b: 255})
const color = Color.
…
Enter fullscreen mode Exit fullscreen mode

6. perfect-cursors

Perfect interpolation for animated multiplayer cursors.

GitHub logo steveruizok / perfect-cursors

Perfect interpolation for multiplayer cursors.

perfect-cursors

Perfect interpolation for animated multiplayer cursors. Used in tldraw.

πŸ’• Love this library? Consider becoming a sponsor.

Edit perfect-cursors-demo

Installation

yarn add perfect-cursors
# or
npm i perfect-cursors
Enter fullscreen mode Exit fullscreen mode

Introduction

You can use this library to smoothly animate a cursor based on limited information.

Kapture 2022-01-08 at 09 25 50

Above: We are updating the red cursor's position once every 80 milliseconds. The perfect-cursors library is being used to correctly animate between these positions.

Animating between points

When implementing a multiplayer app, you will most likely be displaying each user's cursor location based on the information you receive from a multiplayer service such as Pusher, Liveblocks.

In a perfect world, these updates would occur "in real time": that is, arriving with zero latency and arriving at the same rate as the user's monitor.

Kapture 2022-01-08 at 09 35 34

Above: Updating the cursor instantly.

In the real world, however, services often "throttle" their updates to roughly one update every 50-80…


7. Passport

Simple, unobtrusive authentication for Node.js. Passport's sole purpose is to authenticate requests, which it does through an extensible set of plugins known as strategies.

GitHub logo jaredhanson / passport

Simple, unobtrusive authentication for Node.js.

passport banner

Passport

Passport is Express-compatible authentication middleware for Node.js.

Passport's sole purpose is to authenticate requests, which it does through an extensible set of plugins known as strategies. Passport does not mount routes or assume any particular database schema, which maximizes flexibility and allows application-level decisions to be made by the developer. The API is simple: you provide Passport a request to authenticate, and Passport provides hooks for controlling what occurs when authentication succeeds or fails.


Sponsors

LoginRadius is built for the developer community to integrate robust Authentication and Single Sign-On in just a few lines of code.
FREE Signup


Your app, enterprise-ready.
Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.


Status Build Coverage Dependencies

Install

$ npm install passport

Usage

Strategies

Passport uses the concept of strategies to authenticate requests. Strategies can range from verifying username…


8. oclif

Framework for building CLIs in Node.js. This framework was built out of the Heroku CLI but generalized to build any custom CLI. It's designed both for single-file CLIs with a few flag options, or for very complex CLIs that have subcommands (like git or heroku).

GitHub logo oclif / oclif

Node.js Open CLI Framework. Built with πŸ’œ by Heroku.

oclif: Node.JS Open CLI Framework

Version CircleCI Downloads/week License

πŸ—’ Description

This is a framework for building CLIs in Node.js. This framework was built out of the Heroku CLI but generalized to build any custom CLI. It's designed both for single-file CLIs with a few flag options, or for very complex CLIs that have subcommands (like git or heroku).

See the docs for more information.

πŸš€ Getting Started Tutorial

The Getting Started tutorial is a step-by-step guide to introduce you to oclif. If you have not developed anything in a command line before, this tutorial is a great place to get started.

✨ Features

  • Flag/Argument parsing - No CLI framework would be complete without a flag parser. We've built a custom one from years of…

9. Meteor

Meteor is an ultra-simple environment for building modern web applications.

GitHub logo meteor / meteor

Meteor, the JavaScript App Platform

Meteor

TravisCI Status CircleCI Status

Meteor is an ultra-simple environment for building modern web applications.

With Meteor you write apps:

  • in modern JavaScript
  • that send data over the wire, rather than HTML
  • using your choice of popular open-source libraries

Try a getting started tutorial:

Next, read the documentation.

Are you looking for examples? Check this meteor/examples.

Check your changes to keep your app up-to-date.

Quick Start

On Linux/macOS/Windows, use this line:

npm install -g meteor
Enter fullscreen mode Exit fullscreen mode

Visit the official install page to learn more.

Create a project:

meteor create my-app
Enter fullscreen mode Exit fullscreen mode

Run it:

cd my-app
meteor
Enter fullscreen mode Exit fullscreen mode

Developer Resources

Building an application with Meteor?

Interested in helping or contributing to Meteor? These resources will help:

To uninstall Meteor read…


10. ReactPlayer

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

GitHub logo cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

ReactPlayer

Latest npm version Build Status Test Coverage Become a sponsor on Patreon

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura. Not using React? No problem.

Migrating to ReactPlayer v2.0

ReactPlayer v2.0 changes single player imports and adds lazy loading players. Support for preload has also been removed, plus some other changes. See MIGRATING.md for information.

Usage

npm install react-player # or yarn add react-player
Enter fullscreen mode Exit fullscreen mode
import React from 'react'
import ReactPlayer from 'react-player'
// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
Enter fullscreen mode Exit fullscreen mode

By default, ReactPlayer supports many different types of url. If you only ever use one type, use imports such as react-player/youtube to reduce your bundle size. See config keys for all player keys.

import React from 'react'
import ReactPlayer from 'react-player/youtube'

// Only loads the YouTube player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
Enter fullscreen mode Exit fullscreen mode

If your build system supports import()…


Stargazing πŸ“ˆ

Top risers over last 7 daysπŸ”—

  1. 30 Days Of JavaScript +1,929 stars
  2. Iconoir +885 stars
  3. Tauri +842 stars
  4. faker.js +812 stars
  5. Awesome +710 stars

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

  1. faker.js +178%
  2. Iconoir +93%
  3. Amplify UI +36%
  4. Fuite +27%
  5. 30 Days Of JavaScript +16%

Top risers over last 30 daysπŸ”—

  1. Awesome +4,538 stars
  2. Tabby +4,249 stars
  3. Awesome Self Hosted +3,583 stars
  4. Free Programming Books +3,387 stars
  5. JavaScript Algorithms +2,956 stars

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

  1. Pico +202%
  2. Rakkas +144%
  3. md-block +107%
  4. Iconoir +98%
  5. Basic Computer Games +92%

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 (5)

Collapse
gktim profile image
gkTim

Just crazy how much really good projects @antfu creates and maintains.

Really appreciate his work!

Just browse through his projects and you will find a few gems.

Also thx to all other maintainers of OSS which mainly use there free time to provide great software.

Collapse
gleisser profile image
Gleisser

I love this lists, thanks for making that every week, it helps me to keep update with what's is going on in the industry.

Collapse
iainfreestone profile image
Iain Freestone Author

Thank you

Collapse
chiroro_jr profile image
Dennis

This series is amazing

Collapse
hunzaboy profile image
Aslam Shah

codedmails.com is also an awesome resource for email templates.