Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. git-tips
Most commonly used git tips and tricks.
git-tips
Collection of
git-tips
, want to add your tips? Checkout contributing.md
English | 中文 | Русский | 한국어 | Tiếng Việt | 日本語 | नेपाली | Polski | فارسی
Tools:
- git-tip - A handy CLI to make optimum use of these tips. (Here in Docker container)
P.S: All these commands are tested on git version 2.7.4 (Apple Git-66)
.
- Everyday Git in twenty commands or so
- Show helpful guides that come with Git
- Search change by content
- Show changes over time for specific file
- Remove sensitive data from history, after a push
- Sync with remote, overwrite local changes
- List of all files till a commit
- Git reset first commit
- Reset: preserve uncommitted local changes
- List all the conflicted files
- List of all files changed in a commit
- Unstaged changes since last commit
- Changes staged for commit
- Show both staged and unstaged changes
- List all branches that are…
2. Pkg
This command line interface enables you to package your Node.js project into an executable that can be run even on devices without Node.js installed.
pkg
Important
pkg
has been deprecated with 5.8.1
as the last release. There are a number of successful forked versions of pkg
already with various feature additions. Further, we’re excited about Node.js 21’s support for single executable applications. Thank you for the support and contributions over the years. The repository will remain open and archived.
This command line interface enables you to package your Node.js project into an executable that can be run even on devices without Node.js installed.
Use Cases
- Make a commercial version of your application without sources
- Make a demo/evaluation/trial version of your app without sources
- Instantly make executables for other platforms (cross-compilation)
- Make some kind of self-extracting archive or installer
- No need to install Node.js and npm to run the packaged application
- No need to download hundreds of files via
npm install
to deploy your application. Deploy it as a single file - Put your assets…
3. React & Redux in TypeScript - Complete Guide
The complete guide to static typing in "React & Redux" apps using TypeScript
piotrwitek / react-redux-typescript-guide
The complete guide to static typing in "React & Redux" apps using TypeScript
React & Redux in TypeScript - Complete Guide
"This guide is a living compendium documenting the most important patterns and recipes on how to use React (and its Ecosystem) in a functional style using TypeScript. It will help you make your code completely type-safe while focusing on inferring the types from implementation so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."
Found it useful? Want more updates?
Show your support by giving a ⭐
What's new?
🎉 Now updated to support TypeScript v4.6 🎉
🚀 _Updated to typesafe-actions@5.x
🚀
Goals
- Complete type safety (with
--strict
flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking withany
type) - Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like Type Inference and…
4. React Kawaii
React Kawaii is a library of cute SVG illustrations (react components). Ideal if you want to give some cuteness and personality to your react application.
miukimiu / react-kawaii
Cute SVG React Components
React Kawaii
Welcome to React Kawaii! This repository contains both the website and the React package.
React Kawaii is an open source library of cute SVG illustrations. Perfect if you want to give some cuteness to your React App.
Website
The website for React Kawaii is located in the apps/website
directory. It serves as a documentation hub and may also include demos, tutorials, and other resources related to the project.
To start the website locally:
- Navigate to the
apps/website
directory. - Install dependencies with
pnpm install
. - Run the development server with
pnpm start
.
React Package
The React package, named react-kawaii
, is located in the packages/react-kawaii
directory. It contains the source code for the React components.
To use the react-kawaii
package in your projects:
-
Install it from npm or yarn:
npm install --save react-kawaii
or
yarn add react-kawaii
-
Import the components you need in your React application:
import
…
5. react-textarea-autosize
Drop-in replacement for the textarea component which automatically resizes textarea as content changes.
Andarist / react-textarea-autosize
<textarea /> component for React which grows with content
react-textarea-autosize
Drop-in replacement for the textarea component which automatically resizes textarea as content changes. A native React version of the popular jQuery Autosize! Weighs around 1.3KB (minified & gzipped).
This module supports IE9 and above.
import TextareaAutosize from 'react-textarea-autosize';
// If you use CommonJS syntax:
// var TextareaAutosize = require('react-textarea-autosize').default;
React.renderComponent(
<div>
<TextareaAutosize />
</div>,
document.getElementById('element'),
);
Install
npm install react-textarea-autosize
Demo
https://andarist.github.io/react-textarea-autosize/
Props
Special props:
prop | type | description |
---|---|---|
maxRows |
number |
Maximum number of rows up to which the textarea can grow |
minRows |
number |
Minimum number of rows to show for textarea |
onHeightChange |
func |
Function invoked on textarea height change, with height as first argument. The second function argument is an object containing additional information that might be useful for custom behaviors. Current options include { rowHeight: number } . |
6. JS Image Carver
Content-aware image resizer based on Seam Carving algorithm
trekhleb / js-image-carver
🌅 Content-aware image resizer and object remover based on Seam Carving algorithm
JS IMAGE CARVER
Content-aware image resizer
-
▶️ ️Demo - ✏️ How it works
- 📄 Seam carving paper by Shai Avidan and Ariel Shamir
Background image by Ian Dooley
Content-aware image resizing
Content-aware image resizing might be applied when it comes to changing the image proportions (i.e. reducing the width while keeping the height) and when losing some parts of the image is not desirable. Doing the straightforward image scaling in this case would distort the objects in it. To preserve the proportions of the object while changing the image proportions we may use the Seam Carving algorithm.
In the example below, you may see how the original image width was reduced by 50% using content-aware resizing (left image) and straightforward scaling (right image). In this particular case, the left image looks more natural since the proportions of the balloons were preserved.
The Seam Carving algorithm’s idea is to find the…
7. Awesome Deno
Curated list of awesome things related to Deno
denolib / awesome-deno
Curated list of awesome things related to Deno
Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.
This list is a collection of the best Deno modules and resources.
Contents
- Docs
- Modules
- Registries
- Showcases
- Tools
- Integrations
- Articles
- Blogs/Newsletters
- Presentations
- Resources
- Resources in Other Languages
Docs
Official Docs
External Docs
Online Playgrounds
Modules
Automation
- autopilot - Autopilot - Cross-platform web automation with Deno.
- swissknife - SwissKnife…
8. Howler.js
Javascript audio library for the modern web.
Description
howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.
Additional information, live demos and a user showcase are available at howlerjs.com.
Follow on Twitter for howler.js and development-related discussion: @GoldFireStudios.
Features
- Single API for all audio needs
- Defaults to Web Audio API and falls back to HTML5 Audio
- Handles edge cases and bugs across environments
- Supports all codecs for full cross-browser support
- Automatic caching for improved performance
- Control sounds individually, in groups or globally
- Playback of multiple sounds at once
- Easy sound sprite definition and playback
- Full control for fading, rate, seek, volume, etc.
- Easily add 3D spatial sound or stereo panning
- Modular - use what you want and easy to extend
- No outside dependencies, just pure JavaScript
- As light as…
9. party.js
A JavaScript library to brighten up your user's site experience with visual effects!
yiliansource / party-js
A JavaScript library to brighten up your user's site experience with visual effects!
Installation • Usage • Contributing
Installation
The library is written in TypeScript and compiled to an UMD module to allow integration into different environments.
Browsers
You can grab the latest version from jsdelivr.
<script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>
The library instance is loaded into the global party
object.
Node.JS
If you are using a package-managed environment, you can also install the latest version via npm.
npm install party-js
# or
yarn add party-js
To use it, simply require
or import
it.
import party from "party-js";
// or
const party = require("party-js");
Usage
The library essentially offers a fully customizeable particle-system implementation into HTML documents. Users of the library have the ability to create and fine-tune effects to their individual liking. The library offers a few simple effects right out-of-the-box, so you don't have to waste time re-creating simple…
10. Choc UI
Prebuilt Chakra UI Higher Order Components
About Choc UI
CHOC is acronym for Chakra Higher Order Components. Choc UI is a collection of components, inspired by many sources of well used web components, which are rebuilt based on the Chakra UI library.
Official Documentation
See it in action on Choc-UI's Website.
Components
-
Elements
- Headers
- Cards
- Alerts
- Pagination
- Badges
- Gradient Icons
- Carousels
- Empty - Antd, https://readyui.co, razorui.com
- Result - Antd
- Extra Components
-
Page Sections
- Heros
- Feature Sections
- CTA Sections
- Pricing Sections
- Client Sections - WickedBlocks
- Content Sections
- FAQs
- Newsletter Sections
- Stats - Kutty, TailwindUI
- Testimonials
- Blog Sections -
- Contact Sections
- Footers - Meraki UI
- Logo Clouds
-
Navigation - TailwindUI, Meraki UI
- Navbars
- Vertical Navigation (Menus)
- Sidebar Navigation
-
Headings - TailwindUI
- Card Headings
- Section Headings
- Page Headings
-
Example Pages - Meraki UI, Kutty
- Landing Pages
- Contact Pages
- Error Pages
- Home Screens
- Detail Screens
- Settings Screens
-
Forms Tailwind
- Form Layouts - Tailwind
- Sign in and Registration - WickedBlocks
- …
Stargazing 📈
Top risers over last 7 days
- Coding Interview University +2,110 stars
- React Flow +1,904 stars
- Supabase +1,589 stars
- 30 seconds of code +1,525stars
- Clone Wars +1,031 stars
Top growth(%) over last 7 days
- React Flow +61%
- Simpler State +45%
- Supabase +21%
- Superplate +15.46%
- Clone Wars +11%
Top risers over last 30 days
- Coding Interview University +7,827 stars
- Clone Wars +4,717 stars
- Public APIs +4,522 stars
- JavaScript Algorithms +4,146 stars
- Free Programming Books +3,172 stars
Top growth(%) over last 30 days
- Appsmith +104%
- Simpler State +95%
- Clone Wars +85%
- React Flow +71%
- Headless UI +53%
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 (5)
Hi! Just curious to know where do you get all these amazing data about the github repos?
Hi Navaneeth
Over time I have built up a collection of web development related github repos (updated daily), I find these on the github site itself, blogs, newsletters, reddit, twitter etc. On a daily basis I run a query against the github api and store all this data in a database. I can then use this data calculate % growth etc.
I am in the process of building a new site that will make this data public and hopefully act as a way of finding projects that maybe handy to you.
Great! I have signed up for ur newsletter too 😊
👍 Thank you for signing up
Thank you for sharing it. I loved Git Tips. 😍