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

The high-performance build system for JavaScript & TypeScript codebases


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 about software architecture, patterns, and principles.

🎨 Awesome Software Architecture Awesome

Twitter URL Linkedin Url URL blog License: CC0-1.0 Tweet

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

πŸš€ This awesome list is available in this link: https://mehdihadeli.github.io/awesome-software-architecture

home page

Sparkline

Support ⭐

Star this repository, And we will be happy together :)

Thanks a bunch for supporting me!

Contribution

Contributions are always welcome! Please take a look at the contribution guidelines pages first.

Thanks to all contributors, you're awesome and wouldn't be possible without you! The goal is to build a categorized community-driven collection of very well-known resources.







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/

Get paid support for Klipse on xscode

xscode

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…


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:

// require the library, main export is a function
const simpleGit = require('simple-git');
const git = simpleGit();
Enter fullscreen mode Exit fullscreen mode

Include in a TypeScript app using:

// Import `SimpleGit` types and the default function exported from `simple-git`
import simpleGit, {SimpleGit} from 'simple-git';
const git: SimpleGit = simpleGit();

// prior to v2.6.0 required importing from `simple-git/promise`
// this import is still available but is now deprecated
import gitP, {SimpleGit} from 'simple-git/promise';
const git: SimpleGit = gitP();
Enter fullscreen mode Exit fullscreen mode

Configuration

…


7. flatpickr

lightweight, powerful javascript datetimepicker with no dependencies

GitHub logo flatpickr / flatpickr

lightweight, powerful javascript datetimepicker with no dependencies

flatpickr - javascript datetime picker

Build 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 API for Ring Doorbells, Cameras, Alarm System, and Smart Lighting

ring-client-api

npm npm Donate

This is an unofficial TypeScript api for Ring Doorbells Ring Cameras the Ring Alarm System Ring Smart Lighting, and third party devices that connect to the Ring Alarm System. Built to support the homebridge-ring Plugin

Installation

npm i ring-client-api

Setup and Config

First, generate a refreshToken using the instructions in the Refresh Tokens Wiki

import { RingApi } from 'ring-client-api'

const ringApi = new RingApi({
  refreshToken: 'token generated with ring-auth-cli.  See https://github.com/dgreif/ring/wiki/Refresh-Tokens',

  // The following are all optional. See below for details
  cameraStatusPollingSeconds: 20,
  cameraDingsPollingSeconds: 2,
  locationIds: ['488e4800-fcde-4493-969b-d1a06f683102', '4bbed7a7-06df-4f18-b3af-291c89854d60']
});
Enter fullscreen mode Exit fullscreen mode

Optional Parameters

Option Default Explanation
cameraStatusPollingSeconds undefined (No Polling) How frequently to poll for updates to your cameras and chimes (in seconds). Information like light/siren/volume/snooze status do not update in real time and need to be requested periodically.
cameraDingsPollingSeconds undefined (No
…

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

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

Floating UI

Popper is now Floating UI! For Popper v2, visit its dedicated branch.

Website

Floating UI is a low-level library for positioning "floating" elements like tooltips, popovers, dropdowns, menus and more. Since these types of elements float on top of the UI without disrupting the flow of content, challenges arise when positioning them.

Floating UI exposes primitives which enable a floating element to be positioned next to a given reference element while appearing in view for the user as best as possible. Features include overflow prevention (or collision awareness) placement flipping, and more.

  • Tiny: 600-byte core with highly modular architecture for tree-shaking
  • Low-level: Hyper-granular control over positioning behavior
  • Pure: Predictable, side-effect free behavior
  • Extensible: Powerful middleware system
  • Platform-agnostic: Runs on any JavaScript environment which provides measurement APIs, including the web and React Native

Installation

To use it on the web:

npm install @floating-ui/dom
Enter fullscreen mode Exit fullscreen mode
yarn add @floating-ui/dom
Enter fullscreen mode Exit fullscreen mode
…

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.

Discussion (3)

Collapse
jyotiprakashrout profile image
Jyoti prakash Rout

Thanks for sharing πŸ‘πŸ’―

Collapse
ayanweb profile image
Ayan-web

Great content ...keep it coming

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?