🚀10 Trending projects on GitHub for web developers - 23rd July 2021
source link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-23rd-july-2021-524
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
🚀10 Trending projects on GitHub for web developers - 23rd July 2021
Jul 23 Originally published at iainfreestone.com
・3 min read
Trending projects on GitHub for web developers (61 Part Series)
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.
A modular geospatial engine written in JavaScript
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
npm install @turf/turf
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>
You can also include it directly from a CDN:
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
You can create light-weight turf builds with only the functions you need using the turfjs-builder UI or using browserify as described below.
Browserify
All of Turf's functions can also be installed as separate…
2. Fiddly
Create beautiful and simple HTML pages from your Readme.md files
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
npm install fiddly --save-dev
Usage
{ ... "scripts": { "build:demo": "fiddly" .... }
Deploy automatically to netlify 🎉
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
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.
NProgress
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'/>
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();
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(); }…
4. useCookieConsent
React hook for managing GDPR cookie consent state.
bring-shrubbery / use-cookie-consent
React hook for managing GDPR cookie consent state.
useCookieConsent
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.
@ant-design/charts
✨ Features
- Easy to use
- TypeScript
- Pretty & Lightweight
- Responsive
- Storytelling
📦 Installation
$ npm install @ant-design/charts
🔨 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 }, { year…
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.
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.
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.
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 : [email protected]
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.
8. regexgen
Generate regular expressions that match a set of strings.
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])/
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]/
regexgen
also has a simple CLI to generate regexes using inputs from the command line.
$ regexgen Usage: regexgen [-gimuy] string1 string2 string3...
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.
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!
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
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
Packages
@latest
Version
Size
Description
🏠Core
@web3-react/core
React Interface
🔌Connectors
Browser Extension/dApp Browser
@web3-react/injected-connector
Injected Connector Remote API
@web3-react/network-connector
RPC Connector QR Code
@web3-react/walletconnect-connector
WalletConnect Connector
@web3-react/walletlink-connector
WalletLink Connector Hardware
@web3-react/ledger-connector
Ledger Connector
@web3-react/trezor-connector
Trezor Connector
@web3-react/lattice-connector
Lattice Connector Native
@web3-react/frame-connector
Frame Connector Hosted
@web3-react/authereum-connector
Authereum Connector
@web3-react/fortmatic-connector
Fortmatic Connector
@web3-react/portis-connector
Portis Connector
@web3-react/squarelink-connector
Squarelink Connector
@web3-react/torus-connector
Torus Connector
🐉Low-Level
@web3-react/abstract-connector
Shared Connector Class
@web3-react/types
Shared TypeScript Types
Quickstart
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
Top growth(%) over last 7 days
Top risers over last 30 days
Top growth(%) over last 30 days
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK