Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. React Query
Hooks for fetching, caching and updating asynchronous data in React
tannerlinsley
/
react-query
βοΈ Hooks for fetching, caching and updating asynchronous data in React
Hooks for fetching, caching and updating asynchronous data in React
Enjoy this library? Try the entire TanStack! React Table, React Form, React Charts
Visit react-query.tanstack.com for docs, guides, API and more!
Quick Features
- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
- Parallel + Dependent Queries
- Mutations + Reactive Query Refetching
- Multi-layer Cache + Automatic Garbage Collection
- Paginated + Cursor-based Queries
- Load-More + Infinite Scroll Queries w/ Scroll Recovery
- Request Cancellation
- React Suspense + Fetch-As-You-Render Query Prefetching
- Dedicated Devtools (React Query Devtools)
-
(depending on features imported)
Become a Sponsor!
Contributors β¨
Thanks goes to these wonderful people (emoji key):
β¦2. Discord.js
discord.js is a powerful Node.js module that allows you to easily interact with the Discord API.
discordjs
/
discord.js
A powerful JavaScript library for interacting with the Discord API
Table of contents
About
discord.js is a powerful Node.js module that allows you to easily interact with the Discord API.
- Object-oriented
- Predictable abstractions
- Performant
- 100% coverage of the Discord API
Installation
Node.js 12.0.0 or newer is required.
Ignore any warnings about unmet peer dependencies, as they're all optional.
Without voice support: npm install discord.js
With voice support (@discordjs/opus): npm install discord.js @discordjs/opus
With voice support (opusscript): npm install discord.js opusscript
Audio engines
The preferred audio engine is @discordjs/opus, as it performs significantly better than opusscript. When both are available, discord.js will automatically choose @discordjs/opus Using opusscript is only recommended for development environments where @discordjs/opus is tough to get working For production bots, using @discordjs/opus should be considered a necessity, especially if they're going to be running on multiple servers.
Optional packages
- zlib-sync forβ¦
3. NextAuth.js
NextAuth.js is a complete open source authentication solution for Next.js applications.
nextauthjs
/
next-auth
Authentication for Next.js
NextAuth.js
Overview
NextAuth.js is a complete open source authentication solution for Next.js applications.
It is designed from the ground up to support Next.js and Serverless.
Follow the examples to see how easy it is to use NextAuth.js for authentication.
Install: npm i next-auth
See next-auth.js.org for more information and documentation.
Features
Flexible and easy to use
- Designed to work with any OAuth service, it supports OAuth 1.0, 1.0A and 2.0
- Built-in support for many popular sign-in services
- Supports email / passwordless authentication
- Supports stateless authentication with any backend (Active Directory, LDAP, etc)
- Supports both JSON Web Tokens and database sessions
- Designed for Serverless but runs anywhere (AWS Lambda, Docker, Heroku, etcβ¦)
Own your own data
NextAuth.js can be used with or without a database.
- An open source solution that allows you to keep control of your data
- Supports Bring Your Own Database (BYOD) and can be used with any database
- β¦
4. Cropper.js
JavaScript image cropper.
fengyuanchen
/
cropperjs
JavaScript image cropper.
Cropper.js
JavaScript image cropper.
- Website
- Photo Editor - An advanced example of Cropper.js.
- jquery-cropper - A jQuery plugin wrapper for Cropper.js.
Table of contents
- Features
- Main
- Getting started
- Options
- Methods
- Events
- No conflict
- Browser support
- Contributing
- Versioning
- License
Features
- Supports 39 options
- Supports 27 methods
- Supports 6 events
- Supports touch (mobile)
- Supports zooming
- Supports rotating
- Supports scaling (flipping)
- Supports multiple croppers
- Supports to crop on a canvas
- Supports to crop an image in the browser-side by canvas
- Supports to translate Exif Orientation information
- Cross-browser support
Main
dist/
βββ cropper.css
βββ cropper.min.css (compressed)
βββ cropper.js (UMD)
βββ cropper.min.js (UMD, compressed)
βββ cropper.common.js (CommonJS, default)
βββ cropper.esm.js (ES Module)
Getting started
Installation
npm install cropperjs
In browser:
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
The cdnjs provides CDN support for Cropper.js's CSS and JavaScript. You can find theβ¦
5. Clean Code JavaScript
Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript.
ryanmcdermott
/
clean-code-javascript
π Clean Code concepts adapted for JavaScript
clean-code-javascript
Table of Contents
- Introduction
- Variables
- Functions
- Objects and Data Structures
- Classes
- SOLID
- Testing
- Concurrency
- Error Handling
- Formatting
- Comments
- Translation
Introduction
Software engineering principles, from Robert C. Martin's book Clean Code adapted for JavaScript. This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript.
Not every principle herein has to be strictly followed, and even fewer will be universally agreed upon. These are guidelines and nothing more, but they are ones codified over many years of collective experience by the authors of Clean Code.
Our craft of software engineering is just a bit over 50 years old, and we are still learning a lot. When software architecture is as old as architecture itself, maybe then we will have harder rules to follow. For now, let these guidelines serve as a touchstone by which to assess the quality of the JavaScriptβ¦
6. Winston
A logger for just about everything.
winston
A logger for just about everything.
winston@3
See the Upgrade Guide for more information. Bug reports and PRs welcome!
Looking for winston@2.x
documentation?
Please note that the documentation below is for winston@3
Read the winston@2.x
documentation.
Motivation
winston
is designed to be a simple and universal logging library with
support for multiple transports. A transport is essentially a storage device
for your logs. Each winston
logger can have multiple transports (see
Transports) configured at different levels (see: Logging levels). For
example, one may want error logs to be stored in a persistent remote location
(like a database), but all logs output to the console or a local file.
winston
aims to decouple parts of the logging process to make it more
flexible and extensible. Attention is given to supporting flexibility in log
formatting (see: Formats) & levels (see: Using custom logging levels), andβ¦
7. Awesome-Selfhosted
List of Free Software network services and web applications which can be hosted locally. Non-Free software is listed on the Non-Free page.
awesome-selfhosted
/
awesome-selfhosted
A list of Free Software network services and web applications which can be hosted locally. Selfhosting is the process of hosting and managing applications instead of renting from Software-as-a-Service providers
Awesome-Selfhosted
Self-hosting is the practice of locally hosting and managing applications instead of renting from SaaSS providers.
This is a list of Free Software network services and web applications which can be hosted locally. Non-Free software is listed on the Non-Free page.
See Contributing.
- List of Software
- Analytics
- Archiving and Digital Preservation (DP)
- Automation
- Blogging Platforms
- Bookmarks and Link Sharing
- Calendaring and Contacts Management
- Communication systems
- Conference Management
- Content Management Systems (CMS)
- DNS
- Document Management
- E-books and Integrated Library Systems (ILS)
- Federated Identity/Authentication
- Feed Readers
- File Sharing and Synchronization
- Games
- Gateways and terminal sharing
- Groupware
- Human Resources Management (HRM)
- Internet of Things (IoT)
- β¦
8. WebdriverIO
WebdriverIO is a test automation framework that allows you to run tests based on the Webdriver protocol and Appium automation technology.
webdriverio
/
webdriverio
Next-gen browser and mobile automation test framework for Node.js
Next-gen browser and mobile automation test framework for Node.js
Homepage | Developer Guide | API Reference | Contribute | Changelog | Roadmap
WebdriverIO is a test automation framework that allows you to run tests based on the Webdriver protocol and Appium automation technology. It provides support for your favorite BDD/TDD test framework and will run your tests locally or in the cloud using Sauce Labs, BrowserStack, TestingBot or LambdaTest.
Contributing
You like WebdriverIO and want to help making it better? Awesome! Have a look into our Contributor Guide and check out our Contributor Documentation to get started with setting up the repo.
If you're looking for issues to help out with, check out the issues labelled "good first pick". You can also reach out in our Gitter Channel if you have question on where to start contributing.
WebdriverIO for Enterprise
Available as part of the Tidelift Subscription.
The maintainersβ¦
9. react-use
Collection of essential React Hooks
π
react-use
Collection of essential React Hooks Port of
libreact
Translations:
npm i react-use
-
Sensors
-
useBattery
β tracks device battery state. -
useGeolocation
β tracks geo location state of user's device. -
useHover
anduseHoverDirty
β tracks mouse hover state of some element. -
useHash
β tracks location hash value. -
useIdle
β tracks whether user is being inactive. -
useIntersection
β tracks an HTML element's intersection. -
useKey
,useKeyPress
,useKeyboardJs
, anduseKeyPressEvent
β track keys. -
useLocation
anduseSearchParam
β tracks page navigation bar location state. -
useLongPress
β tracks long press gesture of some element. -
useMedia
β tracks state of a CSS media query. -
useMediaDevices
β tracks state of connected hardware devices. -
useMotion
β tracks state of device's motion sensor. -
useMouse
anduseMouseHovered
β tracks state of mouse position. -
useMouseWheel
β tracks deltaY of scrolled mouse wheel. -
useNetwork
β tracks state of user's internet connection. -
useOrientation
β tracks stateβ¦
-
10. Mock Service Worker (MSW)
Mock Service Worker (MSW) is an API mocking library for browser and Node.
Mock Service Worker (MSW) is an API mocking library for browser and Node.
Features
- Seamless. Dedicated layer of requests interception at your disposal. Keep your application's code and tests unaware whether something is mocked or not.
- Deviation-free. Request the same production resources and test the actual behavior of your app. Augment an existing API, or design it as you go, when there is none.
- Familiar & Powerful. Use Express-like routing syntax to capture outgoing requests. Use parameters, wildcards and regular expressions to match requests, and respond with necessary status codes, headers, cookies, delays, or completely custom resolvers.
"I found MSW and was thrilled that not only could I still see the mocked responses in my DevTools, but that the mocks didn't have to be written in a Service Worker and could instead live alongside the rest of my app. This made it silly easy toβ¦
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.
Discussion (1)
Started reading through Clean Code JavaScript. Really awesome and bringing back memories of reading the book!