๐Ÿš€10 Trending projects on GitHub for web developers – 24th December 2021


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



1. GitHub Wrapped

Take a look back at all the contributions you as an individual made to the open-source community

GitHub logo

ishandeveloper
/
github-wrapped

Take a look back at all the contributions you as an individual made to the open-source community



Generate your report

Why do I exist?

2020 has been a challenging year for all of us.

As the year is ending, we thought to take a look back at all the contributions you as an individual
made to the open-source community, during these unprecedented times.

Also, since Spotify, Snapchat and other mass platforms have their own way of year wrap up, why not us?

githubwrapped.tech

Reports

This web app deployed at githubwrapped.tech will help you to generate yearly reports that contains your stats from the beginning of this year.

Including number of commits, stars etc.

Sample GitHub Wrapped Report

You can also save your report as an image using the ‘Save Report’ button and share it with the community or keep it as a memorandum ๐Ÿ™‚

Project Structure

This project uses React.Js and the contents are bundled using webpack.

The contents in this project follow the following structure.

โ”œโ”€โ”€โ”€api
โ”œโ”€โ”€โ”€public
โ”‚   โ””โ”€โ”€โ”€assets
โ””โ”€โ”€โ”€src

โ€ฆ



2. Vitest

A blazing fast unit test framework powered by Vite.

GitHub logo

vitest-dev
/
vitest

A Vite-native test framework. It’s fast!

Vitest

A blazing fast unit test framework powered by Vite

Get involved!

โš ๏ธ DISCLAIMER: Vitest is still in development and not stable yet. It’s not recommended to use it in production.

Vitest requires Vite v2.7 and Node v14

Follow the Getting Started Guide or learn why we are building a new test runner.

Documentation

Read the documentation.

Features



3. Rakkas

Rakkas is a web framework powered by React and Vite that aims to have a developer experience similar to Next.js. Many of its features are also inspired by Svelte Kit.

GitHub logo

rakkasjs
/
rakkasjs

Lightning fast Next.js alternative powered by Vite

Rakkas

Lightning fast Next.js alternative powered by Vite

Build Status
npm type definitions
MIT license
React
Vite
Tweet about Rakkas

Read the guide | Try it in the browser

What is Rakkas?

Rakkas is a web framework powered by React and Vite that aims to have a developer experience similar to Next.js. Many of its features are also inspired by Svelte Kit. Important features are:

  • โšกย  Lightning fast development
  • ๐Ÿ–ฅ๏ธย  Hassle free server-side rendering
  • ๐Ÿš€ย  Support for deploying on serverless environments
  • ๐Ÿ“„ย  Static site generation
  • ๐Ÿ‡บ๐Ÿ‡ณย  Localizable URLs
  • ๐Ÿ”€ย  Rendering modes (pre-rendering, server-side, client-side)
  • โ˜ธ๏ธย  SPA-style client-side navigation
  • ๐Ÿ“ย  Intuitive file system-based routing
  • โฌ‡๏ธย  Simple but effective data fetching system
  • โš™๏ธย  API routes to build and organize your backend

See the feature comparison with Next.js for other supported and planned features.

Is Rakkas right for you?

  • Although many features have been implemented, Rakkas is still in development. There will be breaking changes until we hit 1.0. As such, it’s not yetโ€ฆ



4. fuite

A tool for finding memory leaks in web apps

GitHub logo

nolanlawson
/
fuite

A tool for finding memory leaks in web apps

fuite

fuite /fษฅit/ French for “leak”

fuite is a CLI tool for finding memory leaks in web apps.

Introductory blog post

Tutorial video

Usage

npx fuite https://example.com

This will check for leaks and print output to stdout.

By default, fuite will assume that the site is a client-rendered webapp, and it will search for internal links on the given page. Then for each link, it will:

  1. Click the link
  2. Press the browser back button
  3. Repeat to see if the scenario is leaking

For other scenarios, see scenarios.

How it works

fuite launches Chrome using Puppeteer, loads a web page, and runs a scenario against it. It runs the scenario some number of iterations (7 by default) and looks for objects that leaked 7 times (or 14 times, or 28 times). This might sound like a strange approach, but it’s useful for cutting through the noise in memory analysis.

fuiteโ€ฆ



5. Theatre.js

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

GitHub logo

AriaMinaei
/
theatre

Motion design editor for the web

Theatre.js

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

Theatre can be used both programmatically and visually.

You can use Theatre.js to:

  • Animate 3D objects made with THREE.js or other 3D libraries

    s

    Art by drei.lu

  • Animate HTML/SVG via React or other libraries

    s

  • Design micro-interactions

    s

  • Choreograph generative interactive art

    s

  • Or animate any other JS variable

    s

Documentation and Tutorials

The docs are at docs.theatrejs.com:

Community and support

Join our friendly community on Discord, follow the updates on twitter or write us an email.

Development and contributing

If you want to change the source of Theatre, have a lookโ€ฆ



6. Molecule

Molecule is a lightweight Web IDE UI framework which is built with React.js and inspired by the VSCode.

GitHub logo

DTStack
/
molecule

๐Ÿš€ A lightweight Web IDE UI framework.

watchman-logo

Molecule

A lightweight Web IDE UI Framework

CI Codecov NPM downloads NPM version

ไธญๆ–‡ | English

