Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 30, 2021 01:41 pm GMT

10 Trending projects on GitHub for web developers - 30th July 2021

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

1. tracking.js

The tracking.js library brings different computer vision algorithms and techniques into the browser environment. By using modern HTML5 specifications, we enable you to do real-time color tracking, face detection and much more all that with a lightweight core (~7 KB) and intuitive interface.

GitHub logo eduardolundgren / tracking.js

A modern approach for Computer Vision on the web

Banner

tracking.js

Build StatusDevDependencies Status

The tracking.js library brings different computer vision algorithms and techniques into the browser environment. By using modern HTML5 specifications, we enable you to do real-time color tracking, face detection and much more all that with a lightweight core (~7 KB) and intuitive interface.

Install

Install via Bower, npm, or download as a zip:

bower install tracking
npm install tracking

Examples

Demo 1Demo 2Demo 3Demo 4Demo 5

Features

Browser Support

You can plug tracking.js into some well supported HTML elements such as <canvas>, <video> and <img>.

IEChromeFirefoxOperaSafari
IE 9+ Latest Latest Latest Latest

However, the browser support may vary if you request the user's camera (which relies on getUserMedia API

2. Welcome UI

Welcome to the Welcome UI library created by Welcome to the jungle, a customizable design system with react, styled-components, styled-system and reakit.

GitHub logo WTTJ / welcome-ui

Customizable design system of @wttj with react styled-components styled-system reakit

Welcome UI

Welcome to the Welcome UI library created by Welcome to the jungle, a customizable design system with react styled-components styled-system and reakit.

Here you'll find all the core components you need to create a delightful webapp.

Discover all the components

License Code formating Code style PRs Welcome Conventional Commits

Installation

1 - Install the peer dependencies listed below:

yarn add @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components

2 - Install the the core component and any other components you need for your webapp e.g. if you need just a button

yarn add @welcome-ui/core @welcome-ui/button

Import library & Theme

Getting started

import React from 'react'import { createTheme, WuiProvider } from '@welcome-ui/core'import { Button } from '@welcome-ui/button'// Add theme options (if you want)const options = {  defaultFontFamily: 'Helvetica',  headingFontFamily: 'Georgia',  colors: {    primary: {      500: '#124C80'    },    success: {      500: '#32CD32'

3. Waypoint

Waypoint allows developers to define their application build, deploy, and release lifecycle as code, reducing the time to deliver deployments through a consistent and repeatable workflow.

GitHub logo hashicorp / waypoint

A tool to build, deploy, and release any application on any platform.

Image

Waypoint

Waypoint allows developers to define their application build, deploy, and release lifecycle as code, reducing the time to deliver deployments through a consistent and repeatable workflow.

Waypoint supports a number of build methods and target platforms out of the boxand more can be easily added via plugins:

  • Cloud Native Buildpacks
  • Docker
  • Kubernetes
  • AWS EC2 and ECS
  • Azure Container Instances
  • Google Cloud Run
  • And many more...

Waypoint runs on Linux, Mac OS X, and Windows.

Please note: We take Waypoint's security and our users' trust very seriously. If youbelieve you have found a security issue in Waypoint, please responsibly disclose bycontacting us at [email protected].

Quick Start

A few quick start guides are available on the Waypoint websiteand on HashiCorp Learn:

4. VS Code Database Client

Database Client for Visual Studio Code. It supports databases MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, SQLite, MongoDB, Redis, and ElasticSearch.

GitHub logo cweijan / vscode-database-client

Database Client For Visual Studio Code

Database Client

Database Client for Visual Studio Code. It supports databases MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, SQLite, MongoDB, Redis, and ElasticSearch.

Project site: vscode-database-client,

Features

Installation

Install from vscode marketplace vscode-database-client.

Connect

  1. Open Database Explorer panel, then click the+ button.
  2. Select your database type, input connection config then click the connect button.

connection

Table

  1. Click table to open table view.
  2. Then you can do data modification on the view page.

query

Execute SQL Query

In the Database Explorer panel, click the Open Query button.

newquery

That will open a sql editor bind of database, it provider:

  1. IntelliSense sql edit.
  2. snippets:seldelinsupdjoi...
  3. Run selected or current cursor sql (Shortcut : Ctrl+Enter).
  4. Run all sql (Shortcut : Ctrl+Shift+Enter).

run

Generate Mock Data

You can easily generate test data.

mockData

History

Click the history button to open the list

5. Create Eth App

Create Ethereum-powered apps with one command.

GitHub logo paulrberg / create-eth-app

Create Ethereum-powered apps with one command

Create Eth App Styled with Prettier Commitizen Friendly License: MIT PRs Welcome

Create Ethereum-powered apps with one command.

Create Eth App works on macOS, Windows, and Linux.
If something doesnt work, please file an issue.
If you have questions or need help, please ask in our Discord community.

Quick Overview

yarn create eth-app my-eth-appcd my-eth-appyarn react-app:start

If you've previously installed create-eth-app globally via yarn global add create-eth-app, we recommend youuninstall the package using yarn global remove create-eth-app and use the yarn create eth-app shorthand to ensure that you use the last version.

Then open http://localhost:3000/ to see your app.
When youre ready to deploy to production, create a minified bundle with yarn run react-app:build.

yarn react-app:start

Creating an App

Youll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine (but its not required on the server). You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between




6. JSii

jsii allows code in any language to naturally interact with JavaScript classes. It is the technology that enables the AWS Cloud Development Kit to deliver polyglot libraries from a single codebase!

GitHub logo aws / jsii

