DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 2nd April 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
Originally published at iainfreestone.com ・2 min read

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

1. Crank.js

Write JSX-driven components with functions, promises and generators.

GitHub logo bikeshaving / crank

Write JSX-driven components with functions, promises and generators.

Crank.js

Write JSX-driven components with functions, promises and generators.

Documentation is available at crank.js.org. Crank.js is in a beta phase, and some APIs may change. To read more about the motivations for this library, you can read the introductory blog post.

Features

Declarative

Crank uses the same JSX syntax and diffing algorithm popularized by React, allowing you to write HTML-like code directly in JavaScript.

Just Functions

All components in Crank are just functions or generator functions. No classes, hooks, proxies or template languages are needed.

Promise-friendly

Crank provides first-class support for promises. You can define components as async functions and race renderings to display fallback UIs.

Lightweight

Crank has no dependencies, and its core is a single file. It currently measures at 4.5KB minified and gzipped.

Performant

According to benchmarks, Crank beats React in terms of speed and memory usage, and is currently comparable to Preact…


2. Appwrite

Appwrite is a secure end-to-end backend server for Web, Mobile, and Flutter developers that is packaged as a set of Docker containers for easy deployment

GitHub logo appwrite / appwrite

Appwrite is a secure end-to-end backend server for Web, Mobile, and Flutter developers that is packaged as a set of Docker containers for easy deployment πŸš€


Appwrite Logo

A complete backend solution for your [Flutter / Vue / Angular / React / iOS / Android / *ANY OTHER*] app

Discord Docker Pulls Build Status Twitter Account Follow Appwrite on StackShare

Appwrite is an end-to-end backend server for Web, Mobile, Native, or Backend apps packaged as a set of Docker microservices. Appwrite abstracts the complexity and repetitiveness required to build a modern backend API from scratch and allows you to build secure apps faster.

Using Appwrite, you can easily integrate your app with user authentication & multiple sign-in methods, a database for storing and querying users and team data, storage and file management, image manipulation, Cloud Functions, and more services.

Appwrite

Find out more at: https://appwrite.io

Table of Contents:

Installation

Appwrite backend server is designed to run in a container environment. Running your server is as easy as running…


3. Deno Standard Modules

Deno standard library

GitHub logo denoland / deno_std

Deno standard library

Deno Standard Modules

codecov

These modules do not have external dependencies and they are reviewed by the Deno core team. The intention is to have a standard set of high quality code that all Deno projects can use fearlessly.

Contributions are welcome!

Releases

Standard library is currently tagged independently of Deno version. This will change once the library is stabilized.

To check compatibility of different version of standard library with Deno CLI see this list.

How to use

These modules will eventually be tagged in accordance with Deno releases but as of today we do not yet consider them stable and so we version the standard modules differently from the Deno runtime to reflect this.

It is strongly recommended that you link to tagged releases to avoid unintended updates and breaking changes.

Don't link to / import any module whose path:

  • Has a name or parent with an underscore prefix…

4. ractive-player

Library for interactive videos in React

GitHub logo ysulyma / ractive-player

Library for interactive videos in React





5. Altair

A beautiful feature-rich GraphQL Client for all platforms.

GitHub logo imolorhe / altair

✨⚑️ A beautiful feature-rich GraphQL Client for all platforms.

Build All Contributors Build status FOSSA Status Crowdin Gitter

Chrome Web Store Chrome Web Store Mozilla Add-on npm Altair GraphQL Client GitHub release Github All Releases

Backers on Open Collective Sponsors on Open Collective

Maintenance Greenkeeper badge lerna Reviewed by Hound

Deploying?

set url

Altair is a beautiful feature-rich GraphQL Client IDE for all platforms. Available for MacOS, Windows, Linux, Chrome, Firefox It enables you interact with any GraphQL server you are authorized to access from any platform you are on.

Much like Postman for GraphQL, you can easily test and optimize your GraphQL implementations.

Features

