DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at stargazing.dev

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

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

1. UnoCSS

The instant on-demand atomic CSS engine.

GitHub logo unocss / unocss

The instant on-demand atomic CSS engine.


UnoCSS

The instant on-demand Atomic CSS engine

NPM version

💡 I highly recommend reading this blog post -
Reimagine Atomic CSS
for the story behind


📚 Documentation | 🧑‍💻 Interactive Docs | 🤹‍♂️ Playground | 🎓 Tutorial

Features

Inspired by Windi CSS, Tailwind CSS, and Twind, but:


2. Notifire

The ultimate library for managing multi-channel notifications with a single API.

GitHub logo novuhq / novu

Open-Source Notification Platform. Embeddable Notification Center, E-mail, Push and Slack Integrations.


NPM npm downloads MIT

The open source notifications framework that makes it easy for developers to empower product teams

Novu is the easy button for developer teams that need to quickly integrate notifications into their application, and enable product teams to own notifications content and messaging


Explore the docs »
or
Create a free account »

Report a bug · Request a feature · Join our Discord · Roadmap · X · Contact us

⭐️ Why Novu?

Novu provides a unified API that makes it simple to send notifications through multiple channels, including Inbox/In-App, Push, Email, SMS, and Chat. With Novu, you can create custom workflows and define conditions for each channel, ensuring that your notifications are delivered in the most effective way possible.

✨ Features

  • 🌈 Single API for all messaging providers (Inbox/In-App, Email, SMS, Push, Chat)
  • 💅 Fully managed GitOps flow, deployed from your CI
  • 🔥 Define workflow and step controls with…

3. React Notion X

Fast and accurate React renderer for Notion. TypeScript batteries included.

GitHub logo NotionX / react-notion-x

Fast and accurate React renderer for Notion. TS batteries included. ⚡️

React Notion X

React Notion X

Fast and accurate React renderer for Notion. TS batteries included. ⚡️

NPM Build Status Prettier Code Formatting NPM

Contents

Advice

If you just want to publish a website using Notion, then we highly recommend using Super.so — a hosted solution with great perf that takes care of all the details for you.

If you want more control over your website via React, then we recommend checking out the accompanying Next.js starter kit, which is free and uses react-notion-x under the hood.

And if you want even more control, then you're in the right place! 👇👇

Features

  • 🚀 Simple - TypeScript + React
  • Fast - 10-100x faster than Notion
    • 95-100% Lighthouse scores
    • Heavier components can be loaded lazily via next/dynamic
  • 💯 Tests - Comes with a comprehensive test suite covering most of Notion's functionality
  • 🔥…





4. Oh My Posh

A prompt theme engine for any shell.

GitHub logo JanDeDobbeleer / oh-my-posh

The most customisable and low-latency cross platform/shell prompt renderer

Oh My Posh logo – Prompt theme engine for any shell

MIT license badge

Build Status badge

Release version number badge

Documentation link badge ohmyposh.dev

Number of GitHub Downloads badge

This repo was made with love using GitKraken.

GitKraken shield

Join the community

Mastodon badge

Discord badge

What started as the offspring of oh-my-posh2 for PowerShell resulted in a cross platform, highly customizable and extensible prompt theme engine. After 4 years of working on oh-my-posh, a modern and more efficient tool was needed to suit my personal needs.

❤️ Support ❤️

Swag - Show your love with a t-shirt!

GitHub - One time support, or a recurring donation?

Ko-Fi - No coffee, no code.

Features

  • Shell and platform agnostic
  • Easily configurable
  • The most configurable prompt utility
  • Fast
  • Secondary prompt
  • Right prompt
  • Transient prompt

Documentation

Documentation

Reviews

