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
It is a self-hosted monitoring tool like "Uptime Robot".
🥔 Live Demo
Try it!
It is a 5 minutes live demo, all data will be deleted after that. The server is located at Tokyo, if you live far away from here, it may affact your experience. I suggest that you should install to try it.
VPS is sponsored by Uptime Kuma sponsors on Open Collective! Thank you so much!
⭐ Features
- Monitoring uptime for HTTP(s) / TCP / Ping / DNS Record.
- Fancy, Reactive, Fast UI/UX.
- Notifications via Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP), and 70+ notification services, click here for the full list.
- 20 seconds interval.
🔧 How to Install
🐳 Docker
docker volume create uptime-kuma
docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:1
Browse to http://localhost:3001 after started.
💪🏻 Without Docker
Required Tools: Node.js >= 14, git and pm2.
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
STATUS: MVP / proof of concept
The project is at an early stage of development. Lots of things have yet to be added and polished. The initial plan can be found here. Feel free to create an issue if you found a bug or have an idea.
Features:
- Show component tree grouped by owner (rendered by) component or by parent (composed by) component. Default is by owner component, can be changed by a toggle in the top right corner.
- Self and total (including subtree components) cumulative time or all component renders
- Number of component's re-renders
- Show unmounted components (can be disabled by a toggle in the top right corner)
- Event log for a component or its subtree
- Overall stats on events and component instances
- More to come...
How to use
Option 1
…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. Probably the most feature rich nextjs markdown blogging template out there. 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.
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 brough up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!
Examples
- Demo Blog - this repo
- My personal blog - modified to auto-generate blog posts with dates
- Aloisdg's cookbook - with pictures and recipes!
- GautierArcin's demo with next translate - includes translation…
4. xstate
State machines and statecharts for the modern web.
JavaScript state machines and statecharts
JavaScript and TypeScript finite state machines and statecharts for the modern web.
Packages
-
🤖 xstate
- Core finite state machine and statecharts library + interpreter -
🔬 @xstate/fsm
- Minimal finite state machine library -
📉 @xstate/graph
- Graph traversal utilities for XState -
⚛️ @xstate/react
- React hooks and utilities for using XState in React applications -
💚 @xstate/vue
- Vue composition functions and utilities for using XState in Vue applications -
🎷 @xstate/svelte
- Svelte utilities for using XState in Svelte applications -
✅ @xstate/test
- Model-Based-Testing utilities (using XState) for testing any software -
🔍 @xstate/inspect
- Inspection utilities for XState
Templates
Get started by forking one of these templates on CodeSandbox:
- XState Template - no framework
- XState + TypeScript Template - no framework
- XState +…
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.09k brotli'd) library that mostly mirrors the IndexedDB API, but with small improvements that make a big difference to usability.
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 unpkg:
<script type="module">
import { openDB, deleteDB, wrap, unwrap } from 'https://unpkg.com/idb?module';
async function doDatabaseStuff() {
const db = await openDB(…);
}
</script>
Using external script reference
<script
…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.
Installation
npm install htmlparser2
A live demo of htmlparser2
is available here.
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.
const htmlparser2 = require("htmlparser2");
const parser = new htmlparser2.Parser({
onopentag(name, attributes) {
/*
* This fires when a new tag is opened.
*
* If you don't need an aggregated `attributes` object,
* have a look at the `onopentagname` and `onattribute` events.
*/
if (name ===
…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 is the most powerful React virtual list component, full stop. Here's why:
- Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;
- Support for reverse (bottom up) scrolling and prepending items (chat, feeds, etc);
- Grouped mode with sticky headers;
- Responsive grid layout;
- 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
React Virtuoso is proudly sponsored by Stream, the leading provider in enterprise grade Feed & Chat APIs. To learn more about Stream, click here.
If you are using Virtuoso for work, sponsor it. Any donation helps a lot with the project development and maintenance.
Get Started
npm
…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 ⚡
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
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…
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
toh1.warning
by providing an appropriate style mapping. …
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 a great tool for building frontend applications. It has a very diverse ecosystem with hundreds of great libraries for literally anything you might need. However, it can be overwhelming to be forced to make so many choices 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 developers can follow, it often leads to messy, inconsistent, or over-complicated codebases.
This is an attempt to present the way of creating React applications using the best tools in the ecosystem with a good project structure that scales very well. It is based on the experience of working with many different codebases, and this architecture turns out to be the most effective one.
The goal of…
Stargazing 📈
Top risers over last 7 days🔗
- Free Programming Books +2,173 stars
- Public APIs +1,299 stars
- Web dev for beginners +942 stars
- Discord.js +861 stars
- Build your own X +569 stars
Top growth(%) over last 7 days🔗
- Shaper +75%
- Ocean +39%
- Svelte Society +18%
- Stitches +11%
- LemonadeJS +11%
Top risers over last 30 days🔗
- Public APIs +8,983 stars
- Free Programming Books +3,893 stars
- Web dev for beginners +3,094 stars
- Build your own X +3,000 stars
- Tauri +2,753 stars
Top growth(%) over last 30 days🔗
- Svelte Society +67%
- Bulletproof React +54%
- Milkdown +53%
- html-to-image +49%
- 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.
Top comments (1)
Nice! Glad to see my project is on list.