DEV Community

Iain Freestone
Iain Freestone

Posted on • Updated on • Originally published at stargazing.dev

๐Ÿš€10 Trending projects on GitHub for web developers - 26th November 2021

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

1. Remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

GitHub logo remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

Welcome to Remix!

Remix is a framework for building better websites using modern web standards and best practices. We are happy you're here!

This repository contains the Remix source code. This repo is a work in progress, so we appreciate your patience as we figure things out.

Documentation

For documentation about Remix, please visit our website.

Also, please join our community on Discord.

The documentation is automatically generated on each release from the files in the docs directory.

Contributing

If you're interested in contributing code and/or documentation, please read this first.

Code of Conduct

Please see our code of conduct for any questions about the kind of community we are trying to build here and what to do if you need help with someone who is not acting professionally.





2. helpful-decorators

Helpful decorators for typescript projects

GitHub logo NetanelBasal / helpful-decorators

Helpful decorators for typescript projects

npm Build Status Commitizen friendly semantic-release Awesome

Helpful Decorators For Typescript Projects

Installation

npm install helpful-decorators
yarn add helpful-decorators
Enter fullscreen mode Exit fullscreen mode

Usage

delay - Add setTimeout functionality to the method

import { delay } from 'helpful-decorators';
class Test {
 @delay(1000)
 method() {
   // ...
 }
}
Enter fullscreen mode Exit fullscreen mode

debounce - Add debounce functionality to the method (options)

import { debounce } from 'helpful-decorators';

class Test {
 @debounce(1000, options)
 method() {
   // ...
 }
}
Enter fullscreen mode Exit fullscreen mode

throttle - Add throttle functionality to the method (options)

import { throttle } from 'helpful-decorators';

class Test {
 @throttle(1000, options)
 method() {
   // ...
 }
}
Enter fullscreen mode Exit fullscreen mode

once - Add once functionality to the method

