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.

Open Props Logo

Open Source CSS Variables

colors gradients shadows aspect ratios typography
easings animations sizes borders z-indexes media-queries

Tests npm version Discord


Need help? ย  ๐Ÿ‘‰ ย  Discord


CDN (browse)

Bookmarklet

javascript: (() => {
  const href = "https://unpkg.com/open-props";
  document.head.append(Object.assign(document.createElement("link"),{rel:"stylesheet",href}));
})();
Enter fullscreen mode Exit fullscreen mode

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:shadowdom - creates a version of Open Props with :host as the selector scope
  • npm run gen:prefixed - creates a version of Open Props with eachโ€ฆ
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, session recording, feature flagging and A/B testing that you can self-host.

posthoglogo

PRs Welcome Docker Pulls GitHub commit activity GitHub closed issues

Docs - Community - Roadmap - Changelog - Bug reports

PostHog Demonstration
See PostHog in action

PostHog is an all-in-one, open source platform for building better products

  • Specify events manually, or use autocapture to get started quickly
  • Analyze data with ready-made visualizations, or do it yourself with SQL
  • Track website visitors separately with our GA4 alternative
  • Only capture properties on the people you want to track, save money when you don't
  • Gather insights by capturing session replays, console logs, and network monitoring
  • Improve your product with Experiments that automatically analyze performance
  • Safely roll out features to select users or cohorts with feature flags
  • Send out fully customizable surveys to specific cohorts of users
  • Connect to external services and manage data flows with PostHog CDP

PostHog is available with hosting in the EU or US and is fully SOC 2 compliant. It's free to get started and comes with a generous monthly freeโ€ฆ


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
Enter fullscreen mode Exit fullscreen mode

browser (CDN):

Usage examples

See also:

Simple

// node.js
// can use `require('markdown-it')` for CJS
import markdownit from 'markdown-it'
const md = markdownit()
const result = md.render('# markdown-it rulezz!');
// browser with UMD build, added to "window" on script
โ€ฆ
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

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.

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

Documentation ย โ€ขย  Examples ย โ€ขย  Full Tutorial ย โ€ขย  happykit.dev ย โ€ขย  @happykitdev

ย 

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 or getFlags() function
  • supports App Router (Server Components & Client Components)
  • only 2 kB gzipped size
  • extremely fast flag responses (~50ms)
  • supports Server-Side Rendering and Static Site Generation
  • supports Middleware and Edge Functions
  • supports User Targeting, Custom Rules and Rollouts

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 "flags/client";
export default function IndexPage(props) {
  const flagBag = useFlags();

  return flagBag.
โ€ฆ
Enter fullscreen mode Exit fullscreen mode
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โ€ฆ
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

094459 profile image

Amazon Q Developer Tips: No.23 Debugging with Amazon Q

Ricardo Sueiras -

jeremycmorgan profile image

Review: The New NVIDIA Jetson Orin Nano

Jeremy Morgan -

jaloplo profile image

Think You Know Teams Chats? Discover the Workflows

Jaime Lรณpez -

rogiia profile image

AI in 2024: Year in Review and Predictions for 2025

Roger Oriol -