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.
| 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 |
| Post about Dynamic Remotes | https://h3manth.com/posts/dynamic-remotes-webpack-module-federation/ |
Check out our book
Consultations
| 1 Hour group consultation | $100 |
|---|---|
| 30 Min 1:1 consultation | $60 |
| 15 Min 1:1 consultation | $30 |
| Bespoke API modifications |
2. Matter.js
Matter.js is a JavaScript 2D rigid body physics engine for the web
Matter.js is a JavaScript 2D rigid body physics engine for the web
Demos ・ Gallery ・ Features ・ Plugins ・ Install ・ Usage ・ Examples ・ Docs ・ Wiki ・ References ・ License
Demos
|
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…
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
- Showcase
- Basic
- No Dragging/Resizing (Layout Only)
- Messy Layout Autocorrect
- Layout Defined on Children
- Static Elements
- Adding/Removing Elements
- Saving Layout to LocalStorage
- Saving a Responsive Layout to LocalStorage
- Minimum and Maximum Width/Height
- Dynamic Minimum and Maximum Width/Height
- No Vertical Compacting (Free Movement)
- Prevent Collision
- Error Case
- Toolbox
- Drag From Outside
- Bounded Layout
- Resizable Handles
- Scaled Containers
Projects Using React-Grid-Layout
4. qiankun
An implementation of Micro Frontends, based on single-spa, but made it production-ready.
qiankun（乾坤）
In Chinese,
qian(乾)means heaven andkun(坤)earth.qiankunis 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 are…
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.
wbkd
/
react-flow
Highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams
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.
- Website: https://reactflow.dev
- Documentation: https://reactflow.dev/docs
- Examples: https://reactflow.dev/examples
- Website/Docs Repository: https://github.com/wbkd/react-flow-docs
- Community: https://discord.gg/Bqt6xrs
React Flow was initially created for datablocks. A node-based editor for transforming, analyzing and visualizing data.
Installation
npm install react-flow-renderer
Quick Start
This is a very basic example of how to use React Flow. You can find more advanced examples on the website.
import React from 'react';
import ReactFlow from 'react-flow-renderer';
const elements = [
{ id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
// you can also pass a React component as a label…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
…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 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…
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
Detection of elements in viewport & smooth scrolling with parallax effects.
Installation
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.
JS
With a bundler
import LocomotiveScroll from 'locomotive-scroll';
const scroll = new LocomotiveScroll();
Or without
<script src="locomotive-scroll.min.js"></script>
<script>
(function () {
var scroll = new LocomotiveScroll();
})();
</script>
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="…9. Fingerprint.js
Modern & flexible browser fingerprinting library
fingerprintjs
/
fingerprintjs
Browser fingerprinting library with the highest accuracy and stability.
FingerprintJS is a 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.
Quick start
Install from CDN
<script>
function initFingerprintJS() {
// Initialize an agent at application startup.
const fpPromise = FingerprintJS.load()
// Get the visitor identifier when you need it.
fpPromise
.then(fp => fp.get())
.then(result => {
// This is the visitor identifier:
const visitorId = result.visitorId
console.log(visitorId)
})
}
</script>
<script
async
src="//cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3/dist/fp.min.js"
onload="initFingerprintJS()"
></script>
Alternatively you can install from NPM to use with Webpack/Rollup/Browserify
npm…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
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.
Docusaurus v1 doc is available at v1.docusaurus.io and code is available on branch docusaurus-v1
Introduction
Docusaurus is a project for building, deploying, and maintaining open source project websites easily.
No time? Check our 5 minutes 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…
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 (4)
Thanks
Fluid Framework says this :
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