DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at stargazing.dev

πŸš€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.

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

code style: prettier PRs Welcome License Types

Fiddle

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

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.

GitHub logo rsuite / rsuite

🧱 A suite of React components .

React Suite logo

English | δΈ­ζ–‡η‰ˆ

npm GitHub Actions codecov Discord Gitter Gitter Gitpod ready-to-code

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

Installation

React Suite is available as an npm package.

npm i rsuite@next --save
Enter fullscreen mode Exit fullscreen mode

or if you prefer Yarn

yarn add rsuite@next
Enter fullscreen mode Exit fullscreen mode

Usage

Here's a simple example

import { Button } from 'rsuite';
import
…
Enter fullscreen mode Exit fullscreen mode

3. Little State Machine

React custom hook for persist state management

GitHub logo bluebill1049 / little-state-machine

πŸ“  React custom hook for persist state management

Little State Machine - React Hooks for state management

Little State Machine

State management made super simple

npm downloads npm npm

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

πŸ”— 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
…
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo 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 License: MIT

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

5. Color Thief

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

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


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

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

Header


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


7. jsEncrypt

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

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

8. giscus

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

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

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…


9. GrowthBook

The Open Source A/B Testing Platform

GitHub logo growthbook / growthbook

The Open Source A/B Testing Platform

Growth Book - The Open Source A/B Testing Platform

The Open Source A/B Testing Platform

Build Status MIT License Release Join us on Slack

Get up and running in 1 minute with:

git clone https://github.com/growthbook/growthbook.git
cd growthbook
docker-compose up -d
Enter fullscreen mode Exit fullscreen mode

Then visit http://localhost:3000

Growth Book Screenshot

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…

10. AriaNg

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

GitHub logo mayswind / AriaNg

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

AriaNg

License Lastest Build Lastest Release

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…

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.

Discussion (2)

Collapse
codecustard profile image
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...

Collapse
iainfreestone profile image
Iain Freestone Author

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