Iain Freestone

Posted on Jan 14, 2022

🚀10 Trending projects on GitHub for web developers - 14th January 2022

#javascript #webdev #productivity #react

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.

PptxGenJS

Create JavaScript PowerPoint Presentations

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
…

View on GitHub

2. antfu/p

Toolkit for managing multiple promises.

DEPRECATED, now it's part of `@antfu/utils`

@antfu/p

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])

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]

import P from '@antfu/p'
const p = P(

…

View on GitHub

3. fx

Command-line tool and terminal JSON viewer

f(x)

^{Special thanks to:}

Warp is a modern, Rust-based terminal with AI built in so you and your team can build great software, faster.

Visit warp.dev to learn more.

Install

brew install fx

Documentation

See full documentation at fx.wtf.

License

MIT

View on GitHub

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.

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.

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

Using Docker

Note: a public image is not provided currently, but you can build one yourself with the provided Dockerfile.

Create an image
```
docker build -t my-image
```
Run a container
```
docker run -p 8080:8080 -v "${pwd}:/public" my-image
```
In the example above we're serving the directory ./ (working directory) If you wanted to serve ./test you'd…

View on GitHub

5. color

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

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 }

Install

$ npm install color

Usage

const Color = require('color');

Constructors

// string constructor
const color = Color('rgb(255, 255, 255)')                       // { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }
const color = Color('hsl(194, 53%, 79%)'

…

View on GitHub

6. perfect-cursors

Perfect interpolation for animated multiplayer cursors.

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.

Installation

yarn add perfect-cursors
# or
npm i perfect-cursors

Introduction

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

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.

Above: Updating the cursor instantly.

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

View on GitHub

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.

jaredhanson / passport

Simple, unobtrusive authentication for Node.js.

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

Simple Authentication
Make login our problem. Not yours

Auth0 by Okta provides a simple and customizable login page to authenticate your users. You can dynamically add new capabilities to it - including social login, multi-factor authentication, or passkeys - without making changes to your app’s code.

We help protect your app and your users from attacks - defending your application from bot attacks and detecting runtime anomalies based on suspicious IPs…

View on GitHub

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

oclif / oclif

CLI for generating, building, and releasing oclif CLIs. Built by Salesforce.

`oclif` CLI

🗒 Description

This is the oclif CLI for the Open CLI Framework, that supports the development of oclif plugins and CLIs.

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.

See Usage below for an overview of the oclif CLI.

📌 Requirements

Currently, Node 18+ is supported. We support the LTS versions of Node. You can add the node package to your CLI to ensure users are running a specific version of Node.

📌 Migrating from V1

If you have been using…

View on GitHub

9. Meteor

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

meteor / meteor

Meteor, the JavaScript App Platform

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

📚 Create your applications using modern JavaScript

Benefit from the latest technology updates to rapidly prototype and develop your applications.

✨ Integrate technologies you already use

Use popular frameworks and tools right out-of-the-box. Focus on building features instead of configuring disparate components yourself.

💻 Build apps for any device

Use the same code whether you’re developing for web, iOS, Android, or desktop for a seamless update experience for your users.

🔥 Getting Started

How about trying a tutorial to get started with your favorite technology?

React
Blaze
Vue
Svelte

Next, read the documentation and get some examples.

🚀 Quick Start

On your platform, use this line:

> npm install -g meteor

🚀 To create a project:

> meteor create my-app

☄️ Run it:

cd my-app
meteor

🧱 Developer Resources

Building an application with Meteor?

Deploy…

View on GitHub

10. ReactPlayer

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

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

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.

Using Next.js and need to handle video upload/processing? Check out next-video.

✨ The future of ReactPlayer

Maintenance of ReactPlayer is being taken over by Mux. Mux is a video api for developers. The team at Mux have worked on many highly respected projects and are committed to improving video tooling for developers.

ReactPlayer will remain open source, but with a higher rate of fixes and releases over time. Thanks to everyone in the community for your ongoing support.

Usage

npm install react-player # or yarn add react-player

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

// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' />

By default, ReactPlayer supports many different types of url. If…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

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

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.

Top comments (5)

gkTim • Jan 16 '22

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.

Gleisser • Jan 17 '22

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.

Iain Freestone • Jan 17 '22

Thank you

Dennis • Jan 15 '22

This series is amazing

Aslam Shah • Jan 15 '22

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

1. PptxGenJS

gitbrent / PptxGenJS

Create PowerPoint presentations with a powerful, concise JavaScript API.

PptxGenJS

Create JavaScript PowerPoint Presentations

Table of Contents

Introduction

Features

Works Everywhere

Full Featured

Simple and Powerful

2. antfu/p

antfu / p

Toolkit for managing multiple promises

DEPRECATED, now it's part of @antfu/utils

@antfu/p

3. fx

antonmedv / fx

Terminal JSON viewer & processor

f(x)

Install

Documentation

License

4. http-server

http-party / http-server

a simple zero-configuration command-line http server

http-server: a simple static HTTP server

Installation:

Running on-demand:

Globally via npm

Globally via Homebrew

As a dependency in your npm package:

Using Docker

5. color

Qix- / color

🌈 Javascript color conversion and manipulation library

color

Install

Usage

Constructors

6. perfect-cursors

steveruizok / perfect-cursors

Perfect interpolation for multiplayer cursors.

perfect-cursors

Installation

Introduction

Animating between points

7. Passport

jaredhanson / passport

Simple, unobtrusive authentication for Node.js.

Passport

8. oclif

oclif / oclif

CLI for generating, building, and releasing oclif CLIs. Built by Salesforce.

oclif CLI

🗒 Description

🚀 Getting Started Tutorial

📌 Requirements

📌 Migrating from V1

9. Meteor

meteor / meteor

Meteor, the JavaScript App Platform

📚 Create your applications using modern JavaScript

✨ Integrate technologies you already use

💻 Build apps for any device

🔥 Getting Started

🚀 Quick Start

🧱 Developer Resources

10. ReactPlayer

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

✨ The future of ReactPlayer

Usage

Stargazing 📈

Top risers over last 7 days🔗

Top growth(%) over last 7 days🔗

Top risers over last 30 days🔗

Top growth(%) over last 30 days🔗

Read next

DEPRECATED, now it's part of `@antfu/utils`

Globally via `npm`

As a dependency in your `npm` package:

`oclif` CLI