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.
remix-run / remix
Build Better Websites. Create modern, resilient user experiences with web fundamentals.
Welcome to Remix!
We are happy you're here!
Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience that deploys to any Node.js server and even non-Node.js environments at the edge like Cloudflare Workers.
Want to know more? Read the Technical Explanation of Remix
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 see our guide to contributing.
Code of Conduct
Please see our code of conduct for any questions…
2. helpful-decorators
Helpful decorators for typescript projects
NetanelBasal / helpful-decorators
Helpful decorators for typescript projects
Helpful Decorators For Typescript Projects
Installation
npm install helpful-decorators
yarn add helpful-decorators
Usage
delay
- Add setTimeout
functionality to the method
import { delay } from 'helpful-decorators';
class Test {
@delay(1000)
method() {
// ...
}
}
debounce
- Add debounce
functionality to the method (options)
import { debounce } from 'helpful-decorators';
class Test {
@debounce(1000, options)
method() {
// ...
}
}
throttle
- Add throttle
functionality to the method (options)
import { throttle } from 'helpful-decorators';
class Test {
@throttle(1000, options)
method() {
// ...
}
}
once
- Add once
functionality to the method
import { once } from 'helpful-decorators';
class Test {
@once
method() {
// This will run only once
…3. Microdiff
A fast, zero dependency object and array comparison library. Significantly faster than most other deep comparison libraries and has full TypeScript suppor
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 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.
💡 I recommend reading this blog post:
Building the fastest object and array differ for an explanation of how Microdiff achieves its size and speed.
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()
andnew 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, import it and…
4. the-node-way
Design patterns and best practices for building scaleable, maintainable and beautiful Node.js applications.
FredKSchott / the-node-way
Design patterns and best practices for building scaleable, maintainable and beautiful Node.js applications. Now with website! -->
Design patterns and best practices for building scaleable, maintainable and beautiful Node.js applications.
Introduction
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.
ckeditor / ckeditor5
Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
CKEditor 5 is a modern JavaScript rich-text editor with MVC architecture, custom data model, and virtual DOM, written from scratch in TypeScript with excellent support for modern bundlers. It provides every type of WYSIWYG editing solution imaginable with extensive collaboration support. From editors similar to Google Docs and Medium to Slack or Twitter-like applications, all is possible within a single editing framework. As a market leader, it is constantly expanded and updated.
Table of contents
- CKEditor 5
Quick start
Refer to the Quick Start guide to learn more about CKEditor 5 installation.
CKEditor 5 Builder
The easiest way to start using CKEditor 5 with all the features you need…
6. react-intersection-observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
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
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.
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
- 🛠 Written in TypeScript - It'll fit right into your existing TypeScript project
- 🧪 Ready to test - Mocks the Intersection Observer for easy testing with Jest or Vitest
- 🌳 Tree-shakeable - Only include the parts you use
- 💥 Tiny bundle - Around ~1.15kB for
useInView
and ~1.6kB for<InView>
Installation
Install the package with your package manager of choice:
npm install react-intersection-observer --save
Usage
useInView
hook
// Use object destructuring, so you don't need to remember the exact order
const { ref, inView,
…7. Streak Counter
A streak counter to track your streak in days (similar to Duolingo)
jsjoeio / use-streak
a streak counter to track your streak in days (similar to Duolingo)
useStreak
- a basic streak counter
This is a basic streak counter - inspired by Duolingo - written in TypeScript and meant for the browser (uses localStorage
).
Install
yarn add use-streak
npm install use-streak
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",
// }
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.
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.
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.
mdsvex
A Markdown preprocessor for Svelte. Markdown in Svelte.
Packages
This is a monorepo containing mdsvex
and any supporting packages. Each repo has its 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
简体中文 | 日本語 | 한국어 | Italiano | Português Brasileiro
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.
- See the full feature comparison with npm and Yarn.
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.
Platinum Sponsors
Gold Sponsors
Silver Sponsors
Support this project by becoming a sponsor.
Background
pnpm uses…
Stargazing 📈
Top risers over last 7 days🔗
- Medusa +1,604 stars
- Web Dev for Beginners +1,134 stars
- ML for Beginners +1,076 stars
- Coding Interview University +907 stars
- Budibase +892 stars
Top growth(%) over last 7 days🔗
- Medusa +87%
- Twitter Together +29%
- next runtime +25%
- React Location +25%
- vsCode Front Matter +23%
Top risers over last 30 days🔗
- Machine Learning for beginner +3,623 stars
- Public APIs +3,013 stars
- Awesome +2,815 stars
- The Book of Secret Knowledge +2,355 stars
- Coding Interview University +2,256 stars
Top growth(%) over last 30 days🔗
- Fragstore +637%
- Medusa +171%
- ct +112%
- EBS Design +79%
- 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.
Top comments (4)
Isn't it just called Remix?
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! 😂
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" 🤣
Should have also mentioned this is a great list!