DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 21st May 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
ใƒป3 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. Docz

Docz makes it easy to write and publish beautiful interactive documentation for your code. Create MDX files showcasing your code and Docz turns them into a live-reloading, production-ready site.

GitHub logo pedronauck / docz

โœ It has never been so easy to document your things!

Docz makes it easy to write and publish beautiful interactive documentation for your code.

Create MDX files showcasing your code and Docz turns them into a live-reloading, production-ready site.

docz example

Table of Contents

Why ?

Documenting code is one of the most important and time-heavy processes when developing software.

A lot of time is spent on building and maintaining custom documentation sites.

Docz enables you to quickly create live-reloading, seo-friendly, production-ready documentation sites with MDX and customize the look, feel and behavior when required by leveraging GatsbyJS and Gatsby theme shadowing.

Start a New Project

Use create-docz-app to quickly get started :

npx create-docz-app my-docz-app
# or
yarn create docz-app my-docz-app --example typescript
Enter fullscreen mode Exit fullscreen mode

Add Docz to an Existing Project

Start by adding docz as a dependency :

โ€ฆ
Enter fullscreen mode Exit fullscreen mode

2. mo ยท js

The motion graphics toolbelt for the web. mo ยท js is a javascript motion graphics library that is a fast, retina ready, modular and open source.

GitHub logo mojs / mojs

The motion graphics toolbelt for the web

mo ยท js โ€“ npm ci Coverage Status Slack

The motion graphics toolbelt for the web.

mo ยท js

Intro

mo ยท js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it has a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease.

The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.

Install

Use with a bundler

Mojs is published on the NPM registry and GPR registry, so you can install it through the command line interpreter using your favorite package manager. This is the best wayโ€ฆ


3. Twitter API Client

A user-friendly Node.js / JavaScript client library for interacting with the Twitter API.

GitHub logo FeedHive / twitter-api-client

A user-friendly Node.js / JavaScript client library for interacting with the Twitter API.

Twitter API Client

Node.js client for Twitter API

NPM Version Build Status

Table of content

Features

โ˜‘๏ธ Includes 90% of the official Twitter API endpoints.
โ˜‘๏ธ Promise-based! No ugly callbacks.
โ˜‘๏ธ Fully typed! Both for query parameters and responses.
โ˜‘๏ธ Inbuilt in-memory cache for rate-limit friendly usage.

Getting Started

Get your Twitter credentials

You will need to create a set of Twitter developer credentials from your Twitter Developer account.
If you don't have one already, apply for a developer account here.
It takes about 5 minutes.

Install

npm i twitter-api-client
Enter fullscreen mode Exit fullscreen mode

Usage

import { TwitterClient } from 'twitter-api-client';
const twitterClient = new TwitterClient({
  apiKey: '<YOUR-TWITTER-API-KEY>',
  apiSecret: '<YOUR-TWITTER-API-SECRET>',
  accessToken: '<YOUR-TWITTER-ACCESS-TOKEN>',
  accessTokenSecret: '<YOUR-TWITTER-ACCESS-TOKEN-SECRET>',
});

// Search for a user
const data = await twitterClient.accountsAndUsers.usersSearch({ q: 'twitterDev' })
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

4. web3.js

The Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

GitHub logo ChainSafe / web3.js

Ethereum JavaScript API

web3.js

web3.js - Ethereum JavaScript API

Gitter StackExchange NPM Package Version NPM Package Downloads Build Status Dev Dependency Status Coverage Status Lerna Netlify Status

This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

You need to run a local or remote Ethereum node to use this library.

Please read the documentation for more.

Installation

Node

npm install web3
Enter fullscreen mode Exit fullscreen mode

Yarn

yarn add web3
Enter fullscreen mode Exit fullscreen mode

In the Browser

Use the prebuilt dist/web3.min.js, or build using the web3.js repository:

npm run build
Enter fullscreen mode Exit fullscreen mode

Then include dist/web3.min.js in your html file This will expose Web3 on the window object.

Or via jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

UNPKG:

<script src="https://unpkg.com/web3@latest/dist/web3.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Usage

// In Node.js
const Web3 = require('web3');

let web3 = new Web3('ws://localhost:8546');
console.log(web3);
> {
    eth: ... ,
    shh: ... ,
    utils: ...,
    ...
}
Enter fullscreen mode Exit fullscreen mode

Additionally youโ€ฆ


5. renature

A physics-based animation library for React focused on modeling natural world forces.

GitHub logo FormidableLabs / renature

A physics-based animation library for React focused on modeling natural world forces.

renature

A physics-based animation library for React inspired by the natural world

NPM Version Test Status Minified gzip size Maintenance Status

renature

renature is a physics-based animation library for React focused on modeling natural world forces like gravity, friction, and fluid dynamics, exposed as a set of React hooks.

โœจFeatures

  • ๐ŸŽฃ A small set of declarative React hooks for animating with ease.
  • ๐ŸŒŒ Support for non-traditional physics-based animations using gravity, friction, fluid resistance, and more.
  • ๐Ÿงฎ Mathematically accurate and type-safe physics, powered by ReScript.
  • ๐Ÿ” Start, stop, delay, and loop animations with our Controller API.
  • 0๏ธโƒฃ A tiny animation library with zero dependencies!

๐Ÿ“ƒDocumentation

renature's documentation lives on our docs site. Notice something inaccurate or confusing? Feel free to open an issue or make a pull request to help improve the documentation for everyone! The source for our docs site lives in this repo in the docs folder.

