DEV Community

Iain Freestone
Iain Freestone

Posted on

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

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

1. Open Props

CSS custom properties to help accelerate adaptive and consistent design. Useful in any framework

GitHub logo argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

Frame 2

Open Source CSS Variables

gradients animations sizes easings colors shadows aspect-ratios z-indexes

Tests


Need help?   👉   Discord


CDN

CLI

  • npm run gen:op - runs through src/ js files and creates the PostCSS files in src/
  • npm run gen:nowhere - creates a version of Open Props without the use of :where()
  • npm run gen:prefixed - creates a version of Open Props with each prop prefixed with op, like --op-font-size-1
  • npm run bundle - creates all the various minified bundles of props
  • npm run lib:js - builds the JS modules for NPM

View on GitHub


2. Polly.JS

Record, Replay, and Stub HTTP Interactions. A standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing of HTTP interactions.

GitHub logo Netflix / pollyjs

Record, Replay, and Stub HTTP Interactions.

Polly.JS

Record, Replay, and Stub HTTP Interactions

Build Status license

Polly.JS is a standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing of HTTP interactions. By tapping into multiple request APIs across both Node & the browser, Polly.JS is able to mock requests and responses with little to no configuration while giving you the ability to take full control of each request with a simple, powerful, and intuitive API.

Interested in contributing or just seeing Polly in action? Head over to CONTRIBUTING.md to learn how to spin up the project!

Why Polly?

Keeping fixtures and factories in parity with your APIs can be a time consuming process Polly alleviates this process by recording and maintaining actual server responses while also staying flexible.

  • Record your test suite's HTTP interactions and replay them during future test runs for fast, deterministic, accurate tests.
  • Use Polly's client-side server to modify or intercept requests and responses to simulate…
View on GitHub

3. Awesome Advent of Code

A collection of awesome resources related to the yearly Advent of Code challenge.

GitHub logo Bogdanp / awesome-advent-of-code

A collection of awesome resources related to the yearly Advent of Code challenge.

View on GitHub

4. PostHog

PostHog is an open-source product analytics suite, built for developers. Automate the collection of every event on your website or app, with no need to send data to third-parties.

GitHub logo PostHog / posthog

🦔 PostHog provides open-source product analytics that you can self-host.


PostHog is an open-source product analytics suite, built for developers. Automate the collection of every event on your website or app, with no need to send data to third-parties.

You can deploy on your own infrastructure, and PostHog plays nicely with data warehouses through plugins for import, transformation, and export.

Quick start

It's easy and free to get started.

Deploy PostHog Self-Hosted in your existing infrastructure.

... or use PostHog Cloud if you don't need to self-host.

Features

View on GitHub

5. markdown-it

Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

GitHub logo markdown-it / markdown-it

Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

markdown-it

CI NPM version Coverage Status Gitter

Markdown parser done right. Fast and easy to extend.

Live demo

  • Follows the CommonMark spec + adds syntax extensions & sugar (URL autolinking, typographer).
  • Configurable syntax! You can add new rules and even replace existing ones.
  • High speed.
  • Safe by default.
  • Community-written plugins and other packages on npm.

Table of content

Install

node.js:

npm install markdown-it --save
Enter fullscreen mode Exit fullscreen mode

browser (CDN):

Usage examples

See also:

Simple

// node.js, "classic" way:
var MarkdownIt = require('markdown-it'),
    md = new MarkdownIt();
var result = md.render('# markdown-it rulezz!');
// node.js, the same, but with sugar:
var
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

6. Two.js

A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.

GitHub logo jonobr1 / two.js

A renderer agnostic two-dimensional drawing api for the web.

Two.js

NPM Package Build Size NPM Downloads Language Grade

A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.

Home • Releases • Examples • Documentation • Change Log • Help

Usage

Download the latest minified library and include it in your html.

<script src="js/two.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

It can also be installed via npm, Node Package Manager:

npm install --save two.js
Enter fullscreen mode Exit fullscreen mode

Alternatively see how to build the library yourself.

