Iain Freestone

Posted on Jul 31, 2020 • Updated on Aug 13, 2020

🚀10 Trending projects on GitHub for web developers - 31st July 2020

#javascript #react #webdev #html

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

1. Draft.js

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

Draft.js

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

Extensible and Customizable: We provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media.
Declarative Rich Text: Draft.js fits seamlessly into React applications abstracting away the details of rendering, selection, and input behavior with a familiar declarative API.
Immutable Editor State: The Draft.js model is built with immutable-js, offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage.

Learn how to use Draft.js in your own project.

Draft.js is used in production on Facebook, including status and comment inputs, Notes, and messenger.com.

API Notice

Before getting started, please be aware that we recently changed the API of Entity storage in Draft.

Previously, the old API was set to be…

View on GitHub

2. PeerJS: Simple peer-to-peer with WebRTC

PeerJS provides a complete, configurable, and easy-to-use peer-to-peer API built on top of WebRTC, supporting both data channels and media streams.

PeerJS: Simple peer-to-peer with WebRTC

https://t.me/joinchat/VWI0UBxnG7f7_DV7

PeerJS provides a complete, configurable, and easy-to-use peer-to-peer API built on top of WebRTC, supporting both data channels and media streams.

Live Example

Here's an example application that uses both media and data connections: https://glitch.com/~peerjs-video. The example also uses its own PeerServer.

Setup

Include the library

with npm npm install peerjs

with yarn yarn add peerjs

// The usage -
import Peer from 'peerjs';

Create a Peer

const peer = new Peer('pick-an-id'); 
// You can pick your own id or omit the id if you want to get a random one from the server.

Data connections

Connect

const conn = peer.connect('another-peers-id');
conn.on('open', () => {
  conn.send('hi!');
});

Receive

