DEV Community

Iain Freestone
Iain Freestone

Posted on

πŸš€10 Trending projects on GitHub for web developers - 4th February 2022

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

1. Netlify CMS

A content management system (CMS) for static site generators. Give users a simple way to edit and add content to any site built with a static site generator.

GitHub logo netlify / netlify-cms

A Git-based CMS for Static Site Generators

Netlify CMS

GitHub license Netlify Status npm version Build Status FOSSA Status PRs Welcome

netlifycms.org

A CMS for static site generators. Give users a simple way to edit and add content to any site built with a static site generator.

Community Chat

Join us on Slack

How It Works

Netlify CMS is a single-page app that you pull into the /admin part of your site.

It presents a clean UI for editing content stored in a Git repository.

You setup a YAML config to describe the content model of your site, and typically tweak the main layout of the CMS a bit to fit your own site.

When a user navigates to /admin/ they'll be prompted to log in, and once authenticated they'll be able to create new content or edit existing content.

Read more about Netlify CMS Core Concepts.

Installation and Configuration

The Netlify CMS can be used in two different ways.

  • A Quick and easy install, that requires you to create a single HTML file…

2. WebGoat

WebGoat is a deliberately insecure web application maintained by OWASP designed to teach web application security lessons.

GitHub logo WebGoat / WebGoat

WebGoat is a deliberately insecure application

WebGoat 8: A deliberately insecure Web Application

Pull request build java-jdk OWASP Labs GitHub release Gitter Discussions

Introduction

WebGoat is a deliberately insecure web application maintained by OWASP designed to teach web application security lessons.

This program is a demonstration of common server-side application flaws. The exercises are intended to be used by people to learn about application security and penetration testing techniques.

WARNING 1: While running this program your machine will be extremely vulnerable to attack. You should disconnect from the Internet while using this program. WebGoat's default configuration binds to localhost to minimize the exposure.

WARNING 2: This program is for educational purposes only. If you attempt these techniques without authorization, you are very likely to get caught. If you are caught engaging in unauthorized hacking, most companies will fire you Claiming that you were doing security research will not work as that is the first thing that all hackers claim.

Installation instructions:

For more details check the…


3. Speedy.js

Speedy.js is a compiler for a well considered, performance pitfalls free subset of JavaScript targeting WebAssembly. Because WebAssembly is statically-typed, the project uses TypeScript as type-checker and to resolve the types of the program symbols.

GitHub logo MichaReiser / speedy.js

Accelerate JavaScript Applications by Compiling to WebAssembly

Speedy.js

npm version Build Status Code Climate

Speedy.js is a compiler for a well considered, performance pitfalls free subset of JavaScript targeting WebAssembly. Because WebAssembly is statically-typed, the project uses TypeScript as type-checker and to resolve the types of the program symbols.

The project is very experimental and still far away from being production ready.

Getting Started

Setup LLVM

First, you need an LLVM installation that includes the experimental WebAssembly target. You can test if your LLVM installation includes the WebAssembly backend by running

llvm-config --targets-built
Enter fullscreen mode Exit fullscreen mode

If the output contains the word WebAssembly you are good to go (continue with Install Cross Compiler). If not, then you have to build LLVM from source by following these instructions.

After LLVM has been built and is installed, set the path to the llvm-config executable (it is located in the installation directory) using npm config set or an .npmrc file in your project:

npm config set LLVM_CONFIG
…
Enter fullscreen mode Exit fullscreen mode

4. soketi

soketi is your simple, fast, and resilient open-source WebSockets server.

GitHub logo soketi / soketi

Just another simple, fast, and resilient open-source WebSockets server. πŸ“£

soketi

CI codecov Latest Stable Version Total Downloads License

Artifact Hub

soketi is your simple, fast, and resilient open-source WebSockets server. πŸ“£

Blazing fast speed ⚑

The server is built on top of uWebSockets.js - a C application ported to Node.js. uWebSockets.js is demonstrated to perform at levels 8.5x that of Fastify and at least 10x that of Socket.IO. (source)

