Gems

A list of various resources discovered on the internet for use in my various projects

Table-of-content

• Frontend react
• Backend nodejs
• Products software
• Developer tools

Frontend (React)

Filepond (file uploading package for nodejs)

Filepond
A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

npm install filepond --save

Apex Charts (A simple and viualy stunning charting library)

Apexcharts
A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards. ApexCharts is an MIT licensed open-source project that can be used in commercial and non-commercial projects.

npm install apexcharts --save

Progressbar (A progressbar indicator with usefull tools)

Progressbar
A nice wrapper around TJ Holowaychuck's node-progress with chaining, domains, and steps

npm install --save progressbar

Draggable (A fully featured drag and drop library)

Draggable
High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package.

npm install draggable --save

Check password strength (Check the strength of a password with pre-saved RegEx)

Check password strength
A simple way to check that password strength of a certain passphrase. A password strength checker based from Javascript RegEx.

npm i check-password-strength --save

UseAnimation (A collection of animations)

react-useanimations
React-useanimations is a collection of free animated open source icons for React.js.

npm install -S react-useanimations

Usage

import React from 'react';
import UseAnimations from 'react-useanimations';
// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
import github from 'react-useanimations/lib/github'

const App = () => <UseAnimations animation={github} />;

export default App;

Backend nodejs

NanoId (Generate string ID for js)

NanoId
A tiny, secure, URL-friendly, unique string ID generator for JavaScript.

npm install nanoid --save

Lowdb (A lightweight local DB)

Lowdb
Tiny local JSON database for small projects 🦉

npm install lowdb --save

tRPC (A lightweight typesafe way to consume API endpoints)

tRPC tRPC allows you to easily build & consume fully typesafe APIs, without schemas or code generation.

⚠️ Requirements: tRPC requires TypeScript > 4.1 as it relies on Template Literal Types.

Server installation: For implementing tRPC endpoints and routers. Install in your server codebase.

npm install @trpc/server

Client installation: For making typesafe API calls from your client. Install in your client codebase.

npm install @trpc/client

React app library: For generating a powerful set of React hooks for querying your tRPC API. Powered by react-query.

npm install @trpc/react react-query

Next.js utitlity library: A set of utilies for integrating tRPC with Next.js.

npm install @trpc/next

Products (Software and Cloud)

Dev tools (Developer tools)

Warp terminal (A blazingly fast terminal)

Warp.dev
The terminal for the 21st century WARP IS A BLAZINGLY FAST, RUST-BASED TERMINAL REIMAGINED FROM THE GROUND UP TO WORK LIKE A MODERN APP.

Commander.js (A CLI creation tool)

Commander.js
The complete solution for node.js command-line interfaces.

npm install commander

Example

const { program } = require('commander');

program
  .option('--first')
  .option('-s, --separator <char>');

program.parse();

const options = program.opts();
const limit = options.first ? 1 : undefined;
console.log(program.args[0].split(options.separator, limit));