This content originally appeared on DEV Community and was authored by Iain Freestone
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
Table of Contents
- Table of Contents
- Introduction
- Features
- Live Demos
- Installation
- Documentation
- Library Ports
- Issues / Suggestions
- Need Help?
- Contributors
- Sponsor Us
- License
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.
@antfu/p
Toolkit for managing multiple promises.
Withoutconst 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()
// collect promises that are
β¦
3. fx
Command-line tool and terminal JSON viewer
* Function eXecution
Command-line JSON processing tool
Features
- Easy to use
- Standalone binary
- Interactive mode π
- Streaming support π
Install
npm install -g fx
Or via Homebrew
brew install fx
Or download standalone binary from releases
Usage
Start interactive mode without passing any arguments.
$ curl ... | fx
Or by passing filename as first argument.
$ fx data.json
Pass a few JSON files.
cat foo.json bar.json baz.json | fx .message
Use full power of JavaScript.
$ curl ... | fx '.filter(x => x.startsWith("a"))'
Access all lodash (or ramda, etc) methods by using .fxrc file.
$ curl ... | fx '_.groupBy("commit.committer.name")' '_.mapValues(_.size)'
Update JSON using spread operator.
$ echo '{"count": 0}' | fx '{...this, count: 1}'
{
"count": 1
}
Extract values from maps.
$ fx commits.json | fx .[].author.name
Print formatted JSON to stdout.
$ curl
β¦
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-party
/
http-server
a simple zero-configuration command-line http server
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
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.
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
const color = Color('rgb(255, 255, 255)')
const color = Color({r: 255, g: 255, b: 255})
const color = Color.
β¦
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β¦
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
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.
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).
oclif: Node.JS Open CLI Framework
- π Description
- π Getting Started Tutorial
- β¨ Features
- π Requirements
- π Migrating from V1
- π Usage
- π Examples
- π¨ Commands
- π Related Repositories
- π¦ Learn More
- π£ Feedback
π 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.
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
Visit the official install page to learn more.
Create a project:
meteor create my-app
Run it:
cd my-app
meteor
Developer Resources
Building an application with Meteor?
- Deploy on Meteor Cloud
- Discussion Forums
- Join the Meteor community Slack by clicking this invite link.
- Announcement list. Subscribe in the footer.
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
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.
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
import React from 'react'
import ReactPlayer from 'react-player'
// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
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' />
If your build system supports import()
β¦
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
Top growth(%) over last 7 daysπ
- faker.js +178%
- Iconoir +93%
- Amplify UI +36%
- Fuite +27%
- 30 Days Of JavaScript +16%
Top risers over last 30 daysπ
- Awesome +4,538 stars
- Tabby +4,249 stars
- Awesome Self Hosted +3,583 stars
- Free Programming Books +3,387 stars
- JavaScript Algorithms +2,956 stars
Top growth(%) over last 30 daysπ
- Pico +202%
- Rakkas +144%
- md-block +107%
- Iconoir +98%
- 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.
This content originally appeared on DEV Community and was authored by Iain Freestone

Iain Freestone | Sciencx (2022-01-14T14:45:14+00:00) π10 Trending projects on GitHub for web developers – 14th January 2022. Retrieved from https://www.scien.cx/2022/01/14/%f0%9f%9a%8010-trending-projects-on-github-for-web-developers-14th-january-2022/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.