DEV Community

Iain Freestone
Iain Freestone

Posted on

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

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

GitHub logo codex-team / editor.js

A block-style editor with clean JSON output

Editor.js Logo

editorjs.io | documentation | changelog

npm Minzipped size Backers on Open Collective Sponsors on Open Collective

About

Editor.js is an open-source text editor offering a variety of features to help users create and format content efficiently. It has a modern, block-style interface that allows users to easily add and arrange different types of content, such as text, images, lists, quotes, etc. Each Block is provided via a separate plugin making Editor.js extremely flexible.

Editor.js outputs a clean JSON data instead of heavy HTML markup. Use it in Web, iOS, Android, AMP, Instant Articles, speech readers, AI chatbots — everywhere. Easy to sanitize, extend and integrate with your logic.

  • 😍  Modern UI out of the box
  • 💎  Clean JSON output
  • ⚙️  Well-designed API
  • 🛍  Various Tools available
  • 💌  Free and open source


Editor.js Overview

Installation

It's quite simple:

  1. Install Editor.js
  2. Install tools you need
  3. Initialize Editor's instance

Install using NPM, Yarn, or CDN:

npm i @editorjs/editorjs
Enter fullscreen mode Exit fullscreen mode

Choose and install tools:


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.

GitHub logo FullHuman / purgecss

Remove unused CSS

PurgeCSS

npm npm GitHub Dependabot

PurgeCSS logo

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 css files with the ones 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.

Table of Contents

PurgeCSS

Plugins

Guides

Getting Started

Installation

npm install purgecss --save-dev
Enter fullscreen mode Exit fullscreen mode

Usage

import { PurgeCSS } from "purgecss";
const purgeCSSResults = await new PurgeCSS(
Enter fullscreen mode Exit fullscreen mode

3. Wouter

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

GitHub logo molefrog / wouter

🥢 A minimalist-friendly ~2.1KB routing for React and Preact

Wouter — a super-tiny React router (logo by Katya Simacheva)

npm CI Coverage Coverage Edit in StackBlitz IDE
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

⚠️ These docs are for wouter v3 only. Please find the documentation for wouter@2.12.0 here

by Katya Simacheva

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,


4. bundlesize

Keep your bundle size in check

GitHub logo siddharthkp / bundlesize

Keep your bundle size in check



Keep your bundle size in check

 

Build Status NPM Version NPM Downloads  

Setup

npm install bundlesize --save-dev

# or

yarn add bundlesize --dev
Enter fullscreen mode Exit fullscreen mode

 

Usage

 

Add it to your scripts in package.json

"scripts": {
  "test": "bundlesize"
}
Enter fullscreen mode Exit fullscreen mode

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

npx bundlesize
Enter fullscreen mode Exit fullscreen mode

 

Configuration

 

bundlesize accepts an array of files to check.

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

 

You can keep this array either in

  1. package.json

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

    or in a separate file

  2. bundlesize.config.json

    Format:

    {
      "files": [
        {
          "path": "./dist.js"
          "maxSize": "3
    Enter fullscreen mode Exit fullscreen mode

5. MindAR

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

GitHub logo hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js

MindAR

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

⭐ Support Image tracking and Face tracking. For Location or Fiducial-Markers Tracking, checkout AR.js

⭐ 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 create an app with only 10 lines of codes

Fund Raising

MindAR is the only actively maintained web AR SDK which offer comparable features to commercial alternatives. This library is currently maintained by me as an individual developer. To raise fund for continuous development and to provide timely supports and responses to issues, here is a list of related projects/ services that you can support.

Unity WebAR Foundation

WebAR Foundation is a unity package that allows Unity developer to build WebGL-platform AR applications. It acts as a Unity Plugin that…


6. Snap page

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

GitHub logo lucafalasco / scroll-snap

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

scroll-snap


npm npm npm downloads

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
Enter fullscreen mode Exit fullscreen mode

You can also grab a pre-built version from unpkg

Usage

createScrollSnap(element, settings, [callback])
Enter fullscreen mode Exit fullscreen mode

Arguments

element: HTMLElement

The HTML DOM Element to attach the scroll listener to.

settings: Settings

A configuration 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…


7. Dependency cruiser

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

GitHub logo sverweij / dependency-cruiser

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

Dependency cruiser Dependency cruiser

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

What's this do?

Snazzy dot output to whet your appetite

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 dependency graphs in various output formats including cool visualizations you can stick on the wall to impress your grandma.

How do I use it?

Install it ...

npm install --save-dev dependency-cruiser
# or
yarn add -D dependency-cruiser
pnpm add -D dependency-cruiser
Enter fullscreen mode Exit fullscreen mode

... and generate a config

npx depcruise --init
Enter fullscreen mode Exit fullscreen mode

This will look around in your environment a bit, ask you some questions and create a .dependency-cruiser.js configuration file attuned to your project12.

Show stuff to your grandma

To create a graph of the dependencies in your…


8. React Rich Text Editor

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

GitHub logo sstur / react-rte

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

Deprecated

This repository is long ourdated and even Draft.js (on which this editor is built) is long outdated and has been superceded by Lexical.

I don't recommend you use this in your project. There are many great alternatives such as TipTap.

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

Screenshot 1

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…


9. Changesets

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

GitHub logo 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

View changelog

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…





10. React Table

Hooks for building fast and extendable tables and datagrids for React

GitHub logo TanStack / table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

TanStack Table Header

TanStack Table v8

Headless UI for building powerful tables & datagrids for React, Solid, Vue, Svelte, Qwik and TS/JS.

#TanStack semantic-release Join the discussion on Github

Looking for version 7 of react-table? Click here!

Enjoy this library?

Try other TanStack libraries:

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

You may know TanStack Table by our adapter names, too!

Summary

TanStack Table is a headless table library, which means it does not ship with components, markup or styles. This means that you have full control over markup and styles (CSS, CSS-in-JS, UI Component Libraries, etc) and this is also what gives it its portable nature. You can even use it in React Native!

If you want a lightweight table with full control over markup and implementation, then you…


Stargazing 📈

Top risers over last 7 days🔗

  1. Every Programmer Should Know +1,585 stars
  2. Tabby +1,222 stars
  3. JavaScript Algorithms +1,219 stars
  4. Awesome +1,196 stars
  5. Awesome Self Hostsed +1,141stars

Top growth(%) over last 7 days🔗

  1. Rakkas +26%
  2. Vitest +21%
  3. Molecule +20%
  4. md-block +19%
  5. React Snowfall +14%

Top risers over last 30 days🔗

  1. Tabby +6,991 stars
  2. Free Programming Books +4,553 stars
  3. Every Programmer Should Know +4,522 stars
  4. Awesome +4,395 stars
  5. Developer Roadmap +4,253 stars

Top growth(%) over last 30 days🔗

  1. Pico +394%
  2. Rakkas +150%
  3. Remix Auth +91%
  4. React Snowfall +87%
  5. Agrippa +85%

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.

Top comments (0)