Cheaper than most competitors πŸ€‘

Compared with Pusher, you can achieve much more for one-third of the price. For a $49 plan on Pusher, you get a limited amount of connections (500) and messages (30M). With soketi, for ~ $15, you get virtually unlimited connections, messages, and some more!

This is because you pay only for your infrastructure. Whether it's your basement server or cloud, it fits and runs. You can also get free $100 on Vultr to try out soketi β†’

Easy to use πŸ‘Ά

Whether you run your infrastructure in containers or monoliths, soketi got…


5. unimported

unimported analyzes your code by following the require/import statements starting from your entry file. The result is a report showing which files are unimported, which dependencies are missing from your package.json, and which dependencies can be removed from your package.json.

GitHub logo smeijer / unimported

Find and fix dangling files and unused dependencies in your JavaScript projects.

unimported

Find unused source files in javascript / typescript projects.

screenshot of unimported results

While adding new code to our projects, we might forget to remove the old code. Linters warn us for unused code in a module, but they fail to report unused files.

unimported analyzes your code by following the require/import statements starting from your entry file.

The result is a report showing which files are unimported, which dependencies are missing from your package.json, and which dependencies can be removed from your package.json.

Usage

Run the following command in the root of your project (next to package.json). The result will be as shown under example

npx unimported
Enter fullscreen mode Exit fullscreen mode

When running unimported from a directory that doesn't contain a package.json, it will run from the first parent directory that does. To override this behavior, and run from an alternative work directory, use the [cwd] positional argument:

npx unimported ~/dev/leaflet-geosearch

By…


6. react-responsive

CSS media queries in react - for responsive design, and more.

GitHub logo yocontra / react-responsive

CSS media queries in react - for responsive design, and more.

react-responsive NPM version Downloads

Information

Package react-responsive
Description Media queries in react for responsive design
Browser Version >= IE6*
Demo

The best supported, easiest to use react media query module.

Install

$ npm install react-responsive --save
Enter fullscreen mode Exit fullscreen mode

Example Usage

With Hooks

Hooks is a new feature available in 8.0.0!

