DEV Community

Iain Freestone
Iain Freestone

Posted on

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

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

GitHub logo 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

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







2. Statsig's Open-Source Status Page

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

GitHub logo statsig-io / statuspage

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

Health Check

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

Setup instructions

  1. Fork the template repository.
  2. Update urls.cfg to include your urls.
key1=https://example.com
key2=https://statsig.com
Enter fullscreen mode Exit fullscreen mode
  1. Update index.html and change the title.
<title>My Status Page</title>
<h1>Services Status</h1>
Enter fullscreen mode Exit fullscreen mode
  1. Set up GitHub Pages for your repository.

image

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…


3. Awesome Software Architecture

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

GitHub logo 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
build-status awesome license

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


4. React Cool Img

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

GitHub logo 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.

build status coverage status npm version npm downloads npm downloads gzip size All Contributors PRs welcome Twitter URL

Features


5. Klipse

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

GitHub logo 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:

  1. Live: The code is executed in your browser
  2. 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
abc abc
PHP Clojure
abc abc

Supported


6. Simple Git

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

GitHub logo steveukx / git-js

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

Simple Git

NPM version

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

Include into your JavaScript app as an ES Module:

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

simpleGit().clean(CleanOptions.FORCE);
Enter fullscreen mode Exit fullscreen mode

Include in a TypeScript app using the…


7. flatpickr

lightweight, powerful javascript datetimepicker with no dependencies

GitHub logo flatpickr / flatpickr

lightweight, powerful javascript datetimepicker with no dependencies

flatpickr - javascript datetime picker

Actions Status

Coverage npm version CDNJS License

blue green confetti red default dark

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+


8. ring-client-api

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

GitHub logo 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!


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.

GitHub logo 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.

geek-cookbook Discord Forums Cookbook Twitch Status

👋 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! :neckbeard:

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:


10. Floating UI

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

GitHub logo floating-ui / floating-ui

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

Floating UI

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:

  1. 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.
  2. User interactions for React: Hooks and components for composing interactions to create accessible floating UI components.

README Sponsors

Milford Dopt

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…


Stargazing 📈

Top risers over last 7 days🔗

  1. Tabby +1,739 stars
  2. Developer Roadmap +1,558 stars
  3. Public APIs +1,504 stars
  4. Every programmer should know +1,307 stars
  5. Appsmith +1,229 stars

Top growth(%) over last 7 days🔗

  1. Open Props +108%
  2. Agrippa +73%
  3. Awesome Advent of Code +31%
  4. JSX Lite +23%
  5. Remix Auth +19%

Top risers over last 30 days🔗

  1. Free Programming Books +4,424 stars
  2. Awesome +4,391 stars
  3. Developer Roadmap +3,788 stars
  4. Public APIs +3,637 stars
  5. Coding Interview University +3,554 stars

Top growth(%) over last 30 days🔗

  1. Medusa +205%
  2. Fragstore +108%
  3. Hydrogen +102%
  4. Nice Modal React +82%
  5. Agrippa +80%

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 (4)

Collapse
 
jyotiprakashrout profile image
Jyoti prakash Rout

Thanks for sharing 👍💯

Collapse
 
ayanweb profile image
Ayan-web

Great content ...keep it coming

Collapse
 
ambriel profile image
Ambriel Goshi

good read

Collapse
 
eomttt profile image
Hyuntae EOM

Thanks for sharing

I make a font files to font-face css generate

github.com/eomttt/font-face-setter

can i promote here?