DEV Community

Iain Freestone
Iain Freestone

Posted on • Edited on

🚀10 Trending projects on GitHub for web developers - 11th February 2022

#javascript #react #webdev #productivity

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

1. njt

njt (npm jump to): a quick navigation tool for npm packages

GitHub logo kachkaev / njt

njt (npm jump to): a quick navigation tool for npm packages

🐸 njt 🐸

🐸 npm jump to 🐸
njt.vercel.app

Do you type package names in your search engine and then navigate to their source, homepage, changelog and so on? 🕐🕑🕒🕓🕔

Save five seconds thousands of times by quickly jumping to the right URL:

🐸✨🐸✨🐸
njt <package> [destination]
🐸✨🐸✨🐸
Enter fullscreen mode Exit fullscreen mode

Available destinations

  • b → package cost estimation on bundlephobia.com
  • c → changelog
  • g → github (gitlab, etc.) repository root
  • h → homepage (aliased as w for website or d for docs)
  • i → issues
  • n → package info on npmjs.com
  • p → pull requests (aliased as m for merge requests)
  • r → list of github releases
  • s → source (often same as repository root, but can be its subdirectory in case of a monorepo)
  • t → list of git tags
  • u → package contents preview on unpkg.com
  • v → list of package versions with dates on npmjs.com
  • y → package page on…
View on GitHub

2. zx

A tool for writing better scripts. Bash is great, but when it comes to writing scripts. JavaScript is a perfect choice, but standard Node.js library requires additional hassle before using. The zx package provides useful wrappers around child_process, escapes arguments and gives sensible defaults.

GitHub logo google / zx

A tool for writing better scripts

Zx logo zx

#!/usr/bin/env zx

await $`cat package.json | grep name`

const branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo 1`,
  $`sleep 2; echo 2`,
  $`sleep 3; echo 3`,
])

const name = 'foo bar'
await $`mkdir /tmp/${name}`
Enter fullscreen mode Exit fullscreen mode

Bash is great, but when it comes to writing more complex scripts, many people prefer a more convenient programming language. JavaScript is a perfect choice, but the Node.js standard library requires additional hassle before using. The zx package provides useful wrappers around child_process, escapes arguments and gives sensible defaults.

Install

npm install zx
Enter fullscreen mode Exit fullscreen mode

Documentation

Read documentation on google.github.io/zx.

License

Apache-2.0

Disclaimer: This is not an officially supported Google product.

View on GitHub

3. React Awesome Reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations

GitHub logo awesome-reveal / react-awesome-reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations.

React Awesome Reveal

Version Last Commit Downloads Size License Rate on Openbase

Tip

If you like this library, please consider supporting its creator.

React Awesome Reveal is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Animations are internally provided by Emotion and implemented as CSS Animations to benefit from hardware acceleration.

Table Of Contents

Features

  • 🎁 Modern stack – It is built for modern React and supports React 18
  • 🏷 TypeScript support – It is written in TypeScript to improve the DX
  • 🍃 Lightweight – Very little footprint on your project
  • ⚙️ Uses native APIs – Intersection Observer and CSS Animations are now supported by all browsers
  • 🚀 Fast – Buttery smooth experience thanks to the use…


View on GitHub


4. Mailwind

Use Tailwind CSS to design HTML emails.

GitHub logo soheilpro / mailwind

Use Tailwind CSS to design HTML emails.

Mailwind

Use Tailwind CSS to design HTML emails.

Tailwind makes it very easy to design websites, why not use it to design HTML emails? I've been using this for volt.fm and pikaso.me and it has made my life a lot easier.

Install

npm install -g mailwind

Usage

Design your HTML email using the Tailwind utility classes like you normally would for the web.

Then run the following command to generate the corresponding CSS file:

mailwind --input-html email.html --output-css style.css

Or run this command to generate an inlined HTML file:

mailwind --input-html email.html --output-html email-inlined.html

Options

--input-css

The path to your base CSS file. Use this if you need to write custom CSS. Defaults to style.css.

--input-html

The path to your HTML email file.

--output-css

The path to the CSS file that will be generated.

--output-html

The path to the inlined HTML file that will be generated.

--tailwind-config

The path…

View on GitHub

5. Staticman

Staticman is a Node.js application that receives user-generated content and uploads it as data files to a GitHub and/or GitLab repository. In practice, this allows you to have dynamic content (e.g. blog post comments) as part of a fully static website.

GitHub logo eduardoboucas / staticman

💪 User-generated content for Git-powered websites

Staticman coverage Build Status JavaScript Style Guide

Static sites with superpowers

Introduction

Staticman is a Node.js application that receives user-generated content and uploads it as data files to a GitHub and/or GitLab repository. In practice, this allows you to have dynamic content (e.g. blog post comments) as part of a fully static website, as long as your site automatically deploys on every push to GitHub and/or GitLab, as seen on GitHub Pages, GitLab Pages, Netlify and others.

It consists of a small web service that handles the POST requests from your forms, runs various forms of validation and manipulation defined by you and finally pushes them to your repository as data files. You can choose to enable moderation, which means files will be pushed to a separate branch and a pull request will be created for your approval, or disable it completely, meaning that files will be pushed to the main branch automatically.

You…

View on GitHub

6. react-spring-bottom-sheet

react-spring-bottom-sheet is built on top of react-spring and react-use-gesture. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs.

GitHub logo stipsan / react-spring-bottom-sheet

Accessible ♿️, Delightful ✨, & Fast 🚀

npm stat npm version gzip size size module formats: cjs, es, and modern

Logo with the text Accessible, Delightful and Performant

react-spring-bottom-sheet is built on top of react-spring and react-use-gesture. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs. Every animation and transition use CSS custom properties instead of manipulating them directly, allowing complete control over the experience from CSS alone.

Installation

npm i react-spring-bottom-sheet
Enter fullscreen mode Exit fullscreen mode

Getting started

Basic usage

import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'
// if setting up the CSS is tricky, you can add this to your page somewhere:
// <link rel="stylesheet" href="https://unpkg.com/react-spring-bottom-sheet/dist/style.css" crossorigin="anonymous">
import 'react-spring-bottom-sheet/dist/style.css'

export default function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <BottomSheet open={open}>My awesome
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

7. React Search Box

An autocomplete search box built with and for React.

GitHub logo ghoshnirmalya / react-search-box

🎨 An autocomplete search box built with and for React

react search box

npm bundle size NPM npm npm Edit on Codesandbox

Installation

# npm
npm i react-search-box --save
# yarn
yarn add react-search-box
Enter fullscreen mode Exit fullscreen mode

Usage

import React, { Component } from "react";
import ReactSearchBox from "react-search-box";

export default class App extends Component {
  data = [
    {
      key: "john",
      value: "John Doe",
    },
    {
      key: "jane",
      value: "Jane Doe",
    },
    {
      key: "mary",
      value: "Mary Phillips",
    },
    {
      key: "robert",
      value: "Robert",
    },
    {
      key: "karius",
      value: "Karius",
    },
  ];

  render() {
    return (
      <ReactSearchBox
        placeholder="Placeholder"
        value="Doe"
        data={this.data}
        callback={(record) => console.log(record)}
      />
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Props

Prop Description
placeholder The placeholder text for the input box
data
…
View on GitHub

8. match-sorter

Simple, expected, and deterministic best-match sorting of an array in JavaScript

GitHub logo kentcdodds / match-sorter

Simple, expected, and deterministic best-match sorting of an array in JavaScript

match-sorter

Simple, expected, and deterministic best-match sorting of an array in JavaScript

Demo

Build Status Code Coverage version downloads MIT License All Contributors PRs Welcome Code of Conduct Examples

The problem

  1. You have a list of dozens, hundreds, or thousands of items
  2. You want to filter and sort those items intelligently (maybe you have a filter input for the user)
  3. You want simple, expected, and deterministic sorting of the items (no fancy math algorithm that fancily changes the sorting as they type)

This solution

This follows a simple and sensible (user friendly) algorithm that makes it easy for you to filter and sort a list of items based on given input. Items are ranked based on sensible criteria that result in a better user experience.

To explain the ranking system, I'll use countries as an example:

  1. CASE SENSITIVE EQUALS: Case-sensitive equality trumps all. These will be first. (ex. France would match France, but not france)
  2. EQUALS: Case-insensitive equality (ex. France would match…
View on GitHub

9. find-up

Find a file or directory by walking up parent directories

GitHub logo sindresorhus / find-up

Find a file or directory by walking up parent directories

find-up

Find a file or directory by walking up parent directories

Install

npm install find-up
Enter fullscreen mode Exit fullscreen mode

Usage

/
└── Users
    └── sindresorhus
        ├── unicorn.png
        └── foo
            └── bar
                ├── baz
                └── example.js

example.js

import path from 'node:path';
import {findUp, pathExists} from 'find-up';

console.log(await findUp('unicorn.png'));
//=> '/Users/sindresorhus/unicorn.png'

console.log(await findUp(['rainbow.png', 'unicorn.png']));
//=> '/Users/sindresorhus/unicorn.png'

console.log(await findUp(async directory => {
    const hasUnicorns = await pathExists(path.join(directory, 'unicorn.png'));
    return hasUnicorns && directory;
}, {type: 'directory'}));
//=> '/Users/sindresorhus'
Enter fullscreen mode Exit fullscreen mode

API

findUp(name, options?)

findUp(matcher, options?)

Returns a Promise for either the path or undefined if it could not be found.

findUp([...name], options?)

Returns a Promise for either the first path…

View on GitHub

10. mande

600 bytes convenient and modern wrapper around fetch with smart extensible defaults

GitHub logo posva / mande

<700 bytes convenient and modern wrapper around fetch with smart extensible defaults

mande ci npm package codecov thanks

Simple, light and extensible wrapper around fetch with smart defaults

Requires fetch support.

mande has better defaults to communicate with APIs using fetch, so instead of writing:

// creating a new user
fetch('/api/users', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Dio',
    password: 'irejectmyhumanityjojo',
  }),
})
  .then((response) => {
    if (response.status >= 200 && response.status < 300) {
      return response.json()
    }
    // reject if the response is not 2xx
    throw new Error(response.statusText)
  })
  .then((user) => {
    // ...
  })
Enter fullscreen mode Exit fullscreen mode

You can write:

const users = mande('/api/users')
users
  .post(
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

  1. Coding Interview University +2,026 stars
  2. Build your own X +1,285 stars
  3. Medusa +1,147 stars
  4. 30 Days of JavaScript +1,132 stars
  5. Awesome +1,111 stars

Top growth(%) over last 7 days🔗

  1. Medusa +18%
  2. VSCode Front Matter +14%
  3. Basic Computer Games +10%
  4. NextUI +10%
  5. spcss +9%

Top risers over last 30 days🔗

  1. Public APIs +5,786
  2. Coding Interview University +5,521 stars
  3. Awesome +4,464 stars
  4. NextUI +3,812 stars
  5. Tauri +3,319 stars stars

Top growth(%) over last 30 days🔗

  1. NextUI +363%
  2. Learn web3 Dapp +47%
  3. Mantine +42%
  4. p +39%
  5. Remix Auth +38%

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

Collapse
 
cgatian profile image
Chaz Gatian •

The link for the match-sorter is referencing a forked repository, which I think is incorrect.

Collapse
 
iainfreestone profile image
Iain Freestone •

Good spot, thank you. I have corrected in the list

Read next

anticoder03 profile image

Day 4: Enhancing UX with a Custom Cursor Using GSAP 🚀🎨

Ashish prajapati -

holawagtail_3398ffb6acec6 profile image

¡Hola Wagtail!

HolaWagtail -

jamcha123 profile image

My first full stack app

james -

ramya_srim profile image

Closures in JS🤯

Ramya Sri M -