🚀10 Trending projects on GitHub for web developers - 13th August 2021

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

1. Mitosis

Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

BuilderIO / mitosis

Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid

At a glance

Mitosis is inspired by many modern frameworks. You'll see components look like React components and use React-like hooks, but have simple mutable state like Vue, use a static form of JSX like Solid, compile away like Svelte, and uses a simple, prescriptive structure like Angular.

This is what a basic Mitosis component that manages some state looks like:

import { useState, Show, For } from '@builder.io/mitosis';
export default function MyComponent(props) {
  const state = useState({
    newItemName: 'New item',
    list: ['hello', 'world'],
    addItem() {
      state.list = [...state.list, state.newItemName];
    },
  });

  return (
    <div>
      <Show when={props.showInput

…

View on GitHub

---

2. React Suite

React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework.

rsuite / rsuite

🧱 A suite of React components .

English | 中文版

React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework.

UI Design

React Suite Design Prototype and specification, click to view.

Supported Platforms

Browser

React Suite supports the latest, stable releases of all major browsers and platforms. IE<=9 is no longer supported since React Suite 3.0. React Suite is designed and implemented for use on modern desktop browsers rather than mobile browsers.

IE	Edge	Firefox	Chrome	Safari
>=11	>=14	>= 45	>= 49	>= 10

Server

React Suite supports server side rendering. Support Next.js to build applications.

Supported development environment

• Supports React 16 +
• Supports TypeScript
• Supports Electron
• Supports Reason

Installation

React Suite is available as an npm package.

npm i rsuite@next --save

or if you prefer Yarn

yarn add rsuite@next

Usage

Here's a simple example

import { Button } from 'rsuite';
import

…

View on GitHub

---

3. Little State Machine

React custom hook for persist state management

bluebill1049 / little-state-machine

📠 React custom hook for persist state management

Little State Machine

State management made super simple

✨ Features

• Tiny with 0 dependency and simple (715B gzip)
• Persist state by default (sessionStorage or localStorage)
• Build with React Hooks

📦 Installation

$ npm install little-state-machine

🕹 API

🔗 StateMachineProvider

This is a Provider Component to wrapper around your entire app in order to create context.

<StateMachineProvider>
  <App />
</StateMachineProvider>

🔗 createStore

Function to initialize the global store, invoked at your app root (where <StateMachineProvider /> lives).

function log(store) {
  console.log(store);
  return store;
}
createStore(
  {
    yourDetail: { firstName: '', lastName: '' } // it's an object of your state
  },
  {
     name?: string; // rename the store
     middleWares?: [ log ]; // function to invoke each action
     storageType?: Storage

…

View on GitHub

---

4. xicons

SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon icons.

07akioni / xicons

SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon icons. (Vue3, Vue2, React, SVG)

xicons

English · 中文

Include vicons(vue3), ricons(react), sicons(svg) & v2icons(vue2).

SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon.

Util icon component for customizing color & size is also provided.

Icons Preview & Search

https://www.xicons.org

Installation

Icons Installation

# Install packages on your demand
# For react
npm i -D @ricons/fluent
npm i -D @ricons/ionicons4
npm i -D @ricons/ionicons5
npm i -D @ricons/antd
npm i -D @ricons/material
npm i -D @ricons/fa # font awesome
npm i -D @ricons/tabler
npm i -D @ricons/carbon
# For vue3
npm i -D @vicons/fluent
npm i -D @vicons/ionicons4
npm i -D @vicons/ionicons5
npm i -D @vicons/antd
npm i -D @vicons/material
npm i -D @vicons/fa # font awesome
npm i -D @vicons/tabler
npm i -D @vicons/carbon
# For vue2
npm i -D @v2icons/fluent
npm i -D @v2icons/ionicons4
npm i -D @v2icons/ionicons5
npm

…

View on GitHub

---

5. Color Thief

Grab the color palette from an image using just Javascript. Works in the browser and in Node.

lokesh / color-thief

Grab the color palette from an image using just Javascript. Works in the browser and in Node.

Color Thief

Grab the color palette from an image using just Javascript.Works in the browser and in Node.

View the demo page for examples, API docs, and more.

---

Contributing

Project structure

• build/ - Simple script that copies and renames files into the /dist folder.
• cypress/ - Browsers tests.
• dist/ - Generated distribution files created by microbundle package and a couple of files copied via build script.
• examples/ - CSS, JS, and Images for the index.html example page.
• src/color-thief-node.js - Source for the Node (commonjs) compatible version of the script.
• src/color-thief.js - Source for the browser (ES6, AMD, Global var) compatible version of the script.
• src/core.js - Functions shared between the node and browser versions of the script.
• test/ - Node integration tests. Uses Chai.
• index.html - Example page.

Running tests

There are two sets of tests:

1. Browser tests run with Cypress
2. Node tests run with Karma and utilizing Mocha

To…

View on GitHub

---

6. Integration Test Best Practices

Master the art of the most powerful testing technique for Node.js: Component tests. Including super-comprehensive best practices list and an example app

testjavascript / nodejs-integration-tests-best-practices

✅ Master the art of the most powerful testing technique for Node.js: Component tests. Including super-comprehensive best practices list and an example app (August 2021)

Master the art of the most powerful testing technique for backend

3 things to your benefit

Component/integration test is an hybrid between E2E and unit tets. It's gaining a lot of popularity and going by the testing diamond model it is considered as the default technique for modern backend. Its main idea is testing an entire component (e.g., Microservice) as-is, through the API, with all the layers including database but fake anything exterenous. This brings both high confidence and great developer experience. However, doing it right, fast, exhaustive and maximing the value demand some learning and skills. This is the mission statement of this repo. Warning: You might fall in love with testing 💚

This repository contains:

1. ✅ 40+ Best Practices List - Detailed instructions on how to write component tests in the RIGHT way including code example and reference to the example application

2. 📊 Example application -…

View on GitHub

---

7. jsEncrypt

A Javascript library to perform OpenSSL RSA Encryption, Decryption, and Key Generation.

travist / jsencrypt

A Javascript library to perform OpenSSL RSA Encryption, Decryption, and Key Generation.

Website

http://travistidwell.com/jsencrypt

Introduction

When browsing the internet looking for a good solution to RSA Javascript encryption, there is a whole slew of libraries that basically take the fantastic work done by Tom Wu @ http://www-cs-students.stanford.edu/~tjw/jsbn/ and then modify that code to do what they want.

What I couldn't find, however, was a simple wrapper around this library that basically uses the library practically untouched, but adds a wrapper to provide parsing of actual Private and Public key-pairs generated with OpenSSL.

This library is the result of these efforts.

How to use this library.

This library should work hand-in-hand with openssl. With that said, here is how to use this library.

• Within your terminal (Unix based OS) type the following.

openssl genrsa -out rsa_1024_priv.pem 1024

• This generates a private key, which you can see by doing the following...

cat rsa_1024_priv.pem

• You can then copy and paste this in the Private Key…

View on GitHub

---

8. giscus

A comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub!

laymonage / giscus

A comments system powered by GitHub Discussions. :octocat: 💬 💎

giscus

A comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by utterances.

• Open source. 🌏
• No tracking, no ads, always free. 📡 🚫
• No database needed. All data is stored in GitHub Discussions.
• Supports custom themes! 🌗
• Extensively configurable. 🔧
• Automatically fetches new comments and edits from GitHub. 🔃
• Can be self-hosted! 🤳

Note:
giscus is still under active development. GitHub is also still actively developing Discussions and its API. Thus, some features of giscus may break or change over time.

how it works

When giscus loads, the GitHub Discussions search API is used to find the Discussion associated with the page based on a chosen mapping (URL, pathname, <title>, etc.). If a matching discussion cannot be found, the giscus bot will automatically create a discussion the first time someone leaves…

View on GitHub

---

9. GrowthBook

The Open Source A/B Testing Platform

growthbook / growthbook

The Open Source A/B Testing Platform

The Open Source A/B Testing Platform

Get up and running in 1 minute with:

git clone https://github.com/growthbook/growthbook.git
cd growthbook
docker-compose up -d

Then visit http://localhost:3000

Our Philosophy

The top 1% of companies spend thousands of hours building their own A/B testing platforms in-house The other 99% are left paying for expensive 3rd party SaaS tools or hacking together unmaintained open source libraries.

Growth Book gives you the flexibility and power of a fully-featured in-house A/B testing platform without needing to build it yourself.

Major Features

• ❄️ Pull data from Snowflake, Redshift, BigQuery, Mixpanel, Google Analytics, and more
• 🆎 Bayesian statistics engine with support for binomial, count, duration, and revenue metrics
• ⬇️ Drill down into A/B test results by browser, country, or any other attribute
• 💻 Client libraries for React, Javascript, PHP, Ruby, and Python with more coming soon
• 👁️ Visual Editor for non-technical users to create…

View on GitHub

---

10. AriaNg

AriaNg, a modern web frontend making aria2 easier to use.

mayswind / AriaNg

AriaNg, a modern web frontend making aria2 easier to use.

AriaNg

Introduction

AriaNg is a modern web frontend making aria2 easier to use. AriaNg is written in pure html & javascript, thus it does not need any compilers or runtime environment. You can just put AriaNg in your web server and open it in your browser. AriaNg uses responsive layout, and supports any desktop or mobile devices.

Features

1. Pure Html & Javascript, no runtime required
2. Responsive design, supporting desktop and mobile devices
3. User-friendly interface
   • Sort tasks (by name, size, progress, remaining time, download speed, etc.), files, bittorrent peers
   • Search tasks
   • Retry tasks
   • Adjust task order by dragging
   • More information of tasks (health percentage, client information of bt peers, etc.)
   • Filter files by specified file types (videos, audios, pictures, documents, applications, archives, etc.) or file extensions
   • Tree view for multi-directory task
   • Download / upload speed chart for aria2 or single task
   • Full support for aria2 settings
4. Dark theme
5. Url command line…

View on GitHub

---

Stargazing 📈

Top risers over last 7 days🔗

1. Public APIs +1,467 stars
2. JavaScript Algorithms +842 stars
3. Machine Learning for Beginners +633 stars
4. Build your own X +540 stars
5. Developer Roadmap +537 stars

Top growth(%) over last 7 days🔗

1. html-to-image +17%
2. Mitosis +16%
3. VSCode Database Client +13%
4. Rooks +11%
5. Vuestic UI +7%

Top risers over last 30 days🔗

1. Public APIs +8,558 stars
2. Machine Learning for Beginners +5,734 stars
3. Coding Interview University +5,387 stars
4. Web Development for Beginners +2,912 stars
5. NocoDB +2,899 stars

Top growth(%) over last 30 days🔗

1. use-color +111%
2. html-to-image +88%
3. DaisyUI +73%
4. Astro +58%
5. Machine Learning for Beginners +53%

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 bite size tips relating to HTML, CSS and JavaScript.

Comments

[Emmanuel Barroga]

Great list! Thanks for the share.... I actually found Color Thief super interesting.... and had some free time and took a stab at submitting a PR: github.com/lokesh/color-thief-site...

[Iain Freestone]

Glad you enjoyed this weeks list, great job getting a PR up for a new feature.