Thanks

  • Chris Benti providing the first influence to start oh-my-posh
  • Keith Dahlby for creating posh-git and making life more enjoyable
  • Robby Russell for creating oh-my-zsh, without him this would probably not be here
  • Janne Mareike Koschinski for providing information on how to get certain information using Go (and the amazing…

5. Under the hood: React

Entire React code base explanation by visual block schemes. Each scheme is clickable and can be opened in a new tab, use that to zoom it and be able to read from it

GitHub logo Bogdan-Lyashenko / Under-the-hood-ReactJS

Entire React code base explanation by visual block schemes (Stack version)

Under the hood: React

This repository contains an explanation of inner work of React. In fact, I was debugging through the entire code base and put all the logic on visual block-schemes, analyzed them, summarized and explained main concepts and approaches. I've already finished with Stack version and now I work with the next, Fiber version.

I wanted to automate process of "learning and documenting" a complex codebase as much as possible, so I started Codecrumbs project. It will help to build projects like "Under the hood ReactJs" in a shorter time and in a simpler way!

Each scheme is clickable and can be opened in a new tab, use that to zoom it and be able to read from it. Keep the article and a scheme you are reading about at that moment in separate windows (tabs), that will help to match text and code flow easier.

We…


6. Awesome Actions

A curated list of awesome actions to use on GitHub

GitHub logo sdras / awesome-actions

A curated list of awesome actions to use on GitHub



Awesome Actions Awesome GitHub Actions status | sdras/awesome-actions

A curated list of awesome things related to GitHub Actions.

Actions are triggered by GitHub platform events directly in a repo and run on-demand workflows either on Linux, Windows or macOS virtual machines or inside a container in response. With GitHub Actions you can automate your workflow from idea to production.

Contents

Official Resources

Workflow Examples

Official Actions

Workflow Tool Actions

Tool actions for your workflow.


7. Data Science for Beginners - A Curriculum

Azure Cloud Advocates at Microsoft are pleased to offer a 10-week, 20-lesson curriculum all about Data Science. Each lesson includes pre-lesson and post-lesson quizzes, written instructions to complete the lesson, a solution, and an assignment

GitHub logo microsoft / Data-Science-For-Beginners

10 Weeks, 20 Lessons, Data Science for All!

Data Science for Beginners - A Curriculum

Open in GitHub Codespaces

GitHub license GitHub contributors GitHub issues GitHub pull-requests PRs Welcome

GitHub watchers GitHub forks GitHub stars

Azure Cloud Advocates at Microsoft are pleased to offer a 10-week, 20-lesson curriculum all about Data Science. Each lesson includes pre-lesson and post-lesson quizzes, written instructions to complete the lesson, a solution, and an assignment. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.

Hearty thanks to our authors: Jasmine Greenaway, Dmitry Soshnikov, Nitya Narasimhan, Jalen McGee, Jen Looper, Maud Levy, Tiffany Souterre, Christopher Harrison.

🙏 Special thanks 🙏 to our Microsoft Student Ambassador authors, reviewers and content contributors, notably Aaryan Arora, Aditya Garg, Alondra Sanchez, Ankita Singh, Anupam Mishra, Arpita Das, ChhailBihari Dubey, Dibri Nsofor, Dishita Bhasin, Majd Safi, Max Blum, Miguel Correa, Mohamma Iftekher (Iftu) Ebne Jalal, Nawrin Tabassum, Raymond Wangsa Putra


8. Perflink

Low friction JavaScript benchmarks that you can share via URL

GitHub logo lukejacksonn / perflink

Low friction JavaScript benchmarks that you can share via URL

Perflink

JavaScript performance benchmarks you can share via URL

The motivation here was to create a single page app like jsperf – which is commonly used to compare performance characteristics of different Javascript code snippets – but with improved usability and portability of results. It is a frontend only static web app with no build step and is hosted on Github pages.

perflink

Features

  • 🧪 Benchmarks run in isolated web workers
  • 🌍 Supports imports with worker type module
  • 🗂 Saves test suites to local storage
  • 🎨 Syntax highlighted textarea inputs
  • 🔗 Serializable state encoded into shareable URLs
  • ⏱ Adaptive timing for more accurate results
  • 🗜 Super light weight – almost no dependencies

Usage

To use the web interface simply visit https://perf.link and write out some test cases. When you are ready hit "Run Test". The code will be evaluated and benchmarked – against all other test cases – the results of…





9. next-themes

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

GitHub logo pacocoursey / next-themes

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

next-themes next-themes minzip package size Version

An abstraction for themes in your React app.

  • ✅ Perfect dark mode in 2 lines of code
  • ✅ System setting with prefers-color-scheme
  • ✅ Themed browser UI with color-scheme
  • ✅ Support for Next.js 13 appDir
  • ✅ No flash on load (both SSR and SSG)
  • ✅ Sync theme across tabs and windows
  • ✅ Disable flashing when changing themes
  • ✅ Force pages to specific themes
  • ✅ Class or data attribute selector
  • useTheme hook

Check out the Live Example to try it for yourself.

Install

$ npm install next-themes
# or
$ yarn add next-themes
Enter fullscreen mode Exit fullscreen mode

Use

With pages/

You'll need a Custom App to use next-themes. The simplest _app looks like this:

// pages/_app.js

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp
Enter fullscreen mode Exit fullscreen mode

Adding dark mode support takes 2 lines of code:

// pages/_app.js
import { ThemeProvider }
Enter fullscreen mode Exit fullscreen mode

10. Omatsuri

Omatsuri is a progressive web application with 12 open source frontend focused tools.

GitHub logo rtivital / omatsuri

PWA with 12 open source frontend focused tools

Omatsuri app

Logo

Omatsuri is a progressive web application with 12 open source frontend focused tools. Omatsuri translates to «festival» from Japanese (お祭り) and here we have a small festival of applications. It was built with strong respect to your privacy – you will never see ads and it does not include analytics services (or actually any services at all). You are highly encouraged to explore source code and use it in your projects.

Quick links

Key features

  • Fast non-blocking computations with web workers
  • No tracking, no ads, no other server connections – everything runs in browser only
  • Full offline support
  • Dark theme support
  • All-in-one application for everyday tasks

Included Applications

  • CSS Triangle Generator
  • Color Shades Generator
  • Gradient Generator
  • Page Dividers Generator
  • SVG compressor
  • SVG to JSX converter
  • Base64 encoder
  • Realistic Fake Data Generator
  • HTML/CSS Symbols Collection
  • Lorem/Samuel/Poke Ipsum Generator
  • CSS Cursor Properties
  • JavaScript Events Keycodes

Local development

To…


Stargazing 📈

Top risers over last 7 days🔗

  1. Machine Learning for beginner +1,131 stars
  2. Public APIs +773 stars
  3. Awesome +579 stars
  4. ct.css +537 stars
  5. Next.js +504 stars

Top growth(%) over last 7 days🔗

  1. Fragstore +152%
  2. ct.css +74%
  3. use-mui +42%
  4. React Peformance Testing +24%
  5. Vizzu +22%

Top risers over last 30 days🔗

  1. Uptime Kuma +4,925 stars
  2. JavaScript Algorithms +4,206 stars
  3. Public APIs +4,070 stars
  4. Awesome +2,994 stars
  5. Free Programming Books +2,596 stars

Top growth(%) over last 30 days🔗

  1. LittleJS +160%
  2. ct +157%
  3. EBS Design +152%
  4. Uptime Kuma +121%
  5. Agrippa +113%

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)

Collapse
 
isaif profile image
isaif

I love reading this posts.