DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

πŸš€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

GitHub logo SigNoz / signoz

SigNoz helps developers monitor their applications & troubleshoot problems, an open-source alternative to DataDog, NewRelic, etc. πŸ”₯ πŸ–₯. πŸ‘‰ Open source Application Performance Monitoring (APM) & Observability tool

SigNoz-logo

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

License Downloads GitHub issues tweet

Documentation β€’ ReadMe in Chinese β€’ Slack Community β€’ Twitter

SigNoz helps developers monitor applications and troubleshoot problems in their deployed applications. SigNoz uses distributed tracing to gain visibility into your software stack.

πŸ‘‰ 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

SigNoz Feature

Join our Slack community

Come say Hi to us on Slack πŸ‘‹

Features:

  • Application overview metrics like RPS, 50th/90th/99th Percentile latencies, and Error Rate
  • Slowest endpoints in your application
  • See exact request trace to figure out issues in downstream…

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.

GitHub logo aws / aws-sdk-js-v3

Modularized AWS SDK for JavaScript.

AWS SDK for JavaScript v3

Build Status codecov code style: prettier Dependabot Status

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…


3. Html5-QRCode

A cross platform HTML5 QR code reader

GitHub logo mebjas / html5-qrcode

A cross platform HTML5 QR code reader

Html5-QRCode

(supports barcodes now :))

A cross-platform HTML5 QR code & barcode reader.

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

  • Supports easy scanning using an integrated webcam or camera in smartphones (Android / IOS).

  • Supports scanning codes from files or default cameras on smartphones.

  • Recently Added Supports bar code scanning in various formats.

  • Supports two kind of APIs

    • Html5QrcodeScanner - End-to-end scanner with UI, integrate with less than ten lines of code.
    • Html5Qrcode - Powerful set of APIs you can use to build your UI without worrying about camera setup, handling permissions, reading codes, etc.

Support for scanning local files on the device is a new addition and helpful for the web browser which does not support inline web-camera access in smartphones. Note: This doesn't upload files to any server - everything is done…


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

GitHub logo 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

Peacock Icon

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

Badge for version for Visual Studio Code extension johnpapa.vscode-peacock Installs Downloads Rating Live Share

The MIT License All Contributors

Build Status

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…

5. dnd kit

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

GitHub logo clauderic / dnd-kit

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

dnd kit – There's a new kit on the block.

Overview

Build status Stable Release gzip size

  • Built for React: exposes hooks such as useDraggable and useDroppable, and won't require you to re-architect your app or create additional wrapper DOM nodes.
  • Feature packed: customizable collision detection algorithms, multiple activators, draggable overlay, drag handles, auto-scrolling, constraints, and so much more.
  • 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.
  • …

6. Microbundle

Zero-configuration bundler for tiny modules.

GitHub logo developit / microbundle

πŸ“¦ Zero-configuration bundler for tiny modules.

microbundle

Microbundle npm travis

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": "./dist/foo.modern.js", // where to generate the modern bundle (see below)
  "main": "./dist/foo.cjs",          // where to generate the
…
Enter fullscreen mode Exit fullscreen mode

7. NocoDB

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

GitHub logo nocodb / nocodb

πŸ”₯ πŸ”₯ The Open Source Airtable alternative - Powered by Vue.js πŸš€ πŸš€

NocoDB
✨ The Open Source Airtable Alternative ✨

Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet

Build Status Node version Twitter

Website β€’ Discord β€’ Twitter



NocoDB - The Open Source Airtable alternative | Product Hunt

Quick try

1-Click Deploy

Heroku

Deploy NocoDB to Heroku with 1-Click

Using Docker

docker run -d --name nocodb -p 8080:8080 nocodb/nocodb
Enter fullscreen mode Exit fullscreen mode

To persist data you can mount volume at /usr/app/data/ since 0.10.6. In older version mount at /usr/src/app.

Using Npm

npx create-nocodb-app

Using Git

git clone https://github.com/nocodb/nocodb-seed
cd nocodb-seed
npm install
npm start

GUI

Access Dashboard using : http://localhost:8080/dashboard

Join Our Community

Join NocoDB : Free & Open Source Airtable Alternative

Screenshots












Features

Rich Spreadsheet Interface

  • ⚑ Β Search, sort, filter, hide columns with uber ease
  • ⚑ Β Create Views : Grid, Gallery, Kanban, Gantt, Form
  • ⚑ Β Share Views : public & password protected
  • ⚑ Β Personal & locked Views
  • ⚑ Β Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)!!
  • ⚑ Β Roles : Owner, Creator, Editor, Commenter, Viewer, Commenter, Custom Roles.
  • ⚑ Β Access Control : Fine-grained access…

8. Vitro

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

GitHub logo 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





9. Boring Avatars

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

GitHub logo boringdesigners / boring-avatars

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

Boring Avatars

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

boring avatars preview

hi License: MIT

Install

yarn add boring-avatars

or

npm install boring-avatars

Usage

import Avatar from "boring-avatars";

<Avatar
  size={40}
  name="Maria Mitchell"
  variant="marble"
  colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}
/>;
Enter fullscreen mode Exit fullscreen mode

Props

Prop Type
size number or string
square boolean
name string
variant oneOf: marble, beam, pixel,sunset, ring, bauhaus
colors array of colors

Source

You can embed your boring avatars using the boring avatars source.

To choose a random avatar from a specific user and a color palette, the format follows:

https://source.boringavatars.com/marble/120/Maria%20Mitchell?colors=264653,2a9d8f,e9c46a,f4a261,e76f51

Avatar for Maria Mitchell

For more information, check out the README





10. simple-git-hooks

A simple git hooks manager for small projects

GitHub logo toplenboren / simple-git-hooks

A simple git hooks manager for small projects

simple-git-hooks

Tests

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 v6 6.0.0 6.86 kB 6.86 kB
    pre-commit 1.2.2 ~80 kB ~850 kB
    simple-git-hooks 2.2.0 10.1 kB 10.1 kB

Who uses simple-git-hooks?

The package is recommended by lint-staged

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…


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.

Top comments (0)