Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
1. Netlify CMS
A content management system (CMS) for static site generators. Give users a simple way to edit and add content to any site built with a static site generator.
A CMS for static site generators. Give users a simple way to edit and add content to any site built with a static site generator.
Decap CMS is the new name of Netlify CMS since February 2023.
Community Chat
How It Works
Decap CMS is a single-page app that you pull into the /admin part of your site.
It presents a clean UI for editing content stored in a Git repository.
You setup a YAML config to describe the content model of your site, and typically tweak the main layout of the CMS a bit to fit your own site.
When a user navigates to /admin/ they'll be prompted to log in, and once authenticated
they'll be able to create new content or edit existing content.
Read more about Decap CMS Core Concepts.
Installation and Configuration
The Decap CMS can be used inโฆ
2. WebGoat
WebGoat is a deliberately insecure web application maintained by OWASP designed to teach web application security lessons.
WebGoat: A deliberately insecure Web Application
Introduction
WebGoat is a deliberately insecure web application maintained by OWASP designed to teach web application security lessons.
This program is a demonstration of common server-side application flaws. The exercises are intended to be used by people to learn about application security and penetration testing techniques.
WARNING 1: While running this program your machine will be extremely vulnerable to attack. You should disconnect from the Internet while using this program. WebGoat's default configuration binds to localhost to minimize the exposure.
WARNING 2: This program is for educational purposes only. If you attempt these techniques without authorization, you are very likely to get caught. If you are caught engaging in unauthorized hacking, most companies will fire you Claiming that you were doing security research will not work as that is the first thing that all hackers claim.
Installation instructions:
For more details check the Contributionโฆ
3. Speedy.js
Speedy.js is a compiler for a well considered, performance pitfalls free subset of JavaScript targeting WebAssembly. Because WebAssembly is statically-typed, the project uses TypeScript as type-checker and to resolve the types of the program symbols.
MichaReiser
/
speedy.js
Accelerate JavaScript Applications by Compiling to WebAssembly
Speedy.js
Speedy.js is a compiler for a well considered, performance pitfalls free subset of JavaScript targeting WebAssembly. Because WebAssembly is statically-typed, the project uses TypeScript as type-checker and to resolve the types of the program symbols.
The project is very experimental and still far away from being production ready.
Getting Started
Setup LLVM
First, you need an LLVM installation that includes the experimental WebAssembly target. You can test if your LLVM installation includes the WebAssembly backend by running
llvm-config --targets-built
If the output contains the word WebAssembly you are good to go (continue with Install Cross Compiler). If not, then you have to build LLVM from source by following these instructions.
After LLVM has been built and is installed, set the path to the llvm-config executable (it is located in the installation directory) using npm config set or an .npmrc file in your project:
npm config set LLVM_CONFIGโฆ4. soketi
soketi is your simple, fast, and resilient open-source WebSockets server.
soketi
/
soketi
Next-gen, Pusher-compatible, open-source WebSockets server. Simple, fast, and resilient. ๐ฃ
soketi
Next-gen, Pusher-compatible, open-source WebSockets server. Simple, fast, and resilient. ๐ฃ
๐ค Supporting
Soketi is meant to be open source, forever and ever. It solves issues that many developers face - the one of wanting to be limitless while testing locally or performing benchmarks. More than that, itt is also suited for production usage, either it is public for your frontend applications or internal to your team.
The frequency of releases and maintenance is based on the available time, which is tight as hell. Recently, there were issues with the maintenance and this caused infrequent updates, as well as infrequent support.
To cover some of the expenses of handling new features or having to maintain the project, we would be more than happy if you can donate towards the goal. This will ensure that Soketi will be taken care of at its full extent.
5. unimported
unimported analyzes your code by following the require/import statements starting from your entry file. The result is a report showing which files are unimported, which dependencies are missing from your package.json, and which dependencies can be removed from your package.json.
smeijer
/
unimported
Find and fix dangling files and unused dependencies in your JavaScript projects.
Archived
Important
This project is no longer maintained. There's a project called knip which has more features, and is actively maintained by Lars Kappert. Thank you for using unimported over the years! Enjoy knip, and say hi to me on Twitter/X.
unimported
Find unused source files in javascript / typescript projects.
While adding new code to our projects, we might forget to remove the old code. Linters warn us for unused code in a module, but they fail to report unused files.
unimported analyzes your code by following the require/import statements starting from your entry file.
The result is a report showing which files are unimported, which dependencies are missing from your package.json, and which dependencies can be removed from your package.json.
Usage
Run the following command in the root of your project (next to package.json). The result will be as shown under example
npxโฆ6. react-responsive
CSS media queries in react - for responsive design, and more.
yocontra
/
react-responsive
CSS media queries in react - for responsive design, and more.
react-responsive 
Information
| Package | react-responsive |
| Description | Media queries in react for responsive design |
| Browser Version | >= IE6* |
| Demo | |
The best supported, easiest to use react media query module.
Install
$ npm install react-responsive --save
Example Usage
With Hooks
Hooks is a new feature available in 8.0.0!
import React from 'react'
import { useMediaQuery } from 'react-responsive'
const Example = () => {
const isDesktopOrLaptop = useMediaQuery({
query: '(min-width: 1224px)'
})
const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })
return (
<div>
<h1>Device Test!</h1>
{isDesktopOrLaptop && <p>You are a desktop or laptop</โฆ7. diff2html
diff2html generates pretty HTML diffs from git diff or unified diff output.
diff2html
diff2html generates pretty HTML diffs from git diff or unified diff output.
Table of Contents
- Features
- Online Example
- Distributions
- Usage
- Diff Text Input
- Diff2HtmlUI Usage
- Diff2Html Usage
- Troubleshooting
- Contribute
- Contributors
- License
- Thanks
Features
-
Supports git and unified diffs
-
Line by line and Side by side diff
-
New and old line numbers
-
Inserted and removed lines
-
GitHub like visual style
-
Code syntax highlight
-
Line similarity matching
-
Easy code selection
Online Example
Go to diff2html
Distributions
- jsdelivr CDN
- WebJar
- Node Library
- NPM CLI
- Manually use from jsdelivr or build the project
- Browser / Bundle
- Parser and HTML Generator
- bundles/js/diff2html.min.js - includes the diff parser and html generator
- Wrapper and helper adding syntax highlight, synchronized scroll, and other nice features
- bundles/js/diff2html-ui.min.js - includes theโฆ
- Parser and HTML Generator
- Browser / Bundle
8. hyperid
Uber-fast unique id generation, for Node.js and the browser
hyperid
Uber-fast unique id generation, for Node.js and the browser Here are the benchmarks:
crypto.randomUUID x 12,969,725 ops/sec ยฑ0.88% (91 runs sampled)
hashids process.hrtime x 419,350 ops/sec ยฑ0.66% (94 runs sampled)
hashids counter x 819,049 ops/sec ยฑ0.58% (93 runs sampled)
shortid x 40,820 ops/sec ยฑ2.49% (87 runs sampled)
crypto.random x 372,773 ops/sec ยฑ2.39% (84 runs sampled)
nid x 1,614,450 ops/sec ยฑ0.38% (93 runs sampled)
uuid.v4 x 1,446,051 ops/sec ยฑ0.60% (98 runs sampled)
napiRsUuid.v4 x 8,676,151 ops/sec ยฑ0.49% (97 runs sampled)
uuid.v1 x 2,051,072 ops/sec ยฑ0.15% (99 runs sampled)
nanoid x 4,293,733 ops/sec ยฑ0.31% (97 runs sampled)
hyperid - variable length x 25,937,129 ops/sec ยฑ1.48% (91 runs sampled)
hyperid - fixed length x 24,970,478 ops/sec ยฑ1.48% (92 runs sampled)
hyperid - fixed length, url safe x 25,856,735 ops/sec ยฑ1.93% (92 runs sampled)
Fastest is hyperid - variable length,hyperid - fixed length, url safe
Slowest is shortid
Note: Benchmark run with Intel(R)โฆ
9. react-collapse
Component-wrapper for collapse animation with CSS for elements with variable and dynamic height
kunukn
/
react-collapse
Component-wrapper for collapse animation with CSS for elements with variable and dynamic height
react-collapse
Collapse component with CSS transition for elements with variable and dynamic height.
react-collapse
Demo
CSS required
<style>
.collapse-css-transition {
transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
Alternatively, you can add it using the transition prop.
Installation for React 16.8+
- UMD minified ~2.3 kb, gzipped ~1.1 kb
- Module minified ~2.9 kb, gzipped ~1.1 kb
- CJS minified ~2.0 kb, gzipped ~1.0 kb
Installation for React 16.3+
Avoid it if possible. This is no longer maintained.
- UMD minified ~5.8 kb, gzipped ~2.1 kb
npm i -D @kunukn/react-collapse@^1
# or
# yarn addโฆ10. knex.js
A query builder for PostgreSQL, MySQL, CockroachDB, SQL Server, SQLite3 and Oracle, designed to be flexible, portable, and fun to use.
knex
/
knex
A query builder for PostgreSQL, MySQL, CockroachDB, SQL Server, SQLite3 and Oracle, designed to be flexible, portable, and fun to use.
A SQL query builder that is flexible, portable, and fun to use!
A batteries-included, multi-dialect (PostgreSQL, MySQL, CockroachDB, MSSQL, SQLite3, Oracle (including Oracle Wallet Authentication)) query builder for Node.js, featuring:
- transactions
- connection pooling
- streaming queries
- both a promise and callback API
- a thorough test suite
Node.js versions 12+ are supported.
- Take a look at the full documentation to get started!
- Browse the list of plugins and tools built for knex
- Check out our recipes wiki to search for solutions to some specific problems
- In case of upgrading from an older version, see migration guide
You can report bugs and discuss features on the GitHub issues page or send tweets to @kibertoad.
For support and questions, join our Gitter channel.
For knex-based Object Relational Mapper, see:
- https://github.com/Vincit/objection.js
- https://github.com/mikro-orm/mikro-orm
- https://bookshelfjs.org
To see the SQL that Knex will generate for a given query, you can use Knex Queryโฆ
Stargazing ๐
Top risers over last 7 days๐
- CS Video courses +2,964 stars
- NextUI +2,280 stars
- LinkedIn Skills Assessements +1,237 stars
- Public APIS +780 stars
- Coding Interview University +768 stars
Top growth(%) over last 7 days๐
- NextUI +111%
- clay.css +18%
- LinkedIn Skills Assessements +16%
- React Sticky Box +14%
- Learn web3 dapp +12%
Top risers over last 30 days๐
- Public APIs +5,703
- Awesome +4,158 stars
- Tauri +4,012 stars stars
- 30 Days of JavaScript +3,646 stars
- Coding Interview University +3,587 stars
Top growth(%) over last 30 days๐
- NextUI +324%
- Iconoir +136%
- Fuite +64%
- Amplify UI +61%
- Learn web3 dapp +48%
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)