loading...

πŸš€10 Trending projects on GitHub for web developers - 16th October 2020

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ・2 min read

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.

GitHub logo 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 on Webpack 5's new Module Federation can be used.

If you need support, consider looking at my sponsor profile https://github.com/sponsors/ScriptedAlchemy For companies that require consultations, contact me on twitter or email (on github profile)

Youtube Screencasts https://www.youtube.com/playlist?list=PLWSiF9YHHK-DqsFHGYbeAMwbd9xcZbEWJ

Info site https://module-federation.github.io/

Official Docs https://webpack.js.org/concepts/module-federation

Original Webpack Issue https://github.com/webpack/webpack/issues/10352

Medium post https://link.medium.com/xzFgBBtAx6

JSNation Presentation https://github.com/sokra/slides/blob/master/content/ModuleFederationWebpack5.md

Check out our book

Examples

Legend:

  • ⚠️: In Progress/Incomplete
  • πŸ”’: Depends on proprietary code that isn't free.
  • Advanced API β€” showcasing advanced API use, also seen in…

2. Matter.js

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


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.


4. qiankun

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

GitHub logo umijs / qiankun

πŸ“¦ πŸš€ Blazing fast, simple and completed solution for micro frontends.

qiankunοΌˆδΉΎε€οΌ‰

npm version coverage npm downloads Build Status

In Chinese traditional culture qian means heaven and kun stands for earth, so qiankun is the universe.

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

πŸ€” Motivation

As we know what micro-frontends aims for:

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

Modularity is very important for large application. By breaking down a large system into individual sub-applications, we can achieve good divide-and-conquer between products and when necessary combination, especially for enterprise applications that usually involve multi-team collaboration. But if you're trying to implement such a micro frontends architecture system by yourself, you're likely to run into some tricky problems:

  • In what form do sub applications publish static resources?
  • How does the main application integrate individual sub-applications?
  • How do you ensure that sub-applications are independent of each other (development independent…

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.

GitHub logo wbkd / react-flow

Highly customizable library for building interactive node-based editors, flow charts and diagrams

react-flow

✨ React Flow has a new website ✨

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. Feel free to check out the examples or read the blog post to get started.

Key Features

  • Easy to use: Seamless zooming & panning behaviour and single and multi-selections of elements
  • Customizable: Different node and edge types and support for custom nodes with multiple handles and custom edges
  • Fast rendering: Only nodes that have changed are re-rendered and only those that are in the viewport are displayed
  • Utils: Snap-to-grid and graph…

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.

GitHub logo 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
Classify images with labels from the ImageNet database. npm i @tensorflow-models/mobilenet
source
PoseNet
live A machine
…

7. Fluid

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

GitHub logo microsoft / FluidFramework

Library for building distributed, real-time collaborative web applications

Fluid

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

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

Code structure

The core code for both the Fluid client packages and the reference ordering service is contained within this repo.

The repo structure is somewhat unique because it contains two monorepos as well as several standalone packages. The monorepos are managed using Lerna and are versioned separately from one another, but internally all packages in a monorepo are versioned together. Outside the monorepos there are plenty of packages which are versioned…


8. Locomotive Scroll

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

GitHub logo locomotivemtl / locomotive-scroll

πŸ›€ Detection of elements in viewport & smooth scrolling with parallax.

Locomotive Scroll

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

Installation

npm install locomotive-scroll
Enter fullscreen mode Exit fullscreen mode

Usage

Basic

With simple detection.

HTML

<h1 data-scroll>Hey</h1>
<p data-scroll>πŸ‘‹</p>
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode
Or without
<script src="locomotive-scroll.min.js"></script>
<script>
    (function () {
        var scroll = new LocomotiveScroll();
    })();
</script>
Enter fullscreen mode Exit fullscreen mode

Get the JS file.

Smooth

With smooth scrolling and parallax.

<div data-scroll-container>
    <div data-scroll-section>
        <h1 data-scroll>Hey</h1>
        <p data-scroll>πŸ‘‹</p>
    </div>
    <div data-scroll-section>
        <h2 data-scroll data-scroll-speed="
…
Enter fullscreen mode Exit fullscreen mode

9. Fingerprint.js

Modern & flexible browser fingerprinting library

GitHub logo fingerprintjs / fingerprintjs

Modern & flexible browser fingerprinting library

FingerprintJS

Build status Total downloads from NPM Current NPM version

Makes a website visitor identifier from a browser fingerprint Unlike cookies and local storage, fingerprint stays the same in incognito/private mode and even when browser data is purged.

Quick start

Install from CDN

<script>
  function onFingerprintJSLoad(fpAgent) {
    // The FingerprintJS agent is ready. Get a visitor identifier when you'd like to.
    fpAgent.get().then(result => {
      // This is the visitor identifier:
      const visitorId = result.visitorId;
      console.log(visitorId);
    });
  }
</script>
<script
  async src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3/dist/fp.min.js"
  onload="FingerprintJS.load().then(onFingerprintJSLoad)"
></script>
Enter fullscreen mode Exit fullscreen mode

We recommend to upload the JS script to your server because AdBlock and other browser extensions can block the public script URL.

Alternatively you can install from NPM to use with Webpack/Rollup/Browserify

npm i @fingerprintjs/fingerprintjs
# or
yarn add @fingerprintjs/fingerprintjs
Enter fullscreen mode Exit fullscreen mode
import
…
Enter fullscreen mode Exit fullscreen mode

10. Docusaurus

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

GitHub logo facebook / docusaurus

Easy to maintain open source documentation websites.

Docusaurus

Docusaurus

Twitter Follow npm version CircleCI status PRs Welcome Discord Chat code style: prettier Tested with Jest Gitpod Ready-to-Code Netlify Status

We are working hard on Docusaurus v2. If you are new to Docusaurus, try using the new version instead of v1. See the Docusaurus v2 website for more details.

You can see the clean live demo with classic theme by clicking this badge Runme

Introduction

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

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






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.

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

pic
Editor guide
 
 

Fluid Framework says this :

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

Now that's interesting.

 

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

 

Hi Rowe

Check out this page under "GitHub Repo Embed"

dev.to/p/editor_guide

Hope that helps