jsii allows code in any language to naturally interact with JavaScript classes. It is the technology that enables the AWS Cloud Development Kit to deliver polyglot libraries from a single codebase!

jsii

Join the chat at https://cdk.DevAll ContributorsBuild Statusnpmdocker

Overview

jsii allows code in any language to naturally interact with JavaScript classes. It is the technology that enables theAWS Cloud Development Kit to deliver polyglot libraries from a single codebase!

A class library written in TypeScript can be used in projects authored in TypeScript or Javascript (asusual), but also in Python, Java, C# (and other languages from the .NET family), ...

Documentation

Head over to our documentation website!

Blog Posts

Here's a collection of blog posts (in chronological order) related to jsii:

If you wrote blog posts about jsii and would like to have them referenced here, do

7. flag-icon-css

A collection of all country flags in SVG plus the CSS for easier integration

GitHub logo lipis / flag-icon-css

A collection of all country flags in SVG plus the CSS for easier integration

flag-icon-css

A collection of all country flags in SVG plus the CSS for easier integrationSee the demo.

Install

You can either downloadthe whole project as is or install it via Bower or NPM:

$ bower install flag-icon-css$ npm install flag-icon-css

Usage

For using the flags inline with text add the classes .flag-icon and.flag-icon-xx (where xx is theISO 3166-1-alpha-2 codeof a country) to an empty <span>. If you want to have a squared version flagthen add the class flag-icon-squared as well. Example:

<span class="flag-icon flag-icon-gr"></span><span class="flag-icon flag-icon-gr flag-icon-squared"></span>

You could also apply this to any element, but in that case you'll have to use theflag-icon-background instead of flag-icon and you're set. This will add thecorrect background with the following CSS properties:

background-size

8. Mermaid

Generation of diagram and flowchart from text in a similar manner as markdown

GitHub logo mermaid-js / mermaid

Generation of diagram and flowchart from text in a similar manner as markdown

mermaid Build Status NPM Coverage Status Join our Slack! This project is using Percy.io for visual regression testing.

banner

Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!

Thanks to all involved, people committing pull requests, people answering questions!

About

Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.

Doc-Rot is a Catch-22 that Mermaid helps to solve.

Diagramming and documentation costs precious developer time and gets outdated quicklyBut not having diagrams or docs ruins productivity and hurts organizational learning.
Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable contentThe text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production

9. Babylon.js

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

GitHub logo BabylonJS / Babylon.js

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js

Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it.

npm versionBuild StatusAverage time to resolve an issuePercentage of issues still openBuild SizeTwitterDiscourse users

Any questions? Here is our official forum.

CDN

Additional references can be found on https://cdn.babylonjs.com/xxx where xxx is the folder structure you can find in the /dist folder like https://cdn.babylonjs.com/gui/babylon.gui.min.js

For the preview release, use the following URLs:

Additional references can be found on https://preview.babylonjs.com/xxx where xxx is the folder structure you can find in the /dist/preview release folder like https://preview.babylonjs.com/gui/babylon.gui.min.js

npm

BabylonJS and its modules are published on npm with full typing support. To install, use:

npm install babylonjs --save

This will allow you to import BabylonJS entirely using:

import * as BABYLON from 'babylonjs';

or individual classes using:

import { Scene, Engine } from 'babylonjs';

If using TypeScript, don't forget to add 'babylonjs' to

10. Dinero.js

Money is complex, and the primitives of the language aren't enough to properly represent it. Dinero.js is a JavaScript library that lets you express monetary values, but also perform mutations, conversions, comparisons, formatting, and overall make money manipulation easier and safer in your application.

GitHub logo dinerojs / dinero.js

Create, calculate, and format money in JavaScript and TypeScript.

Dinero.js

Stability: alpha CircleCI NPM

Dinero.js lets you create, calculate, and format money safely in JavaScript and TypeScript.
v2.dinerojs.com/docs

Money is complex, and the primitives of the language aren't enough to properly represent it. Dinero.js is a JavaScript library that lets you express monetary values, but also perform mutations, conversions, comparisons, formatting, and overall make money manipulation easier and safer in your application.

Dinero.js v2 is currently in alpha. For v1, check the v1 branch and docs.

Install

npm install dinero.js@alpha# oryarn add dinero.js@alpha

Quick start

Dinero objects are minimal. Every function in dinero.js is side-effect free, allowing you only to bundle exactly what you use.

import { USD } from '@dinero.js/currencies';import { dinero, add } from 'dinero.js';const d1 = dinero({ amount: 500, currency: USD });const d2 = dinero({ amount: 800, currency

Stargazing

Top risers over last 7 days

  1. Coding Interview University +2,546 stars
  2. Public APIs +2,509 stars
  3. NocoDB +1,038 stars
  4. Bulletproof React +1,037 stars
  5. Supabase +735 stars

Top growth(%) over last 7 days

  1. Bulletproof React +71%
  2. useCookieConsent +34%
  3. use-color +25%
  4. Vechai UI +17%
  5. The New CSS Reset +15%

Top risers over last 30 days

  1. Public APIs +11,622 stars
  2. Coding Interview University +5,094 stars
  3. JavaScript Algorithms +3,408 stars
  4. Solid +3,121 stars
  5. Free Programming Books +3,080 stars

Top growth(%) over last 30 days

  1. Security Scorecards +179%
  2. Fullstack Boilerplate +171%
  3. Framework Info +147%
  4. Astro +72%
  5. 50 Projects in 50 Days +65%

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com 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.


Original Link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-30th-july-2021-bnc

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To