DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 23rd July 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
Originally published at iainfreestone.com ・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. Turf

Turf is a JavaScript library for spatial analysis. It includes traditional spatial operations, helper functions for creating GeoJSON data, and data classification and statistics tools.

GitHub logo Turfjs / turf

A modular geospatial engine written in JavaScript

turf

GitHub Actions Status Version Badge Gitter chat Backers on Open Collective Sponsors on Open Collective Coverage Status

A modular geospatial engine written in JavaScript

turfjs.org


Turf is a JavaScript library for spatial analysis. It includes traditional spatial operations, helper functions for creating GeoJSON data, and data classification and statistics tools. Turf can be added to your website as a client-side plugin, or you can run Turf server-side with Node.js (see below).

Installation

In Node.js

# get all of turf
npm install @turf/turf
# or get individual packages
npm install @turf/helpers
npm install @turf/buffer
Enter fullscreen mode Exit fullscreen mode

In browser

Download the minified file, and include it in a script tag. This will expose a global variable named turf.

<script src="turf.min.js" charset="utf-8"></script>
Enter fullscreen mode Exit fullscreen mode

You can also include it directly from a CDN:

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

TypeScript

TypeScript definitions are packaged with each module. No DefinitelyTyped packages required.

Other languages

Ports of Turf.js…


2. Fiddly

Create beautiful and simple HTML pages from your Readme.md files

GitHub logo SaraVieira / fiddly

Create beautiful and simple HTML pages from your Readme.md files

Fiddly

Create beautiful and simple HTML pages from your Readme.md files

  • πŸ›  No config
  • πŸ‘©β€πŸ’» Code Highlighting
  • πŸ’―Emoji Support
  • ✨Creates Static files (only JS is prism)
  • πŸ³οΈβ€πŸŒˆ Pretty Pages
  • πŸ¦„ Customizable
  • πŸ–Ό Image minification
  • πŸ‡³πŸ‡± CodeSandbox and iframe Support
yarn add fiddly --dev
Enter fullscreen mode Exit fullscreen mode
npm install fiddly --save-dev
Enter fullscreen mode Exit fullscreen mode

Usage

