🚀10 Trending projects on GitHub for web developers - 16th October 2020

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

1. Module Federation Examples

This repository is to showcase examples on Webpack 5's new Module Federation can be used.

module-federation / module-federation-examples

Implementation examples of module federation , by the creators of module federation

Module Federation Examples

This repository is to showcase examples of how Webpack 5's new Module Federation can be used.

Module Federation Universe

• Module federation enhances collections: Universe
• Module Federation Docs: Module Federation Docs

List of Examples

Click here to see the detailed list of examples in this repo Full Examples List

Check out our book

	We will be actively updating this book over the next year as we learn more about best practices and what issues people are running into with Module Federation, as well as with every release of Webpack as it moves towards a release candidate and release. So with your one purchase you are buying a whole year of updates.

Consultations

1 Hour group consultation	$100
30 Min 1:1 consultation	$60
15 Min 1:1 consultation	$30
Bespoke API modifications and hands on code	$300-$500/hr

Notes

The examples in this repository leverage pnpm and workspaces. To run from…

View on GitHub

---

2. Matter.js

Matter.js is a JavaScript 2D rigid body physics engine for the web

liabru / matter-js

a 2D rigid body physics engine for the web ▲● ■

Matter.js is a JavaScript 2D rigid body physics engine for the web

brm.io/matter-js

Demos ・ Gallery ・ Features ・ Plugins ・ Install ・ Usage ・ Examples ・ Docs ・ Wiki ・ References ・ License

Demos

Mixed Shapes Solid Shapes Concave SVG Paths Concave Terrain Concave Bodies Compound Bodies Newton's Cradle Wrecking Ball Slingshot Game Rounded Corners Views Time Scaling Body Manipulation Composite Manipulation

Raycasting Sprites Pyramid Car Catapult Reverse Gravity Bridge Avalanche Basic Soft Bodies Cloth Events Collision Filtering Chains Ball Pool

Stack Circle Stack Compound Stack Restitution Friction Air Friction Static Friction Sleeping Beach Balls Stress 1 Stress 2 Sensors

Gallery

See how others are using matter.js physics

• Patrick Heng by Patrick Heng
• USELESS by Nice and Serious
• Secret 7 by Goodness
• New Company by New Company
• Game of The Year by Google
• Pablo The Flamingo by Nathan Gordon
• Les métamorphoses de Mr. Kalia by Lab212
• Phaser by Photon…

View on GitHub

---

3. React-Grid-Layout

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

react-grid-layout / react-grid-layout

A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

RGL is React-only and does not require jQuery.

GIF from production usage on BitMEX.com

[Demo | Changelog | CodeSandbox Editable demo]

Table of Contents

• Demos
• Features
• Installation
• Usage
• Responsive Usage
• Providing Grid Width
• Grid Layout Props
• Responsive Grid Layout Props
• Grid Item Props
• User Recipes
• Performance
• Contribute
• TODO List

Demos

1. Showcase
2. Basic
3. No Dragging/Resizing (Layout Only)
4. Messy Layout Autocorrect
5. Layout Defined on Children
6. Static Elements
7. Adding/Removing Elements
8. Saving Layout to LocalStorage
9. Saving a Responsive Layout to LocalStorage
10. Minimum and Maximum Width/Height
11. Dynamic Minimum and Maximum Width/Height
12. No Vertical Compacting (Free Movement)
13. Prevent Collision
14. Error Case
15. Toolbox
16. Drag From Outside
17. Bounded Layout
18. Responsive Bootstrap-style Layout
19. Scaled Containers
20. Allow Overlap
21. All Resizable Handles
22. Single Row Horizontal

…

View on GitHub

---

4. qiankun

An implementation of Micro Frontends, based on single-spa, but made it production-ready.

umijs / qiankun

📦 🚀 Blazing fast, simple and complete solution for micro frontends.

qiankun（乾坤）

In Chinese, qian(乾) means heaven and kun(坤) earth. qiankun is the universe.

Qiankun enables you and your teams to build next-generation and enterprise-ready web applications leveraging Micro Frontends. It is inspired by and based on single-spa.

🤔 Motivation

A quick recap about the concept of Micro Frontends:

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends

Qiankun was birthed internally in our group during the time web app development by distributed teams had turned to complete chaos. We faced every problem micro frontend was conceived to solve, so naturally, it became part of our solution.

The path was never easy, we stepped on every challenge there could possibly be. Just to name a few:

• In what form do micro-apps publish static resources?
• How does the framework integrate individual micro-apps?
• How to ensure that sub-applications…

View on GitHub

---

5. React Flow

React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls.

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.

Powerful open source libraries for building node-based UIs with React or Svelte. Ready out-of-the-box and infinitely customizable.

React Flow · Svelte Flow · React Flow Pro · Discord

---

The xyflow mono repo

The xyflow repository is the home of four packages:

• React Flow 12 @xyflow/react packages/react
• React Flow 11 reactflow v11 branch
• Svelte Flow @xyflow/svelte packages/svelte
• Shared helper library @xyflow/system packages/system

Commercial usage

Are you using React Flow or Svelte Flow for a personal project? Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟

Are you using React Flow or Svelte Flow at your organization and making money from it? Awesome! We rely on your support to keep our libraries developed and maintained under an MIT License, just how we like it. For React Flow you can do that on the React Flow…

View on GitHub

---

6. Pre-trained TensorFlow.js models

This repository hosts a set of pre-trained models that have been ported to TensorFlow.js. The models are hosted on NPM and unpkg so they can be used in any project out of the box. They can be used directly or used in a transfer learning setting with TensorFlow.js.

