An Interest In:
Web News this Week
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
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.
handtracking-io / yoha
A practical hand tracking engine.
YoHa
A practical hand tracking engine.
Quick Links:
Installation
npm install @handtracking.io/yoha
Please note:
- You need to serve the files from
node_modules/@handtracking.io/yoha
. (Webpack Example) - You need to serve your page with https. (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 solutionin practical scenarios where hand tracking is employed to add value toan application. While ultimately the goal is to be a general purpose handtracking engine supporting any hand pose, the engine evolvesaround specific hand poses that users/developers find useful. These posesare detected by the engine which allows to build applications with meaningful interactions.See the demo for an example.
YoHa is currently only available for the
2. Cash
An absurdly small jQuery alternative for modern browsers.
fabiospampinato / cash
An absurdly small jQuery alternative for modern browsers.
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. 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) |
3. React Command Palette
WAI-ARIA compliant React command palette like the one in Atom and Sublime
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
Live Playground
For examples of the command palette in action, go to the
OR
To run that demo on your own computer:
- Clone this repository
npm install
npm run storybook
- Visit http://localhost:6006/
Usage
Install it in your project
$ npm i --save react-command-palette
Import into your react app and pass commands
import CommandPalette from 'react-command-palette';const commands = [{ name: "Foo", command() {} },{ name: "Bar", command() {} } ... ]; ReactDOM.render( <CommandPalette commands={commands} />, document.getElementById('app'))
Props
open
a boolean, when set to true it forces the command palette to be displayed. Defaults to "false".alwaysRenderCommands
a boolean, Set it 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.
rowyio / rowy
Open-source Airtable-like experience for your database (Firestore) with GCP's scalability. Build any automation or cloud functions for your product.
GCP as easy as ABC
Build on Google Cloud Platform in minutes
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
Live Demo
Check out the live demo of Rowy
Quick Deploy
Set up Rowy on your Google Cloud Platform project with this one-click deploybutton.
Documentation
You can find the full documentation with how-to guideshere.
Features
Powerful spreadsheet interface for Firestore
- CRUD operations
- Sort and filter by row values
- Lock, Freeze, Resize, Hide and Rename columns
- Multiple views for the same collection
- Bulk import or exportdata - csv, json
Supercharge your database with cloud functions and ready made extension
- Effortlessly build cloud functions on field level triggers right in the browser
- Use any NPM
5. Riju
Extremely fast online playground for every programming language.
Riju
Riju is a very fast online playground for every programming languageIn less than a second, you can start playing with a Python interpreteror compiling INTERCAL code.
Check it out at https://riju.codes!
Service uptime available at https://riju.statuspage.io/.
Is it free?
Riju will always be free for everyone. I pay for the hosting costsmyself.
A number of people have asked me if they can donate to help keep Rijuonline. In response, I have set up a few methods, which you can see inthe "Sponsor this project" sidebar on GitHub. All donations will beused solely to cover hosting costs, and any surplus will be donated tothe Electronic Frontier Foundation.
Is it safe?
Riju does not collect your personal information.
- Your code is deleted from the server as soon as you close Riju.
- Your terminal input and output is never saved or logged
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.
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 experienceWe 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
Contribution
Have a question?
Ask in Discord server
Have a problem or found a bug?
If you find
7. API Platform
Create REST and GraphQL APIs, scaffold Jamstack webapps, stream changes in real-time.
api-platform / api-platform
Create REST and GraphQL APIs, scaffold Jamstack webapps, stream changes in real-time.
API Platform is a next-generation web framework designed to easily create API-first projects without compromising extensibilityand flexibility:
- Design your own data model as plain old PHP classes or import an existing onefrom the Schema.org vocabulary.
- Expose in minutes a hypermedia REST or a GraphQL API with pagination, data validation, access control, relation embeddingfilters and error handling...
- Benefit from Content Negotiation: GraphQL, JSON-LD, HydraHAL, JSONAPI, YAML, JSON, XML and CSV are supported out of the box.
- Enjoy the beautiful automatically generated API documentation (Swagger/OpenAPI).
- Add a convenient Material Design administration interface built with Reactwithout writing a line of code.
- Scaffold fully functional Progressive-Web-Apps and mobile apps built with Next.js (React)Nuxt.js (Vue.js) or React Nativethanks to the client generator (a Vue.js generator is also available).
- Install a development environment and deploy your project in
8. rx-query
Batteries included fetching library Fetch your data with ease and give your users a better experience
rx-query
Batteries included fetching libraryFetch your data with ease and give your users a better experience
Why
- a better user experience
- ease of use
- configurable
- promotes Push-based Architecture
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 ObservableThe query
method expects a callback method to invoke the query.
import { query } from "rx-query";characters$ = query("characters", () => this.rickAndMortyService.getCharacters(),);
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", () => this.rickAndMortyService.getCharacter(1)
9. Immer
Create the next immutable state by mutating the current one
Immer
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.
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
10. React Date Picker
A simple and reusable datepicker component for React
Hacker0x01 / react-datepicker
A simple and reusable datepicker component for React
React Date Picker
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
Youll need to install React and PropTypes separately since those dependencies arent 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";
Stargazing
Top risers over last 7 days
- JavaScript Algorithms +1,066 stars
- Playwright +1,036 stars
- Public APIs +800 stars
- Uptime Kuma +792 stars
- Awesome Cheatsheets +716 stars
Top growth(%) over last 7 days
- Spatial Keyboard Navigation +32%
- DOM to SVG +18%
- The new css reset +15%
- Giscus +14%
- ct +13%
Top risers over last 30 days
- Public APIs +5,262 stars
- Uptime Kuma +4,655 stars
- JavaScript Algorithms +3,288 stars
- Awesome +3,201 stars
- Build your own X +2,905 stars
Top growth(%) over last 30 days
- Uptime Kuma +134%
- Nice Modal React +101%
- Pico +52%
- Purity UI Dashboard +49%
- 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.
Original Link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-22nd-october-2021-lck
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To