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
ishandeveloper / github-wrapped
Take a look back at all the contributions you as an individual made to the open-source community
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.
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.
vitest-dev / vitest
Next generation testing framework powered by Vite.
Vitest
Next generation testing framework powered by Vite
Documentation | Getting Started | Examples | Why Vitest?
Features
- Vite's config, transformers, resolvers, and plugins. Use the same setup from your app!
- Jest Snapshot
- Chai built-in for assertions, with Jest expect compatible APIs
- Smart & instant watch mode, like HMR for tests!
-
Native code coverage via
v8
oristanbul
. - Tinyspy built-in for mocking, stubbing, and spies.
- JSDOM and happy-dom for DOM and browser API mocking
- Browser Mode for running component tests in the browser
- Components testing (Vue, React, Svelte, Lit, Marko)
- Workers multi-threading via Tinypool (a lightweight fork of Piscina)
- Benchmarking support with Tinybench
- Workspace support
- expect-type for type-level testing
- ESM first, top level await
- Out-of-box TypeScript / JSX support
- Filtering, timeouts, concurrent for suite and tests
- Sharding support
- Run your tests in the browser natively (experimental)
Vitest…
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.
Bleeding-edge React framework powered by Vite
Rakkas is a bleeding-edge full-stack React framework powered by Vite. You can consider it an up-and-coming alternative to Next.js, Remix, or Gatsby.
Important features are:
- ⚡ Lightning fast development server
- 🖥️ Streaming SSR with Suspense
- 🔀 Dynamic rendering (full static pages for bots, streaming for browsers)
- ⬇️ API-less data fetching system
- 🚀 Support for serverless and worker environments
- 📄 Static site generation
- 📁 Flexible file system router
- ⚙️ API routes with middleware support
Is Rakkas right for you?
- Although many features have been implemented, Rakkas is still under heavy development. It uses experimental and/or beta features of React and Vite. Minor releases will introduce breaking changes until we hit 1.0. As such, it's not yet ready for production use. If you need…
4. fuite
A tool for finding memory leaks in web apps
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.
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:
- Click the link
- Press the browser back button
- 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.
theatre-js / theatre
Motion design editor for the web
Motion Design, for the web
✨ Update: Theatre.js 1.0 is around the corner. We have temporarily moved development to a private repo so we can iterate faster. We'll push our work back to this public repo soon. Terms and license will remain OSS, as before. (Also, we're hiring – join the core team!).
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.js can be used both programmatically and visually.
You can use Theatre.js to:
-
Animate 3D objects made with THREE.js or other 3D libraries
Art by drei.lu
-
Animate HTML/SVG via React or other libraries
-
Design micro-interactions
-
Choreograph generative interactive art
-
Or animate any other JS variable
Documentation and Tutorials
The docs are at theatrejs.com/docs:
-
Video tutorials
- Crash course
- Animating with music
- Yuri Artiukh's stream with a section on…
6. Molecule
Molecule is a lightweight Web IDE UI framework which is built with React.js and inspired by the VSCode.
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
Features
- Built-in the Visual Studio Code Workbench UI
- Compatible with the Visual Studio Code ColorTheme
- Customize the Workbench via React Component easily
- Built-in Monaco-Editor Command Palette, Keybinding features
- Support the i18n, built-in Simplified Chinese, Korean 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
…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.
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
Demos
- Card example (Sass)
- Card example (Sass, with custom properties)
- Card example (PostCSS)
- Card example (PostCSS, with custom properties)
- Simple font rescaling Codepen Demo
- RFS in Bootstrap demo
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
Type-safe CLI library with no runtime dependencies
Installation
yarn add clipanion
Why
- Clipanion supports advanced typing mechanisms
- Clipanion supports nested commands (
yarn workspaces list
) - Clipanion supports transparent option proxying without
--
(for exampleyarn 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.
Liqvid
Liqvid is a library for creating interactive videos in React.
Links
Repository structure
This is a monorepo. Here is what the various packages do:
Frontend Core
-
main
Provides the mainliqvid
package. -
host
Script for pages hosting Liqvid videos; currently just handles fake fullscreen -
keymap
Provides theKeymap
class -
playback
Provides thePlayback
class -
polyfills
Polyfills for Liqvid videos; currently just handles Web Animations -
utils
Provides the various helper functions inUtils
Backend Tools
-
cli
The Liqvid CLI tool -
magic
Provides wackyresource macro syntax -
renderer
Handles theaudio
,build
,render
, andthumbs
CLI commands -
serve
Development server; provides theserve
CLI command
Integrations
-
katex
Provides KaTeX integration -
react-three
Provides React Three Fiber integration
In-development
10. ajquery.js
The fastest, most lightweight, least dependency jQuery alternative.
coolaj86 / ajquery.js
The fastest, most lightweight, least dependency jQuery alternative.
The fastest, most lightweight, fewest dependency jQuery alternative.
New: Now typed, Ai-enhanced, and better than ever!
Development Build: 721B (types + comments)
Production Build: 117B (min + gz)
Example Usage
Provides modern, advanced CSS4-compatible query selection:
console.log("innerText:", $("p:nth-child(2").innerText);
Install
via GitHub
my_ver="v3.0.3"
mkdir ./vendor/
curl -fsSL "https://raw.githubusercontent.com/coolaj86/ajquery.js/${my_ver}/ajquery.js" \
-o ./vendor/ajquery.js
# Lighthouse-optimized
npx -p uglify-js@3 uglifyjs ./vendor/ajquery.js -o ./vendor/ajquery.min.js
<script src="/vendor/ajquery.js"></script>
via CDN
<script src="https://unpkg.com/ajquery@3.0.3/ajquery.min.js"></script>
Bundler-optimized:
<script src="https://unpkg.com/ajquery@3.0.3/ajquery.min.cjs"></script>
Tree-shaking-optimized:
<script src="https://unpkg.com/ajquery@3.0.3/ajquery.min.mjs"></script>
via NPM
npm install --save ajquery@3
CommonJS
let AJQuery = require("ajquery");
let $ = AJQuery.$;
let $$ = AJQuery
…Stargazing 📈
Top risers over last 7 days🔗
- Tabby +1,119 stars
- Free Programming Books +976 stars
- Pico +915 stars
- Awesome +618 stars
- Developer Roadmap +567 stars
Top growth(%) over last 7 days🔗
Top risers over last 30 days🔗
- Tabby +5,737 stars
- Free Programming Books +5,312 stars
- Remix +5,199 stars
- Awesome +4,608 stars
- Developer Roadmap +4,602 stars
Top growth(%) over last 30 days🔗
- Pico +374%
- Remix +125%
- Rakkas +100%
- Agrippa +86%
- 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.
Top comments (0)