DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 antfu / 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 this tool.

Try it!

πŸ€Ήβ€β™‚οΈ Online Playground

Features

Inspired by Windi CSS, Tailwind CSS, Twind but:

  • Fully customizable - no core utilities, all functionalities are provided via presets.
  • No parsing, no AST, no scanning, it's INSTANT (200x faster than Windi CSS or Tailwind JIT)
  • <3kb min+gzip - zero deps and browser friendly.
  • Shortcuts - aliasing utilities, dynamically.
  • Attributify Mode - group utilities in attributes
  • Pure CSS Icons - use any icon as a single class.
  • CSS Scoping
  • Code-splitting for CSS - ships minimal CSS for MPA.
  • Library friendly - ships atomic styles with your component libraries and safely scoped.
Benchmark
11/5/2021, 4:26:57 AM
1656 utilities | x50 runs (min build time)
none                              8.30 ms / delta.      0.00 ms
unocss       v0.4.15             13.58 ms / delta.      5.28
…

2. Notifire

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

GitHub logo notifirehq / notifire

πŸš€ Open-source notification infrastructure for products

Read here our plans for the upcoming weeks.

Notification management simplified.

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


Explore the docs Β»

Report Bug Β· Request Feature Β· Read our blog

⭐️ Why

Building a notification system is hard, at first it seems like just sending an email but in reality it's just the beginning. In today's world users expect multi channel communication experience over email, sms, push, direct and more... An ever growing list of providers are popping up each day, and notifications are spread around the code. Notifire's goal is to simplify notifications and provide developers the tools to create meaningful communication between the system and it's users.

✨ Features

  • 🌈 Single API for all messaging providers (Email, SMS, Push, Direct)
  • πŸ’… Easily manage notification over multiple channels
  • πŸš€ Equipped with a templating engine for advanced layouts and designs
  • πŸ›‘ Built-in protection for missing…

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

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 want more control over your website via React, we recommend using this amazing Next.js template, 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 like PDFs and collection views can be loaded lazily via next/dynamic.
  • πŸ’― Tests - Comes with a comprehensive test suite covering most of Notion's functionality.
  • πŸ”₯ Solid - Used in production by Potion and thousands of websites.

Usage

First you'll…


4. Oh My Posh

A prompt theme engine for any shell.

GitHub logo JanDeDobbeleer / oh-my-posh

A prompt theme engine for any shell.

A prompt theme engine for any shell

Release Status

Release Documentation

PS Gallery GitHub Downloads

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 ❀

Patreon Liberapay Ko-Fi

Features

  • Shell independent
  • Git status indications
  • Failed command indication
  • Admin indication
  • Current session indications
  • Language info
  • Shell info
  • Configurable

Documentation

Documentation

Roadmap

  • CI
  • Github Releases
  • Create documentation for manual installation
  • Create documentation on the different segments
  • Create easy installation packages
    • Powershell
    • Brew
    • Scoop
    • Winget
  • Swap V2 with V3

Thanks

  • Chris Benti for providing the first influence to start oh-my-posh
  • Keith Dahlby for creating posh-git and making life more enjoyable
  • Robby Russel 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 README…

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

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 Next.js app.

  • βœ… Perfect dark mode in 2 lines of code
  • βœ… System setting with prefers-color-scheme
  • βœ… Themed browser UI with color-scheme
  • βœ… 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

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:

import { ThemeProvider } from 'next-themes'
function MyApp({ Component, pageProps }
…
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.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.