import React from 'react'
import { useMediaQuery } from 'react-responsive'
const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return <div>
    <h1>Device Test!</h1>
    {isDesktopOrLaptop && <p>You are a desktop or laptop</p
…
Enter fullscreen mode Exit fullscreen mode

7. diff2html

diff2html generates pretty HTML diffs from git diff or unified diff output.

GitHub logo rtfpessoa / diff2html

Pretty diff to html javascript library (diff2html)

diff2html

Codacy Quality Badge Codacy Coverage Badge CircleCI

npm Dependency Status devDependency Status jsdelivr CDN Downloads

node npm npm All Contributors Gitter

diff2html generates pretty HTML diffs from git diff or unified diff output.

NPM

Table of Contents

Features

  • Supports git and unified diffs

  • Line by line and Side by side diff

  • New and old line numbers

  • Inserted and removed lines

  • GitHub like visual style

  • Code syntax highlight

  • Line similarity matching

  • Easy code selection

Online Example

Go to diff2html

Distributions


8. hyperid

Uber-fast unique id generation, for Node.js and the browser

GitHub logo mcollina / hyperid

Uber-fast unique id generation, for Node.js and the browser

hyperid

Build Status

Uber-fast unique id generation, for Node.js and the browser Here are the benchmarks:

crypto.randomUUID x 17,421,022 ops/sec Β±1.05% (92 runs sampled)
hashids process.hrtime x 381,775 ops/sec Β±0.22% (95 runs sampled)
hashids counter x 730,949 ops/sec Β±0.23% (97 runs sampled)
shortid x 34,682 ops/sec Β±3.82% (83 runs sampled)
crypto.random x 313,547 ops/sec Β±2.88% (82 runs sampled)
nid x 1,365,624 ops/sec Β±0.07% (96 runs sampled)
uuid.v4 x 1,313,028 ops/sec Β±0.10% (97 runs sampled)
napiRsUuid.v4 x 536,390 ops/sec Β±0.20% (96 runs sampled)
uuid.v1 x 1,999,272 ops/sec Β±0.09% (98 runs sampled)
nanoid x 3,808,014 ops/sec Β±0.33% (95 runs sampled)
hyperid - variable length x 20,197,843 ops/sec Β±0.74% (94 runs sampled)
hyperid - fixed length x 18,894,869 ops/sec Β±0.12% (95 runs sampled)
hyperid - fixed length, url safe x 20,158,778 ops/sec Β±0.54% (94 runs sampled)

Note: Benchmark run with Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz and Node.js v16.3.0

As you can see the native…


9. react-collapse

Component-wrapper for collapse animation with CSS for elements with variable and dynamic height

GitHub logo kunukn / react-collapse

Component-wrapper for collapse animation with CSS for elements with variable and dynamic height

react-collapse

Collapse component with CSS transition for elements with variable and dynamic height.

npm version npm downloads gzip license

react-collapse

logo

Demo

CSS required

⚠️ ️You need to add style (transition) in your own stylesheet to add animation. Here is an example.

<style>
  .collapse-css-transition {
    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1)
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Alternatively you can add it using the transition prop.

Installation for React 16.8+

UMD minified 3.8kb, gzipped 1.7kb

npm i @kunukn/react-collapse
# or
# yarn add @kunukn/react-collapse
Enter fullscreen mode Exit fullscreen mode

Installation for React 16.3+

UMD minified 5.8kb, gzipped 2.1kb

npm i @kunukn/react-collapse@^1
# or
# yarn add @kunukn/react-collapse@^1
Enter fullscreen mode Exit fullscreen mode
import Collapse from "@kunukn/react-collapse";
// or with require syntax
// const Collapse = require("@kunukn/react-collapse");
const MyComponent = () => (
  <Collapse
…
Enter fullscreen mode Exit fullscreen mode

10. knex.js

A query builder for PostgreSQL, MySQL, CockroachDB, SQL Server, SQLite3 and Oracle, designed to be flexible, portable, and fun to use.

GitHub logo knex / knex

A query builder for PostgreSQL, MySQL, CockroachDB, SQL Server, SQLite3 and Oracle, designed to be flexible, portable, and fun to use.

knex.js

npm version npm downloads Coverage Status Dependencies Status Gitter chat Language Grade: JavaScript

A SQL query builder that is flexible, portable, and fun to use!

A batteries-included, multi-dialect (PostgreSQL, MySQL, CockroachDB, MSSQL, SQLite3, Oracle (including Oracle Wallet Authentication)) query builder for Node.js, featuring:

Node.js versions 12+ are supported.

You can report bugs and discuss features on the GitHub issues page or send tweets to @kibertoad.

For support and questions, join our Gitter channel.

For knex-based Object Relational Mapper, see:

To see the SQL that Knex will generate for a given query, you can use Knex Query…


Stargazing πŸ“ˆ

Top risers over last 7 daysπŸ”—

  1. CS Video courses +2,964 stars
  2. NextUI +2,280 stars
  3. LinkedIn Skills Assessements +1,237 stars
  4. Public APIS +780 stars
  5. Coding Interview University +768 stars

Top growth(%) over last 7 daysπŸ”—

  1. NextUI +111%
  2. clay.css +18%
  3. LinkedIn Skills Assessements +16%
  4. React Sticky Box +14%
  5. Learn web3 dapp +12%

Top risers over last 30 daysπŸ”—

  1. Public APIs +5,703
  2. Awesome +4,158 stars
  3. Tauri +4,012 stars stars
  4. 30 Days of JavaScript +3,646 stars
  5. Coding Interview University +3,587 stars

Top growth(%) over last 30 daysπŸ”—

  1. NextUI +324%
  2. Iconoir +136%
  3. Fuite +64%
  4. Amplify UI +61%
  5. Learn web3 dapp +48%

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