DEV Community

Iain Freestone
Iain Freestone

Posted on

🚀10 Trending projects on GitHub for web developers - 17th December 2021

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

1. Zod

TypeScript-first schema validation with static type inference. Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type.



2. Promisify

Promisify an entire class or object.This module leverages es6 Proxy and Reflect to promisify every function in an object or class instance.

GitHub logo wraithgar / gar-promisify

Promisify an entire class or object

@gar/promisify

Promisify an entire object or class instance

This module leverages es6 Proxy and Reflect to promisify every function in an object or class instance.

It assumes the callback that the function is expecting is the last parameter, and that it is an error-first callback with only one value i.e. (err, value) => .... This mirrors node's util.promisify method.

In order that you can use it as a one-stop-shop for all your promisify needs, you can also pass it a function. That function will be promisified as normal using node's built-in util.promisify method.

node's custom promisified functions will also be mirrored, further allowing this to be a drop-in replacement for the built-in util.promisify.

Examples

Promisify an entire object

const promisify = require('@gar/promisify')
class Foo {
  constructor (attr) {
    this.attr = attr
  }

  double (input, cb) {
    cb(
Enter fullscreen mode Exit fullscreen mode

3. Fast Node Manager (fnm)

Fast and simple Node.js version manager, built in Rust

GitHub logo Schniz / fnm

🚀 Fast and simple Node.js version manager, built in Rust

Fast Node Manager (fnm) Amount of downloads GitHub Actions workflow status

🚀 Fast and simple Node.js version manager, built in Rust

Blazing fast!

Features

🌎 Cross-platform support (macOS, Windows, Linux)

✨ Single file, easy installation, instant startup

🚀 Built with speed in mind

📂 Works with .node-version and .nvmrc files

Installation

Using a script (macOS/Linux)

For bash, zsh and fish shells, there's an automatic installation script.

First ensure that curl and unzip are already installed on you operating system. Then execute:

curl -fsSL https://fnm.vercel.app/install | bash
Enter fullscreen mode Exit fullscreen mode

Upgrade

On macOS, it is as simple as brew upgrade fnm.

On other operating systems, upgrading fnm is almost the same as installing it. To prevent duplication in your shell config file add --skip-shell to install command.

Parameters

--install-dir

Set a custom directory for fnm to be installed. The default is $XDG_DATA_HOME/fnm (if $XDG_DATA_HOME is not defined it falls back to $HOME/.local/share/fnm on linux and $HOME/Library/Application Support/fnm on…


4. React Link Preview

A React library that generates beautiful previews for your links.

GitHub logo Dhaiwat10 / react-link-preview

A React library that generates beautiful previews for your links.

React Link Preview

A React component that renders beautiful, fully-customizable link previews.

Demo Follow @dhaiwat10 npm version package downloads CI

Demo

How to use

Install the package:

yarn add @dhaiwat10/react-link-preview

npm install @dhaiwat10/react-link-preview

Import and render the preview:

import { LinkPreview } from '@dhaiwat10/react-link-preview';

const Home = () => {
  return <LinkPreview url='https://www.youtube.com/watch?v=dQw4w9WgXcQ' width='400px' />;
};
Enter fullscreen mode Exit fullscreen mode

If the component renders nothing, it means that no metadata could be scraped for the URL. Provide a fallback component if you don't want to render null.

Important

This package uses a Heroku proxy (open-source) to get around CORS issues. The public proxy receives a lot of traffic (+ there is a rate limit) and is not recommended for production use.

Recommended workflow (for production)

  • Please fork the proxy repo and host your own copy of it.
  • You can then use the customFetcher prop to pass a fetcher function that fetches…

5. Sync Contribution Graph

Generates empty commits to match contributions from other public GitHub accounts.

GitHub logo kefimochi / sync-contribution-graph

Generates empty commits to match contributions from other public GitHub accounts.

Sync Contribution Graph

GitHub Contributions Graph full squares that have various shades of green

Twitter: kefimochi

How to Use 🚀

  1. Use this repo as a template to create a new repo, and provide a name.
  2. Clone your new repo locally. cd into the newly created directory.
  3. It requires NodeJS and npm (or yarn) to be installed on your machine. Run npm i or yarn install in your terminal.
  4. Use npm start or yarn start in order to trigger a series of terminal prompts that will help with configuration

    On Windows, please run it from Git Bash.

If you change your mind about these commits later, you can delete the repository and they'll disappear from your contribution graph.

Terminal walkthrough of various prompts that help with configuration.

Requested Information 🌳

Key Description Default value
username The username whose graph contributions you'd like to copy.
year Year that you would like to sync with provided username. Currently doesn't support multiple years. Current year
execute Let's the code know whether to simply generate

6. tinyspy

A 4KB package for minimal and easy testing with no dependencies. This package was created for having a tiny spy library to use in vitest, but it can also be used in jest and other test environments.

GitHub logo tinylibs / tinyspy

🕵🏻‍♂️ minimal fork of nanospy, with more features

tinyspy

minimal fork of nanospy, with more features 🕵🏻‍♂️

A 10KB package for minimal and easy testing with no dependencies This package was created for having a tiny spy library to use in vitest, but it can also be used in jest and other test environments.

In case you need more tiny libraries like tinypool or tinyspy, please consider submitting an RFC

Installing

// with npm
$ npm install -D tinyspy

// with pnpm
$ pnpm install -D tinyspy

// with yarn
$ yarn install -D tinyspy
Enter fullscreen mode Exit fullscreen mode

Usage

spy

Simplest usage would be:

const fn = (n) => n + '!'
const spied = spy(fn)
spied('a')

console.log(spied.called) // true
console.log(spied.callCount) // 1
console.log(spied.calls) // [['a']]
console.log(spied
Enter fullscreen mode Exit fullscreen mode

7. Amazing Developers On YouTube

A curated list of amazing development channels on YouTube. These include web development, back-end development, front-end development live coders and more!


8. bignumber.js

A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic

GitHub logo MikeMcl / bignumber.js

A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic

bignumber.js

A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic.

npm version npm downloads


Features

  • Integers and decimals
  • Simple API but full-featured
  • Faster, smaller, and perhaps easier to use than JavaScript versions of Java's BigDecimal
  • 8 KB minified and gzipped
  • Replicates the toExponential, toFixed, toPrecision and toString methods of JavaScript's Number type
  • Includes a toFraction and a correctly-rounded squareRoot method
  • Supports cryptographically-secure pseudo-random number generation
  • No dependencies
  • Wide platform compatibility: uses JavaScript 1.5 (ECMAScript 3) features only
  • Comprehensive documentation and test set

API

If a smaller and simpler library is required see big.js It's less than half the size but only works with decimal numbers and only has half the methods It also has fewer configuration options than this library, and does not allow NaN or Infinity.

See also decimal.js, which among other things adds support for non-integer powers, and performs all operations to a specified number of significant digits.

Load


9. Capsize

Capsize makes the sizing and layout of text as predictable as every other element on the screen. Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.

GitHub logo seek-oss / capsize

Flipping how we define typography in CSS.

Capsize

Capsize


Capsize makes the sizing and layout of text as predictable as every other element on the screen.

Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.

npm install @capsizecss/core
Enter fullscreen mode Exit fullscreen mode

Usage

createStyleObject

Returns a CSS-in-JS style object.

  1. Import createStyleObject passing the relevant options.
import { createStyleObject } from '@capsizecss/core';

const capsizeStyles = createStyleObject({
  fontSize: 16,
  leading: 24,
  fontMetrics: {
    capHeight: 700,
    ascent: 1058,
    descent: -291,
    lineGap: 0,
    unitsPerEm: 1000,
  },
});
Enter fullscreen mode Exit fullscreen mode

Note: It is recommended that you install the @capsizecss/metrics package…


10. Verdaccio

Verdaccio is a simple, zero-config-required local private npm registry. No need for an entire database just to get started! Verdaccio comes out of the box with its own tiny database, and the ability to proxy other registries (eg. npmjs.org), caching the downloaded modules along the way.

GitHub logo verdaccio / verdaccio

📦🔐 A lightweight Node.js private proxy registry

BannerHelp

Verdaccio stands for peace, stop the war, we will be yellow / blue 🇺🇦 until that happens.

verdaccio logo

verdaccio gif

Version Next (Development branch)

Looking for Verdaccio 6 version? Check the branch 6.x The plugins for the v6.x that are hosted within this organization are located at the verdaccio/monorepo repository, while for the next version are hosted on this project ./packages/plugins.

Note that contributing guidelines might be different based on the branch.

Verdaccio is a simple, zero-config-required local private npm registry No need for an entire database just to get started! Verdaccio comes out of the box with its own tiny database, and the ability to proxy other registries (eg. npmjs.org) caching the downloaded modules along the way. For those looking to extend their storage capabilities, Verdaccio supports various community-made plugins to hook into services such as Amazon's s3, Google Cloud Storage or create your own plugin.

verdaccio (latest) verdaccio (downloads) docker pulls backers stackshare

discord MIT Crowdin

Github StandWithUkraine

Install

Node.js…


Stargazing 📈

Top risers over last 7 days🔗

  1. Tabby +1,686 stars
  2. Pico +1,059 stars
  3. Free Programming Books +833 stars
  4. Type Challenges +827 stars
  5. Developer Roadmap +1,229 stars

Top growth(%) over last 7 days🔗

  1. Pico +157%
  2. Qwik +28%
  3. Remix Auth +22%
  4. Status Page +20%
  5. React Cool Img +18%

Top risers over last 30 days🔗

  1. Free Programming Books +4,676 stars
  2. Awesome +4,563 stars
  3. Tabby +4,504 stars
  4. Developer Roadmap +4,363 stars
  5. Coding Interview University +3,960 stars

Top growth(%) over last 30 days🔗

  1. Medusa +198%
  2. Pico +184%
  3. Nice Modal React +87%
  4. Agrippa +85%
  5. VSCode Front Matter +56%

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

Collapse
 
razorcell profile image
razorcell

Thanks for sharing!