DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 16th April 2021

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

1. utility-types

Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).

GitHub logo piotrwitek / utility-types

Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).

utility-types

Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).

Latest Stable Version NPM Downloads NPM Downloads Bundlephobia Size

CI Check License Join the community on Spectrum

Found it useful? Want more updates?

Show your support by giving a ⭐

Buy Me a Coffee Become a Patron

What's new?

🎉 Added new utilities 🎉



Features

Goals

  • Quality - thoroughly tested for type correctness with type-testing library dts-jest
  • Secure and minimal - no third-party dependencies
  • No runtime cost - it's type-level only

Installation

# NPM
npm install utility-types

# YARN
yarn add utility-types
Enter fullscreen mode Exit fullscreen mode

Compatibility Notes

TypeScript support

  • v3.x.x - TypeScript v3.1+
  • v2.x.x - TypeScript v2.8.1+
  • v1.x.x - TypeScript v2.7.2+

Funding Issues

Utility-Types is an open-source project created by people investing…


2. active-win

Get metadata about the active window - title, id, bounds, owner, etc

GitHub logo sindresorhus / get-windows

Get metadata about the active window and open windows (title, id, bounds, owner, etc)

get-windows

Get metadata about the active window and open windows (title, id, bounds, owner, URL, etc)

Works on macOS 10.14+, Linux (note), and Windows 7+.

Install

npm install get-windows

This is an ESM package which requires you to use ESM

Usage

import {activeWindow} from 'get-windows';

console.log(await activeWindow(options));
/*
{
    title: 'Unicorns - Google Search',
    id: 5762,
    bounds: {
        x: 0,
        y: 0,
        height: 900,
        width: 1440
    },
    owner: {
        name: 'Google Chrome',
        processId: 310,
        bundleId: 'com.google.Chrome',
        path: '/Applications/Google Chrome.app'
    },
    url: 'https://sindresorhus.com/unicorn',
    memoryUsage: 11015432
}
*/

API

activeWindow(options?)

Get metadata about the active window.

options

Type: object

accessibilityPermission (macOS only)

Type: boolean
Default: true

Enable the accessibility permission check. Setting this to false will prevent the accessibility permission prompt on macOS versions 10.15 and newer. The url property won't be retrieved.

screenRecordingPermission (macOS only)

Type: boolean
Default: true

Enable the screen recording permission check. Setting this to false


3. Cheetah Grid

The fastest open-source data table for web.

GitHub logo future-architect / cheetah-grid

The fastest open-source data table for web.

Cheetah Grid

GitHub npm npm npm npm npm Build Status

Cheetah Grid

The fastest open-source data table for web.

capture.png

DEMO & Documents

Downloading Cheetah Grid

Using Cheetah Grid with a CDN

npm

<script src="https://unpkg.com/cheetah-grid@1.15"></script>
Enter fullscreen mode Exit fullscreen mode

Downloading Cheetah Grid using npm

npm

npm install -S cheetah-grid
Enter fullscreen mode Exit fullscreen mode
import * as cheetahGrid from "cheetah-grid";

// or

const cheetahGrid = require("cheetah-grid");
Enter fullscreen mode Exit fullscreen mode

Downloading Cheetah Grid source code

npm

cheetahGrid.es5.min.js

SourceMap
cheetahGrid.es5.min.js.map

Downloading Cheetah Grid using GitHub

GitHub package version

git clone

git clone https://github.com/future-architect/cheetah-grid.git
Enter fullscreen mode Exit fullscreen mode

npm install & build

npm install
npm run build
Enter fullscreen mode Exit fullscreen mode

built file is created in the ./packages/cheetah-grid/dist directory

Usage

Example for basic usage

