🚀10 Trending projects on GitHub for web developers - 4th June 2021

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

1. SigNoz

Monitor your applications and troubleshoot problems in your deployed applications, an open-source alternative to DataDog, New Relic, etc

SigNoz / signoz

SigNoz is an open-source observability platform native to OpenTelemetry with logs, traces and metrics in a single application. An open-source alternative to DataDog, NewRelic, etc. 🔥 🖥. 👉 Open source Application Performance Monitoring (APM) & Observability tool

Monitor your applications and troubleshoot problems in your deployed applications, an open-source alternative to DataDog, New Relic, etc.

Documentation • ReadMe in Chinese • ReadMe in German • ReadMe in Portuguese • Slack Community • Twitter

SigNoz helps developers monitor applications and troubleshoot problems in their deployed applications. With SigNoz, you can:

👉 Visualise Metrics, Traces and Logs in a single pane of glass

👉 You can see metrics like p99 latency, error rates for your services, external API calls and individual end points.

👉 You can find the root cause of the problem by going to the exact traces which are causing the problem and see detailed flamegraphs of individual request traces.

👉 Run aggregates on trace data to get business relevant metrics

👉 Filter and query logs, build dashboards and alerts based on attributes in logs

👉 Record exceptions automatically in Python, Java, Ruby, and Javascript

👉 Easy…

View on GitHub

---

2. AWS SDK for JavaScript v3

Modularized AWS SDK for JavaScript. A separate package for each service. It also includes many frequently requested features, such as a first-class TypeScript support and a new middleware stack.

aws / aws-sdk-js-v3

Modularized AWS SDK for JavaScript.

AWS SDK for JavaScript v3

The AWS SDK for JavaScript v3 is a rewrite of v2 with some great new features As with version 2, it enables you to easily work with Amazon Web Services but has a modular architecture with a separate package for each service. It also includes many frequently requested features, such as a first-class TypeScript support and a new middleware stack. For more details, visit blog post on general availability of Modular AWS SDK for JavaScript.

To get started with JavaScript SDK version 3, visit our Developer Guide or API Reference.

If you are starting a new project with AWS SDK for JavaScript v3, then you can refer aws-sdk-js-notes-app which shows examples of calling multiple AWS Services in a note taking application If you are migrating from v2 to v3, then you can visit our self-guided workshop which builds as basic version…

View on GitHub

---

3. Html5-QRCode

A cross platform HTML5 QR code reader

mebjas / html5-qrcode

A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org

Html5-QRCode

Important - Looking for new owners for this project.

If interested, please reach out at [e-mail].

Html5-QRCode

Important The project is in maintenance mode until further notice. The author shall not be able to make any bug fixes or improvements for the time-being. Pull requests also won't be merged for the timebeing. If you have a fork you can maintain - please share the details to [e-mail]. I am happy to advertise them here! Ok to use the project as is. Example: scanapp.org.

Lightweight & cross platform QR Code and Bar code scanning library for the web

Use this lightweight library to easily / quickly integrate QR code, bar code, and other common code scanning capabilities to your web application.

Key highlights

• 🔲 Support scanning different types of bar codes and QR codes.

• 🖥 Supports different platforms be it Android, IOS, MacOs, Windows or Linux

• …

View on GitHub

---

4. Peacock for Visual Studio Code

Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor

johnpapa / vscode-peacock

Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

Peacock for Visual Studio Code

Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

Read the extensive documentation here which includes a guide on how to use Peacock and a changelog

Install

1. Open Extensions sideBar panel in Visual Studio Code and choose the menu options for View → Extensions
2. Search for Peacock
3. Click Install
4. Click Reload, if required

Documentation

Read the extensive documentation here which includes a guide on how to use Peacock and a changelog

Quick Usage

Let's see Peacock in action!

1. Create/Open a VSCode Workspace (Peacock only works in a Workspace)
2. Press F1 to open the command palette
3. Type Peacock
4. Choose Peacock: Change to a favorite color
5. Choose one of the pre-defined colors and see how it changes…

View on GitHub

---

5. dnd kit

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

• Feature packed: customizable collision detection algorithms, multiple activators, draggable overlay, drag handles, auto-scrolling, constraints, and so much more.
• Built for React: exposes hooks such as useDraggable and useDroppable. and won't force you to re-architect your app or create additional wrapper DOM nodes.
• Supports a wide range of use cases: lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, 2D Games, and more.
• Zero dependencies and modular: the core of the library weighs around 10kb minified and has no external dependencies. It's built around built-in React state management and context, which keeps the library lean.
• Built-in support for multiple input methods: Pointer, mouse, touch and keyboard sensors.
• Fully customizable & extensible: Customize every detail: animations, transitions, behaviours, styles. Build your own sensors, collision detection algorithms, customize key bindings and so much more.
• Accessibility: Keyboard support, sensible default aria attributes, customizable screen reader instructions and live regions built-in.
• Performance:…

View on GitHub

---

6. Microbundle

Zero-configuration bundler for tiny modules.

developit / microbundle

📦 Zero-configuration bundler for tiny modules.

Microbundle

The zero-configuration bundler for tiny modules, powered by Rollup.

---

Guide → Setup ✯ Formats ✯ Modern Mode ✯ Usage & Configuration ✯ All Options

---

✨ Features

