Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. utility-types
Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).
piotrwitek / utility-types
Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).
utility-types
Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).
Found it useful? Want more updates?
Show your support by giving a ⭐
What's new?
🎉 Added new utilities 🎉
Features
- Providing a set of Common Types for TypeScript projects that are idiomatic and complementary to existing TypeScript Mapped Types so you don't need to copy them between the projects.
- Providing a set of Additional Types compatible with Flow's Utility Types to allow much easier migration to
TypeScript
.
Goals
- Quality - thoroughly tested for type correctness with type-testing library
dts-jest
- Secure and minimal - no third-party dependencies
- No runtime cost - it's type-level only
Installation
# NPM
npm install utility-types
# YARN
yarn add utility-types
Compatibility Notes
TypeScript support
-
v3.x.x
- TypeScript v3.1+ -
v2.x.x
- TypeScript v2.8.1+ -
v1.x.x
- TypeScript v2.7.2+
Funding Issues
Utility-Types is an open-source project created by people investing…
2. active-win
Get metadata about the active window - title, id, bounds, owner, etc
sindresorhus / get-windows
Get metadata about the active window and open windows (title, id, bounds, owner, etc)
get-windows
Get metadata about the active window and open windows (title, id, bounds, owner, URL, etc)
Works on macOS 10.14+, Linux (note), and Windows 7+.
Install
npm install get-windows
This is an ESM package which requires you to use ESM
Usage
import {activeWindow} from 'get-windows';
console.log(await activeWindow(options));
/*
{
title: 'Unicorns - Google Search',
id: 5762,
bounds: {
x: 0,
y: 0,
height: 900,
width: 1440
},
owner: {
name: 'Google Chrome',
processId: 310,
bundleId: 'com.google.Chrome',
path: '/Applications/Google Chrome.app'
},
url: 'https://sindresorhus.com/unicorn',
memoryUsage: 11015432
}
*/
API
activeWindow(options?)
Get metadata about the active window.
options
Type: object
accessibilityPermission (macOS only)
Type: boolean
Default: true
Enable the accessibility permission check. Setting this to false
will prevent the accessibility permission prompt on macOS versions 10.15 and newer. The url
property won't be retrieved.
screenRecordingPermission (macOS only)
Type: boolean
Default: true
Enable the screen recording permission check. Setting this to false
…
3. Cheetah Grid
The fastest open-source data table for web.
future-architect / cheetah-grid
The fastest open-source data table for web.
Cheetah Grid
The fastest open-source data table for web.
Downloading Cheetah Grid
Using Cheetah Grid with a CDN
<script src="https://unpkg.com/cheetah-grid@1.15"></script>
Downloading Cheetah Grid using npm
npm install -S cheetah-grid
import * as cheetahGrid from "cheetah-grid";
// or
const cheetahGrid = require("cheetah-grid");
Downloading Cheetah Grid source code
SourceMap
cheetahGrid.es5.min.js.map
Downloading Cheetah Grid using GitHub
git clone
git clone https://github.com/future-architect/cheetah-grid.git
npm install & build
npm install
npm run build
built file is created in the ./packages/cheetah-grid/dist
directory
Usage
Example for basic usage
<div id="sample" style="height: 300px; border: solid 1px #ddd;"></div>
<script>
// initialize
const grid = new cheetahGrid.ListGrid({
// Parent element on which to place the grid
parentElement: document.querySelector("#sample"),
// Header
…4. Superplate
A well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, Bundle Analyzer and 30+ plugin. For now, only creates project for Next.js.
pankod / superplate
A well-structured production-ready frontend boilerplate with Typescript, React Testing Library, styled-component, React Query, .env, Axios, Bundle Analyzer, Prettier and 30+ plugins. superplate creates projects for React.js, Next.js, and refine. https://pankod.github.io/superplate/
About
superplate lets you start rock-solid, production-ready React, Next.JS and refine projects just in seconds. The command-line interface guides the user through setup and no additional build configurations are required.
Superplate ships with +30 plugins including popular UI Kits, testing frameworks and many useful developer tools.
Quick Start
To use superplate, make sure you have npx is installed on your system (npx is shipped by default since npm 5.2.0).
To create a new app without using presets, run the following command:
npx superplate-cli my-project
You will be prompted with plugin options to create your project. A full list of avaiable plugins is here: superplate-core-plugins.
Available Integrations
Next.js
superplate makes it easier to get…
5. React Cool Portal
React hook for Portals, which renders modals, dropdowns, tooltips etc.
wellyshen / react-cool-portal
😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
REACT COOL PORTAL
This is a React hook for Portals. It helps you render children into a DOM node that exists outside the DOM hierarchy of the parent component. From now on you will never need to struggle with modals, dropdowns, tooltips etc. Check the features section out to learn more. Hope you guys 👍🏻 it.
❤️ it? ⭐️ it on GitHub or Tweet about it.
Live Demo
⚡️ Try yourself: https://react-cool-portal.netlify.app
Features
- 🍒 Renders an element or component to
<body>
or a specified DOM element. - 🎣 React Portals feat. Hook.
- 🤖 Built-in state controllers, event listeners and many useful features for a comprehensive DX.
- 🧱 Used as a scaffold to build your customized hook.
- 🧹 Auto removes the un-used portal container for you. Doesn't produce any DOM mess.
- 📜 Supports TypeScript type definition.
- 🗄️ Server-side rendering compatibility.
- 🦔 Tiny size (~ 1KB gzipped…
6. Lazy Git
A simple terminal UI for git commands
jesseduffield / lazygit
simple terminal UI for git commands
Sponsors
Maintenance of this project is made possible by all the contributors and sponsors. If you'd like to sponsor this project and have your avatar or company logo appear below click here. 💙
Elevator Pitch
Rant time: You've heard it before, git is powerful, but what good is that power when everything is so damn hard to do? Interactive rebasing requires you to edit a goddamn TODO file in your editor? Are you kidding me? To stage part of a file you need to use a command line program to step…
7. ts-essentials
All basic TypeScript types in one place
ts-essentials / ts-essentials
All essential TypeScript types in one place 🤙
ts-essentials
All essential TypeScript types in one place 🤙
Install
npm install --save-dev ts-essentials
👉 We require typescript>=4.5
. If you're looking for support for older TS versions, please have a look at the
TypeScript dependency table
👉 As we really want types to be stricter, we require enabled strictNullChecks in your project
API
ts-essentials
is a set of high-quality, useful TypeScript types that make writing type-safe code easier.
Basic
-
Builtin
- Matches primitive, function, date, error or regular expression -
KeyofBase
-keyofStringsOnly
-tolerant analogue forPropertyKey
-
Prettify<Type>
- flattens type and makes it more readable on the hover in your IDE -
Primitive
- Matches any primitive value -
StrictExclude<UnionType, ExcludedMembers>
- Constructs a type by excluding fromUnionType
all union members that are assignable toExcludedMembers
. This is stricter version ofExclude
-
StrictExtract<Type, Union>
- Constructs a type by extracting fromType
all union members that are assignable to…
8. Awesome Captcha
Curated list of awesome captcha libraries and crack tools.
ZYSzys / awesome-captcha
🔑 Curated list of awesome captcha libraries and crack tools.
Curated list of awesome captcha libraries and captcha crack tools.
CAPTCHA is a type of challenge–response test used in computing to determine whether or not the user is human.
Contents
Libraries
- mewebstudio/captcha - Captcha for Laravel 5.
- CGregwar/Captcha - PHP Captcha library.
- trekjs/captcha - A Lightweight Pure JavaScript Captcha for Node.js. No C/C++, No ImageMagick, No Canvas.
- patchca - Simple yet powerful CAPTCHA library written in Java.
- google/recaptcha - PHP client library for reCAPTCHA, a free service to protect your website from spam and abuse.
- ambethia/recaptcha - ReCaptcha helpers for ruby apps.
- anhskohbo/no-captcha - No CAPTCHA reCAPTCHA For Laravel.
- lorien/captcha_solver - Universal python API to different captcha solving services.
Generation
- captcha-api - Free, fast and reliable Captcha API POWERED BY AI
- dchest/captcha - Go package captcha implements generation and verification of image and audio CAPTCHAs.
- …
9. bundless
Dev server and bundler for esbuild
bundless
Next gen dev server and bundler
this project was a Vite alternative with many improvements like plugins, monorepo support, etc, most of them were added back to Vite 2, use Vite instead
Features
- 10x faster than traditional bundlers
- Error panel with sourcemap support
- jsx, typescript out of the box
- import assets, import css
What's the difference with traditional tools like Webpack?
- Faster dev server times and faster build speeds (thanks to esbuild)
- Bundless serves native ES modules to the browser, removing the overhead of parsing each module before serving
- Bundless uses a superset of esbuild plugin system to let users enrich its capabilities
What's the difference with tools like vite?
Bundless is very similar to vite, both serve native es modules to the browser and build a bundled version for production.
Also both are based on a plugin system that can be shared between the dev server and…
10. CSS Layout
A collection of popular layouts and patterns made with CSS. Now it has 90+ patterns and continues growing!
phuocng / csslayout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!
CSS Layout
As a front-end engineer, I deal with a lot of layouts and components. While there are plenty of CSS frameworks out there that provide these, I don't always want to include them all in my project.
That's why I've put together a collection of the most popular layouts and components that can be built with pure CSS.
These layouts and components are powered by modern CSS features like flexbox and grid, and can be easily customized to fit your specific needs. By combining them, you can create any possible layout you need.
The best part? This collection has zero dependencies, no frameworks, and no CSS hacks. These are real use cases that can save you time and effort in your projects.
About
This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.
Be my friend on
Stargazing 📈
Top risers over last 7 days
- JavaScript Questions +1,413 stars
- Headless UI +1,206 stars
- Public APIs +808 stars
- Clean Code JavaScript +761 stars
- Web Projects With Vanilla JavaScript +739 stars
Top risers over last 30 days
- Coding Interview University +6,163 stars
- Public APIs +4,540 stars
- Clone Wars +4,444 stars
- JavaScript Algorithms +4,047 stars
- Web Dev For Beginners +3,926 stars
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (2)
Nice some interesting projects on this list.
Love this list, thanks for sharing