An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Simplebits
- Joshua Blankenship
- TutsPlus - Design
- Naldz Graphics
- Web Design Ledger
- Design Modo
- Android Dissected
- Codrops
- The Verge
- TechPowerUp
Help Webnuz
Referal links:
10 Trending projects on GitHub for web developers - 16th April 2021
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?
What's new?
Now updated to support TypeScript v3.7
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
# NPMnpm install utility-types# YARNyarn add utility-typesCompatibility 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
2. active-win
Get metadata about the active window - title, id, bounds, owner, etc
sindresorhus / active-win
Get metadata about the active window (title, id, bounds, owner, etc)
active-win
Get metadata about the active window (title, id, bounds, owner, URL, etc)
Works on macOS, Linux, Windows.
Users on macOS 10.13 or earlier needs to download the Swift runtime support libraries.
Install
$ npm install active-winUsage
const activeWindow = require('active-win');(async () => { 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?)
options
Type: object
screenRecordingPermission (macOS only)
Type: boolean
Default: true
Enable the screen recording permission check. Setting this to false will prevent the screen recording permission prompt on macOS versions 10.15 and newer. The title property in the result will
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/[email protected]"></script>Downloading Cheetah Grid using npm
npm install -S cheetah-gridimport * as cheetahGrid from 'cheetah-grid'// orconst 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.gitnpm install & build
npm installnpm run buildbuilt 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 definition header4. 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, 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. https://pankod.github.io/superplate/
About
superplate has been developed to create rock solid UI frameworks apps boilerplate with no build configurations in seconds.
You can add usefull, highly-demands front-end development tools and libraries as a plugin by using superplate CLI during the project creation phase.
To learn on how superplate and its plugins work, you can check out our documentation.
For now, superplate only creates project for Next.js apps as a default Framework option. Other frameworks will be added soon.
Available Integrations
Coming Soon
Documentation
For more detailed information and usage, refer to the superplate documentation.
Quick Start
To create a new app run the command:
npx superplate-cli <my-project>Make sure you have npx installed (npx is shipped
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.
Looking for a form library? Give React Cool Form a try!
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
6. Lazy Git
A simple terminal UI for git commands
jesseduffield / lazygit
simple terminal UI for git commands
A simple terminal UI for git commands, written in Go with the gocui library.
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 through each hunk and if a hunk can't be split down any further but contains code you don't want to stage, you have to edit an arcane patch file by hand? Are you KIDDING me?! Sometimes you get asked to stash your changes when switching branches only to realise that after you switch and unstash that there weren't even any conflicts and it would have been fine to just checkout the branch directly? YOU HAVE GOT TO BE
7. ts-essentials
All basic TypeScript types in one place
krzkaczor / ts-essentials
All basic TypeScript types in one place
ts-essentials
All essential TypeScript types in one place
Install
npm install --save-dev ts-essentials We require typescript>=3.7. If you're looking for support for older TS versions use ts-essentials@3 (for 3.6>=)or ts-essentials@2 instead. If you use any functions you should add ts-essentials to your dependencies (npm install --save ts-essentials) to avoid runtime errors in production.
What's inside?
- Install
- What's inside?
- Basic
- Dictionaries
- Deep* wrapper types
- DeepPartial
- DeepRequired
- DeepReadonly
- DeepNonNullable
- DeepNullable
- DeepUndefinable
- Writable & DeepWritable
- Buildable
- Omit
- StrictOmit
- DeepOmit
- OmitProperties
- PickProperties
- NonNever
- Merge
- MarkRequired
- MarkOptional
- ReadonlyKeys
- WritableKeys
- OptionalKeys
- RequiredKeys
- UnionToIntersection
- Opaque types
- Tuple constraint
- Exhaustive switch cases
- ValueOf type
- ElementOf type
- AsyncOrSync type
- Awaited type
- Newable
- Assertions
- Exact
- XOR
- Functional type essentials
- Head
- Tail
- Contributors
Basic
Primitivetype matching all primitive values.noopfunction that takes any arguments and returns nothing, as a placeholder for e.g. callbacks.
Dictionaries
keywords: map
const stringDict8. Awesome Captcha
Curated list of awesome captcha libraries and crack tools.
ZYSzys / awesome-captcha
Curated list of awesome captcha libraries and crack tools.
Awesome Captcha 
Curated list of awesome captcha libraries and captcha crack tools.
CAPTCHA is a type of challengeresponse 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.
- pusuo/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
- dchest/captcha - Go package captcha implements generation and verification of image and audio CAPTCHAs.
- lepture/captcha - A captcha library that generates audio and image CAPTCHAs.
9. bundless
Dev server and bundler for esbuild
bundless
Next gen dev server and bundler
project under heavy development
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 the bundler.
Some differences are:
- Bundless uses the esbuild plugin system instead of rollup
- Bundless uses esbuild instead of rollup for the
10. CSS Layout
A collection of popular layouts and patterns made with CSS. Now it has 90+ patterns and continues growing!
phuoc-ng / csslayout
A collection of popular layouts and patterns made with CSS. Now it has 90+ patterns and continues growing!
CSS Layout
A collection of popular layouts and patterns made with CSS:
- Zero dependencies
- No frameworks
- No CSS hacks
- Real use cases
- Good practices (coming soon)
- Accessibility Support (coming soon)
Why
Being a front-end engineer, I have to deal with a lot of layouts and componentsThere are a lot of CSS frameworks out there that provide popular layouts/components butI usually don't want to include all of them in my project.
So I collect most popular layouts and components that can be built with pure CSSThey are powered by modern CSS features such as flexbox and grid.
They are great starting points to be picked and customized easily for each specific needBy composing them, you can have any possible layout that exists in the real life.
Running it on local
- Clone the project:
$ git clone https://github.com/phuoc-ng/csslayout- Install the dependencies:
$ cd csslayoutStargazing
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.
Original Link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-16th-april-2021-k0k
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To