<div id="sample" style="height: 300px; border: solid 1px #ddd;"></div>
<script>
  // initialize
  const grid = new cheetahGrid.ListGrid({
    // Parent element on which to place the grid
    parentElement: document.querySelector("#sample"),
    // Header
Enter fullscreen mode Exit fullscreen mode

4. Superplate

A well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, Bundle Analyzer and 30+ plugin. For now, only creates project for Next.js.

GitHub logo pankod / superplate

A well-structured production-ready frontend boilerplate with Typescript, React Testing Library, styled-component, React Query, .env, Axios, Bundle Analyzer, Prettier and 30+ plugins. superplate creates projects for React.js, Next.js, and refine. https://pankod.github.io/superplate/

superplate example



A well-structured production-ready frontend boilerplate with Typescript, React Testing Library, styled-component, React Query, .env, Axios, Bundle Analyzer, Prettier and 30+ plugins.
superplate creates ready-to-develop projects for React and Next.js and refine.

Meercode CI Score Meercode CI Success Rate Maintainability npm version npm

Created by Pankod

About

superplate lets you start rock-solid, production-ready React, Next.JS and refine projects just in seconds. The command-line interface guides the user through setup and no additional build configurations are required.

Superplate ships with +30 plugins including popular UI Kits, testing frameworks and many useful developer tools.

Quick Start

To use superplate, make sure you have npx is installed on your system (npx is shipped by default since npm 5.2.0).

To create a new app without using presets, run the following command:

npx superplate-cli my-project
Enter fullscreen mode Exit fullscreen mode

You will be prompted with plugin options to create your project. A full list of avaiable plugins is here: superplate-core-plugins.

Available Integrations

Next.js

superplate makes it easier to get…





5. React Cool Portal

React hook for Portals, which renders modals, dropdowns, tooltips etc.

GitHub logo wellyshen / react-cool-portal

😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.

REACT COOL PORTAL

This is a React hook for Portals. It helps you render children into a DOM node that exists outside the DOM hierarchy of the parent component. From now on you will never need to struggle with modals, dropdowns, tooltips etc. Check the features section out to learn more. Hope you guys 👍🏻 it.

❤️ it? ⭐️ it on GitHub or Tweet about it.

build status coverage status npm version npm downloads npm downloads gzip size All Contributors PRs welcome Twitter URL

Live Demo

demo

⚡️ Try yourself: https://react-cool-portal.netlify.app

Features


6. Lazy Git

A simple terminal UI for git commands

GitHub logo jesseduffield / lazygit

simple terminal UI for git commands

A simple terminal UI for git commands

GitHub Releases Go Report Card Codacy Badge Codacy Badge GolangCI GitHub tag homebrew

commit_and_push

Sponsors

Maintenance of this project is made possible by all the contributors and sponsors. If you'd like to sponsor this project and have your avatar or company logo appear below click here. 💙

Mark LussierDean HerbertPeter BjorklundReilly WoodOliver GüntherPawan DhananjayBartłomiej DachCarsten GehlingCEUKAkos PutzHolden LucasChau TranmatejciktheAverageDev (Luca Tumedei)Ivan ZaitsevNicholas CloudLightQuantumGabriel SaillardAliaksandr StelmachonakBurgy BenjaminJoe KlemmerTobias LütkeBen BeaumontHollyJeff ForcierMaciej T. NowakFarzad MajidfayyazYuryAndreas KurthBraden SteffaniakJordan GillardSebastianGeorge SpanosAndy SlezakMartin KockIllarion KoperskiJesse AlamaCodacyBrettJan HeijmansKevin Nowaldsem pruijsOmar Luq Nicholas MoenEthan LiBrian MacAskillMaxinbrMiguel IbarsJan ZenknerVictor AremuIgor RamazanovElliott Maguiren8n - Workflow AutomationJosh ThomasJJFrederick MorlockDarren CraineMaximilian LangenfeldNurzhanDavis BulsChris OlsenNeil LambertDavid Heinemeier HanssonMikhailMarco Aurelio Caldas MirandaEmmanuel NosakhareEthan FischerTerry TaiAdam RoesnerAndy HerdWassim MetallaouiTornike GomareliTim MorganMax ShypulniakMeshan Naidookyu08Felipe PiacsekdimaunxKovács Ádám叶博Dusan LesanIan TanMaulik KatariaChanhLyEnzo SterroThomas Feldmann

Elevator Pitch

Rant time: You've heard it before, git is powerful, but what good is that power when everything is so damn hard to do? Interactive rebasing requires you to edit a goddamn TODO file in your editor? Are you kidding me? To stage part of a file you need to use a command line program to step…





7. ts-essentials

All basic TypeScript types in one place

GitHub logo ts-essentials / ts-essentials

All essential TypeScript types in one place 🤙

ts-essentials

ts-essentials

All essential TypeScript types in one place 🤙

Version Downloads Build status Telegram Software License codechecks.io

Install

npm install --save-dev ts-essentials
Enter fullscreen mode Exit fullscreen mode

👉 We require typescript>=4.5. If you're looking for support for older TS versions, please have a look at the TypeScript dependency table

👉 As we really want types to be stricter, we require enabled strictNullChecks in your project

API

ts-essentials is a set of high-quality, useful TypeScript types that make writing type-safe code easier.

Basic


8. Awesome Captcha

Curated list of awesome captcha libraries and crack tools.

GitHub logo ZYSzys / awesome-captcha

🔑 Curated list of awesome captcha libraries and crack tools.

Awesome Captcha Awesome

Curated list of awesome captcha libraries and captcha crack tools.

CAPTCHA is a type of challenge–response test used in computing to determine whether or not the user is human.

English | 中文 | Polish

Contents

Libraries

Generation

  • captcha-api - Free, fast and reliable Captcha API POWERED BY AI
  • dchest/captcha - Go package captcha implements generation and verification of image and audio CAPTCHAs.

9. bundless

Dev server and bundler for esbuild

GitHub logo remorses / bundless

Dev server and bundler based on esbuild



bundless

Next gen dev server and bundler

this project was a Vite alternative with many improvements like plugins, monorepo support, etc, most of them were added back to Vite 2, use Vite instead


Features

  • 10x faster than traditional bundlers
  • Error panel with sourcemap support
  • jsx, typescript out of the box
  • import assets, import css

What's the difference with traditional tools like Webpack?

  • Faster dev server times and faster build speeds (thanks to esbuild)
  • Bundless serves native ES modules to the browser, removing the overhead of parsing each module before serving
  • Bundless uses a superset of esbuild plugin system to let users enrich its capabilities

What's the difference with tools like vite?

Bundless is very similar to vite, both serve native es modules to the browser and build a bundled version for production.

Also both are based on a plugin system that can be shared between the dev server and…


10. CSS Layout

A collection of popular layouts and patterns made with CSS. Now it has 90+ patterns and continues growing!

GitHub logo phuocng / csslayout

A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!

CSS Layout

As a front-end engineer, I deal with a lot of layouts and components. While there are plenty of CSS frameworks out there that provide these, I don't always want to include them all in my project.

That's why I've put together a collection of the most popular layouts and components that can be built with pure CSS.

These layouts and components are powered by modern CSS features like flexbox and grid, and can be easily customized to fit your specific needs. By combining them, you can create any possible layout you need.

The best part? This collection has zero dependencies, no frameworks, and no CSS hacks. These are real use cases that can save you time and effort in your projects.

About

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

Be my friend on





Stargazing 📈

Top risers over last 7 days

  1. JavaScript Questions +1,413 stars
  2. Headless UI +1,206 stars
  3. Public APIs +808 stars
  4. Clean Code JavaScript +761 stars
  5. Web Projects With Vanilla JavaScript +739 stars

Top risers over last 30 days

  1. Coding Interview University +6,163 stars
  2. Public APIs +4,540 stars
  3. Clone Wars +4,444 stars
  4. JavaScript Algorithms +4,047 stars
  5. Web Dev For Beginners +3,926 stars

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

If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice some interesting projects on this list.

Collapse
 
ridoansaleh profile image
Ridoan

Love this list, thanks for sharing