DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at stargazing.dev

šŸš€10 Trending projects on GitHub for web developers - 8th October 2021

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

1. LittleJS

LittleJS is a lightweight 2D JavaScript game engine with a super fast WebGL rendering system. The goal of this project is to be small, simple, and easy to use for a variety of applications from size coding game jams to commercial releases.

GitHub logo KilledByAPixel / LittleJS

LittleJS is a fast HTML5 game engine with many features and no dependencies. šŸš‚ Choo-Choo!

LittleJS - The Tiny Fast JavaScript Game Engine

LittleJS Screenshot

NPM Package Build Size NPM Downloads DeepScan Discord

šŸš‚ All aboard!

LittleJS is a fast lightweight open source HTML5 game engine for modern web development Its small footprint is packed with a comprehensive feature set including hybrid rendering, physics, particles, sound effects, music, and input handling. The code is very clean and well documented with some fun examples to get you started. Choo-Choo!

šŸš€ Join the First Ever LittleJS Game Jam

The LittleJS Game Jam will take place From Nov 11 to Dec 12! Unleash your creativity and develop amazing games using the LittleJS game engine. šŸ•¹ļøšŸŽ® Sign up today and get more info about the jam on itch.io!

LittleJS Screenshot

About LittleJS

LittleJS is a small but powerful game engine with many features and no dependencies.

āœØ Graphics

  • Super fast sprite and tile map rendering engine with WebGL
  • Updateā€¦

2. Gitpod

Gitpod automates the provisioning of ready-to-code development environments.

GitHub logo gitpod-io / gitpod

The developer platform for on-demand cloud development environments to create software faster and more securely.

Gitpod banner image

Gitpodā€™s developer platform provides on-demand, pre-configured environments that automatically integrate into any tool, library, or dependency required for creating software. Gitpod workspaces are the fastest and most secure way to ship software and are as easy as adding a .gitpod.yml file to the root of any repository.

šŸ“„ Read Cloud Development Environment white paper

Features

  • Dev environments as code - Gitpod is like infrastructure-as-code, but for your development environment. Gitpod defines your editor extensions and requires dependencies in a declarative .gitpod.yml configuration. Spinning up dev environments is easily repeatable and reproducible empowering you to automate, version-control, and share dev environments across your team.
  • Prebuilt dev environments - Gitpod continuously prebuilds all your git branches similar to a CI server. Control how Gitpod pre-configures and initializes environments before you even start a workspace through tasks commands in your .gitpod.yml. No more watching apt-get or npm install again.Ā 
  • Secure -ā€¦

3. Stampino

Stampino is a fast and extremely powerful HTML template system, where you write dynamic templates using real HTML tags

GitHub logo justinfagnani / stampino

A composable DOM template system

Stampino

Stampino is a fast and flexible HTML template system, where you write dynamic templates using real HTML <template> tags:

<template id="my-template">
  <h1>Hello {{ name }}</h1>
</template>
Enter fullscreen mode Exit fullscreen mode

Overview

Stampino uses HTML <template> tags to define templates, lit-html for the underlying template rendering, and jexpr for binding expressions.

Stampino is based on the idea that a template defines a function from data to DOM, so it transforms <template> elements into lit-html render functions. Control flow, template composition, and extensibility are built on top of function composition.

This approach leads to a low-cost for features like conditionals and repeating, which are just <template>s themselves:

<template id="my-template">
  <h2>Messages</h2>
  <template type="if" if="{{ important }}">
    <p class="important">
ā€¦
Enter fullscreen mode Exit fullscreen mode

4. react-device-detect

Detect device, and render view according to detected device type.

GitHub logo duskload / react-device-detect

Detect device, and render view according to detected device type.

react-device-detect

npm

Detect device, and render view according to the detected device type.

Installation

To install, you can use npm or yarn:

npm install react-device-detect --save

or

yarn add react-device-detect

When to use this library

