DEV Community

Iain Freestone
Iain Freestone

Posted on • Edited 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 facebookarchive / draft-js

A React framework for building text editors.

draftjs-logo

Draft.js

Build Status npm version

Live Demo


Status

THIS PROJECT IS CURRENTLY IN MAINTENANCE MODE. It will not receive any feature updates, only critical security bug patches. On 31st December 2022 the repo will be fully archived.

For users looking for an open source alternative, Meta have been working on migrating to a new framework, called Lexical. It's still experimental, and we're working on adding migration guides, but, we believe, it provides a more performant and accessible alternative.


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…

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

Backers on Open Collective Sponsors on Open Collective Discord

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.


Special Announcement:

We now have a Discord Channel
There we plan to discuss roadmaps, feature requests, and more
Join us today


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", ()
…
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 Web standards. SHOELACE IS BECOMING WEB AWESOME πŸ‘‡πŸ‘‡πŸ‘‡

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 >= 14.17 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

You can support this project by donating:

Huge thanks to all supporters!

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

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) and the files…


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
❓ 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 entirely in JavaScript, so please adjust your…


6. Formik

Build forms in React, without the tears.

GitHub logo jaredpalmer / 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

Contributing

This monorepo uses yarn, so to start you'll need the package manager installed.

To run E2E tests you'll also need Playwright set up, which can be done locally via npx playwright install. Afterward, run yarn start:app and in a separate tab run yarn e2e:ui to boot up the test runner.

When you're done with your changes, we use changesets to manage release notes. Run yarn changeset to autogenerate notes to be appended to your pull request.

Thank you!

Contributors

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

…

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 Build & Test npm Join Discord community and chat about Docsify Gitpod Ready-to-Code

Gold Sponsor via Open Collective

Docsify turns one or more Markdown files into a Website, with no build process required.

Features

  • No statically built html files
  • Simple and lightweight
  • Smart full-text search plugin
  • Multiple themes
  • Useful plugin API
  • Emoji support

Quick Start

Get going fast by using a static web server or GitHub Pages with this ready-to-use Docsify Template, review the quick start tutorial or jump right into a CodeSandbox example site with the button below.

Edit 307qqv236

Showcase

A large collection of showcase projects are included in awesome-docsify.

Links

Contributing

See CONTRIBUTING.md.

Backers

Thank you to all our backers! πŸ™ [Become a backer]

Sponsors

Thank you for supporting this project! ❀️ [Become a sponsor]

Contributors

This project exists thanks to…





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 Code of Conduct PRs Welcome Nerd Fonts - OS Support

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