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.

GitHub logo colinhacks / zod

TypeScript-first schema validation with static type inference

Zod

Created by Colin McDonnell License npm stars coverage

by @colinhacks

Hi! Colin here, creator of Zod. I hope you find it easy to use and powerful enough for all your use cases. If you have any issues or suggestions, please open an issue!

If you like typesafety, check out my other library tRPC. It works in concert with Zod to provide a seamless way to build end-to-end typesafe APIs without GraphQL or code generation β€” just TypeScript.

Colin (AKA @colinhacks)

This docs have been translated into Chinese.

Table of contents


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:

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 $HOME/.fnm.

--skip-shell

Skip appending shell specific loader to shell config file, based on the current user shell, defined in $SHELL. e.g. for Bash, $HOME/.bashrc. $HOME/.zshrc for Zsh. For Fish…


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 Aslemammad / tinyspy

πŸ•΅πŸ»β€β™‚οΈ minimal fork of nanospy, with more features

tinyspy

minimal fork of nanospy, with more features πŸ•΅πŸ»β€β™‚οΈ

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.

Installing

// with npm
npm install -D tinyspy

// with pnpm
pnpm install -D tinyspy

// with yarn
yarn install -D tinyspy

Usage

Warning! Does not support ESM mocking. You can use tinyspy with vitest, who performs additional transformations to make ESM mocking work.

spy

Simplest usage would be:

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

console.log(spied.called) // true
console.log(spied.callCount) // 1
console.log(spied.calls) // [['a']]
…
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 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 and import the metrics from there:

import { createStyleObject } from '@capsizecss/core';
import
…
Enter fullscreen mode Exit fullscreen mode

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

verdaccio logo

verdaccio gif

Version 6 (Development branch)

Looking for Verdaccio 5? Check branch 5.x.

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

Twitter followers Github

Install

Latest Node.js v14

Install with npm:

npm install --global verdaccio@6-next
Enter fullscreen mode Exit fullscreen mode

or

docker pull verdaccio/verdaccio:nightly-master
Enter fullscreen mode Exit fullscreen mode

Donations

Verdaccio is run by volunteers; nobody is working full-time on it. If you find this project to be useful and would like to support its development, consider making a donation - your logo might end up in this readme. πŸ˜‰

Donate πŸ’΅πŸ‘πŸ» starting…


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.

Discussion (1)

Collapse
razorcell profile image
razorcell

Thanks for sharing!