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โฆ
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. 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
-
๐ฒ Support scanning different types of bar codes and QR codes.
-
๐ฅ Supports different platforms be it Android, IOS, MacOs, Windows or Linux
โฆ
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
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
anduseDroppable
. 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.
developit / microbundle
๐ฆ Zero-configuration bundler for tiny modules.
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
โฆ7. NocoDB
The Open Source Airtable alternative. Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet.
The Open Source Airtable Alternative
NocoDB is the fastest and easiest way to build databases online
Website โข Discord โข Community โข Twitter โข Reddit โข Documentation
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โฆ
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 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โฆ
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โฆ
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.
Top comments (0)