DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at stargazing.dev

🚀10 Trending projects on GitHub for web developers - 22nd October 2021

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

1. YoHa

YoHa is a hand tracking engine that is built with the goal of being a versatile solution in practical scenarios where hand tracking is employed to add value to an application.

GitHub logo handtracking-io / yoha

A practical hand tracking engine.

Yoha
Yoha

A practical hand tracking engine.

Note: Yoha is currently unmaintained.

Quick Links:

Installation

npm install @handtracking.io/yoha

Please note:

  • You need to serve the files from node_modules/@handtracking.io/yoha since the library needs to download the model files from here. (Webpack Example)
  • You need to serve your page with https for webcam access. (Webpack Example)
  • You should use cross-origin isolation as it improves the engine's performance in certain scenarios. (Webpack Example)

Description

Yoha is a hand tracking engine that is built with the goal of being a versatile solution in practical scenarios where hand tracking is employed to add value to an application. While ultimately the goal is to be a general purpose hand tracking engine supporting any hand pose, the engine evolves around specific hand poses that users/developers find useful. These poses are detected by the engine which allows to…


2. Cash

An absurdly small jQuery alternative for modern browsers.

GitHub logo fabiospampinato / cash

An absurdly small jQuery alternative for modern browsers.

Cash Logo

Cash

Cash is an absurdly small jQuery alternative for modern browsers (IE11+) that provides jQuery-style syntax for manipulating the DOM. Utilizing modern browser features to minimize the codebase, developers can use the familiar chainable methods at a fraction of the file size. 100% feature parity with jQuery isn't a goal, but Cash comes helpfully close, covering most day to day use cases.

Comparison






























Size Cash Zepto 1.2.0 jQuery Slim 3.4.1
Unminified 36.5 KB 58.7 KB 227 KB
Minified 16 KB 26 KB 71 KB
Minified & Gzipped 6 KB 9.8 KB 24.4 KB

A 76.6% gain in size reduction compared to jQuery Slim. If you need a smaller bundle, we support partial builds too.













































Features Cash Zepto 1.2.0 jQuery Slim 3.4.1
Supports Older Browsers ️❌
Supports Modern Browsers ️✔
Actively Maintained
Namespaced Events ️❌
Typed Codebase ✔ (TypeScript) ️❌
TypeScript






3. React Command Palette

WAI-ARIA compliant React command palette like the one in Atom and Sublime

GitHub logo asabaylus / react-command-palette

An accessible browser compatible javascript command palette

React Command Palette

WAI-ARIA compliant React command palette like the one in Atom and Sublime

CI codecov npm Language grade: JavaScript react-command-palette

Screenshot

Live Playground

For examples of the command palette in action, go to the

Storybook

OR

To run that demo on your own computer:

Usage

Install it in your project

$ npm i --save react-command-palette

Import into your react app and pass commands

import { createRoot } from 'react-dom/client';
import CommandPalette from 'react-command-palette';

const commands = [{
    name: "Foo",
    command() {}
  },{
    name: "Bar",
    command() {}
  }
  ... 
 ];
 
 const container = document.getElementById('app');
 const root = createRoot(container);
 root.render(<CommandPalette commands={commands} />)
Enter fullscreen mode Exit fullscreen mode

Props

  • open a boolean, when set to…


4. Rowy

Manage Firestore data in a spreadsheet-like UI, write Cloud Functions effortlessly in the browser, and connect to your favorite third party platforms such as SendGrid, Twilio, Algolia, Slack and more.

GitHub logo rowyio / rowy

Low-code backend platform. Manage database on spreadsheet-like UI and build cloud functions workflows in JS/TS, all in your browser.

✨ Airtable-like UI for managing database ✨ Build any automation, with or without code ✨

Connect to your database and create Cloud Functions in low-code - without leaving your browser.
Focus on building your apps Low-code for Firebase and Google Cloud

Live Demo 🛝

💥 Explore Rowy on live demo playground 💥

Features ✨

20211004-RowyWebsite.mp4

Powerful spreadsheet interface for Firestore

  • CMS for Firestore
  • CRUD operations
  • Bulk import or export data - csv, json, tsv
  • Sort and filter by row values
  • Lock, Freeze, Resize, Hide and Rename columns
  • Multiple views for the same collection

Automate with cloud functions and ready made extensions

  • Build cloud functions workflows on field level data changes
    • Use any NPM modules or APIs
  • Connect to your favourite tool with pre-built code blocks or create your own
    • SendGrid, Algolia, Twilio, Bigquery and more

Rich and flexible data fields


5. Riju

Extremely fast online playground for every programming language.

GitHub logo radian-software / riju

⚡ Extremely fast online playground for every programming language.

Riju

Riju is a very fast online playground for every programming language In less than a second, you can start playing with a Python interpreter or compiling INTERCAL code.

Check it out at https://riju.codes! Please note that Riju is only available on IPv6-enabled networks due to the higher financial cost of supporting legacy protocols. If your network does not support IPv6 then please consider asking your network administrator or service provider to do their part in supporting modern internet standards. You can consider accessing Riju through a VPN as a workaround.