{
  ...
  "scripts": {
    "build:demo": "fiddly"
    ....
  }
Enter fullscreen mode Exit fullscreen mode

Deploy automatically to netlify πŸŽ‰

This Readme on Netlify

This Readme with white theme

Usage with npx

If you just want a quick fancy HTML page from the Readme but don't care about running this in continuous deployment you can also use npx to run it as a one time thing.

  npx fiddly
Enter fullscreen mode Exit fullscreen mode

By running this in the root folder you will also get a public folder

Options

Options are placed in a .fiddly.config.json or as a fiddly key in package.json It…


3. NProgress

Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.

GitHub logo rstacruz / nprogress

For slim progress bars like on YouTube, Medium, etc

NProgress

Status npm version jsDelivr Hits

Minimalist progress bar

Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.

Installation

Add nprogress.js and nprogress.css to your project.

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
Enter fullscreen mode Exit fullscreen mode

NProgress is available via bower and npm.

$ npm install --save nprogress

Also available via unpkg CDN:

Basic usage

Simply call start() and done() to control the progress bar.

NProgress.start();
NProgress.done();
Enter fullscreen mode Exit fullscreen mode

Turbolinks (version 5+)

Ensure you're using Turbolinks 5+, and use this: (explained here)

$(document).on('turbolinks:click', function() {
  NProgress.start();
});
$(document).on('turbolinks:render', function() {
  NProgress.done();
  NProgress.remove();
}
…
Enter fullscreen mode Exit fullscreen mode

4. useCookieConsent

React hook for managing GDPR cookie consent state.

GitHub logo bring-shrubbery / use-cookie-consent

React hook for managing GDPR cookie consent state.

useCookieConsent

Build NPM Version Codecov Lines of code License

Disclaimer

Although code in this repository is oriented to satisfy GDPR cookie rules, neither author nor contributors to this repository will be responsible for any non-compliance with the law. Please make sure that this repository provides all the functionality to satisfy requirements for your project. If you find something that can be improved please create an issue or send a PR with your fixes!

Description

This React hook is made to make managing cookie consent state easier in a the React hook world. It is following this GDPR cookie guide which describes what you need for GDPR compliance. This hook mainly focuses handling the consent state of the different types of cookies as described in "Types of Cookies" in this page. Summarizing the mentioned document, there are three different ways to classify cookies:

  • Cookie Duration
    • Session cookies
    • Persistent cookies
  • Cookie Provenance
    • First-party cookies
    • Third-party cookies
  • Cookie Purpose
    • Strictly necessary…

5. Ant Design Charts

A React chart library, based on G2Plot, G6, X6, L7.

GitHub logo ant-design / ant-design-charts

A React Chart Library

@ant-design/charts

A React chart library, based on G2Plot, G6, X6, L7.

build npm npm GitHub stars npm License

Website β€’ Quick Start β€’ Gallery β€’ FAQ β€’ Blog

✨ Features

  • Easy to use
  • TypeScript
  • Pretty & Lightweight
  • Responsive
  • Storytelling

πŸ“¦ Installation

$ npm install @ant-design/charts
Enter fullscreen mode Exit fullscreen mode

πŸ”¨ Usage

import React from 'react';
import { Line } from '@ant-design/charts';
const Page: React.FC = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    {
…
Enter fullscreen mode Exit fullscreen mode

6. Practical Cryptography for Developers

A modern practical book about cryptography for developers with code examples, covering core concepts like: hashes, MAC codes, symmetric ciphers and authenticated encryption.

GitHub logo nakov / Practical-Cryptography-for-Developers-Book

Practical Cryptography for Developers: Hashes, MAC, Key Derivation, DHKE, Symmetric and Asymmetric Ciphers, Public Key Cryptosystems, RSA, Elliptic Curves, ECC, secp256k1, ECDH, ECIES, Digital Signatures, ECDSA, EdDSA

Welcome

Warning: this book is not finished! I am still working on some of the chapters. Once it is completed, I will publish it as PDF and EPUB. Be patient.

Practical Cryptography for Developers - Free Book by Svetlin Nakov - front cover

A modern practical book about cryptography for developers with code examples, covering core concepts like: hashes (like SHA-3 and BLAKE2), MAC codes (like HMAC and GMAC), key derivation functions (like Scrypt, Argon2), key agreement protocols (like DHKE, ECDH), symmetric ciphers (like AES and ChaCha20, cipher block modes, authenticated encryption, AEAD, AES-GCM, ChaCha20-Poly1305), asymmetric ciphers and public-key cryptosystems (RSA, ECC, ECIES), elliptic curve cryptography (ECC, secp256k1, curve25519), digital signatures (ECDSA and EdDSA), secure random numbers (PRNG, CSRNG) and quantum-safe cryptography, along with crypto libraries and developer tools, with a lots of code examples in Python and other languages.

Author: Svetlin Nakov, PhD - https://nakov.com

Contributors: Milen Stefanov, Marina Shideroff

ISBN: 978-619-00-0870-5 (9786190008705)

This book is free and…


7. JSbooks

JSbooks is a showcase of the bests free ebooks about Javascript.

GitHub logo revolunet / JSbooks

Directory of free JavaScript ebooks

JSbooks

JSbooks is a showcase of the bests free ebooks about Javascript.

Find here the best publications about your favourite programming language without spending any bucks !

Check it out : http://jsbooks.revolunet.com

We also have a python version : http://pythonbooks.revolunet.com

HOW TO ADD YOUR PUBLICATION

If you find a nice ebook about Javascript, feel free to fork JSbooks and add it in a few steps :

  • Paste the informations into the JSON file.
  • Please include a .png file for the cover : less than 100Ko.
  • Make a pull request.

Alternatively, you can send us an email with book infos : JSbooks@revolunet.com

Thanks per advance !

HISTORY

Historically, this project was supposed to be an experimental Apple 'NewsStand' application.

After some weeks of work, we discovered that having a functionnal application wasn't enough.

You also have to follow various Apple guidelines and use some Apple libraries to be 'NewsStand' compatible.

So…


8. regexgen

Generate regular expressions that match a set of strings.

GitHub logo devongovett / regexgen

Generate regular expressions that match a set of strings

regexgen

Generates regular expressions that match a set of strings.

Installation

regexgen can be installed using npm:

npm install regexgen

Example

The simplest use is to simply pass an array of strings to regexgen:

const regexgen = require('regexgen');
regexgen(['foobar', 'foobaz', 'foozap', 'fooza']); // => /foo(?:zap?|ba[rz])/
Enter fullscreen mode Exit fullscreen mode

You can also use the Trie class directly:

const {Trie} = require('regexgen');

let t = new Trie;
t.add('foobar');
t.add('foobaz');

t.toRegExp(); // => /fooba[rz]/
Enter fullscreen mode Exit fullscreen mode

CLI

regexgen also has a simple CLI to generate regexes using inputs from the command line.

$ regexgen
Usage: regexgen [-gimuy] string1 string2 string3...
Enter fullscreen mode Exit fullscreen mode

The optional first parameter is the flags to add to the regex (e.g. -i for a case insensitive match).

…

9. Utopia

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools.

GitHub logo concrete-utopia / utopia

Design ❀️ Code

All Contributors

Welcome to Utopia 🏝

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It's early software, but you can try it today, look at an example project, or read about it on our blog!

Try Utopia Now!

screenshot of utopia

Start the editor

For contributors: Installing Utopia on your machine

Utopia is browser-based. To run it locally, clone the repo, and then set up the server and webpack by following these instructions.

⚠️ We're looking into M1 related issues for some folks, but have it running successfully on three machine

Prerequisites

  • If using Windows you'll first need to set up the Windows Subsystem for Linux (wsl). All following steps and commands will assume you are using the wsl.
  • On macOS…

10. web3-react

A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

GitHub logo NoahZinsmeister / web3-react

🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

web3-react 🧰

A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

lerna code style: prettier

Actions Status

Packages @latest Version Size Description
🏠 Core
@web3-react/core npm version minzip React Interface
πŸ”Œ Connectors
Browser Extension/dApp Browser
@web3-react/injected-connector npm version minzip Injected Connector
Remote API
@web3-react/network-connector npm version minzip RPC Connector
QR Code
@web3-react/walletconnect-connector npm version minzip WalletConnect Connector
@web3-react/walletlink-connector npm version minzip WalletLink Connector
Hardware
@web3-react/ledger-connector npm version minzip Ledger Connector
@web3-react/trezor-connector npm version minzip Trezor Connector
@web3-react/lattice-connector npm version minzip Lattice Connector
Native
@web3-react/frame-connector npm version minzip Frame Connector
Hosted
@web3-react/authereum-connector npm version minzip Authereum Connector
@web3-react/fortmatic-connector npm version minzip Fortmatic Connector
@web3-react/portis-connector npm version minzip Portis Connector
@web3-react/squarelink-connector npm version minzip Squarelink Connector
@web3-react/torus-connector npm version minzip Torus Connector
πŸ‰ Low-Level
@web3-react/abstract-connector npm version minzip Shared Connector Class
@web3-react/types npm version minzip Shared TypeScript Types

Quickstart

Edit web3-react-example

Documentation

Projects using web3-react

Open a PR to add your project to the list!

Related Efforts

Local Development

  • Clone repo
    git clone https://github.com/NoahZinsmeister/web3-react.git

  • Install top-level dependencies
    yarn

  • Install sub-dependencies
    yarn bootstrap

  • Build and watch for changes
    yarn start







Stargazing πŸ“ˆ

Top risers over last 7 days

  1. Public APIs +3,021 stars
  2. Awesome-Selfhosted +1,104 stars
  3. Astro +977 stars
  4. Coding Interview University +967 stars
  5. Discord.js +754 stars

Top growth(%) over last 7 days

  1. use-color +37%
  2. Baileys +35%
  3. Astro +21%
  4. Leetcode Patterns +20%
  5. Fronts +19%

Top risers over last 30 days

  1. Public APIs +9,308 stars
  2. The Book Of Secret Knowledge +4,982 stars
  3. Web Development for Beginners +4,316 stars
  4. JavaScript Algorithms +4,018 stars
  5. 30 seconds of code +3,599 stars

Top growth(%) over last 30 days

  1. Security Scorecards +179%
  2. TypeState +152%
  3. Fullstack Boilerplate +146%
  4. SigNoz +106%
  5. Astro +93%

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
janitham97 profile image
Janitha Missaka

Subscribed 🌟

Collapse
narottam04 profile image
Narottam04

Thank you for sharing, subscribed to your newsletter

Collapse
sairamnagothu profile image
SairamNagothu

Great list πŸ‘Œ