Iain Freestone

Posted on Dec 10, 2021

🚀10 Trending projects on GitHub for web developers - 10th December 2021

#javascript #webdev #productivity #typescript

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

1. Turborepo

The high-performance build system for JavaScript & TypeScript codebases

vercel / turborepo

Build system optimized for JavaScript and TypeScript, written in Rust

Turborepo

Turborepo is a high-performance build system for JavaScript and TypeScript codebases, written in Rust.

Getting Started

Visit https://turbo.build/repo to get started with Turborepo.

Contributing

See CONTRIBUTING.md for more information.

Community

The Turborepo community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.

To chat with other community members, you can join the Turborepo Discord.

Our Code of Conduct applies to all Turborepo community channels.

Who is using Turborepo?

Turborepo is used by the world's leading companies. Check out the Turborepo Showcase to learn more.

Updates

Follow @turborepo on X for project updates.

Authors

Turborepo

Jared Palmer (@jaredpalmer)

Security

If you believe you have found a security vulnerability in Turborepo, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@vercel.com to disclose any security vulnerabilities.

https://vercel.com/security

View on GitHub

2. Statsig's Open-Source Status Page

A simple, zero-dependency, pure js/html status page based on GitHub Pages and Actions.

statsig-io / statuspage

A simple, zero-dependency, pure js/html status page based on GitHub Pages and Actions.

Statsig's Open-Source Status Page

We tried various Status Pages out there, and built this as a fun little hobby project to make status pages as simple as possible.

Demo

https://status.statsig.com

Setup instructions

Fork the template repository.
Update urls.cfg to include your urls.

key1=https://example.com
key2=https://statsig.com

Update index.html and change the title.

<title>My Status Page</title>
<h1>Services Status</h1>

Set up GitHub Pages for your repository.

How does it work?

This project uses GitHub actions to wake up every hour and run a shell script (health-check.sh). This script runs curl on every url in your config and appends the result of that run to a log file and commits it to the repository. This log is then pulled dynamically from index.html and displayed in a easily consumable fashion. You can also run that script from your own infrastructure to…

View on GitHub

3. Awesome Software Architecture

A curated list of awesome articles, videos, and other resources to learn and practice about software architecture, patterns, and principles.

mehdihadeli / awesome-software-architecture

🚀 A curated list of awesome articles, videos, and other resources to learn and practice software architecture, patterns, and principles.

Awesome Software Architecture

Curated list of awesome articles and resources to learn and practice software architecture, patterns and principles. This repository will be updated continuously, keep yourself up to date .

I created this repository to share a set of links that I found valuable and inspiring and I share them with others to improve our knowledge together ✌️.

🚀 Go ahead to the official web page here: > 🌐 https://awesome-architecture.com

Contents

View on GitHub

4. React Cool Img

A React component let you handle image UX and performance as a Pro!

wellyshen / react-cool-img

😎 🏞 A React <Img /> component let you handle image UX and performance as a Pro!

REACT COOL IMG

This is a lightweight React <Img /> component, which helps you handle image UX (user experience) and performance optimization as a professional guy 🤓

It empowers the standard img tag by many cool features without breaking your original development experience. Ideally, it can be an img tag replacement for React.js.

⚡️ Live demo: https://react-cool-img.netlify.app

❤️ it? ⭐️ it on GitHub or Tweet about it.

Features

🖼 Placeholders for satisfying various image loading states (e.g. loading image > actual image > error image).
🛋 Smart lazy loading with performant and efficient way, using Intersection Observer.
🤖 Built-in auto-retry mechanism. User won't miss out your important information.
🚫 Aborts any current image downloads on component unmount potentially saving bandwidth and browser resources.
🔍 Supports server-side rendering / Javascript is disabled / SEO.
📜 Supports TypeScript type definition.
🦔 Tiny size (~ 2kB gzipped). No…

View on GitHub

5. Klipse

Klipse is a JavaScript plugin for embedding interactive code snippets in tech blogs.

viebel / klipse

Klipse is a JavaScript plugin for embedding interactive code snippets in tech blogs.

Klipse

Klipse is a JavaScript plugin for embedding interactive code snippets in tech blogs. See examples at https://blog.klipse.tech/

Technically, Klipse is a small piece of JavaScript code that evaluates code snippets in the browser and it is pluggable on any web page.

If you like this stuff, please consider a (small donation) on Patreon.

Plugin

The klipse plugin is a JavaScript tag (see details below) that transforms static code snippets of an html page into live and interactive snippets:

Live: The code is executed in your browser
Interactive: You can modify the code and it is evaluated as you type

The code evaluation is done in the browser: no server is involved at all!

Live demo

With the klipse plugin, the code is evaluated as you type...

Here is a live demo of the embedding of klipse in a web page.

JavaScript	Ruby

PHP	Clojure

Supported

…

View on GitHub

6. Simple Git

A light weight interface for running git commands in any node.js application.

steveukx / git-js

A light weight interface for running git commands in any node.js application.

Simple Git

