DEV Community

Iain Freestone
Iain Freestone

Posted on • Updated on

πŸš€10 Trending projects on GitHub for web developers - 31st July 2020

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.

GitHub logo facebook / draft-js

A React framework for building text editors.

draftjs-logo

Draft.js

Build Status npm version

Live Demo


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…


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.

GitHub logo peers / peerjs

Simple peer-to-peer with WebRTC

PeerJS: Simple peer-to-peer with WebRTC

https://t.me/joinchat/VWI0UBxnG7f7_DV7

Backers on Open Collective Sponsors on Open Collective

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';
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Data connections

Connect

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

Receive

peer.on('connection', (conn)
…
Enter fullscreen mode Exit fullscreen mode

3. Shoelace

A forward-thinking library of web components.

GitHub logo shoelace-style / shoelace

A collection of professionally designed, every day UI components built on a framework-agnostic technology. πŸ₯Ύ

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…


4. JavaScript obfuscator

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

GitHub logo javascript-obfuscator / javascript-obfuscator

A powerful obfuscator for JavaScript and Node.js

JavaScript obfuscator

logo

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

Online version:

obfuscator.io

Plugins:

npm version FOSSA Status Build Status Coverage Status Backers on Open Collective Sponsors on Open Collective xscode

You can support this project by donating:

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)…


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.

GitHub logo felixrieseberg / macintosh.js

πŸ–₯ A virtual Apple Macintosh with System 8, running in Electron. I'm sorry.

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.

Screenshot

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…


6. Formik

Build forms in React, without the tears.

GitHub logo formium / formik

Build forms in React, without the tears 😭

Formik.js

Build forms in React, without the tears.

Stable Release Blazing Fast gzip size license Discord

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

Organizations and projects using Formik

List of organizations and projects using Formik

Authors

Contributors

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

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

Related

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

Apache 2.0 License.





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.

GitHub logo kautukkundan / Awesome-Profile-README-templates

A collection of awesome readme templates to display on your profile

banner

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πŸŽ†





8. Docsify

A magical documentation site generator.

GitHub logo docsifyjs / docsify

πŸƒ A magical documentation site generator.

docsify

A magical documentation site generator

Backers on Open Collective Sponsors on Open Collective Unit tests Suite Linting Checks Testing the e2e test suites npm donate Join Discord community and chat about Docsify Gitpod Ready-to-Code

Gold Sponsor via Open Collective

Links

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

Edit 307qqv236

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.

Open in Gitpod

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

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.

GitHub logo 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 Logo

Iconic font aggregator, collection, and patcher

ReleasesΒ Β Β |Β Β Β FontsΒ Β Β |Β Β Β Font PatcherΒ Β Β |Β Β Β Wiki DocumentationΒ Β Β |Β Β Β StickersΒ Β Β |Β Β Β VimDevIcons

GitHub release Gitter Build Status Code of Conduct PRs Welcome Nerd Fonts - OS Support Twitter

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:

@SankeyMATIC Diagram

Diagram created using @SankeyMATIC

Important Notices

Table of Contents

TL;DR

Installation Options






10. html2canvas

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

GitHub logo niklasvh / html2canvas

Screenshots with JavaScript

html2canvas

Homepage | Downloads | Questions

Gitter CI NPM Downloads NPM Version

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…


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.

Top comments (10)

Collapse
 
maxiqboy profile image
Thinh Nguyen

Awesome post as usual,

Thanks,

Collapse
 
iainfreestone profile image
Iain Freestone

Thanks Thinh, glad you enjoy the series. I enjoy creating it, so many great projects out there!

Collapse
 
sebastiandg7 profile image
SebastiΓ‘n Duque G

Great and very useful post!!! Thanks a lot Iain!

Collapse
 
iainfreestone profile image
Iain Freestone

Thank you SebastiΓ‘n. It is a great series to research and publish each week

Collapse
 
hasone profile image
HasOne

I appreciate your work. we probably need these, thanks!

Collapse
 
iainfreestone profile image
Iain Freestone

Thank you, appreciated

Collapse
 
armstockliu profile image
εˆ˜ε΄‡

awesome!saved.

Collapse
 
iainfreestone profile image
Iain Freestone

Thank you εˆ˜ε΄‡

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Awesome stuff! there's always the hidden gem in these posts.
Thanks a bunch.

Collapse
 
iainfreestone profile image
Iain Freestone • Edited

The hidden gems are always the best ones! Glad you found it useful