peer.on('connection', (conn)

…

View on GitHub

3. Shoelace

A forward-thinking library of web components.

Shoelace

A forward-thinking library of web components.

Works with all frameworks 🧩
Works with CDNs 🚛
Fully customizable with CSS 🎨
Includes an official dark theme 🌛
Built with accessibility in mind ♿️
Open source 😸

Designed in New Hampshire by Cory LaViska.

Documentation: shoelace.style

Source: github.com/shoelace-style/shoelace

Twitter: @shoelace_style

Shoemakers 🥾

Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 12.10.0 to build and run the project locally.

You don't need to do any of this to use Shoelace! This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.

If that's not what you're trying to do, the documentation website is where you want to be.

What are you using to build Shoelace?

Components are built with LitElement, a custom elements base class…

View on GitHub

4. JavaScript obfuscator

JavaScript Obfuscator is a powerful free obfuscator for JavaScript, containing a variety of features which provide protection for your source code.

javascript-obfuscator / javascript-obfuscator

A powerful obfuscator for JavaScript and Node.js

JavaScript obfuscator

JavaScript Obfuscator is a powerful free obfuscator for JavaScript, containing a variety of features which provide protection for your source code.

Key features:

variables renaming
strings extraction and encryption
dead code injection
control flow flattening
various code transformations
and more...

The example of obfuscated code: github.com

Huge thanks to all supporters!

NOTE! the README on the master branch might not match that of the latest stable release!

If you have a question, check this section first: FAQ

⚠️ Important

Only obfuscate the code that belongs to you.

It is not recommended to obfuscate vendor scripts and polyfills, since the obfuscated code is 15-80% slower (depends on options)…

View on GitHub

5. Macintosh.js

This is Mac OS 8, running in an Electron app pretending to be a 1991 Macintosh Quadra. Yes, it's the full thing.

macintosh.js

This is Mac OS 8, running in an Electron app pretending to be a 1991 Macintosh Quadra. Yes, it's the full thing. I'm sorry.

Downloads

Windows	32-bit 💿 Installer \| 📦 Standalone Zip 64-bit 💿 Installer \| 📦 Standalone Zip ARM64 💿 Installer \| 📦 Standalone Zip ❓ Don't know what kind of chip you have? Hit start, enter "processor" for info
macOS	Intel Processor 📦 Standalone Zip Apple M1 Processor 📦 Standalone Zip ❓ Don't know what kind of chip you have? Learn more at apple.com
Linux	32-bit 💿 rpm \| 💿 deb 64-bit 💿 rpm \| 💿 deb ARM64 💿 rpm \| 💿 deb ARMv7 (armhf) 💿 rpm \| 💿 deb ❓ Don't know what kind of chip you have? Run `uname -m` in the console.

Does it work?

Yes! Quite well, actually - on macOS, Windows, and Linux. Bear in mind that this is written…

View on GitHub

6. Formik

Build forms in React, without the tears.

formium / formik

Build forms in React, without the tears 😭

Build forms in React, without the tears.

Visit https://formik.org to get started with Formik.

Organizations and projects using Formik

List of organizations and projects using Formik

Authors

Jared Palmer @jaredpalmer
Ian White @eonwhite

Contributors

Formik is made with <3 thanks to these wonderful people (emoji key):

_{Jared Palmer} 💬 💻 🎨 📖 💡 🤔 👀 ⚠️	_{Ian White} 💬 🐛 💻 📖 🤔 👀	_{Andrej Badin} 💬 🐛 📖	_{Adam Howard} 💬 🐛 🤔 👀	_{Vlad Shcherbin} 💬 🐛 🤔	_{Brikou CARRE} 🐛 📖	_{Sam Kvale} 🐛 💻 ⚠️
_{Jon Tansey} 🐛 💻	_{Tyler Martinez} 🐛 📖	_{Tobias Lohse} 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

TSDX - Zero-config CLI for TypeScript used by this repo. (Formik's Rollup configuration as a CLI)

Apache 2.0 License.

View on GitHub

7. Awesome Profile README templates

The aim of this repository is to collect awesome READMEs that developers around the world are using on their own profiles to act as an inspiration for others.

kautukkundan / Awesome-Profile-README-templates

A collection of awesome readme templates to display on your profile

The aim of this repository is to collect awesome READMEs that developers around the world are using on their own profiles to act as an inspiration for others. Video about GitHub Profile README

Feel free to add your own or someone else's profile README if you find it super awesome!

Don't forget to leave a if you find this repo useful ⭐

Thankyou🎆

View on GitHub

8. Docsify

A magical documentation site generator.

docsifyjs / docsify

🃏 A magical documentation site generator.

A magical documentation site generator

Gold Sponsor via Open Collective

Features

No statically built html files
Simple and lightweight
Smart full-text search plugin
Multiple themes
Useful plugin API
Compatible with IE11
Support SSR (example)
Support embedded files

Quick start

Look at this tutorial

Showcase

These projects are using docsify to generate their sites. Pull requests welcome 😊

Move to awesome-docsify

Similar projects

Project	Description
docute	📜 Effortlessly documentation done right
docpress	Documentation website generator

Contributing

Online one-click setup for Contributing

You can use Gitpod(A free online VS Code-like IDE) for contributing. With single click it'll launch a workspace and automatically:

clone the docsify repo.
install the dependencies.
start npm run dev.

So that you can start straight away.

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes…

View on GitHub

9. Nerd Fonts

Nerd Fonts is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome, Devicons, Octicons, and others.

ryanoasis / nerd-fonts

Iconic font aggregator, collection, & patcher. 3,600+ icons, 50+ patched fonts: Hack, Source Code Pro, more. Glyph collections: Font Awesome, Material Design Icons, Octicons, & more

Nerd Fonts is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome ➶, Devicons ➶, Octicons ➶, and others.

The following Sankey flow diagram shows the current glyph sets included:

_{Diagram created using @SankeyMATIC}

Important Notices

master branch file paths are not considered stable. Verify your repository URI references
cloning this repository is not recommended (due to Repo size) unless you are going to be contributing to development

TL;DR

Installation Options

View on GitHub

10. html2canvas

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.

niklasvh / html2canvas

Screenshots with JavaScript

html2canvas

Homepage | Downloads | Questions

JavaScript HTML renderer

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

How does it work?

The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.

It does not require any rendering from the server, as the whole image is created on the client's browser. However, as it is heavily dependent on the browser, this library is not suitable to be used in nodejs It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy…

View on GitHub

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.