A lightweight interface for running git commands in any node.js application.

Installation

Use your favourite package manager:

npm: npm install simple-git
yarn: yarn add simple-git

System Dependencies

Requires git to be installed and that it can be called using the command git.

Usage

Include into your JavaScript app using common js:

// require the library, main export is a function
const simpleGit = require('simple-git');
simpleGit().clean(simpleGit.CleanOptions.FORCE);

// or use named properties
const { simpleGit, CleanOptions } = require('simple-git');
simpleGit().clean(CleanOptions.FORCE);

Include into your JavaScript app as an ES Module:

import { simpleGit, CleanOptions } from 'simple-git';

simpleGit().clean(CleanOptions.FORCE);

Include in a TypeScript app using the…

View on GitHub

7. flatpickr

lightweight, powerful javascript datetimepicker with no dependencies

flatpickr / flatpickr

lightweight, powerful javascript datetimepicker with no dependencies

flatpickr - javascript datetime picker

Motivation

Almost every large SPA or project involves date and time input. Browser's native implementations of those are inconsistent and limited in functionality. Most other libraries require you to pull in heavy dependencies like jQuery, Bootstrap, and moment.js. I wanted something that was good-looking out of the box, dependency-free, powerful, and extensible.

Feature overview:

Dependency-free (no bloated bundles)
Simple, polished UX
Date + time input
Range selections
Ability to select multiple dates
Can be used as just a time picker
Display dates in a human-friendly format
Easily disable specific dates, date ranges, or any date using arbitrary logic
Week numbers
51 locales
8 colorful themes (incl. dark and material)
Numerous plugins
Libraries available for React, Angular, Vue, Ember, and more

flatpickr provides more functionality at a fraction of the size of other libraries.

Compatibility

IE9 and up, Edge, iOS Safari 6+, Chrome 8+, Firefox 6+

…

View on GitHub

8. ring-client-api

Unofficial API for Ring Doorbells, Cameras, Alarm System, and Smart Lighting

dgreif / ring

Unofficial packages for Ring Doorbells, Cameras, Alarm System, and Smart Lighting

Ring

This repo contains unofficial packages to enable interaction and automation with the majority of Ring products

Troubleshooting Issues

If you are having issues, please look for related articles in the wiki and search existing Issues before opening a new Issue/Discussion

`ring-client-api`

The ring-client-api is a TypeScript package designed to be used by developers to create your own apps/programs which interact with Rings api

`homebridge-ring`

homebridge-ring allows users to easily integrate Ring products into Apple HomeKit via homebridge

Examples

See the examples directory for examples using the ring-client-api. For a full project example, see https://github.com/dgreif/ring-client-example

Credits

I'd like to give a big thanks to a number developers who have put a lot of hard work into analyzing the Ring api and building similar libraries which were extremely valuable in my creation of this project. Thank you all for your hard work!

@davglass - https://github.com/davglass/doorbot - The original node project…

View on GitHub

9. The Geek Cookbook

The "Geek's Cookbook" is a collection of guides for establishing your own highly-available "private cloud" and using it to run self-hosted services such as GitLab, Plex, NextCloud, etc.

geek-cookbook / geek-cookbook

The "Geek's Cookbook" is a collection of guides for establishing your own highly-available "private cloud" and using it to run self-hosted services such as GitLab, Plex, NextCloud, etc.

👋 Welcome, traveller!

The Geek Cookbook is a collection of geek-friendly "recipes" to run popular applications on Docker Swarm or Kubernetes, in a progressive, easy-to-follow format. Come and join us, fellow geeks!

What is this?

What is this?

Funky Penguin's "Geek Cookbook" is a collection of how-to guides for establishing your own container-based self-hosting platform, using either Docker Swarm or Kubernetes.

Running such a platform enables you to run self-hosted tools such as AutoPirate (Radarr, Sonarr, NZBGet and friends), Plex, NextCloud, and includes elements such as:

Automatic SSL-secured access to all services (with LetsEncrypt)
SSO / authentication layer to protect unsecured / vulnerable…

View on GitHub

10. Floating UI

JavaScript positioning library for tooltips, popovers, dropdowns, and more

floating-ui / floating-ui

A JavaScript library to position floating elements and create interactions for them.

Note

Popper is now Floating UI! For Popper v2, visit its dedicated branch and its documentation For help on migrating, check out the Migration Guide.

Floating UI is a small library that helps you create "floating" elements such as tooltips, popovers, dropdowns, and more.

It offers two main features:

Anchor positioning: Anchor a floating element (such as a tooltip) to another element (such as a button) while simultaneously ensuring it stays in view as best as possible by avoiding collisions. This feature is available for all platforms.
User interactions for React: Hooks and components for composing interactions to create accessible floating UI components.

README Sponsors

You can sponsor Floating UI in a variety of ways on Open Collective.

Why

Floating elements are absolutely positioned, typically anchored to another UI element. Ensuring a floating element remains anchored next to another element can be challenging, especially in unique…

View on GitHub