tensorflow / tfjs-models

Pretrained models for TensorFlow.js

Pre-trained TensorFlow.js models

This repository hosts a set of pre-trained models that have been ported to TensorFlow.js.

The models are hosted on NPM and unpkg so they can be used in any project out of the box. They can be used directly or used in a transfer learning setting with TensorFlow.js.

To find out about APIs for models, look at the README in each of the respective directories. In general, we try to hide tensors so the API can be used by non-machine learning experts.

For those interested in contributing a model, please file a GitHub issue on tfjs to gauge interest. We are trying to add models that complement the existing set of models and can be used as building blocks in other apps.

Models

Type	Model	Demo	Details	Install
Images	MobileNet	live	Classify images with labels from the ImageNet database.	npm i @tensorflow-models/mobilenet
		source
	Hand	live	Real-time

…

View on GitHub

---

7. Fluid

The Fluid Framework is a TypeScript library for building distributed, real-time collaborative web applications.

microsoft / FluidFramework

Library for building distributed, real-time collaborative web applications

Fluid

The Fluid Framework is a library for building distributed, real-time collaborative web applications using JavaScript or TypeScript.

Getting started using the Fluid Framework

You may be here because you want to...

• Learn more about the Fluid Framework
• Build a Fluid object

Documentation and guides can be found at https://fluidframework.com/.

Hello World repo can be found at https://github.com/microsoft/FluidHelloWorld.

Core Examples repo can be found at https://github.com/microsoft/FluidExamples.

Have questions? Engage with other Fluid Framework users and developers in the Discussions section of our GitHub repo.

Using Fluid Framework libraries

When taking a dependency on a Fluid Framework library's public APIs, we recommend using a ^ (caret) version range, such as ^1.3.4. While Fluid Framework libraries may use different ranges with interdependencies between other Fluid Framework libraries, library consumers should always prefer ^.

If using any of Fluid Framework's unstable APIs (for example, its beta APIs), we…

View on GitHub

---

8. Locomotive Scroll

Detection of elements in viewport & smooth scrolling with parallax effects.

locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.

🚀 Locomotive Scroll v5 Beta Release

Try out the beta version of Locomotive Scroll v5!

🔗 Click here to try Locomotive Scroll v5 Beta

Your feedback is valuable during this beta testing phase. If you encounter any issues or have suggestions, please open an issue.

Happy scrolling! 😄

Locomotive Scroll

Detection of elements in viewport & smooth scrolling with parallax effects.

Installation

⚠️ Scroll-hijacking is a controversial practice that can cause usability, accessibility, and performance issues. Please use responsibly.

npm install locomotive-scroll

Usage

Basic

With simple detection.

HTML

<h1 data-scroll>Hey</h1>
<p data-scroll>👋</p>

CSS

Add the base styles to your CSS file.

locomotive-scroll.css

JS

With a bundler

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

Or without

<script src="locomotive-scroll.min.js"></script>
<script>
    (function (

…

View on GitHub

---

9. Fingerprint.js

Modern & flexible browser fingerprinting library

fingerprintjs / fingerprintjs

The most advanced browser fingerprinting library.

FingerprintJS is a source-available, client-side, browser fingerprinting library that queries browser attributes and computes a hashed visitor identifier from them. Unlike cookies and local storage, a fingerprint stays the same in incognito/private mode and even when browser data is purged.

FingerprintJS is available under a BSL license for non-production purposes.

FingerprintJS is different from Fingerprint Identification, our more detailed and accurate commercial product. See below for more information.

Demo

Visit https://fingerprintjs.github.io/fingerprintjs to see your visitor identifier.

Now, try visiting the same page in private / incognito mode and notice how the visitor identifier remains the same!

Getting Started

<script>
  // Initialize the agent at application startup.
  // If you're using an ad blocker or Brave/Firefox, this import will not work.
  // Please use the NPM package instead: https://t.ly/ORyXk
  const fpPromise = import('https://openfpcdn.io/fingerprintjs/v4')
    .then(FingerprintJS => FingerprintJS.load(

…

View on GitHub

---

10. Docusaurus

Docusaurus is a project for building, deploying, and maintaining open source project websites easily.

facebook / docusaurus

Easy to maintain open source documentation websites.

Docusaurus

Introduction

Docusaurus is a project for building, deploying, and maintaining open source project websites easily.

Short on time? Check out our 5-minute tutorial ⏱️!

Tip: use docusaurus.new to test Docusaurus immediately in a playground.

• Simple to Start

Docusaurus is built in a way so that it can get running in as little time as possible. We've built Docusaurus to handle the website build process so you can focus on your project.

• Localizable

Docusaurus ships with localization support via CrowdIn. Empower and grow your international community by translating your documentation.

• Customizable

While Docusaurus ships with the key pages and sections you need to get started, including a home page, a docs section, a blog, and additional support pages, it is also customizable as well to ensure you have a site that is uniquely yours.

Installation

Use the initialization CLI to create your site:

npm init docusaurus@latest

…

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.

Comments

[Ankur V]

Thanks

[John Peters]

Fluid Framework says this :

An application model with data persistence requiring no custom server code.

Now that's interesting.

[Rowe Morehouse]

@iaian — how do you do the embeds like that on your post?

… the way the github repo html is embedded into the dev.to post.

[Iain Freestone]

Hi Rowe

Check out this page under "GitHub Repo Embed"

dev.to/p/editor_guide

Hope that helps