This content originally appeared on DEV Community and was authored by Iain Freestone
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 helps developers monitor their applications & troubleshoot problems, an open-source alternative to DataDog, NewRelic, etc. ? ?
Monitor your applications and troubleshoot problems in your deployed applications, an open-source alternative to DataDog, New Relic, etc.
SigNoz helps developer 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.
? 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 services, slow DB queries, call to 3rd party services like payment gateways, etc
- Filter traces by service name, operation, latency, error, tags/annotations.
- Aggregate metrics on filtered traces. Eg, you can get error…
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…
3. Html5-QRCode
A cross platform HTML5 QR code reader
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
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
- Open Extensions sideBar panel in Visual Studio Code and choose the menu options for View → Extensions
- Search for
Peacock
- Click Install
- 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!
- Create/Open a VSCode Workspace (Peacock only works in a Workspace)
- Press
F1
to open the command palette - Type
Peacock
- Choose
Peacock: Change to a favorite color
- 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.
clauderic / dnd-kit
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Overview
-
Built for React: exposes hooks such as
useDraggable
anduseDroppable
, 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: vertical lists, horizontal lists, grids, multiple containers, nested contexts, variable sized list and grids, transformed items, virtualized lists.
- 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…
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": "./dist/foo.modern.js", // where to generate the modern bundle (see below)
"main": "./dist/foo.cjs", // where to generate the
…
7. NocoDB
The Open Source Airtable alternative. Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet.
NocoDB
✨ The Open Source Airtable Alternative ✨
Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet
Quick try
1-Click Deploy
Using Docker
docker run --name nocodb -p 8080:8080 nocodb/nocodb
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
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 control even at database, table & column level.
App Store for workflow automations :
- ⚡ Chat : Microsoft Teams, Slack…
8. Vitro
Build and showcase your react components in isolation. Vitro is a storybook alternative that builds 20x faster
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 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.
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"]}
/>;
Props
Prop | Type |
---|---|
size | number or string |
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
For more information, check out the README
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 thesimple-pre-commit
documentation.
-
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
- 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…
Stargazing ?
Top risers over last 7 days
- Coding Interview University +2,958 stars
- Free Programming Books +1,496 stars
- Web Development for Beginners +905 stars
- Slidev +751 stars
- JavaScript Algorithms +691 stars
Top growth(%) over last 7 days
- daisyUI +20%
- CandyGraph +15%
- react-img-carousel +14%
- Fig +13%
- Vuestic UI +12%
Top risers over last 30 days
- Coding Interview University +8,048 stars
- Public APIs +5,202 stars
- Free Programming Books +4,336 stars
- Web Development for Beginners +3,773 stars
- Developer Roadmap +3,509 stars
Top growth(%) over last 30 days
- useStateMachine +530%
- Fig +181%
- github-elements +94%
- react-icon-blur +83%
- 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.
This content originally appeared on DEV Community and was authored by Iain Freestone
Iain Freestone | Sciencx (2021-06-04T13:47:34+00:00) ?10 Trending projects on GitHub for web developers – 4th June 2021. Retrieved from https://www.scien.cx/2021/06/04/%f0%9f%9a%8010-trending-projects-on-github-for-web-developers-4th-june-2021/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.