🚀10 Trending projects on GitHub for web developers - 3rd September 2021

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

1. Uptime Kuma

A fancy self-hosted monitoring tool. Monitoring uptime for HTTP(s) / TCP / Ping / DNS Record.

louislam / uptime-kuma

A fancy self-hosted monitoring tool

Uptime Kuma

Uptime Kuma is an easy-to-use self-hosted monitoring tool.

🥔 Live Demo

Try it!

Demo Server (Location: Frankfurt - Germany): https://demo.kuma.pet/start-demo

It is a temporary live demo, all data will be deleted after 10 minutes. Sponsored by Uptime Kuma Sponsors.

⭐ Features

• Monitoring uptime for HTTP(s) / TCP / HTTP(s) Keyword / HTTP(s) Json Query / Ping / DNS Record / Push / Steam Game Server / Docker Containers
• Fancy, Reactive, Fast UI/UX
• Notifications via Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP), and 90+ notification services, click here for the full list
• 20-second intervals
• Multi Languages
• Multiple status pages
• Map status pages to specific domains
• Ping chart
• Certificate info
• Proxy support
• 2FA support

🔧 How to Install

🐳 Docker

docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:1

Uptime Kuma is now running on http://0.0.0.0:3001.

Warning

File Systems like NFS (Network File System) are NOT…

View on GitHub

---

2. React render tracker

React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts

lahmatiy / react-render-tracker

React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts

React Render Tracker

React Render Tracker – a tool to discover performance issues related to unintended re-renders.

React Render Tracker (RRT) presents component’s tree state over the time and an event log related to a selected component (fiber) or its subtree. It doesn't provide a complete state of the components, but the difference between their states. It's not a replacement for React Devtools, but a compliment to it with a focus on investigation of changes in app's component tree (like mounts, updates and unmounts) and their causes.

React Render Tracker v0.6 – Overview & Instructions

