DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 16th April 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
Originally published at iainfreestone.com ・2 min read

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

Build Status Dependency Status 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?

πŸŽ‰ Now updated to support TypeScript v3.7 πŸŽ‰



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…


2. active-win

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

GitHub logo sindresorhus / active-win

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

active-win

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

Works on macOS, Linux, Windows.

Users on macOS 10.13 or earlier needs to download the Swift runtime support libraries.

Install

$ npm install active-win

Usage

const activeWindow = require('active-win');
(async () => {
    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
 }
 */
})();
Enter fullscreen mode Exit fullscreen mode

API

activeWindow(options?)

options

Type: object

screenRecordingPermission (macOS only)

Type: boolean
Default: true

Enable the screen recording permission check. Setting this to false will prevent the screen recording permission prompt on macOS versions 10.15 and newer. The title property in the result will…


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.0"></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 definition
    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, 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. https://pankod.github.io/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.

Meercode CI Score Meercode CI Success Rate Maintainability npm version dependencies Status dev-dependencies Status

npm


Created by Pankod

About

superplate has been developed to create rock solid UI frameworks apps boilerplate with no build configurations in seconds.

You can add usefull, highly-demands front-end development tools and libraries as a plugin by using superplate CLI during the project creation phase.

To learn on how superplate and its plugins work, you can check out our documentation.

For now, superplate only creates project for Next.js apps as a default Framework option. Other frameworks will be added soon.

Available Integrations

Coming Soon

Documentation

For more detailed information and usage, refer to the superplate documentation.

Quick Start

To create a new app run the command:

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

Make sure you have npx installed (npx is shipped…


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.

πŸ‘€ Looking for a form library? Give React Cool Form a try!

build status coverage status npm version npm downloads npm downloads npm bundle size MIT licensed 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

CI Go Report Card GolangCI GoDoc GitHub tag TODOs

A simple terminal UI for git commands, written in Go with the gocui library.

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 through each hunk and if a hunk can't be split down any further but contains code you don't want to stage, you have to edit an arcane patch file by hand? Are you KIDDING me?! Sometimes you get asked to stash your changes when switching branches only to realise that after you switch and unstash that there weren't even any conflicts and it would have been fine to just checkout the branch directly? YOU HAVE GOT TO BE…





7. ts-essentials

All basic TypeScript types in one place

GitHub logo krzkaczor / ts-essentials

All basic TypeScript types in one place πŸ€™

ts-essentials

ts-essentials

All essential TypeScript types in one place πŸ€™

Downloads Build status Software License All Contributors codechecks.io

Install

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

πŸ‘‰ We require typescript>=3.7. If you're looking for support for older TS versions use ts-essentials@3 (for 3.6>=) or ts-essentials@2 instead. If you use any functions you should add ts-essentials to your dependencies (npm install --save ts-essentials) to avoid runtime errors in production.

What's inside?

Basic

  • Primitive type matching all primitive values.
  • noop function that takes any arguments and returns nothing, as a placeholder for e.g. callbacks.

Dictionaries

keywords: map

const stringDict
…
Enter fullscreen mode Exit fullscreen mode

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

  • dchest/captcha - Go package captcha implements generation and verification of image and audio CAPTCHAs.
  • lepture/captcha - A captcha library that generates audio and image CAPTCHAs.
  • …

9. bundless

Dev server and bundler for esbuild

GitHub logo remorses / bundless

Dev server and bundler for esbuild



bundless

Next gen dev server and bundler

project under heavy development


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 the bundler.

Some differences are:

  • Bundless uses the esbuild plugin system instead of rollup
  • Bundless uses esbuild instead of rollup for the…

10. CSS Layout

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

GitHub logo phuoc-ng / csslayout

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

CSS Layout

A collection of popular layouts and patterns made with CSS:

  • πŸŽ‰Zero dependencies
  • πŸŽ‰No frameworks
  • πŸŽ‰No CSS hacks
  • πŸŽ‰Real use cases
  • Good practices (coming soon)
  • Accessibility Support (coming soon)

CSS Layout

Why

Being a front-end engineer, I have to deal with a lot of layouts and components There are a lot of CSS frameworks out there that provide popular layouts/components but I usually don't want to include all of them in my project.

So I collect most popular layouts and components that can be built with pure CSS They are powered by modern CSS features such as flexbox and grid.

They are great starting points to be picked and customized easily for each specific need By composing them, you can have any possible layout that exists in the real life.

Running it on local

  • Clone the project:
$ git clone https://github.com/phuoc-ng/csslayout
Enter fullscreen mode Exit fullscreen mode
  • Install the dependencies:
$ cd csslayout
…
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (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