Maintenance Status

Active: Formidable is actively workingโ€ฆ





6. use-gesture

use-gesture is a library that let you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.

GitHub logo pmndrs / use-gesture

๐Ÿ‘‡Bread n butter utility for component-tied mouse/touch gestures in React

@use-gesture

npm (tag) npm bundle size NPM Discord Shield

@use-gesture is a library that let you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.

You can use it stand-alone, but to make the most of it you should combine it with an animation library like react-spring, though you can most certainly use any other.

The demos are real click them!

Installation

React

#Yarn
yarn add @use-gesture/react
#NPM
npm install @use-gesture/react
Enter fullscreen mode Exit fullscreen mode

Vanilla javascript

#Yarn
yarn add @use-gesture/vanilla

#NPM
npm install @use-gesture/vanilla
Enter fullscreen mode Exit fullscreen mode

Full documentation website

Simple example

React
import { useSpring, animated } from '@react-spring/web'
import { useDrag } from '@use-gesture/react'
function Example() {
  const [{ x, y }, api] = useSpring(()
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

7. cheerio

Fast, flexible, and lean implementation of core jQuery designed specifically for the server.

GitHub logo cheeriojs / cheerio

Fast, flexible, and lean implementation of core jQuery designed specifically for the server.

cheerio

Fast, flexible & lean implementation of core jQuery designed specifically for the server.

ไธญๆ–‡ๆ–‡ๆกฃ (Chinese Readme)

const cheerio = require('cheerio');
const $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <html><head></head><body><h2 class="title welcome">Hello there!</h2></body></html>
Enter fullscreen mode Exit fullscreen mode

Note

We are currently working on the 1.0.0 release of cheerio on the main branch. The source code for the last published version, 0.22.0, can be found here.

Installation

npm install cheerio

Features

โค Familiar syntax: Cheerio implements a subset of core jQuery. Cheerio removes all the DOM inconsistencies and browser cruft from the jQuery library, revealing its truly gorgeous API.

ฯŸ Blazingly fast: Cheerio works with a very simple, consistent DOM model. As a result parsing, manipulating, andโ€ฆ


8. DocToc

Generates table of contents for markdown files inside local git repository. Links are compatible with anchors generated by github or other sites.

GitHub logo thlorenz / doctoc

๐Ÿ“œ Generates table of contents for markdown files inside local git repository. Links are compatible with anchors generated by github or other sites.

DocToc build status

become a patron

Generates table of contents for markdown files inside local git repository. Links are compatible with anchors generated by github or other sites via a command line flag.

Table of Contents generated with DocToc

Installation

npm install -g doctoc

Usage

In its simplest usage, you can pass one or more files or folders to the doctoc command. This will update the TOCs of each file specified as well as of each markdown file found by recursively searching each folder. Below are some examples.

Adding toc to all files in a directory

โ€ฆ

9. Styleguidist

Isolated React component development environment with a living style guide

GitHub logo styleguidist / react-styleguidist

Isolated React component development environment with a living style guide

React Styleguidist

Isolated React component development environment with a living style guide

npm CI status Codecov Join the chat at https://gitter.im/styleguidist/styleguidist Discord Open Source Helpers

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files. Check out the demo style guide.

React Styleguidist in action

Usage

Advanced documentation

Examples

Showcase

Real projects using React Styleguidist:


10. Pts

A library for visualization and creative-coding

GitHub logo williamngan / pts

A library for visualization and creative-coding

Pts

image

Pts is a typescript/javascript library for visualization and creative-coding.

Get started at ptsjs.org.

Please give it a try, file issues, and send feedbacks to @williamngan. Thank you!


Usage

Option 1
Get the latest pts.js or pts.min.js (in dist folder). Alternatively use a CDN service like cdnjs or jsdelivr or unpkg. Then add it to your html page like this:

<script type="text/javascript" src="path/to/pts.js"></script>
Enter fullscreen mode Exit fullscreen mode

Pts is pretty lightweight. Currently at ~90kb minified and 26kb gzipped.

Option 2:
Install via npm install pts. Then you can choose to import some parts of Pts into your project as needed.

import {CanvasSpace, Pt, Group, Line} from 'pts';
Enter fullscreen mode Exit fullscreen mode

To quickly get started, try download or clone these repos:


Stargazing ๐Ÿ“ˆ

Top risers over last 7 days

  1. Front-End Checklist +1,665 stars
  2. Best websites a programmer should visit +1,445 stars
  3. eDEX-UI +1,350 stars
  4. Slidev +1,235 stars
  5. umami +844 stars

Top growth(%) over last 7 days

  1. htmr +27%
  2. useStateMachine +24%
  3. Observable Plot +15%
  4. Elder.js +15%
  5. Slidev +15%

Top risers over last 30 days

  1. Public APIs +6,543 stars
  2. Coding Interview University +5,535 stars
  3. Web Developer Roadmap +5,200 stars
  4. Free Programming Books +4,960 stars
  5. Build your own X +4,350 stars

Top growth(%) over last 30 days

  1. github-elements +132%
  2. superplate +73%
  3. party.js +72%
  4. Fig +72%
  5. Supabase +43%

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

Collapse
christyjacob4 profile image
Christy Jacob

Hey you should take a look at appwrite.io

Collapse
iainfreestone profile image
Iain Freestone Author

Check out issue 45 number 2, I am already on the case

Issue 45

Collapse
christyjacob4 profile image
Christy Jacob

Oh perfect! I missed that ๐Ÿ˜Š