loading...

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

iainfreestone profile image Iain Freestone ・2 min read

Trending projects on GitHub for web developers (11 Part Series)

1) πŸš€10 Trending projects on GitHub for web developers - 30th May 2020 2) πŸš€10 Trending projects on GitHub for web developers - 5th June 2020 3 ... 9 3) πŸš€10 Trending projects on GitHub for web developers - 12th June 2020 4) πŸš€10 Trending projects on GitHub for web developers - 19th June 2020 5) πŸš€10 Trending projects on GitHub for web developers - 26th June 2020 6) πŸš€10 Trending projects on GitHub for web developers - 3rd July 2020 7) πŸš€10 Trending projects on GitHub for web developers - 10th July 2020 8) πŸš€10 Trending projects on GitHub for web developers - 17th July 2020 9) πŸš€10 Trending projects on GitHub for web developers - 24th July 2020 10) πŸš€10 Trending projects on GitHub for web developers - 31st July 2020 11) πŸš€10 Trending projects on GitHub for web developers - 7th August 2020

Trending Projects is available as a weekly newsletter please sign up at www.trendingprojects.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.

API Notice

Before getting started, please be aware that we recently changed the API of Entity storage in Draft. The latest version, v0.10.0, supports both the old and new API. Following that up will be v0.11.0 which will remove the old API If…


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

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 and 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) => {
  conn.on(
…

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 🎨
  • 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 "developers," can use this documentation to learn how to build Shoelace from source.

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 Stencil, a compiler that generates standards-based web components. The source code is a combination of TypeScript + JSX (TSX). Stylesheets are written in SCSS.

The build…


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

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) 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 macOS Linux
Standalone Download πŸ“¦Standalone, 32-bit
πŸ“¦Standalone, 64-bit
πŸ“¦Standalone
Installer πŸ’½Setup, 64-bit
πŸ’½Setup, 32-bit
πŸ’½deb, 64-bit
πŸ’½rpm, 64-bit

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 expectations. The virtual machine is emulating a 1991 Macintosh Quadra 900 with a Motorola CPU, which Apple used before switching to the PowerPC architecture (Apple/IBM/Motorola) in the mid 1990s.

Should this have been a native app?

Absolutely.

Does it run my favorite game or app?

The short answer is "Yes". In fact, you'll find various games and demos preinstalled, thanks to an old MacWorld Demo CD from 1997. Namely, Oregon Trail…


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 Join the community on Spectrum

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.

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 found this useful.





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 gitter 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 Build Status 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.trendingprojects.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.

Trending projects on GitHub for web developers (11 Part Series)

1) πŸš€10 Trending projects on GitHub for web developers - 30th May 2020 2) πŸš€10 Trending projects on GitHub for web developers - 5th June 2020 3 ... 9 3) πŸš€10 Trending projects on GitHub for web developers - 12th June 2020 4) πŸš€10 Trending projects on GitHub for web developers - 19th June 2020 5) πŸš€10 Trending projects on GitHub for web developers - 26th June 2020 6) πŸš€10 Trending projects on GitHub for web developers - 3rd July 2020 7) πŸš€10 Trending projects on GitHub for web developers - 10th July 2020 8) πŸš€10 Trending projects on GitHub for web developers - 17th July 2020 9) πŸš€10 Trending projects on GitHub for web developers - 24th July 2020 10) πŸš€10 Trending projects on GitHub for web developers - 31st July 2020 11) πŸš€10 Trending projects on GitHub for web developers - 7th August 2020

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

markdown guide
 

Awesome post as usual,

Thanks,

 

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

 

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

 

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

 

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

 
 
 

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

 

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