Supported React v16.9+ (fully functional for a React development build, but for profiling and production builds it is not capturing some data, see issue #25)

Features:

• The state of component's tree over time including unmounted components (can be hidden by a toggle in the top right corner) and number of updates (re-renders)
• Two types…

View on GitHub

---

3. Tailwind Nextjs Starter Blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies. Easily configurable and customizable.

timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Tailwind Nextjs Starter Blog

This is a Next.js, Tailwind CSS blogging starter template. Version 2 is based on Next App directory with React Server Component and uses Contentlayer to manage markdown content.

Probably the most feature-rich Next.js markdown blogging template out there. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Check out the documentation below to get started.

Facing issues? Check the FAQ page and do a search on past issues. Feel free to open a new issue if none has been posted previously.

Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!

Variations

Note: These are community contributed forks using different frameworks or with significant changes to the codebase - not officially supported.

Astro alternative - Tailwind Astro Template.

Remix-run…

View on GitHub

---

4. xstate

State machines and statecharts for the modern web.

statelyai / xstate

Actor-based state management & orchestration for complex app logic.

Actor-based state management & orchestration for complex app logic. → Documentation

XState is a state management and orchestration solution for JavaScript and TypeScript apps. It has zero dependencies, and is useful for frontend and backend application logic.

It uses event-driven programming, state machines, statecharts, and the actor model to handle complex logic in predictable, robust, and visual ways. XState provides a powerful and flexible way to manage application and workflow state by allowing developers to model logic as actors and state machines.

✨ Create state machines visually in Stately Studio → state.new

---

📖 Read the documentation

➡️ Create state machines with the Stately Editor

🖥 Download our VS Code extension

📑 Inspired by the SCXML specification

💬 Chat on the Stately Discord Community

✍️ Browse through the many XState examples

Templates

Get started by forking one of these templates on CodeSandbox:

Template
🤖 XState Template (CodeSandbox)	XState v5 TypeScript No…

View on GitHub

---

5. IndexedDB with usability

IndexedDB, but with promises. This is a tiny (~1.09k brotli'd) library that mostly mirrors the IndexedDB API, but with small improvements that make a big difference to usability.

jakearchibald / idb

IndexedDB, but with promises

IndexedDB with usability.

This is a tiny (~1.19kB brotli'd) library that mostly mirrors the IndexedDB API, but with small improvements that make a big difference to usability.

1. Installation
2. Changes
3. Browser support
4. API
   1. openDB
   2. deleteDB
   3. unwrap
   4. wrap
   5. General enhancements
   6. IDBDatabase enhancements
   7. IDBTransaction enhancements
   8. IDBCursor enhancements
   9. Async iterators
5. Examples
6. TypeScript

Installation

Using npm

npm install idb

Then, assuming you're using a module-compatible system (like webpack, Rollup etc):

import { openDB, deleteDB, wrap, unwrap } from 'idb';

async function doDatabaseStuff() {
  const db = await openDB(…);
}

Directly in a browser

Using the modules method directly via jsdelivr:

<script type="module">
  import { openDB, deleteDB, wrap, unwrap } from 'https://cdn.jsdelivr.net/npm/idb@8/+esm';

  async function doDatabaseStuff() {
    const db = await openDB(…);
  }
</script>

Using external script reference

<script

…

View on GitHub

---

6. htmlparser2

The fast & forgiving HTML and XML parser

fb55 / htmlparser2

The fast & forgiving HTML and XML parser

htmlparser2

The fast & forgiving HTML/XML parser.

htmlparser2 is the fastest HTML parser, and takes some shortcuts to get there. If you need strict HTML spec compliance, have a look at parse5.

Installation

npm install htmlparser2

A live demo of htmlparser2 is available on AST Explorer.

Ecosystem

Name	Description
htmlparser2	Fast & forgiving HTML/XML parser
domhandler	Handler for htmlparser2 that turns documents into a DOM
domutils	Utilities for working with domhandler's DOM
css-select	CSS selector engine, compatible with domhandler's DOM
cheerio	The jQuery API for domhandler's DOM
dom-serializer	Serializer for domhandler's DOM

Usage

htmlparser2 itself provides a callback interface that allows consumption of documents with minimal allocations. For a more ergonomic experience, read Getting a DOM below.

import * as htmlparser2 from "htmlparser2";
const parser = new htmlparser2.Parser({
    onopentag(name, attributes) {
        /*
         * This fires when a new

…

View on GitHub

---

7. React Virtuoso

The most powerful virtual list component for React. Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary.

petyosi / react-virtuoso

The most powerful virtual list component for React

React Virtuoso - the most complete React virtualization rendering list/table/grid family of components.

• Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;
• Chat message list UI NEW;
• Grouped mode with sticky headers;
• Responsive grid layout;
• Table Support;
• Automatic handling of content resize;
• Custom Header, Footer, and empty list components;
• Pinned top items;
• Endless scrolling, press to load more;
• Initial top most item index;
• Scroll to index method.

For live examples and documentation, check the documentation website.

Sponsors

If you are using Virtuoso for work, sponsor it. Any donation helps a lot with the project development and maintenance.

Get Started

npm install react-virtuoso

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'
const App = () => {
  return <Virtuoso

…

View on GitHub

---

8. AMP

The AMP web component framework for easily creating user-first websites, stories, ads, emails and more.

ampproject / amphtml

The AMP web component framework.

AMP ⚡

⚡⚡⚡

Tooling

AMP is a web component framework for easily creating user-first websites, stories, ads, emails and more.

AMP is an open source project, and we'd love your help making it better!

Want to know more about AMP?

• amp.dev is the best place to learn more about AMP--and of course the site is made using AMP!
• For developers using AMP, amp.dev includes
  • guides and tutorials
  • examples
  • reference docs
  • example templates
  • tools to make using AMP easier

Having a problem using AMP?

• The amp.dev Support page has resources for getting help.
• Use Stack Overflow to ask questions about using AMP and find answers to questions others have asked.
• Let us know about bugs, and file feature requests to suggest improvements.
• AMP accepts responsible security disclosures through the Google Application Security program.

Want to help make AMP better?

• docs/contributing.md has information on how you can help improve AMP…

View on GitHub

---

9. Mammoth

Mammoth is designed to convert .docx documents, such as those created by Microsoft Word, Google Docs and LibreOffice, and convert them to HTML

mwilliamson / mammoth.js

Convert Word documents (.docx files) to HTML

Mammoth .docx to HTML converter

Mammoth is designed to convert .docx documents such as those created by Microsoft Word, Google Docs and LibreOffice and convert them to HTML. Mammoth aims to produce simple and clean HTML by using semantic information in the document, and ignoring other details. For instance, Mammoth converts any paragraph with the style Heading 1 to h1 elements, rather than attempting to exactly copy the styling (font, text size, colour, etc.) of the heading.

There's a large mismatch between the structure used by .docx and the structure of HTML, meaning that the conversion is unlikely to be perfect for more complicated documents. Mammoth works best if you only use styles to semantically mark up your document.

The following features are currently supported:

• Headings.

• Lists.

• Customisable mapping from your own docx styles to HTML For instance, you could convert WarningHeading to h1.warning by providing an appropriate style mapping.

• …

View on GitHub

---

10. Bulletproof React

A simple, scalable, and powerful architecture for building production ready React applications.

alan2207 / bulletproof-react

🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

Bulletproof React 🛡️ ⚛️

A simple, scalable, and powerful architecture for building production ready React applications.

Introduction

React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write React applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that developers can follow, it often leads to a messy, inconsistent, and over-complicated codebase.

This repo attempts to present a way of creating React applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my experience working with a lot of different codebases, this architecture turns out to be the most effective.

The goal here is to serve…

View on GitHub

---

Stargazing 📈

Top risers over last 7 days🔗

1. Free Programming Books +2,173 stars
2. Public APIs +1,299 stars
3. Web dev for beginners +942 stars
4. Discord.js +861 stars
5. Build your own X +569 stars

Top growth(%) over last 7 days🔗

1. Shaper +75%
2. Ocean +39%
3. Svelte Society +18%
4. Stitches +11%
5. LemonadeJS +11%

Top risers over last 30 days🔗

1. Public APIs +8,983 stars
2. Free Programming Books +3,893 stars
3. Web dev for beginners +3,094 stars
4. Build your own X +3,000 stars
5. Tauri +2,753 stars

Top growth(%) over last 30 days🔗

1. Svelte Society +67%
2. Bulletproof React +54%
3. Milkdown +53%
4. html-to-image +49%
5. Mitosis +42%

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.

Comments

[Louis Lam]

Nice! Glad to see my project is on list.