• One dependency to bundle your library using only a package.json
• Support for ESnext & async/await (via Babel & async-to-promises)
• Produces tiny, optimized code for all inputs
• Supports multiple entry modules (cli.js + index.js, etc)
• Creates multiple output formats for each entry (CJS, UMD & ESM)
• 0 configuration TypeScript support
• Built-in Terser compression & gzipped bundle size tracking

🔧 Installation & Setup

1️⃣ Install by running: npm i -D microbundle

2️⃣ Set up your package.json:

{
  "name": "foo",                      // your package name
  "type": "module",
  "source": "src/foo.js",             // your source code
  "exports": {
    "require": "./dist/foo.cjs",      // used for require() in Node 12+
    "default": "./dist/foo.modern.js" // where to generate the

…

View on GitHub

---

7. NocoDB

The Open Source Airtable alternative. Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet.

nocodb / nocodb

🔥 🔥 🔥 Open Source Airtable Alternative

NocoDB

The Open Source Airtable Alternative

NocoDB is the fastest and easiest way to build databases online

Website • Discord • Community • Twitter • Reddit • Documentation

See other languages »

Join Our Community

Installation

Docker with SQLite

docker run -d --name noco 
           -v "$(pwd)"/nocodb:/usr/app/data/ 
           -p 8080:8080 
           nocodb/nocodb:latest

Docker with PG

docker run -d --name noco 
           -v "$(pwd)"/nocodb:/usr/app/data/ 
           -p 8080:8080 
            # replace with your pg connection string
           -e NC_DB="pg://host.docker.internal:5432?u=root&p=password&d=d1" 
           # replace with a random secret
           -e NC_AUTH_JWT_SECRET="569a1821-0a93-45e8-87ab-eb857f20a010"  
           nocodb/nocodb:latest

Auto-upstall

Auto-upstall is a single command that sets up NocoDB on a server for production usage. Behind the scenes it auto-generates docker-compose for you.

bash <(curl -sSL http://install.nocodb.com/noco.sh) <(mktemp)

Auto-upstall does the following : 🕊

• 🐳 Automatically installs all pre-requisites like docker, docker-compose
• 🚀 Automatically installs NocoDB with PostgreSQL, Redis, Minio…

View on GitHub

---

8. Vitro

Build and showcase your react components in isolation. Vitro is a storybook alternative that builds 20x faster

remorses / vitro

Build and showcase your react components in isolation

Build and showcase your react components in isolation

project under heavy development

Vitro is a storybook alternative that builds 20x faster

It is built on top of esbuild (thanks to bundless)

You can read more on the website

View on GitHub

---

9. Boring Avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

boringdesigners / boring-avatars

Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette.

Boring avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette

Install

npm install boring-avatars

Usage

import Avatar from 'boring-avatars';

<Avatar name="Maria Mitchell" />;

Props

Prop	Type	Default
size	number or string	40px
square	boolean	false
title	boolean	false
name	string	Clara Barton
variant	oneOf: marble, beam, pixel,sunset, ring, bauhaus	marble
colors	array	['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']

Name

The name prop is used to generate the avatar. It can be the username, email or any random string.

<Avatar name="Maria Mitchell"/>

Variant

The variant prop is used to change the theme of the avatar. The available variants are: marble, beam, pixel, sunset, ring and bauhaus.

<Avatar name="Alice Paul" variant="beam"/>

Size

The…

View on GitHub

---

10. simple-git-hooks

A simple git hooks manager for small projects

toplenboren / simple-git-hooks

A simple git hooks manager for small projects

simple-git-hooks

A tool that lets you easily manage git hooks

The package was recently renamed from simple-pre-commit.

See Releases for the simple-pre-commit documentation and changelog

• Zero dependency

• Small configuration (1 object in package.json)

• Lightweight:

  Package	Unpacked size	With deps
  husky v4 4.3.8	53.5 kB	~1 mB
  husky v8 8.0.3	6.44 kB	6.44 kB
  pre-commit 1.2.2	~80 kB	~850 kB
  simple-git-hooks 2.11.0	10.9 kB	10.9 kB

Who uses simple-git-hooks?

• Autoprefixer
• PostCSS
• Browserslist
• Nano ID
• Size Limit
• Storeon
• Directus
• Vercel/pkg
• More, see full list

What is a git hook?

A git hook is a command or script that is going to be run every time you perform a git action, like git commit or git push.

If the execution of a git hook fails, then the git action aborts.

For example, if you want to run linter on every commit to ensure code quality in your project, then you can…

View on GitHub

---

Stargazing 📈

Top risers over last 7 days

1. Coding Interview University +2,958 stars
2. Free Programming Books +1,496 stars
3. Web Development for Beginners +905 stars
4. Slidev +751 stars
5. JavaScript Algorithms +691 stars

Top growth(%) over last 7 days

1. daisyUI +20%
2. CandyGraph +15%
3. react-img-carousel +14%
4. Fig +13%
5. Vuestic UI +12%

Top risers over last 30 days

1. Coding Interview University +8,048 stars
2. Public APIs +5,202 stars
3. Free Programming Books +4,336 stars
4. Web Development for Beginners +3,773 stars
5. Developer Roadmap +3,509 stars

Top growth(%) over last 30 days

1. useStateMachine +530%
2. Fig +181%
3. github-elements +94%
4. react-icon-blur +83%
5. WinBox +70%

---

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.