Iain Freestone

Posted on Dec 17, 2021

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

#react #webdev #productivity #javascript

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.

colinhacks / zod

TypeScript-first schema validation with static type inference

Zod

✨ https://zod.dev ✨
TypeScript-first schema validation with static type inference

Documentation • Discord • npm • deno • Issues • @colinhacks • tRPC

These docs have been translated into Chinese.

Table of contents
Introduction
- Sponsors
  - Platinum
  - Gold
  - Silver
  - Bronze
  - Copper
- Ecosystem
Installation
- Requirements
- From npm (Node/Bun)
- From deno.land/x (Deno)
Basic usage
Primitives
Coercion for primitives
Literals
Strings
- Datetimes
- Dates
- Times
- IP addresses
Numbers
BigInts
NaNs
Booleans
Dates
Zod enums
Native enums
Optionals
Nullables
Objects
- .shape
- .keyof
- .extend
- .merge
- .pick/.omit
- .partial
- .deepPartial
- .required
- .passthrough
- .strict
- .strip
- .catchall
Arrays
- .element
- .nonempty
- .min/.max/.length
Tuples
Unions
Discriminated unions
Records
- Record key type
Maps
Sets
Intersections
Recursive types
- ZodType with ZodEffects
- JSON type
- Cyclical objects
Promises
Instanceof
Functions
Preprocess
Custom schemas
Schema methods
- .parse
- .parseAsync
- .safeParse
- .safeParseAsync
- .refine
  - Arguments
  - Customize error path
  - …

View on GitHub

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.

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(

…

View on GitHub

3. Fast Node Manager (fnm)

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

Schniz / fnm

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

Fast Node Manager (`fnm`)

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

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

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…

View on GitHub

4. React Link Preview

A React library that generates beautiful previews for your links.

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

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' />;
};

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…

View on GitHub

5. Sync Contribution Graph

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

kefimochi / sync-contribution-graph

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

Sync Contribution Graph

How to Use 🚀

Use this repo as a template to create a new repo, and provide a name.
Clone your new repo locally. cd into the newly created directory.
It requires NodeJS and npm (or yarn) to be installed on your machine. Run npm i or yarn install in your terminal.
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.

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

…

View on GitHub

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.

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

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

…

View on GitHub

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!

ErikCH / DevYouTubeList

List of Development YouTube Channels

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!

Amazing Developers Of YouTube

English
Non English
- Russian
- Hindi
- Turkish
- Italian
- Bengali
- Brazilian
- Korean
- Chinese
- Hebrew
- French
- Farsi
- Spanish
- Catalan
- Indonesian
- Arabic
- German
- Polish
- Somali
- Vietnam
- Uzbek

Resources

Tutorial

These channels focus on tutorials and code along.

View on GitHub

8. bignumber.js

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

MikeMcl / bignumber.js

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

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

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

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

…

View on GitHub

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.

seek-oss / capsize

Flipping how we define typography in CSS.

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

Usage

`createStyleObject`

Returns a CSS-in-JS style object.

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,
  },
});

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

View on GitHub

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.

verdaccio / verdaccio

📦🔐 A lightweight Node.js private proxy registry

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

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.