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
โ€ฆ

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 source-available fair-code licensed workflow automation tool. Easily automate tasks across different services.

n8n.io - Workflow Automation

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.

n8n.io - Screenshot

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

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!).

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

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

Add to Calendar Button

Code Quality npm Installations Total npm Installations per Month jsDelivr npm Hits


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.

#1 Product of the Day on ProductHunt

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.

Supported Calendars: Apple (via iCal), Google, Microsoft (365, Outlook, Teams), Yahoo, 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.

Supported Technology: Angular, React, Vue, Svelte, and every other project that can load JavaScript

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.

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

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
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โ€ฆ


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.

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

Or in a module like so:

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

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")
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

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

Ifโ€ฆ


10. Adonis

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

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


gh-workflow-image npm-image license-image

Built with โค๏ธŽ by Harminder Virk




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.

Top comments (1)

Collapse
 
getcodescandy profile image
codescandy

Amazing list, thank you