Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
1. moize
moize is a consistently blazing fast memoization library for JavaScript. It handles multiple parameters (including default values) without any additional configuration, and offers a large number of options to satisfy any number of potential use-cases.
planttheidea / moize
The consistently-fast, complete memoization solution for JS
moize
moize
is a consistently blazing fast memoization library for JavaScript. It handles multiple parameters (including default values) without any additional configuration, and offers a large number of options to satisfy any number of potential use-cases.
- Importing
- Usage
- Configuration options
- Usage with shortcut methods
- useMoize hook
- Composition
- Collecting statistics
- Introspection
- Direct cache manipulation
- Benchmarks
- Filesize
- Browser support
- Development
$ npm i moize --save
Importing
ESM in browsers
import moize from 'moize';
ESM in NodeJS
import moize from 'moize/mjs/index.mjs';
CommonJS
const moize = require('moize');
2. n8n
n8n is an extendable workflow automation tool. With a fair-code distribution model, n8n will always have visible source code, be available to self-host, and allow you to add your own custom functions, logic and apps.
n8n-io / n8n
Free and source-available fair-code licensed workflow automation tool. Easily automate tasks across different services.
n8n - Workflow automation tool
n8n is an extendable workflow automation tool. With a fair-code distribution model, n8n will always have visible source code, be available to self-host, and allow you to add your own custom functions, logic and apps. n8n's node-based approach makes it highly versatile, enabling you to connect anything to everything.
Demo
๐บ A short video (< 5 min) that goes over key concepts of creating workflows in n8n.
Available integrations
n8n has 200+ different nodes to automate workflows. The list can be found on: https://n8n.io/integrations
Documentation
The official n8n documentation can be found on our documentation website
Additional information and example workflows on the n8n.io website
The release notes can be found here and the list of breaking changes here.
Usage
- ๐ Learn how to use it from the command line
- ๐ณ Learn how to run n8n in Docker
Start
You can try n8n withoutโฆ
3. React Shimmer
A powerful, customisable, Suspense-like img component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).
gokcan / react-shimmer
๐ Async loading, performant Image component for React.js
A powerful, customisable, Suspense-like
<img>
component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).
Install
npm i react-shimmer
or
yarn add react-shimmer
Usage
import React from 'react'
import { Image, Shimmer } from 'react-shimmer'
function App() {
return (
<div>
<Image
src='https://source.unsplash.com/random/800x600'
fallback={<Shimmer width={800} height={600} />}
/>
</div>
)
}
import React from 'react'
import { Image, Breathing } from 'react-shimmer'
function App() {
return (
<div>
<Image
src='https://source.unsplash.com/random/800x600'
fallback={<Breathing width={800} height={600} />}
/>
</div>
)
}
or you can use your custom React component as a fallback:
import React from 'react'
โฆ4. Easings.net
Simple cheat sheet to help developers pick the right easing function.
ai / easings.net
Easing Functions Cheat Sheet
Easing Functions Cheat Sheet
Simple cheat sheet to help developers pick the right easing function.
Contributing
GitHub has great instructions on how to set up Git, fork a project and make pull requests. If you have a problem with Git, just send your files directly to andrey@sitnik.ru.
Translate
Just copy the i18n/en.yml
file to i18n/CODE.yml
(where CODE
is
the lowercased RFC 3066 language code of your target language,
for example fr-ca
for Canadian French) and translate all messages.
Test
-
Install project dependencies:
yarn install
-
Thatโs all. Run development server:
yarn run start
-
And open [localhost:1234] in browser.
5. JavaScript to Rust ebook
From JavaScript to Rust. Map common JavaScript and node.js workflows to the Rust ecosystem.
Book can be download here
From JavaScript to Rust ebook
This repository houses an ebook-ified version of the 24+ post series started on vino.dev.
How to build
The ebook is built using asciidoctor and requires ruby >2.3.
Install the ruby dependencies via make deps
$ make deps
Build a PDF via the command make book
$ make book
Running code and projects
All code are housed in the src/
directory.
Day 4
cargo run -p day-4-hello-world
-
cargo run -p day-4-strings-wtf-1
- intentionally does not compile. -
cargo run -p day-4-strings-wtf-2
- intentionally does not compile.
Day 5
Reassigning
- JS:
node javascript/day-5/let-vs-const/reassigning.js
- Rust:
cargo run -p day-5-let-vs-const --bin reassigning
-
cargo run -p day-5-let-vs-const --bin reassigning-wrong-type
- intentionally does not compile
Borrowing
cargo run -p day-5-borrowing --bin borrow
-
cargo run -p day-5-borrowing --bin mutable-borrow
- intentionally does not compile
Day 6
cargo run -p day-6-loads-of-strs --bin 200-unique-prints
cargo run -p day-6-loads-of-strs --bin 200-prints
-
cargo run -p day-6-loads-of-strs
โฆ
6. Add-to-Calendar button
A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.
add2cal / add-to-calendar-button
Reliably create beautiful Add to Calendar Buttons, where people can add events to their calendars. Without the hustle and unsupported cases.
Your next Add to Calendar Button
The convenient JavaScript Web Component, which lets you reliably create beautiful buttons, where people can add events to their calendars.
For everybody, who wants to include a button at their website or app, which enables users to easily add a specific event to their calendars It's main goal is to keep this process as easy as possible at maximum compatibility. Simply define your button configuration and everything else is automatically generated by the script Supporting calendars at Apple, Google, Microsoft (365, Outlook, Teams), Yahoo, and generic iCal.
The script, since it is a web component, integrates easily with any usual HTML webpage (VanillaJS way) as well as popular JavaScript frameworks and libraries like Angular, React, Vue, Svelte, and more.
Works with all modern browsers (Chrome, Edge, Firefox, Safari) on Windows, Mac, Android, and iOS as well as rather restrictedโฆ
7. fs-extra
fs-extra adds file system methods that aren't included in the native fs module and adds promise support to the fs methods. It also uses graceful-fs to prevent EMFILE errors. It should be a drop in replacement for fs.
jprichardson / node-fs-extra
Node.js: extra methods for the fs object like copy(), remove(), mkdirs()
Node.js: fs-extra
fs-extra
adds file system methods that aren't included in the native fs
module and adds promise support to the fs
methods. It also uses graceful-fs
to prevent EMFILE
errors. It should be a drop in replacement for fs
.
Why?
I got tired of including mkdirp
, rimraf
, and ncp
in most of my projects.
Installation
npm install fs-extra
Usage
CommonJS
fs-extra
is a drop in replacement for native fs
. All methods in fs
are attached to fs-extra
. All fs
methods return promises if the callback isn't passed.
You don't ever need to include the original fs
module again:
const fs = require('fs') // this is no longer necessary
you can now do this:
const fs = require('fs-extra')
or if you prefer to make it clear that you're using fs-extra
and not fs
, you may want
to nameโฆ
8. TinyColor
Fast, small color manipulation and conversion for JavaScript
TinyColor
JavaScript color tooling
TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions. It has no dependencies.
Including in node
tinycolor
can be installed from npm:
npm install tinycolor2
Then it can be used in your script like so:
var tinycolor = require("tinycolor2");
var color = tinycolor("red");
Or in a module like so:
import tinycolor from "tinycolor2";
var color = tinycolor("red");
Including in a browser
The package can be bundled from npm, but if you prefer to download it locally you have two choices:
ESM
It can be used as a module by downloading npm/esm/tinycolor.js or using https://esm.sh/tinycolor2.
<script type='module'>
import tinycolor from "https://esm.sh/tinycolor2";
var color = tinycolor("red")
โฆ9. Vercel Examples
Curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.
vercel / examples
Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.
Vercel Examples
Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications We're going to be shipping new examples weekly. Stay tuned!
- Edge Functions โ Build high-performance APIs that are deployed to every Edge Network region. Learn more.
- Edge Middleware โ Provide speed and personalization to your users. Learn more.
- Solutions โ Demos, Architectures, and Best Practices
- Starter โ Fully functional applications that encompass an idea as a robust starting point.
Vercel Templates
Multiple examples are being featured in Vercel's Templates, visit that page for more advanced filtering options.
For Vercelians
Examples that have front matter metadata will create a new Draft template in Contentful, for more steps on how to publish a template, read Publishing Templates.
Adding a new example
To quickly start contributing with a new example, run the following commands:
pnpm i
pnpm new-example
Ifโฆ
10. Adonis
The Node.js Framework highly focused on developer ergonomics, stability and confidence
adonisjs / core
AdonisJS is a TypeScript-first web framework for building web apps and API servers. It comes with support for testing, modern tooling, an ecosystem of official packages, and more.
@adonisjs/core
Fullstack MVC framework for Node.js
AdonisJs is a fullstack Web framework with focus on ergonomics and speed . It takes care of much of the Web development hassles, offering you a clean and stable API to build Web apps and micro services.
Stargazing ๐
Top risers over last 7 days๐
- build-your-own-x +2,091 stars
- How to secure anything +1,089 stars
- Tauri +1,065 stars
- Fig +1,037 stars
- Mermaid +991 stars
Top growth(%) over last 7 days๐
- Qwik +23%
- envsafe +19%
- Basic computer games +16%
- How to secure anything +16%
- DaisyUI +10%
Top risers over last 30 days๐
- Coding Interview University +5,470
- build-your-own-x +4,412 stars
- Mermaid +4,078 stars
- NextUI +3,886 stars
- Public APIs +3,768 stars
Top growth(%) over last 30 days๐
- NextUI +300%
- React Tree +61%
- Basic computer games +50%
- Learn web3 Dapp +44%
- Medusa +43%
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 (1)
Amazing list, thank you