The Molecule is a lightweight Web IDE UI framework which is built with React.js and inspired by the VSCode. We have designed the Extension APIs similar to the VSCode, to help developers extend the Workbench in an easier way. It’s convenient to integrate the Molecule with React.js applications. It has been applied to many products in DTStack

Online Preview

Features

  • Built-in the VSCode Workbench UI
  • Compatible with the VSCode ColorTheme
  • Customize the Workbench via React Component easily
  • Built-in Monaco-Editor Command Palette, Keybinding features
  • Support the i18n, built-in zhCN, and English
  • Built-in Settings, support to edit and extend via the Extension
  • Built-in basic Explorer, Search components, and support extending via the Extension
  • Typescript Ready

Installation

npm install @dtinsight/molecule
# Or
yarn add @dtinsight/molecule

Basic Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { MoleculeProvider,

โ€ฆ



7. RFS

RFS is a unit resizing engine which was initially developed to resize font sizes. RFS is capable of rescaling basically every value for any css property with units, like margin, padding, border-radius or even box-shadow.

GitHub logo

twbs
/
rfs

โœฉ Automates responsive resizing โœฉ

RFS logo

RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling basically every value for any css property with units, like margin, padding, border-radius or even box-shadow.

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It’s available in one of your favourite preprocessors or postprocessor: Sass, Less, Stylus or PostCSS.

RFS

npm
licence
build

Demos

Advantages

  • No need to rescale paddings or margins anymore.
  • Text won’t be chopped off in smaller viewports when RFS is applied to font sizes.
  • RFS will prevent the font size from rescalingโ€ฆ



8. Clipanion

Type-safe CLI library / framework with no runtime dependencies

GitHub logo

arcanis
/
clipanion

Type-safe CLI library / framework with no runtime dependencies

Clipanion

Type-safe CLI library with no runtime dependencies

npm version Licence Yarn

Installation

yarn add clipanion

Why

  • Clipanion supports advanced typing mechanisms
  • Clipanion supports nested commands (yarn workspaces list)
  • Clipanion supports transparent option proxying without -- (for example yarn dlx eslint --fix)
  • Clipanion supports all option types you could think of (including negations, batches, …)
  • Clipanion offers a Typanion integration for increased validation capabilities
  • Clipanion generates an optimized state machine out of your commands
  • Clipanion generates good-looking help pages out of the box
  • Clipanion offers common optional command entries out-of-the-box (e.g. version command, help command)

Clipanion is used in Yarn with great success.

Documentation

Check the website for our documentation: mael.dev/clipanion.

Migration

You can use clipanion-v3-codemod to migrate a Clipanion v2 codebase to v3.

Overview

Commands are declared by extending from the Command abstract base class, and more specifically by implementing its execute method which will then be called byโ€ฆ



9. liqvid

A library for making interactive videos in React. For example an interactive coding demo inside a video.

GitHub logo

liqvidjs
/
player

Library for interactive videos in React

liqvid

This is a library for making interactive videos in React.

For example, here’s an interactive coding demo inside a video:

Here’s an interactive graph:

To get started, clone https://github.com/ysulyma/rp-tutorial

For documentation, visit https://liqvidjs.org/

For inspiration, see https://epiplexis.xyz/



10. ajquery.js

The fastest, most lightweight, least dependency jQuery alternative.

GitHub logo

coolaj86
/
ajquery.js

The fastest, most lightweight, least dependency jQuery alternative.

ajquery.js

The fastest, most lightweight, fewest dependency jQuery alternative.

Development Build: 145B (with comments)
Production Build: 103B (min + gz)

Install

<script src="https://unpkg.com/ajquery"></script>

Example Usage

Provides modern, advanced CSS4-compatible query selection:

console.log("innerText:", $("p:nth-child(2").innerText);

API

$(selector, [rootElement])

Selects the first matching HTML element only (or null):

const body = $("body");
const div1 = $("div", body);

$$(selector, [rootElement])

Selects all matching elements (or an empty NodeList):

const head = $("head");
const stylesheets = $$('link[rel="stylesheet"]', head).map(console.log);

Benchmarks

ajquery-benchmarks

Compatibility

Written entirely in modern ECMAScript 3, and directly transpilable into ES5, ES6
and beyond (up to ES11) via Webpack, Babel, Rollup, React Native, and AWS
InfiniDash.

Works inโ€ฆ



Stargazing ๐Ÿ“ˆ



Top risers over last 7 days๐Ÿ”—

  1. Tabby +1,119 stars
  2. Free Programming Books +976 stars
  3. Pico +915 stars
  4. Awesome +618 stars
  5. Developer Roadmap +567 stars



Top growth(%) over last 7 days๐Ÿ”—

  1. Rakkas +74%
  2. TinySpy +63%
  3. Pico +45%
  4. TuiCss +26%
  5. envsafe +20%



Top risers over last 30 days๐Ÿ”—

  1. Tabby +5,737 stars
  2. Free Programming Books +5,312 stars
  3. Remix +5,199 stars
  4. Awesome +4,608 stars
  5. Developer Roadmap +4,602 stars



Top growth(%) over last 30 days๐Ÿ”—

  1. Pico +374%
  2. Remix +125%
  3. Rakkas +100%
  4. Agrippa +86%
  5. Nice Modal React +85%

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.

Source: DEV Community

December 24, 2021
Category : News
Tags: javascript | React | vite | webdev

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.