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

Zero-Legacy Deno/React Suspense SSR Framework


Ultra 2.0

Zero-Legacy Deno/React Suspense SSR Framework*

Discord GitHub Workflow Status Deno module Deno compatibility

* If you want to get very meta (not facebook), Ultra can be viewed as a tiny bridge to utilise native browser features 🌐 whilst using popular front-end libraries. 🧰

πŸ§™ Start your journey

Here's a basic Ultra project to set you on your way.

deno run -A -r https://deno.land/x/ultra/create.ts
Enter fullscreen mode Exit fullscreen mode

✨ What's new

Ultra allows you to write web-apps which massively simplify your tool chain. You write ESM, we ship ESM. Where we are going, there is no "bundling" (it feels so 2018 just saying that word).

  • Less opinionated, BYO routing, styling, data fetching, and head libraries
  • Support for much of the React ecosystem by custom server/client controls**
  • Native import maps in browser πŸ€–
  • Localised import maps for production πŸ”₯
  • API routing
  • Overhaul of internal source code
  • Updated Deno Deploy support

** Examples include (but not limited to) react-query twind stitches…


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 gitleaks / gitleaks

Protect and discover secrets using Gitleaks πŸ”‘

Gitleaks

β”Œβ”€β—‹β”€β”€β”€β”
β”‚ β”‚β•²  β”‚
β”‚ β”‚ β—‹ β”‚
β”‚ β—‹ β–‘ β”‚
β””β”€β–‘β”€β”€β”€β”˜

Github Test gitleaks badge Follow @zricethezav

Join our Discord! Discord

Gitleaks is a SAST tool for detecting and preventing hardcoded secrets like passwords, API keys, and tokens in git repos. Gitleaks is an easy-to-use, all-in-one solution for detecting secrets, past or present, in your code.

➜  ~/code(master) gitleaks git -v

    β—‹
    β”‚β•²
    β”‚ β—‹
    β—‹ β–‘
    β–‘    gitleaks


Finding:     "export BUNDLE_ENTERPRISE__CONTRIBSYS__COM=cafebabe:deadbeef",
Secret:      cafebabe:deadbeef
RuleID:      sidekiq-secret
Entropy:     2.609850
File:        cmd/generate/config/rules/sidekiq.go
Line:        23
Commit:      cd5226711335c68be1e720b318b7bc3135a30eb2
Author:      John
Email:       john@users.noreply.github.com
Date:        2022-08-03T12:31:40Z
Fingerprint: cd5226711335c68be1e720b318b7bc3135a30eb2:cmd/generate/config/rules/sidekiq.go:sidekiq-secret:23

Getting Started

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 or as a GitHub action using Gitleaks-Action.

Installing

# MacOS
brew install gitleaks
# Docker (DockerHub)
docker
…
Enter fullscreen mode Exit fullscreen mode

3. Replace jQuery

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

GitHub logo sachinchoolur / jquery-to-javascript-converter

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

npm license

Test coverage

Statements Functions Lines
Statements Functions Lines

jQuery to JavaScript converter

Automatically find jQuery methods from existing projects and generate vanilla js alternatives.

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 jquery-to-js using npm:

npm install -g jquery-to-js
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: https://aescripts.com/bodymovin/

Option 2:

Or get it from the adobe store https://exchange.adobe.com/creativecloud.details.12557.html 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 with Gatsby.


Lumen

A constantly evolving and thoughtful architecture for creating new static blogs

Table of contents

Features

  • Beautiful typography.
  • Mobile first approach in development.
  • Syntax highlighting in code blocks using PrismJS.
  • Pagination support.

Quick Start

$ npm install
$ npm run start

Folder Structure