import { once } from 'helpful-decorators';
class Test {
 @once
 method() {
   // This will run only once
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

3. Microdiff

A fast, zero dependency object and array comparison library. Significantly faster than most other deep comparison libraries and has full TypeScript suppor

GitHub logo AsyncBanana / microdiff

A fast, zero dependency object and array comparison library. Significantly faster than most other deep comparison libraries and has full TypeScript support.

Microdiff Logo

Microdiff is a tiny (currently <1kb), fast, zero dependency object and array comparison library. It is significantly faster than most other deep comparison libraries, and has full TypeScript support.

Minizipped Size (from Bundlephobia) License dependency Count

Features

  • ๐Ÿš€ More than double the speed of other object diff libraries
  • ๐Ÿ“ฆ Extremely lightweight, <1kb minified
  • ๐ŸŒŽ Supports Deno, Node, the web, and even service workers. Also comes with built in Typescript types
  • ๐Ÿ”ฐ Very easy to use, having just a single diff() function
  • ๐Ÿ“… Full support for objects like new Date() and new RegExp()

Get started

First, install Microdiff

npm i microdiff

If you are using Deno, you can import it from Deno.land with the link https://deno.land/x/microdiff@VERSION/index.ts (remember to change @VERSION to the version you want to use).

After you install it, simply import it and run it on two objects.

import diff from "microdiff";
const obj1 = {
    originalProperty: true,
};
const obj2 =
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

4. the-node-way

Design patterns and best practices for building scaleable, maintainable and beautiful Node.js applications.

GitHub logo FredKSchott / the-node-way

Design patterns and best practices for building scaleable, maintainable and beautiful Node.js applications. Now with website! -->

icon the-node-way

Design patterns and best practices for building scaleable, maintainable and beautiful Node.js applications.

Introduction

What is The Node Way?

Master The Fundamentals

Understanding Error-First Callbacks
Testing Essentials

Start Building

Designing Singletons
Designing Custom Types
Designing Factories

Get Fancy

How require() Actually Works
Dangerous Module Design Patterns


Visit thenodeway.io and learn the way.
All code examples and website updates will be added to this repo. Watch for new posts, articles, and more.

2016 Copyright Fred K. Schott. All rights reserved.





5. CKEditor 5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.

GitHub logo ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.

CKEditor 5 Tweet

npm version

Build Status Dependency Status devDependency Status

Join newsletter Follow twitter

A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind.

CKEditor 5 Classic rich text editor build screenshot

Table of contents

Quick start

CKEditor 5 builds

CKEditor 5 builds are a set of ready-to-use rich text editors. Every "build" provides a single type of editor with a set of features and a default configuration.

The following CKEditor 5 builds are currently available:

Example

Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:

  1. Load the desired editor via the <script> tag.
  2. Call the static create() method to create the editor.

In your HTML page addโ€ฆ


6. react-intersection-observer

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

GitHub logo thebuilder / react-intersection-observer

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

react-intersection-observer

Version Badge GZipped size Test License Downloads

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport. Contains both a Hooks, render props and plain children implementation.

Storybook Demo: https://react-intersection-observer.vercel.app

Features

  • ๐ŸŽฃ Hooks or Component API - With useInView it's easier than ever to monitor elements
  • โšก๏ธ Optimized performance - Reuses Intersection Observer instances where possible
  • โš™๏ธ Matches native API - Intuitive to use
  • ๐Ÿงช Ready to test - Mocks the Intersection Observer for easy testing with Jest
  • ๐ŸŒณ Tree-shakeable - Only include the parts you use
  • ๐Ÿ’ฅ Tiny bundle ~1.7 kB gzipped

Installation

Install using Yarn:

yarn add react-intersection-observer
Enter fullscreen mode Exit fullscreen mode

or NPM:

npm install react-intersection-observer --save
Enter fullscreen mode Exit fullscreen mode

Usage

useInView hook

// Use object destructing, so you don't need to remember the exact order
const { ref, inView, entry } = useInView(options);
// Or array destructing, making it easy to customize the
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

7. Streak Counter

A streak counter to track your streak in days (similar to Duolingo)

GitHub logo jsjoeio / use-streak

a streak counter to track your streak in days (similar to Duolingo)

Streak Counter

npm

This is a basic streak counter - inspired by Duolingo - written in TypeScript and meant for the browser (uses localStorage).

Install

yarn add use-streak
Enter fullscreen mode Exit fullscreen mode
npm install use-streak
Enter fullscreen mode Exit fullscreen mode

Usage

import { useStreak } from "use-streak";

const today = new Date();
const streak = useStreak(localStorage, today);
// streak returns an object:
// {
//    currentCount: 1,
//    lastLoginDate: "11/11/2021",
//    startDate: "11/11/2021",
// }
Enter fullscreen mode Exit fullscreen mode

screenshot of streak demo

Edit vigorous-wood-o8m7w

LICENSE

MIT. Just make sure you give acknowledgements to this repo.





8. Pivot.js

Pivot.js is a simple way for you to get to your data. It allows for the creation of highly customizable unique table views from your browser.

GitHub logo rwjblue / pivot.js

Build Pivot Tables from CSV/JSON Data

Welcome to Pivot.js

Pivot.js is a simple way for you to get to your data. It allows for the creation of highly customizable unique table views from your browser.

In data processing, a pivot table is a data summarization tool found in data visualization programs such as spreadsheets or business intelligence software. Among other functions, pivot-table tools can automatically sort count, total or give the average of the data stored in one table or spreadsheet. It displays the results in a second table (called a "pivot table") showing the summarized data.

In our case, results (or the pivot-table) will be displayed as an HTML table pivoting from the input data (CSV or JSON). Without further ado let's get to usage.

View an example or view the Docs for more information.

Usage

Step one is to initialize the pivot object. It expects the following attributes:

  • csv - which should contain aโ€ฆ

9. mdsvex

A Markdown preprocessor for Svelte. Markdown in Svelte.

GitHub logo pngwn / MDsveX

A markdown preprocessor for Svelte.

mdsvex

A Markdown preprocessor for Svelte. Markdown in Svelte.

mdsvex.com

Packages

This is a monorepo containing mdsvex and any supporting packages. Each repo has it's own readme with more details.

  • site - The documentation website.
  • mdsvex - mdsvex itself.
  • svelte-parse - Generate a svast AST from a Svelte components.
  • svast - An AST specification with accompanying TypeScript definitions.
  • svast-stringify - Turn a svast AST into a Svelte component.
  • svast-utils - Utilities for working with a svast tree.

Contributing

Contributions are welcome. This repo uses changesets to manage changelogs and versioning. All pull requests need an accompanying changeset file (PRs to the documentation website do not need a changeset file). If you know how changesets work then feel free to add one with the appropriate packages, versions and a description of the change. If you don't know how changesets work, don't worry about it, I am happy to add one (aโ€ฆ


10. pnPm

Fast, disk space efficient package manager

GitHub logo pnpm / pnpm

Fast, disk space efficient package manager -- ๅฟซ้€Ÿ็š„๏ผŒ่Š‚็œ็ฃ็›˜็ฉบ้—ด็š„ๅŒ…็ฎก็†ๅทฅๅ…ท

ไธญๆ–‡ | ๆ—ฅๆœฌ่ชž | Italiano | ะ ัƒััะบะธะน | Tรผrkรงe

Fast, disk space efficient package manager:

  • Fast. Up to 2x faster than the alternatives (see benchmark).
  • Efficient. Files inside node_modules are linked from a single content-addressable storage.
  • Great for monorepos.
  • Strict. A package can access only dependencies that are specified in its package.json.
  • Deterministic. Has a lockfile called pnpm-lock.yaml.
  • Works as a Node.js version manager. See pnpm env use.
  • Works everywhere. Supports Windows, Linux, and macOS.
  • Battle-tested. Used in production by teams of all sizes since 2016.

To quote the Rush team:

Microsoft uses pnpm in Rush repos with hundreds of projects and hundreds of PRs per day, and weโ€™ve found it to be very fast and reliable.

npm version Join the chat at Discord OpenCollective OpenCollective Twitter Follow

Sponsors

Support this project by becoming a sponsor.

Background

pnpm uses a content-addressable filesystem to store all files from all module directories on a disk When usingโ€ฆ


Stargazing ๐Ÿ“ˆ

Top risers over last 7 days๐Ÿ”—

  1. Medusa +1,604 stars
  2. Web Dev for Beginners +1,134 stars
  3. ML for Beginners +1,076 stars
  4. Coding Interview University +907 stars
  5. Budibase +892 stars

Top growth(%) over last 7 days๐Ÿ”—

  1. Medusa +87%
  2. Twitter Together +29%
  3. next runtime +25%
  4. React Location +25%
  5. vsCode Front Matter +23%

Top risers over last 30 days๐Ÿ”—

  1. Machine Learning for beginner +3,623 stars
  2. Public APIs +3,013 stars
  3. Awesome +2,815 stars
  4. The Book of Secret Knowledge +2,355 stars
  5. Coding Interview University +2,256 stars

Top growth(%) over last 30 days๐Ÿ”—

  1. Fragstore +637%
  2. Medusa +171%
  3. ct +112%
  4. EBS Design +79%
  5. Web APIs Playground +74%

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.

Discussion (4)

Collapse
joeattardi profile image
Joe Attardi

Isn't it just called Remix?

Collapse
iainfreestone profile image
Iain Freestone Author • Edited on

Quite possibly, in my head its called Remix Run! I think I must have started calling it this after visiting the site so often remix.run/.

Happy to change, but I will still be calling it remix run! ๐Ÿ˜‚

Collapse
joeattardi profile image
Joe Attardi

Good point, I guess it's kind of like the Go language has become known as "Golang". That makes sense I guess, good luck googling for problems with "Go" - guess the same would apply to simply searching for "Remix" ๐Ÿคฃ

Collapse
joeattardi profile image
Joe Attardi

Should have also mentioned this is a great list!