DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at stargazing.dev

🚀10 Trending projects on GitHub for web developers - 10th September 2021

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

GitHub logo exhibitionist-digital / ultra

🦕 Deno + React: No build, no bundle, all streaming


Ultra

Deno + React: No build, no bundle, all streaming

GitHub Workflow Status

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.

GitHub logo zricethezav / gitleaks

Scan git repos (or files) for secrets using regex and entropy 🔑

○
│╲
│ ○
○ ░
░    gitleaks

Github Test Follow @zricethezav

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

Features:

Installation

Gitleaks can be installed using Homebrew, Docker, or Go. Gitleaks is also available in binary form for many popular platforms and OS types on the releases page. In addition, Gitleaks can be implemented as a pre-commit hook directly in your repo.

MacOS
brew install gitleaks
Enter fullscreen mode Exit fullscreen mode
Docker
# To just pull the image
docker pull zricethezav/gitleaks:latest
# To run
Enter fullscreen mode Exit fullscreen mode

3. Replace jQuery

Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.

GitHub logo sachinchoolur / replace-jquery

Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.

Test coverage

Statements Functions Lines
Statements Functions Lines

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
Enter fullscreen mode Exit fullscreen mode
  • Find all…

4. Lottie

Render After Effects animations natively on Web, Android and iOS, and React Native.

GitHub logo airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Lottie for Web, Android, iOS, React Native, and Windows

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:

View documentation, FAQ, help, examples, and more at airbnb.io/lottie

Example1

Example2

Example3

Community

Example4

Plugin installation

Option 1 (Recommended):

Download it from from aescripts + aeplugins: http://aescripts.com/bodymovin/

Option 2:

Or get it from the adobe store https://creative.adobe.com/addons/products/12557 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.zxp to the adobe CEP folder:
    WINDOWS:
    C:\Program Files


5. Lumen

A constantly evolving and thoughtful architecture for creating new static blogs.

GitHub logo alxshelepenok / gatsby-starter-lumen

A constantly evolving and thoughtful architecture for creating static blogs.

Lumen
Lumen

A constantly evolving and thoughtful architecture for creating new static blogs

Table of contents

Features

Web Performance Tests

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 https://github.com/alxshelepenok/gatsby-starter-lumen
Enter fullscreen mode Exit fullscreen mode

Start Developing

Navigate into your new site’s directory and start it up.

cd blog
gatsby develop
Enter fullscreen mode Exit fullscreen mode

Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note…


6. Tonic

A Low Profile Component Framework. Stable, Minimal, Auditable, and Build-Tool-Free.

GitHub logo 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

GitHub logo reakit / reakit

Toolkit for building accessible rich web apps with React


Reakit symbol

Reakit

Toolkit for building accessible rich web apps with React
Explore website »


NPM version NPM downloads Build Status
Sponsors Backers Follow Reakit on Twitter

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

Yarn:

yarn add reakit
Enter fullscreen mode Exit fullscreen mode

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} aria-label="Welcome">
        Welcome to Reakit!
      </Dialog
Enter fullscreen mode Exit fullscreen mode

8. Worktop

The next generation web framework for Cloudflare Workers

GitHub logo lukeed / worktop

The next generation web framework for Cloudflare Workers

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/await handlers
  • Fully treeshakable

*More to come!

Install

$ npm install --save worktop

Usage

Check out /examples for 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) =>
Enter fullscreen mode Exit fullscreen mode

9. Generative Art Node

Create generative art by using the canvas api and node js

GitHub logo 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 https://github.com/HashLips/generative-art-node
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

GitHub logo solana-labs / solana-web3.js

Solana JavaScript SDK

Build status codecov
npm npm-downloads
semantic-release code-style-prettier

Solana JavaScript API

This is the Solana Javascript API built on the Solana JSON RPC API

Latest API Documentation

Installation

Yarn

$ yarn add @solana/web3.js

npm

$ npm install --save @solana/web3.js

Browser bundle

<!-- Development (un-minified) -->
<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.js"></script>

<!-- Production (un-minified) -->
<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Development Environment Setup

Install the latest Solana release from https://docs.solana.com/cli/install-solana-cli-tools

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

ES6

import * as solanaWeb3 from '@solana/web3.js';
console.log(solanaWeb3);
Enter fullscreen mode Exit fullscreen mode

Browser bundle

// `solanaWeb3` is provided in the global namespace by the `solanaWeb3.min.js` script bundle.
console.log(solanaWeb3);
Enter fullscreen mode Exit fullscreen mode

Examples

Example scripts for…


Stargazing 📈

Top risers over last 7 days🔗

  1. 30 seconds of code +1,553 stars
  2. The Algorithms - JavaScript +1,237 stars
  3. Public APIs +1,149 stars
  4. Free Programming Books +796 stars
  5. ML for beginners +616 stars

Top growth(%) over last 7 days🔗

  1. React render tracker +55%
  2. HyperFormula +16%
  3. Uptime Kuma +13%
  4. NextJS Boilerplate +11%
  5. The Algorithms - JavaScript +10%

Top risers over last 30 days🔗

  1. Public APIs +9,716 stars
  2. Free Programming Books +4,491 stars
  3. Build your own X +2,999 stars
  4. Tauri +2,800 stars
  5. Web dev for beginners +2,755 stars

Top growth(%) over last 30 days🔗

  1. Milkdown +59%
  2. Growth Book +54%
  3. xicons +48%
  4. Bulletproof React +48%
  5. Rooks +47%

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.

Latest comments (0)