text: Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
  1. Ultra
  Deno + React: No build, no bundle, all streaming
  exhibitionist-digital / ultra
  🦕 Deno + React: No build, no bundle, all streaming
  Ultra is a web framework that leans hard into your browser's native features. Embrace the future of ES Modules, Import Maps, and Web Streams. All while supporting some of the non-standards that many normal people love for some reason (JSX and TypeScript).
  It's driven by the following hot-takes:
  - ESM is non-negotiable in {currentYear}
  - SSR is non-negotiable in {currentYear}
  - Bundling is an anti-pattern in {currentYear}
  - Data can be requested anywhere, and is accessible on the server, always
  - Lazy routing with dynamic imports trumps FS routing
  - Less magic in tooling and frameworks is a good thing
  - Simplify your workflow and tech stack at all costs - life is too short
  - Streams are neat
  Warning: The following is built around the alpha version of React 18 Mileage may vary.
  Here are some neat demos:
  …
  👩🚀 👨🚀 React
  2. Gitleaks
  Gitleaks is a SAST tool for detecting hardcoded secrets like passwords, api keys, and tokens in git repos. Gitleaks is an easy-to-use, all-in-one solution for finding secrets, past or present, in your code.
  zricethezav / gitleaks
  Scan git repos (or files) for secrets using regex and entropy 🔑
  ○ │╲ │ ○ ○ ░ ░ gitleaks
  Gitleaks is a SAST tool for detecting hardcoded secrets like passwords, api keys, and tokens in git repos. Gitleaks is an easy-to-use, all-in-one solution for finding secrets, past or present, in your code.
  Introduction Video. In addition, Gitleaks can be implemented as a pre-commit hook directly in your repo.
  MacOS
  brew install gitleaks
  Docker
  # To just pull the image docker pull zricethezav/gitleaks:latest # To run…
  3. Replace jQuery
  Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.
  sachinchoolur / replace-jquery
  Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.
  Test coverage
  Automatically replace jQuery
  Automatically find jQuery methods from existing projects and generate vanilla js alternatives.
  demo.mp4
  Why
  I've been working on removing jQuery dependency from multiple projects including lightGallery lately. Most of the projects use only 15% to 20% or less than 30% of the jquery methods And in most of the cases, I didn't want to support all the edge cases or legacy browsers. The hardest part was finding the jQuery methods in the existing project and writing the alternative vanilla js methods without making much changes in the codebase. So I wrote this library which automatically finds jquery methods in any particular JavaScript file and generates readable, chainable vanilla js alternatives. This can also be useful if you want to generate your own utility methods similar to jQuery.
  Installation and Usage
  You can install replace-jQuery using npm:
  npm install -g replace-jquery
  - Find all…
  4. Lottie
  Render After Effects animations natively on Web, Android and iOS, and React Native.
  airbnb / lottie-web
  Render After Effects animations natively on Web, Android and iOS, and React Native. 
  Lottie for Web, Android, iOS, React Native, and Windows:
  View documentation, FAQ, help, examples, and more at airbnb.io/lottie
  Plugin installation
  Option 1 (Recommended):
  Download it from from aescripts + aeplugins: 
  Option 2:
  Or get it from the adobe store  CC 2014 and up.
  Other installation options:
  Option 3:
  - download the ZIP from the repo.
  - Extract content and get the .zxp file from '/build/extension'
  - Use the ZXP installer from aescripts.com.
  Option 4:
  Close After Effects
  Extract the zipped file on
  build/extension/bodymovin.zxpto the adobe CEP folder:
  WINDOWS:
  C:\Program Files…
  5. Lumen
  A constantly evolving and thoughtful architecture for creating new static blogs.
  alxshelepenok / gatsby-starter-lumen
  A constantly evolving and thoughtful architecture for creating static blogs.
  Lumen
  A constantly evolving and thoughtful architecture for creating new static blogs
  Table of contents
  - Features
  - Web Performance Tests
  - Quick Start
  - Deploy with Netlify
  - Folder Structure
  - Sponsors
  - Contributors
  - License
  Features
  - Lost Grid.
  - Modern font stack.
  - Beautiful typography inspired by matejlatin/Gutenberg.
  - Syntax highlighting in code blocks using PrismJS.
  - Mobile-First approach in development.
  - Archive organized by tags and categories.
  - Pagination support.
  - Netlify CMS support.
  - Google Analytics.
  - Disqus Comments.
  - Flow static type checking.
  Web Performance Tests
  - Lighthouse Report - WebPageTest
  - Visual Comparison - WebPageTest
  Quick Start
  Create a Gatsby site
  Use the Gatsby CLI to create a new site, specifying the Lumen starter.
  # Create a new Gatsby site using the Lumen starter gatsby new blog 
  Start Developing
  Navigate into your new site’s directory and start it up.
  cd blog gatsby develop
  Open the source code and start editing!
  Your site is now running at
  
  Note…
  6. Tonic
  A Low Profile Component Framework. Stable, Minimal, Auditable, and Build-Tool-Free.
  optoolco / tonic
  A Low Profile Component Framework. Stable, Minimal, Auditable, and Build-Tool-Free.
  7. Reakit
  Toolkit for building accessible rich web apps with React
  Reakit
  Toolkit for building accessible rich web apps with React
  Explore website »
  Sponsors
  By donating $100 or more you become a sponsor and help in the development of this project. Thank you to all our sponsors!
  Backers
  By donating $5 or more you become a backer and help in the development of this project. Thank you to all our backers!
  Installation
  npm:
  npm i reakit
  Yarn:
  yarn add reakit
  Thanks to @nosebit for the package name on npm.
  Usage
  import React from "react"; import ReactDOM from "react-dom"; import { useDialogState, Dialog, DialogDisclosure } from "reakit"; function App() { const dialog = useDialogState(); return ( <div> <DialogDisclosure {...dialog}>Open dialog</DialogDisclosure> <Dialog {...dialog} Welcome to Reakit! </Dialog…
  8. Worktop
  The next generation web framework for Cloudflare Workers
  Features
  - Super lightweight
  - First-class TypeScript support
  - Custom Middleware Support
  - Well-organized submodules for à la carte functionality*
  - Includes Router with support for pattern definitions
  - Familiar Request-Response handler API
  - Supports
  async/
  awaithandlers
  - Fully treeshakable
  *More to come!
  Install
  $ npm install --save worktop
  Usage
  /examplesfor a list of working demos!
  import { Router } from 'worktop'; import * as Cache from 'worktop/cache'; import { uid as toUID } from 'worktop/utils'; import { read, write } from 'worktop/kv'; import type { KV } from 'worktop/kv'; declare var DATA: KV.Namespace; interface Message { id: string; text: string; // ... } // Initialize const API = new Router(); API.add('GET', '/messages/:id', async (req, res) =>…
  9. Generative Art Node
  Create generative art by using the canvas api and node js
  HashLips / generative-art-node
  Create generative art by using the canvas api and node js
  generative-art-node
  Create generative art by using the canvas api and node js
  Installation
  git clone  yarn add all
  Usage
  Create your different layers as folders in the 'layers' directory, and add all the layer assets in these directories. Optionally, append '_r' and '_sr' to the layer file names to make those layer files rare or super rare respectively.
  Example: If you had an ball layer you would create a ball directory, and then a file might be called:
  red_eye_ball_sr.png
  red_eye_ball_r.png
  red_eye_ball.png
  Rarity is customizable in
  src/config.js.
  Once you have all your layers, go into
  src/config.js and update the
  layersOrder array to be your layer folders name in order of the back layer to the front layer.
  Example: If you were creating a portrait design, you might have a background, then a head, a mouth, eyes, eyewear, and then headwear, so your
  layersOrder would look something like this:
  ……
  const
  10. Solana JavaScript API
  The Solana Javascript API built on the Solana JSON RPC API
  solana-labs / solana-web3.js
  Solana JavaScript SDK
  Solana JavaScript API
  This is the Solana Javascript API built on the Solana JSON RPC API
  Installation
  Yarn
  $ yarn add @solana/web3.js
  npm
  $ npm install --save @solana/web3.js
  Browser bundle
  <!-- Development (un-minified) --> <script src=" <!-- Production (un-minified) --> <script src="
  Development Environment Setup
  Install the latest Solana release from 
  Run test validator
  Use
  solana-test-validator from the latest Solana release
  BPF program development
  Use
  cargo build-bpf from the latest Solana release
  Usage
  Javascript
  const solanaWeb3 = require('@solana/web3.js'); console.log(solanaWeb3);
  ES6
  import * as solanaWeb3 from '@solana/web3.js'; console.log(solanaWeb3);
  Browser bundle
  // `solanaWeb3` is provided in the global namespace by the `solanaWeb3.min.js` script bundle. console.log(solanaWeb3);
  Examples
  Example scripts for…
  Stargazing 📈
  Top risers over last 7 days🔗
  - 30 seconds of code +1,553 stars
  - The Algorithms - JavaScript +1,237 stars
  - Public APIs +1,149 stars
  - Free Programming Books +796 stars
  - ML for beginners +616 stars
  Top growth(%) over last 7 days🔗
  - React render tracker +55%
  - HyperFormula +16%
  - Uptime Kuma +13%
  - NextJS Boilerplate +11%
  - The Algorithms - JavaScript +10%
  Top risers over last 30 days🔗
  - Public APIs +9,716 stars
  - Free Programming Books +4,491 stars
  - Build your own X +2,999 stars
  - Tauri +2,800 stars
  - Web dev for beginners +2,755 stars
  Top growth(%) over last 30 days🔗
  - Milkdown +59%
  - Growth Book +54%
  - xicons +48%
  - Bulletproof React +48%
  - Rooks +47% (0)