DEV Community

Iain Freestone
Iain Freestone

Posted on

πŸš€10 Trending projects on GitHub for web developers - 25th February 2022

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.

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

$ npm i moize --save

Importing

ESM in browsers

import moize from 'moize';
Enter fullscreen mode Exit fullscreen mode

ESM in NodeJS

import moize from 'moize/mjs/index.mjs';
Enter fullscreen mode Exit fullscreen mode

CommonJS

const moize = require('moize');
Enter fullscreen mode Exit fullscreen mode

Usage

…
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo n8n-io / n8n

Free and open fair-code licensed node based Workflow Automation Tool. Easily automate tasks across different services.

n8n - Workflow Automation Tool

n8n.io - Workflow Automation

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.

n8n.io - Screenshot

Demo

πŸ“Ί A short demo (< 3 min) which shows how to create a simple workflow which automatically sends a new Slack notification every time a Github repository received or lost a star.

Available integrations

n8n has 200+ different nodes to automate workflows. The list can be found on: https://n8n.io/nodes

Documentation

The official n8n documentation can be found under: https://docs.n8n.io

Additional information and example workflows on the n8n.io website: https://n8n.io

The changelog can be found here and the list of breaking changes here.

Usage


3. React Shimmer

A powerful, customisable, Suspense-like img component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).

GitHub logo gokcan / react-shimmer

🌠 Async loading, performant Image component for React.js

Logo

A powerful, customisable, Suspense-like <img> component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).

NPM JavaScript Style Guide Github Actions CI Status Maintainability

Header

Live Demo

Install

npm i react-shimmer
Enter fullscreen mode Exit fullscreen mode

or

yarn add react-shimmer
Enter fullscreen mode Exit fullscreen mode

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

or you can use your custom React component as a fallback:

import React from 'react'
…
Enter fullscreen mode Exit fullscreen mode

4. Easings.net

Simple cheat sheet to help developers pick the right easing function.

GitHub logo ai / easings.net

Easing Functions Cheat Sheet

Easing Functions Cheat Sheet

Simple cheat sheet to help developers pick the right easing function.

Sponsored by Evil Martians

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

  1. Install project dependencies:

    yarn install
    Enter fullscreen mode Exit fullscreen mode
  2. That’s all. Run development server:

    yarn run start
    Enter fullscreen mode Exit fullscreen mode
  3. 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
Enter fullscreen mode Exit fullscreen mode

Build a PDF via the command make book

$ make book
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo jekuer / add-to-calendar-button

A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.

Your next Add-to-Calendar Button

Add-to-Calendar Button

A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.

Use case // Who this is for

This is for everybody, who wants to include a button at his/her 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. Simply define your button configuration via JSON and everything else is automatically generated by the script It is for this simple use case. No strings attached.

Background // Why this repo exists

While building a personal wedding page, I was confronted with the task to include a button, where invited people could save the event to their calendars I did not want to build this from scratch (first) and therefore started the usual web research Unfortunately, all I found where some extremely…


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.

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

npm Package License build status downloads per month JavaScript Style Guide

Why?

I got tired of including mkdirp, rimraf, and ncp in most of my projects.

Installation

npm install fs-extra

Usage

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

you can now do this:

const fs = require('fs-extra')
Enter fullscreen mode Exit fullscreen mode

or if you prefer to make it clear that you're using fs-extra and not fs, you may want to name your…


8. TinyColor

Fast, small color manipulation and conversion for JavaScript

GitHub logo bgrins / 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.

Build Status

Including in a browser

Download tinycolor.js or install it with bower:

bower install tinycolor

Then just include it in the page in a script tag:

<script type='text/javascript' src='tinycolor.js'></script>
<script type='text/javascript'>
var color = tinycolor("red");
</script>
Enter fullscreen mode Exit fullscreen mode

Including in node

tinycolor may also be included as a node module like so:

npm install tinycolor2

Then it can be used in your script like so:

var tinycolor = require("tinycolor2");
var color = tinycolor("red");
Enter fullscreen mode Exit fullscreen mode

Usage

Call tinycolor(input) or new tinycolor(input), and you will have an object with…


9. Vercel Examples

Curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.

GitHub logo 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 Find our examples here: https://examples.vercel.live/ we're going to be shipping new examples weekly. Stay tuned!

Examples

Adding a new example

To quickly start contributing with a new example, run the following commands:

npm i
npm run new-example
Enter fullscreen mode Exit fullscreen mode

The pre-commit hook

We use Husky to manage the pre-commit Git hook in this repo. Husky configures hooks automatically during install, so you don't need to do anything special to get them working, but if it fails to install, you can run the following command to install it manually:

npm run prepare
Enter fullscreen mode Exit fullscreen mode

Read the Docs

If you have any questions or suggestions about the docs…


10. Adonis

The Node.js Framework highly focused on developer ergonomics, stability and confidence

GitHub logo adonisjs / core

πŸš€ The Node.js Framework highly focused on developer ergonomics, stability and confidence





Stargazing πŸ“ˆ

Top risers over last 7 daysπŸ”—

  1. build-your-own-x +2,091 stars
  2. How to secure anything +1,089 stars
  3. Tauri +1,065 stars
  4. Fig +1,037 stars
  5. Mermaid +991 stars

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

  1. Qwik +23%
  2. envsafe +19%
  3. Basic computer games +16%
  4. How to secure anything +16%
  5. DaisyUI +10%

Top risers over last 30 daysπŸ”—

  1. Coding Interview University +5,470
  2. build-your-own-x +4,412 stars
  3. Mermaid +4,078 stars
  4. NextUI +3,886 stars
  5. Public APIs +3,768 stars

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

  1. NextUI +300%
  2. React Tree +61%
  3. Basic computer games +50%
  4. Learn web3 Dapp +44%
  5. 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.

Discussion (1)

Collapse
getcodescandy profile image
codescandy

Amazing list, thank you