Service uptime available at https://radian.statuspage.io/.

Is it free?

Riju will always be free for everyone. I pay for the hosting costs out of the business account of Radian LLC, which is funded by donations and my personal savings. If you would like to help keep Riju online and see more projects like it, there are a few…


6. Cromwell CMS

Cromwell CMS is a free open source headless TypeScript CMS for creating lightning-fast websites with React and Next.js. It has a powerful plugin/theming system while providing extensive Admin panel GUI for WordPress-like user experience.

GitHub logo CromwellCMS / Cromwell

WordPress-like CMS for Next.js websites

Cromwell CMS

Cromwell CMS is a free open source headless TypeScript CMS for creating lightning-fast websites with React and Next.js. It has a powerful plugin/theming system while providing extensive Admin panel GUI for WordPress-like user experience We are focused on empowering content-creators and people with no programming knowledge to conveniently use all features of the CMS in their projects.

Main features of Cromwell CMS:

  • Online store and blogging platform management systems.
  • Drag-and-drop theme editor.
  • Simple installation of themes and plugins from the official store and their local management.
  • Free full-featured online store and blog themes with multiple plugins.
  • Integrated Database. SQLite, MySQL, MariaDB, PostgreSQL are supported to use.
  • Developer-friendly experience. Use all power of Next.js, Nest.js, TypeORM, TypeGraphQL along with CMS API to build any type of website.

Installation

See our docs

Examples

See demo websites: frontend + admin panel

Contribution

Have a question?

Ask in Discord server

Have a


7. API Platform

Create REST and GraphQL APIs, scaffold Jamstack webapps, stream changes in real-time.

GitHub logo api-platform / api-platform

🕸️ Create REST and GraphQL APIs, scaffold Jamstack webapps, stream changes in real-time.

API Platform

API Platform is a next-generation web framework designed to easily create API-first projects without compromising extensibility and flexibility:


8. rx-query

Batteries included fetching library Fetch your data with ease and give your users a better experience

❗ This package is no longer being actively maintained. ❗

rx-query

Batteries included fetching library Fetch your data with ease and give your users a better experience

Why

Features

  • Retries
  • Cache
  • Refresh on interval, focus, online
  • Mutate data

Basics

Query without parameters

The most simple query is a parameter without parameters, it's just a wrapper around and Observable. The query method expects a callback method to invoke the query.

import { query } from "rx-query";

characters$ = query("characters", () =>
    this.rickAndMortyService.getCharacters(),
);
Enter fullscreen mode Exit fullscreen mode

Query with static parameter

A query that has a static parameter (a value that doesn't change over time), can be written in the same way as a query without parameters.

import { query } from "rx-query";
characters$ = query("character", (
Enter fullscreen mode Exit fullscreen mode

9. Immer

Create the next immutable state by mutating the current one

GitHub logo immerjs / immer

Create the next immutable state by mutating the current one

Immer

npm Build Status Coverage Status code style: prettier OpenCollective OpenCollective Gitpod Ready-to-Code

Create the next immutable state tree by simply modifying the current tree

Winner of the "Breakthrough of the year" React open source award and "Most impactful contribution" JavaScript open source award in 2019

Contribute using one-click online setup

You can use Gitpod (a free online VS Code like IDE) for contributing online. With a single click it will launch a workspace and automatically:

  • clone the immer repo.
  • install the dependencies.
  • run yarn run start.

so that you can start coding straight away.

Open in Gitpod

Documentation

The documentation of this package is hosted at https://immerjs.github.io/immer/

Support

Did Immer make a difference to your project? Join the open collective at https://opencollective.com/immer!

Release notes

https://github.com/immerjs/immer/releases





10. React Date Picker

A simple and reusable datepicker component for React

GitHub logo Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React

React Date Picker

npm version Test suite codecov Downloads

A simple and reusable Datepicker component for React (Demo)

Installation

The package can be installed via npm:

npm install react-datepicker --save

Or via yarn:

yarn add react-datepicker

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
Enter fullscreen mode Exit fullscreen mode

Stargazing 📈

Top risers over last 7 days🔗

  1. JavaScript Algorithms +1,066 stars
  2. Playwright +1,036 stars
  3. Public APIs +800 stars
  4. Uptime Kuma +792 stars
  5. Awesome Cheatsheets +716 stars

Top growth(%) over last 7 days🔗

  1. Spatial Keyboard Navigation +32%
  2. DOM to SVG +18%
  3. The new css reset +15%
  4. Giscus +14%
  5. ct +13%

Top risers over last 30 days🔗

  1. Public APIs +5,262 stars
  2. Uptime Kuma +4,655 stars
  3. JavaScript Algorithms +3,288 stars
  4. Awesome +3,201 stars
  5. Build your own X +2,905 stars

Top growth(%) over last 30 days🔗

  1. Uptime Kuma +134%
  2. Nice Modal React +101%
  3. Pico +52%
  4. Purity UI Dashboard +49%
  5. React Web Editor +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 (0)