This library uses a technique called user agent sniffing to detect device information. That means it works by examining the User Agent string given by a browser and comparing it to a list of browser and device names it knows about. This technique works, but has drawbacks and may or may not be the right approach, depending on what you're trying to achieve. If you need to detect a specific browser type (e.g. Chrome, Safari, Internet Explorer) or specific category of device (e.g. all iPods), this library can do that. If you just want your React app to behave differently or look different on mobiles in general, CSS @media queries and matchMedia are probably what youā€¦


5. kbar

kbar is a simple plug-n-play React component to add a fast, portable, and extensible command+k interface to your site

GitHub logo timc1 / kbar

fast, portable, and extensible cmd+k interface for your site

kbar

kbar is a simple plug-n-play React component to add a fast, portable, and extensible command + k (command palette) interface to your site.

demo

Background

Command + k interfaces are used to create a web experience where any type of action users would be able to do via clicking can be done through a command menu.

With macOS's Spotlight and Linear's command + k experience in mind, kbar aims to be a simple abstraction to add a fast and extensible command + k menu to your site.

Features

  • Built in animations and fully customizable components
  • Keyboard navigation support; e.g. control + n or control + p for the navigation wizards
  • Keyboard shortcuts support for registering keystrokes to specific actions; e.g. hit t for Twitter, hit ? to immediate bring up documentation search
  • Nested actions enable creation of rich navigation experiences; e.g. hit backspace to navigate to the previous action
  • Performanceā€¦

6. Compressor.js

JavaScript image compressor. Uses the Browser's native canvas.toBlob API to do the compression work, which means it is lossy compression, asynchronous, and has different compression effects in different browsers.

GitHub logo fengyuanchen / compressorjs

JavaScript image compressor.

Compressor.js

Coverage Status Downloads Version Gzip Size

JavaScript image compressor. Uses the Browser's native canvas.toBlob API to do the compression work, which means it is lossy compression, asynchronous, and has different compression effects in different browsers. Generally use this to precompress a image on the client side before uploading it.

Table of contents

Main

dist/
ā”œā”€ā”€ compressor.js        (UMD)
ā”œā”€ā”€ compressor.min.js    (UMD, compressed)
ā”œā”€ā”€ compressor.common.js (CommonJS, default)
ā””ā”€ā”€ compressor.esm.js    (ES Module)

Getting started

Install

npm install compressorjs
Enter fullscreen mode Exit fullscreen mode

Usage

Syntax

new Compressor(file[, options])
Enter fullscreen mode Exit fullscreen mode

file

The target image file for compressing.

options

  • Type: Object
  • Optional

The options for compressing. Check out the available options.

Example

<input type="file" id="file" accept="image/*">
Enter fullscreen mode Exit fullscreen mode
import axios from 'axios';
import Compressor from 'compressorjs';
document.
ā€¦
Enter fullscreen mode Exit fullscreen mode

7. NextUI

Beautiful, fast and modern React UI library.

GitHub logo nextui-org / nextui

šŸš€ Beautiful, fast and modern React UI library.

nextui

NextUI


License codecov badge npm downloads

NOTE: This is a community project, not associated with Vercel.

Getting Started

Visit https://nextui.org/guide to get started with NextUI.

Documentation

Visit https://nextui.org/docs to view the full documentation.

Storybook

Visit https://storybook.nextui.org to view the storybook for all components.

Canary Release

Canary versions are available after every merge into canary branch. You can install the packages with the tag canary in npm to use the latest changes before the next production release.

Community

We're excited to see the community adopt NextUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Please adhere to this project's CODE_OF_CONDUCT.

License

MIT





8. Sorry Cypress

An open-source, on-premise, self-hosted alternative to Cypress Dashboard

GitHub logo sorry-cypress / sorry-cypress

Open-source, free, self-hosted alternative to Cypress Dashboard

Update Dockerhub Images Update Dockerhub Images Join slack VScodespaces

banner dark

Open-source, free drop-in replacement for Cypress Dashboard


https://sorry-cypress.dev | https://currents.dev