β”œβ”€β”€ internal
β”‚Β Β  β”œβ”€β”€ definitions
β”‚Β Β  β”œβ”€β”€ gatsby
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ constants
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ queries
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ types
β”‚Β Β  β”‚Β Β  └── utils
β”‚Β Β  └── testing
β”‚Β Β      └── __mocks__
└── src
    β”œβ”€β”€ assets
    β”‚Β Β  └── scss
    β”‚Β Β      β”œβ”€β”€ base
    β”‚Β Β      └── mixins
    β”œβ”€β”€ components
    β”‚Β Β  β”œβ”€β”€ Feed
    β”‚Β Β  β”œβ”€β”€ Icon
    β”‚Β Β  β”œβ”€β”€ Image
    β”‚Β Β  β”œβ”€β”€ Layout
    β”‚Β Β  β”œβ”€β”€ Page
    β”‚Β Β  β”œβ”€β”€ Pagination
    β”‚Β Β  β”œβ”€β”€ Post
    β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Author
    β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Comments
    β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Content
    β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Meta
    β”‚Β Β  β”‚Β Β  └── Tags
    β”‚Β Β  └── Sidebar
    β”‚Β Β      β”œβ”€β”€ Author
    β”‚Β Β      β”œβ”€β”€ Contacts
    β”‚Β Β      β”œβ”€β”€ Copyright
…

6. Tonic

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

GitHub logo socketsupply / tonic

A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free.

tonic

https://tonicframework.dev





Tonic is a low profile component framework for the web. It's one file, less than 3kb gzipped and has no dependencies. It's designed to be used with modern Javascript and is compatible with all modern browsers and built on top of the Web Components. It was designed to be similar to React but 100x easier to reason about

Installation

npm install @socketsupply/tonic
Enter fullscreen mode Exit fullscreen mode

Usage

import Tonic from '@socketsupply/tonic'
Enter fullscreen mode Exit fullscreen mode

You can use functions as components. They can be async or even an async generator function.

async function MyGreeting () {
  const data = await (await fetch('https://example.com/data')).text()
  return this.html`<h1>Hello, ${data}</h1>`
}
Enter fullscreen mode Exit fullscreen mode

Or you can use classes. Every class must have a render method.

class MyGreeting extends Tonic {
  async * render () {
    yield this.html`
…
Enter fullscreen mode Exit fullscreen mode

7. Reakit

Toolkit for building accessible rich web apps with React

GitHub logo ariakit / ariakit

Toolkit for building accessible web apps with React

Ariakit

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

NPM version GitHub Release Date GitHub Discussions
NPM downloads Β  GitHub Repo stars Β  Follow Ariakit on Twitter

Installation

npm:

npm i @ariakit/react

pnpm:

pnpm add @ariakit/react

Yarn:

yarn add @ariakit/react

Usage

import { useState } from "react";
import { createRoot } from "react-dom/client";
import { Button, Dialog, DialogHeading } from "@ariakit/react";
function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open dialog</Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogHeading>Ariakit</DialogHeading>
        <p>Welcome to Ariakit!</p>
      </Dialog>
    </>
  );
}

createRoot(document.getElementById("root")).
…
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

Welcome to HashLips πŸ‘„

Important: There is a new repo for this code https://github.com/HashLips/hashlips_art_engine

All the code in these repos was created and explained by HashLips on the main YouTube channel.

To find out more please visit:

πŸ“Ί YouTube

πŸ‘„ Discord

πŸ’¬ Telegram

🐦 Twitter

ℹ️ Website

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

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…


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

npm npm-downloads semantic-release
code-style-prettier

Solana JavaScript SDK

This is the JavaScript SDK for building Solana apps for Node, web, and React Native.

Installation

For use in a Node.js or web application:

npm install --save @solana/web3.js@rc
Enter fullscreen mode Exit fullscreen mode

For use in a browser, without a build system:

<!-- Development (debug mode, unminified) -->
<script src="https://unpkg.com/@solana/web3.js@rc/dist/index.development.js"></script>

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

Examples

To get a feel for the API, run and modify the live examples in the examples/ directory. There, you will find a series of single-purpose Node scripts that demonstrate a specific feature or use case. You will also find a React application that you can run in a browser, that demonstrates being able to create, sign, and send transactions using browser wallets.

What's New in Version 2.0

Version 2.0 of the Solana JavaScript SDK is a response to many…


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.

Top comments (0)