Iain Freestone

Posted on Dec 31, 2021

🚀10 Trending projects on GitHub for web developers - 31st December 2021

#react #javascript #webdev #productivity

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

1. Editor.js

A block-styled editor with clean JSON output

codex-team / editor.js

A block-styled editor with clean JSON output

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Opera
Edge 12+	Firefox 18+	Chrome 49+	Safari 10+	Safari 10+	Opera 36+

If you like a project 💗💗💗

If you like Editor.js you can support project improvements and development of new features with a donation to our collective.

👉 https://opencollective.com/editorjs

Backers

Thank you to all our backers! 🙏 [Become a backer]

Contributors

This project exists thanks to all the people who contribute.

We really welcome new contributors. If you want to make some code with us, please take a look at the Good First Tasks. You can write to us on team@codex.so or via special Telegram chat, or any other way.

Documentation

Please visit https://editorjs.io/ to view all documentation articles.

Base…

View on GitHub

2. PurgeCSS

PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.

FullHuman / purgecss

Remove unused CSS

PurgeCSS

What is PurgeCSS?

When you are building a website, chances are that you are using a css framework like Bootstrap, Materializecss, Foundation, etc... But you will only use a small set of the framework and a lot of unused css styles will be included.

This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.

Sponsors 🥰

Documentation

You can find the PurgeCSS documentation on this website.

PurgeCSS

Plugins

Guides

Getting Started

Installation

npm i --save-dev purgecss

Usage