Sorry Cypress is open-source, free alternative to Cypress Dashboard that unlocks unlimited parallelization, test recordings, integration with GitHub, Slack and more.

Currents.dev - is an enhanced version of Sorry Cypress. It is a managed cloud service that hundreds of companies around the globe use to run millions of Cypress tests without breaking the bank. It offers a better security, performance, analytics, integrations and support.

Table of contents

Features

  • run cypress tests in parallel with no limitations
  • upload screenshots and videos to your own storage
  • browse test results, screenshots and video recordings
  • see all your projects test results in one page
  • self-hosted - use your own infrastructure, own your data
  • integrate with GitHub, Slack or anything else via webhooks
  • works on popular cloud platforms and your data center
    • Docker images
    • Docker compose files
    • ā€¦





9. Gitify

GitHub notifications on your menu bar. Available on macOS, Windows & Linux.

GitHub logo gitify-app / gitify

GitHub notifications on your menu bar. Available on macOS, Windows & Linux.

Gitify

Build Workflow Release Workflow Coveralls Renovate enabled Libraries.io dependency status Contributors Downloads - Total Downloads - Latest Release OSS License Latest Release Homebrew Cask

GitHub Notifications on your menu bar. Available on macOS, Windows and Linux.

Gitify

Download

You can download Gitify for free from the website www.gitify.io or install it via Homebrew Cask.

brew install gitify
Enter fullscreen mode Exit fullscreen mode

Gitify supports macOS, Windows and Linux.

FAQ

Please visit our Gitify FAQs for all commonly asked questions.

Contributing

Please read our Contributing Guidelines for more information.

License

Gitify is licensed under the MIT Open Source license. For more information, see LICENSE.





10. envsafe

Makes sure you don't accidentally deploy apps with missing or invalid environment variables.

GitHub logo KATT / envsafe

šŸ”’ Makes sure you don't accidentally deploy apps with missing or invalid environment variables.

Maintainability Test Coverage

envsafe šŸ”’

Validate access to environment variables and parse them to the right type. Makes sure you don't accidentally deploy apps with missing or invalid environment variables.

========================================
āŒ Invalid environment variables:
    API_URL: Invalid url input: "http//example.com/graphql"
šŸ’Ø Missing environment variables:
    MY_VAR: Missing value or empty string
    PORT: Missing value or empty string
========================================

Heavily inspired by the great project envalid, but with some key differences:

  • Written in 100% TypeScript
  • Always strict - only access the variables you have defined
  • Built for node.js and the browser
  • No dependencies - tiny bundle for browser/isomorphic apps

How to use

Works the same in the browser and in node. See the ./examples-folder for more examples.

Install

yarn add envsafe
Enter fullscreen mode Exit fullscreen mode
npm i envsafe --save
Enter fullscreen mode Exit fullscreen mode

Basic usage

import { str, envsafe,
ā€¦
Enter fullscreen mode Exit fullscreen mode

Stargazing šŸ“ˆ

Top risers over last 7 daysšŸ”—

  1. Public APIs +2,311 stars
  2. Appsmith +1,221 stars
  3. Electron +1,156 stars
  4. Clean Code JavaScript +1,116 stars
  5. Awesome +979 stars

Top growth(%) over last 7 daysšŸ”—

  1. ct.css +70%
  2. Refine +45%
  3. EBS Design System +27%
  4. Uptime Kuma +26%
  5. Appsmith +20%

Top risers over last 30 daysšŸ”—

  1. Public APIs +7,186 stars
  2. ML for beginners +4,911 stars
  3. Free Programming Books +4,733 stars
  4. Free Code Camp +3,819 stars
  5. JavaScript Algorithms +3,326 stars

Top growth(%) over last 30 daysšŸ”—

  1. Milkdown +132%
  2. Ultra +81%
  3. React Render Tracker +67%
  4. Dapp Scaffold +55%
  5. Assembler +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 about HTML, CSS and JavaScript.

Top comments (0)