loading...

πŸš€10 Trending projects on GitHub for web developers - 26th June 2020

iainfreestone profile image Iain Freestone ・1 min read

Trending projects on GitHub for web developers (7 Part Series)

1) πŸš€10 Trending projects on GitHub for web developers - 30th May 2020 2) πŸš€10 Trending projects on GitHub for web developers - 5th June 2020 3 ... 5 3) πŸš€10 Trending projects on GitHub for web developers - 12th June 2020 4) πŸš€10 Trending projects on GitHub for web developers - 19th June 2020 5) πŸš€10 Trending projects on GitHub for web developers - 26th June 2020 6) πŸš€10 Trending projects on GitHub for web developers - 3rd July 2020 7) πŸš€10 Trending projects on GitHub for web developers - 10th July 2020

1. React Query

Hooks for fetching, caching and updating asynchronous data in React

GitHub logo tannerlinsley / react-query

βš›οΈ Hooks for fetching, caching and updating asynchronous data in React

React Query Header

Hooks for fetching, caching and updating asynchronous data in React

#TanStack semantic-release Join the discussion on Github

Enjoy this library? Try them all! React Table, React Form, React Charts

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)
Core Issues and Solution

The Challenge

Tools for managing "global state" are plentiful these days, but most of these tools:

  • Mistake server cache state for global state
  • Force you to manage async data in a synchronous way
  • Duplicate unnecessary network operations
  • Use naive or over-engineered caching strategies
  • Are too basic to handle large-scale apps or
  • Are too complex or built for highly-opinionated systems like…

2. Discord.js

discord.js is a powerful Node.js module that allows you to easily interact with the Discord API.

GitHub logo discordjs / discord.js

A powerful JavaScript library for interacting with the Discord API


discord.js


Discord server NPM version NPM downloads Build status Dependencies Patreon

npm installnfo

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


3. NextAuth.js

NextAuth.js is a complete open source authentication solution for Next.js applications.

GitHub logo iaincollins / next-auth

Easy authentication for Next.js and Serverless

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

Authentication

  • Designed to work with any OAuth service, it supports OAuth 1.0, 1.0A and 2.0
  • Built-in support for many popular OAuth sign-in services
  • Supports email / passwordless authentication
  • Supports both JSON Web Tokens and database sessions

Own your own data

  • 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
  • Built-in support for for MySQL, MariaDB, Postgres, MongoDB and SQLite
  • Works great with databases from popular hosting providers
  • Can also be used without a database (e.g. OAuth + JWT)

Secure by default

  • Designed…

4. Cropper.js

JavaScript image cropper.

GitHub logo fengyuanchen / cropperjs

JavaScript image cropper.

Cropper.js

Build Status Downloads Version

JavaScript image cropper.

Table of contents

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.

GitHub logo ryanmcdermott / clean-code-javascript

πŸ› Clean Code concepts adapted for JavaScript

clean-code-javascript

Table of Contents

  1. Introduction
  2. Variables
  3. Functions
  4. Objects and Data Structures
  5. Classes
  6. SOLID
  7. Testing
  8. Concurrency
  9. Error Handling
  10. Formatting
  11. Comments
  12. Translation

Introduction

Humorous image of software quality estimation as a count of how many expletives you shout when reading code

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.

GitHub logo winstonjs / winston

A logger for just about everything.

winston

A logger for just about everything.

Version npmnpm DownloadsBuild StatusDependencies

NPM

Join the chat at https://gitter.im/winstonjs/winston

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.


8. WebdriverIO

WebdriverIO is a test automation framework that allows you to run tests based on the Webdriver protocol and Appium automation technology.

GitHub logo webdriverio / webdriverio

Next-gen browser and mobile automation test framework for Node.js

WebdriverIO

Next-gen browser and mobile automation test framework for Node.js

Build Status LTS v5 Build Status CodeCov Gitter Issue Resolution time Open issues


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

GitHub logo streamich / react-use

React Hooks β€” πŸ‘



πŸ‘
react-use





npm package CircleCI master npm downloads demos
Collection of essential React Hooks Port of libreact
Translations: πŸ‡¨πŸ‡³ 汉语




npm i react-use






10. Mock Service Worker (MSW)

Mock Service Worker (MSW) is an API mocking library for browser and Node.

GitHub logo mswjs / msw

Seamless REST/GraphQL API mocking library for browser and Node.

Package version Build status Dependencies status Dev dependencies status

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…






If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Trending projects on GitHub for web developers (7 Part Series)

1) πŸš€10 Trending projects on GitHub for web developers - 30th May 2020 2) πŸš€10 Trending projects on GitHub for web developers - 5th June 2020 3 ... 5 3) πŸš€10 Trending projects on GitHub for web developers - 12th June 2020 4) πŸš€10 Trending projects on GitHub for web developers - 19th June 2020 5) πŸš€10 Trending projects on GitHub for web developers - 26th June 2020 6) πŸš€10 Trending projects on GitHub for web developers - 3rd July 2020 7) πŸš€10 Trending projects on GitHub for web developers - 10th July 2020

Posted on Jun 26 by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

markdown guide
 

Started reading through Clean Code JavaScript. Really awesome and bringing back memories of reading the book!