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

SigNoz-logo

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

Downloads GitHub issues tweet

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โ€ฆ





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

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. 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 minhazav@gmail.com.

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 minhazav@gmail.com. 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


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

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

@dnd-kit โ€“ the modern drag & drop toolkit for React

Stable Release Build status gzip size Follow us on Twitter

  • 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:โ€ฆ

6. Microbundle

Zero-configuration bundler for tiny modules.

GitHub logo developit / microbundle

๐Ÿ“ฆ Zero-configuration bundler for tiny modules.

microbundle

Microbundle npm travis licenses

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
โ€ฆ
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

๐Ÿ”ฅ ๐Ÿ”ฅ ๐Ÿ”ฅ Open Source Airtable Alternative

The Open Source Airtable Alternative

NocoDB is the fastest and easiest way to build databases online

Website โ€ข Discord โ€ข Community โ€ข Twitter โ€ข Reddit โ€ข Documentation

video avi

See other languages ยป

Join Our Community



Stargazers repo roster for @nocodb/nocodb

Installation

Docker with SQLite

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

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Auto-upstall does the following : ๐Ÿ•Š

  • ๐Ÿณ Automatically installs all pre-requisites like docker, docker-compose
  • ๐Ÿš€ Automatically installs NocoDB with PostgreSQL, Redis, Minioโ€ฆ

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

hi

Install

npm install boring-avatars

Usage

import Avatar from 'boring-avatars';

<Avatar name="Maria Mitchell" />;
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

Size

Theโ€ฆ





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 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?

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โ€ฆ


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)