import PurgeCSS from "purgecss";
const purgeCSSResults = await new PurgeCSS().purge(

…

View on GitHub

3. Wouter

A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but Hooks.

molefrog / wouter

🥢 A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but HOOKS.

wouter is a tiny router for modern React and Preact apps that relies on Hooks.
A router you wanted so bad in your project!

Features

Zero dependency, only 1.36 KB gzipped vs 11KB React Router.
Supports both React and Preact! Read "Preact support" section for more details.
No top-level <Router /> component, it is fully optional.
Mimics React Router's best practices by providing familiar Route, Link, Switch and Redirect components.
Has hook-based API for more granular control over routing (like animations): useLocation, useRoute and useRouter.

developers 💖 wouter

... I love Wouter. It’s tiny, fully embraces hooks, and has an intuitive and barebones API. I can accomplish everything I could with react-router with Wouter, and it just feels more minimalist while not being inconvenient.

Matt Miller, An exhaustive React ecosystem for 2020

Wouter provides a simple API that many developers and…

View on GitHub

4. bundlesize

Keep your bundle size in check

siddharthkp / bundlesize

Keep your bundle size in check

Keep your bundle size in check

Setup

npm install bundlesize --save-dev
# or

yarn add bundlesize --dev

Usage

Add it to your scripts in package.json

"scripts": {
  "test": "bundlesize"
}

Or you can use it with npx from NPM 5.2+.

npx bundlesize

Configuration

bundlesize accepts an array of files to check.

[
  {
    "path": "./build/vendor.js",
    "maxSize": "30 kB"
  },
  {
    "path": "./build/chunk-*.js",
    "maxSize": "10 kB"
  }
]

You can keep this array either in

package.json

{
  "name": "your cool library",
  "version": "1.1.2",
  "bundlesize": [
    {
      "path": "./build/vendor.js",
      "maxSize": "3 kB"
    }
  ]
}

or in a separate file

bundlesize.config.json

Format:

{
  "files": [
    {
      "path": "./dist.js"
      "maxSize": "3

…

View on GitHub

5. MindAR

Web Augmented Reality. Natural feature tracking. Image targets. Tensorflow.js

hiukim / mind-ar-js

Web Augmented Reality. Natural feature tracking. Image targets. Tensorflow.js

MindAR

For location-based AR and marker-based AR, checkout AR.js https://github.com/AR-js-org/AR.js

MindAR is a lightweight library for web augmented reality. Highlighted features include:

⭐ Support Image tracking and Face tracking

⭐ Written in pure javascript, end-to-end from the underlying computer vision engine to frontend

⭐ Utilize gpu (through webgl) and web worker for performance

⭐ Developer friendly. Easy to setup. With AFRAME extension, you can get your app starts with only 10 lines of codes

Web AR Development Course - Fund Raising

To raise fund for the continuous development and support of the MindAR Library, I've created a WebAR development course. It's a very comprehensive guide to Web AR development, not limited to MindAR. Check it out if you are interested:

https://www.udemy.com/course/introduction-to-web-ar-development/?referralCode=D2565F4CA6D767F30D61

Managed Solution - Pictarize

This opensource project is under MIT, so you are free to use however you want. There is also a hosted platform built on top of…

View on GitHub

6. Snap page

Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour

lucafalasco / scroll-snap

↯ Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour

`scroll-snap`

Snap page when user stops scrolling, basically implements CSS Scroll Snap, adding a customizable configuration and a consistent cross browser behaviour.

Works in all modern browsers
requestAnimationFrame for 60fps
Customizable settings (including easing functions)
No additional dependencies
No extra stylesheet

Installation

yarn add scroll-snap

You can also grab a pre-built version from unpkg

Usage

createScrollSnap(element, settings, [callback])

Arguments

`element: HTMLElement`

The HTML DOM Element to attach the scroll listener to.

`settings: Settings`

A configuraiton object consisting of one or more of the following keys:

`snapDestinationX: string | number`

Snap destination for x axis, should be a valid css value expressed as px | % | vw | vh

`snapDestinationY: string | number`

Snap destination for y axis, should be a valid css value expressed as px | % | vw | vh

`timeout: number`

Time in ms after which scrolling is…

View on GitHub

7. Dependency cruiser

Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.

sverweij / dependency-cruiser

Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.

Dependency cruiser

Validate and visualise dependencies. With your rules. JavaScript. TypeScript. CoffeeScript. ES6, CommonJS, AMD.

What's this do?

This runs through the dependencies in any JavaScript, TypeScript, LiveScript or CoffeeScript project and ...

... validates them against (your own) rules
... reports violated rules
- in text (for your builds)
- in graphics (for your eyeballs)

As a side effect it can generate cool dependency graphs you can stick on the wall to impress your grandma.

How do I use it?

Install it

npm install --save-dev dependency-cruiser to use it as a validator in your project (recommended) or...
npm install --global dependency-cruiser if you just want to inspect multiple projects.

Show stuff to your grandma

To create a graph of the dependencies in your src folder, you'd run dependency cruiser with output type dot and run GraphViz dot on the result. In a one liner:

depcruise --include-only "^src" --output-type dot

…

View on GitHub

8. React Rich Text Editor

Pure React rich text WYSIWYG editor based on draft-js.

sstur / react-rte

Pure React rich text WYSIWYG editor based on draft-js.

React Rich Text Editor

This is a UI component built completely in React that is meant to be a full-featured textarea replacement similar to CKEditor, TinyMCE and other rich text "WYSIWYG" editors. It's based on the excellent, open source Draft.js from Facebook which is performant and production-tested.

Demo

Try the editor here: react-rte.org/demo

Getting Started

$ npm install --save react-rte

RichTextEditor is the main editor component. It is comprised of the Draft.js <Editor>, some UI components (e.g. toolbar) and some helpful abstractions around getting and setting content with HTML/Markdown.

RichTextEditor is designed to be used like a textarea except that instead of value being a string, it is an object with toString on it. Creating a value from a string is also easy using createValueFromString(markup, 'html').

Browser Compatibility

The scripts are transpiled by Babel to ES6. Additionally, at least one of this package's dependencies does not…

View on GitHub

9. Changesets

A way to manage your versioning and changelogs with a focus on monorepos

changesets / changesets

🦋 A way to manage your versioning and changelogs with a focus on monorepos

A tool to manage versioning and changelogs
with a focus on multi-package repositories

The changesets workflow is designed to help when people are making changes, all the way through to publishing. It lets contributors declare how their changes should be released, then we automate updating package versions, and changelogs, and publishing new versions of packages based on the provided information.

Changesets has a focus on solving these problems for multi-package repositories, and keeps packages that rely on each other within the multi-package repository up-to-date, as well as making it easy to make changes to groups of packages.

How do we do that?

A changeset is an intent to release a set of packages at particular semver bump types with a summary of the changes made.

The @changesets/cli package allows you to write changeset files as you make changes, then combine any number of changesets into a release, that flattens the…

View on GitHub

10. React Table

Hooks for building fast and extendable tables and datagrids for React

tannerlinsley / react-table

⚛️ Hooks for building fast and extendable tables and datagrids for React

Hooks for building lightweight, fast and extendable datagrids for React

Enjoy this library? Try them all! React Query, React Form, React Charts

Visit react-table.tanstack.com for docs, guides, API and more!

Quick Features

Lightweight (5kb - 14kb+ depending on features used and tree-shaking)
Headless (100% customizable, Bring-your-own-UI)
Auto out of the box, fully controllable API
Sorting (Multi and Stable)
Filters
Pivoting & Aggregation
Row Selection
Row Expansion
Column Ordering
Animatable
Virtualizable
Resizable
Server-side/controlled data/state
Extensible via hook-based plugin system

Become a Sponsor

Previous Versions

Version 6

v6 is a great library and while it is still available to install and use, I am no longer offering any long-term support for it. If you intend to keep using v6, I recommend maintaining your own fork of the library and keeping it up to date for your version of React.

Where are the docs for the older v6 version?

Please visit…

View on GitHub

Stargazing 📈

For all for the latest rankings please checkout Stargazing.dev

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

If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.

1. Editor.js

codex-team / editor.js

A block-styled editor with clean JSON output

If you like a project 💗💗💗

Sponsors

Backers

Contributors

Documentation

2. PurgeCSS

FullHuman / purgecss

Remove unused CSS

PurgeCSS

What is PurgeCSS?

Sponsors 🥰

Documentation

Table of Contents

PurgeCSS

Plugins

Guides

Getting Started

Installation

Usage

3. Wouter

molefrog / wouter

🥢 A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but HOOKS.

Features

developers 💖 wouter

4. bundlesize

siddharthkp / bundlesize

Keep your bundle size in check

Setup

Usage

Configuration

5. MindAR

hiukim / mind-ar-js

Web Augmented Reality. Natural feature tracking. Image targets. Tensorflow.js

MindAR

Web AR Development Course - Fund Raising

Managed Solution - Pictarize

6. Snap page

lucafalasco / scroll-snap

↯ Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour

scroll-snap

Installation

Usage

Arguments

element: HTMLElement

settings: Settings

snapDestinationX: string | number

snapDestinationY: string | number

timeout: number

7. Dependency cruiser

sverweij / dependency-cruiser

Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.

Dependency cruiser

What's this do?

How do I use it?

Install it

Show stuff to your grandma

8. React Rich Text Editor

sstur / react-rte

Pure React rich text WYSIWYG editor based on draft-js.

React Rich Text Editor

Demo

Getting Started

Browser Compatibility

9. Changesets

changesets / changesets

🦋 A way to manage your versioning and changelogs with a focus on monorepos

How do we do that?

10. React Table

tannerlinsley / react-table

⚛️ Hooks for building fast and extendable tables and datagrids for React

Visit react-table.tanstack.com for docs, guides, API and more!

Quick Features

Become a Sponsor

Previous Versions

Version 6

Where are the docs for the older v6 version?

Stargazing 📈

`scroll-snap`

`element: HTMLElement`

`settings: Settings`

`snapDestinationX: string | number`

`snapDestinationY: string | number`

`timeout: number`