DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀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

👉 #395 👈


tracking.js

Build Status DevDependencies 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 1 Demo 2 Demo 3 Demo 4 Demo 5

Features

Browser Support

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

IE Chrome Firefox Opera Safari
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 from Welcome to the jungle (@wttj) with react, typescript, styled-components, ariakit and a lot of love 💛 Here you'll find all the core components you need to create a delightful webapp.

Welcome UI

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

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 react styled-components
Enter fullscreen mode Exit fullscreen mode

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

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

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


HashiCorp Waypoint Community Edition is no longer actively maintained. For additional information on the new vision of Waypoint, check out this blog post and the HCP Waypoint documentation.


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 box and 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 you believe you have found a security issue in Waypoint, please responsibly disclose by contacting us at security@hashicorp.com.

Quick Start

A quick start


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

This repository is the early source code of Database Client, the new version is closed source.

Database Client for Visual Studio Code

The online document is migrate to https://doc.database-client.com.


GitHub

This project is a database client for VSCode, supports manager MySQL/MariaDB, PostgreSQL, SQLite, Redis, ClickHouse, 达梦, and ElasticSearch, and works as an SSH client, boost your maximum productivity!

Project site: vscode-database-client, 中文文档

Logo

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

Two panels are created because in some cases you need to view both SQL and NoSQL data at the same time, you can drag the panel to the other by long-pressing.

Table

  1. Click table to open table view.
  2. Click button beside…

5. Create Eth App

Create Ethereum-powered apps with one command.

GitHub logo WalletConnect / 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 doesn’t 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-app
cd my-eth-app
yarn react-app:start
Enter fullscreen mode Exit fullscreen mode

If you've previously installed create-eth-app globally via yarn global add create-eth-app, we recommend you uninstall 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 you’re ready to deploy to production, create a minified bundle with yarn run react-app:build.

yarn react-app:start

Creating an App

You’ll need to have Node 16 or later version on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

You'll


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.Dev All Contributors Build Status npm docker

Overview

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!

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

❓ Documentation

Head over to our documentation website!

The jsii toolchain is spread out on multiple repositories:

  • aws/jsii-compiler is where the jsii compiler is maintained (except releases in the 1.x line, which are maintained in this repository)
  • aws/jsii-rosetta is where the jsii-rosetta sample code transliteration tool is maintained (except releases in the 1.x line, which are maintained in this repository)
  • aws/jsii is where the rest of the toolchain is maintained, including
    • @jsii/spec, the package that defines the .jsii assembly specification
    • jsii-config

7. flag-icon-css

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

GitHub logo lipis / flag-icons

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

flag-icons

A curated collection of all country flags in SVG — plus the CSS for easier integration. See the demo.

Install

You can either download the whole project as is or install it via npm or Yarn:

npm install flag-icons
# or
yarn add flag-icons
Enter fullscreen mode Exit fullscreen mode

Usage

First, you need to import css:

import "/node_modules/flag-icons/css/flag-icons.min.css";
Enter fullscreen mode Exit fullscreen mode

or use CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css"
/>
Enter fullscreen mode Exit fullscreen mode

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

<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
Enter fullscreen mode Exit fullscreen mode

You could also apply this to any element, but in that case…


8. Mermaid

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

GitHub logo mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

Mermaid

Generate diagrams from markdown-like text

Live Editor!

📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us

简体中文

Try Live Editor previews of future releases: Develop | Next



NPM Build CI Status npm minified gzipped bundle size Coverage Status CDN Status NPM Downloads Join our Discord! Twitter Follow Covered by Argos Visual Testing OpenSSF Scorecard

🏆 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! 🙏

Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!

Table of content

Expand contents

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 quickly But not having diagrams or docs ruins productivity and hurts organizational…


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 version Build Status Average time to resolve an issue Percentage of issues still open Build size Twitter Discourse users

Any questions? Here is our official forum.

CDN

⚠️ WARNING: The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN.

For the preview release, use the following URLs:

A list of additional references can be found here.

npm

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

npm install babylonjs --save

alternatively, you can now rely on our ES6 packages. Using the ES6 version will…


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

# or

yarn add dinero.js@alpha
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (2)

Collapse
 
qq449245884 profile image
qq449245884

Dear Iain Freestone,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
 
iainfreestone profile image
Iain Freestone

Sure no problem