Altair provides several features that make developing with GraphQL very efficient and friendly. These features include:

  • setting headers
  • setting variables
  • creating environments
  • viewing response stats
  • viewing schema docs
  • advanced schema docs search
  • dynamically adding/generating queries and/or fragments from schema docs
  • file upload via GraphQL
  • autocompletion of queries
  • autofill all query fields at cursor
  • automatic schema refreshing using GraphQL Event Stream protocol
  • automatic refactoring of query
  • prerequest scripts
  • multiple windows, multiple languages
  • importing and exporting collections of queries
  • multiple themes
  • plugin system for extensibility
  • and many more features (really there's a…

6. Spearmint

Testing, simplified. || An inclusive, accessibility-first GUI for generating clean, semantic Javascript tests in only a few clicks of (or keystrokes) of a button.

GitHub logo open-source-labs / spearmint

Testing, simplified. || An inclusive, accessibility-first GUI for generating clean, semantic Javascript tests in only a few clicks of (or keystrokes) of a button.

Spearmint helps developers easily create functional React/Redux/Endpoint/Paint Timing tests without writing any code. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by @testing-library.

How to use

Download spearmint @ spearmintjs.com. Available for Mac OS and Windows.


React Testing


To run React tests generated by spearmint, install the following in your dev dependencies
npm i -D jest @testing-library/jest-dom @testing-library/react test-data-bot

To run Redux tests generated by spearmint, install the following in your dev dependencies, in addition to your React test installations above.

npm i -D redux-mock-store redux-thunk fetch-mock

To run Hooks / Context tests generated by spearmint, install the following in your dev dependencies, in addition to your React test installations above.

npm i -D @testing-library/react-hooks

Endpoint Testing


To run Endpoint tests generated by spearmint, install the following in your dev dependencies
npm i -D jest supertest

Puppeteer Testing


To run Puppeteer tests…

7. Prism

Turn any OpenAPI2/3 and Postman Collection file into an API server with mocking, transformations and validations.

GitHub logo stoplightio / prism

Turn any OpenAPI2/3 and Postman Collection file into an API server with mocking, transformations and validations.

Prism - API Mock Servers and Contract Testing

CircleCI NPM Downloads Buy us a tree

Prism is a set of packages for API mocking and contract testing with OpenAPI v2 (formerly known as Swagger) and OpenAPI v3.x.

  • Mock Servers: Life-like mock servers from any API Specification Document.
  • Validation Proxy: Contract Testing for API Consumers and Developers.
  • Comprehensive API Specification Support: OpenAPI 3.0, OpenAPI 2.0 (FKA Swagger) and Postman Collections support.

Demo of Prism Mock Server being called with curl from the CLI

Note: This branch refers to Prism 3.x, which is the current version most likely you will use. If you're looking for the 2.x version, look at the 2.x branch

Overview

🧰 Installation and Usage

Installation

Prism requires NodeJS >= 12 to properly work.

npm install -g @stoplight/prism-cli
# OR
yarn global add @stoplight/prism-cli
Enter fullscreen mode Exit fullscreen mode

For more installation options, see our installation documentation.

Mocking

prism mock https://raw.githack.com/OAI/OpenAPI-Specification/master/examples/v3.0/petstore-expanded.yaml
Enter fullscreen mode Exit fullscreen mode

Validation Proxy

prism proxy examples/petstore.oas2.yaml https://petstore.swagger.io/v2
Enter fullscreen mode Exit fullscreen mode

πŸ“– Documentation and Community

🚧

…

8. git-notify

Communicate important updates to your team via git commit messages

GitHub logo jevakallio / git-notify

πŸ™‰ πŸ“£ Communicate important updates to your team via git commit messages

git-notify

Communicate important updates to your team via git commit messages.

What is git-notify?

Sometimes you need to communicate changes to other developers on your project. In a small team, a Slack message works okay, but in larger teams and distributed organizations (such as open source projects), reaching everyone can be a pain.

git-notify allows you to embed announcements into your git commit messages:

git commit -m 'git-notify: NEW DEVELOPMENT ENVIRONMENT ...'
Enter fullscreen mode Exit fullscreen mode

And display them to another developer on a machine, far far away:

Demo

Simple as that.

How to use git-notify?

Just add "git-notify:" to your git commit message, and anything that follows will be displayed when another developer pulls that commit, or switches from a branch that does not contain that commit to one that does.

If you're using a merge or squash commit strategy on GitHub, you can also add them to the extended commit…


9. degit

Straightforward project scaffolding.

GitHub logo Rich-Harris / degit

Straightforward project scaffolding

degit β€”Β straightforward project scaffolding

Travis CI build status AppVeyor build status Known Vulnerabilities install size npm package version Contributor Covenant PRs Welcome

degit makes copies of git repositories. When you run degit some-user/some-repo, it will find the latest commit on https://github.com/some-user/some-repo and download the associated tar file to ~/.degit/some-user/some-repo/commithash.tar.gz if it doesn't already exist locally. (This is much quicker than using git clone, because you're not downloading the entire git history.)

Requires Node 8 or above, because async and await are the cat's pyjamas

Installation

npm install -g degit
Enter fullscreen mode Exit fullscreen mode

Usage

Basics

The simplest use of degit is to download the master branch of a repo from GitHub to the current working directory:

degit user/repo
# these commands are equivalent
degit github:user/repo
degit git@github.com:user/repo
degit https://github.com/user/repo
Enter fullscreen mode Exit fullscreen mode

Or you can download from GitLab and BitBucket:

# download from GitLab
degit gitlab:user/repo
degit git@gitlab.com:user/repo
degit https://gitlab.com/user/repo
# download from BitBucket
degit bitbucket:user/repo
degit git@bitbucket.org:user/repo
degit https://bitbucket.org/user/repo
# download from Sourcehut
degit git.sr.ht/user/repo
degit git@git.sr.ht:user/repo
degit https://git.sr.ht/user/repo
Enter fullscreen mode Exit fullscreen mode

Specify a

…

10. Memoizee

Complete memoize/cache solution for JavaScript

GitHub logo medikoo / memoizee

Complete memoize/cache solution for JavaScript

*nix build status Windows build status Transpilation status npm version

Memoizee

Complete memoize/cache solution for JavaScript

Originally derived from es5-ext package.

Memoization is best technique to save on memory or CPU cycles when we deal with repeated operations. For detailed insight see: http://en.wikipedia.org/wiki/Memoization

Features


Stargazing πŸ“ˆ

Top risers over last 7 days

  1. JavaScript Algorithms +2,332 stars
  2. Public APIs +1,797 stars
  3. Front-End Checklist +1,351 stars
  4. Material UI +810 stars
  5. JavaScript Questions +805 stars

Top risers over last 30 days

  1. Web Development for Beginners +5,751 stars
  2. JavaScript Algorithms +4,263 stars
  3. Public APIs +4,058 stars
  4. Free Programming Books +3,381 stars
  5. Developer Roadmap +2,801 stars

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 (3)

Collapse
simpleadam profile image
simpleAdam

Interesting to see crankjs trending. I remember that guy came on reddit about year ago announcing it, saying something about asynchronous react components. I didn't really understand it but it sounded interesting. 2k stars now. Ill have to check it out again

Collapse
andrewbaisden profile image
Andrew Baisden

Great list.

Collapse
aalphaindia profile image
Pawan Pawar

Good one!