Here is boilerplate html in order to draw a spinning rectangle in two.js:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="js/two.min.js"></script>
  </head>
  <body>
    <script>
      var two = new Two({
        fullscreen: true,
        autostart: true
      }
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

7. Awesome ZSH plugins

A collection of ZSH frameworks, plugins, themes and tutorials.

GitHub logo unixorn / awesome-zsh-plugins

A collection of ZSH frameworks, plugins, themes and tutorials.

awesome-zsh-plugins

Awesome

Status

License Awesomebot GitHub stars GitHub last commit (branch) Track Awesome List

A collection of ZSH frameworks, plugins, tutorials & themes inspired by the various awesome list collections out there.

Table of Contents

Please read the Contributing Guidelines before contributing.

Frameworks

These frameworks make customizing your ZSH setup easier.

You can find some interesting performance timing comparisons of various frameworks in the following locations.

…
View on GitHub

8. Flags

Add Feature Flags to your Next.js application with a single React Hook. This package integrates your Next.js application with HappyKit Flags.

GitHub logo happykit / flags

⛳️ Feature Flags for Next.js


 

Add Feature Flags to your Next.js application with a single React Hook. This package integrates your Next.js application with HappyKit Flags. Create a free happykit.dev account to get started.

Key Features

  • written for Next.js
  • integrate using a simple useFlags() hook
  • only 5 kB in size
  • extremely fast flag responses (~50ms)
  • supports user targeting, custom rules and rollouts
  • support server-side rendering and static site generation

Want to see a demo? HappyKit Flags Demo


Documentation

See the full documentation for setup instructions and usage guides.

Examples

This is roughly what the usage of feature flags looks like once you're up and running.

// pages/index.js
import { useFlags } from "@happykit/flags/client";

export default function IndexPage(props) {
  const { flags } = useFlags();
  return flags?.xzibit ? 'Yo dawg' : 'Hello';
}
Enter fullscreen mode Exit fullscreen mode

The self documenting examples at…

View on GitHub

9. Every Programmer Should Know

A collection of (mostly) technical things every software developer should know about

GitHub logo mtdvio / every-programmer-should-know

A collection of (mostly) technical things every software developer should know about

Join our community for professional Software Developers and get more control over your life and career!

Every Programmer Should Know 🤔

A collection of (mostly) technical things every software developer should know.

☝️ These are resources I can recommend to every programmer regardless of their skill level or tech stack

Highly opinionated 💣. Not backed by science Comes in no particular order ♻️

U like it? ⭐ it and share with a friendly developer U don't like it? Watch the doggo 🐶

P.S. You don't need to know all of that by heart to be a programmer But knowing the stuff will help you become better! 💪

P.P.S. Contributions are welcome!

Introduction

Falsehoods

  • Awesome Falsehoods 💊 Curated list of falsehoods programmers believe in Check for things you do not know about Strings, Addresses, Names,…
View on GitHub

10. The Art of Command Line

Master the command line, in one page

GitHub logo jlevy / the-art-of-command-line

Master the command line, in one page

🌍 Čeština ∙ Deutsch ∙ Ελληνικά ∙ English ∙ Español ∙ Français ∙ Indonesia ∙ Italiano ∙ 日本語 ∙ 한국어 ∙ polski ∙ Português ∙ Română ∙ Русский ∙ Slovenščina ∙ Українська ∙ 简体中文 ∙ 繁體中文

The Art of Command Line

Note: I'm planning to revise this and looking for a new co-author to help with expanding this into a more comprehensive guide. While it's very popular, it could be broader and a bit deeper. If you like to write and are close to being an expert on this material and willing to consider helping, please drop me a note at josh (0x40) holloway.com. –jlevy, Holloway. Thank you!

curl -s 'https://raw.githubusercontent.com/jlevy/the-art-of-command-line/master/README.md' | egrep -o '\w+' | tr -d '`' | cowsay -W50

Fluency on the command line is a skill often neglected or considered arcane, but it improves your flexibility…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

  1. Free Programming Books +1,673 stars
  2. Awesome +1,672 stars
  3. Every Programmer Should Know +1,644 stars
  4. Remix +1,586 stars
  5. Lazy Git +1,460 stars

Top growth(%) over last 7 days🔗

  1. Nice Modal React +42%
  2. Remix +27%
  3. Medusa +25%
  4. Helpful Decorators +17%
  5. Learn Web3 dapp +16%

Top risers over last 30 days🔗

  1. Awesome +3,911 stars
  2. Machine Learning for beginner +3,683 stars
  3. Free Programming Books +3,413 stars
  4. Medusa +3,202 stars
  5. Coding Interview University +2,996 stars

Top growth(%) over last 30 days🔗

  1. Fragstore +268%
  2. unocss +93%
  3. vsCode Frontmatter +61%
  4. Nice Modal React +27%
  5. NextJS Boilerplate +48%

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 (0)

Read next

anhpvbhsoft profile image

Why Dedicated Development Teams Rule IT Consulting

Van Anh Pham -

da730 profile image

How to deal with the issue of an uppermost area chart obscuring the lowermost scatter chart in a composite chart?

Darkside -

lucius3 profile image

Creative Agencies In London

lucius -

kairostech profile image

Advancements in API Testing: Modern Solutions for Today's Challenges

Kairos Technologies -