DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 23rd 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. git-tips

Most commonly used git tips and tricks.


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.

GitHub logo vercel / pkg

Package your Node.js project into an executable

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

GitHub logo 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."

Join the community on Spectrum Join the chat at https://gitter.im/react-redux-typescript-guide/Lobby

Found it useful? Want more updates?

Show your support by giving a ⭐

Buy Me a Coffee Become a Patron

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 with any 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.

GitHub logo miukimiu / react-kawaii

Cute SVG React Components

React Kawaii

Version npm

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.

React Kawaii Logo

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:

  1. Navigate to the apps/website directory.
  2. Install dependencies with pnpm install.
  3. 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:

  1. Install it from npm or yarn:

    npm install --save react-kawaii
    

    or

    yarn add react-kawaii
    
  2. Import the components you need in your React application:

    import
    Enter fullscreen mode Exit fullscreen mode

5. react-textarea-autosize

Drop-in replacement for the textarea component which automatically resizes textarea as content changes.

GitHub logo Andarist / react-textarea-autosize

<textarea /> component for React which grows with content

npm version npm

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'),
);
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo trekhleb / js-image-carver

🌅 Content-aware image resizer and object remover based on Seam Carving algorithm

JS IMAGE CARVER

Content-aware image resizer

JS IMAGE CARVER

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.

Content-aware image resizing

The Seam Carving algorithm’s idea is to find the…


7. Awesome Deno

Curated list of awesome things related to Deno


8. Howler.js

Javascript audio library for the modern web.

GitHub logo goldfire / howler.js

Javascript audio library for the modern web.

howler.js

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!

GitHub logo yiliansource / party-js

A JavaScript library to brighten up your user's site experience with visual effects!

InstallationUsageContributing

npm GitHub Repo stars GitHub Build Status GitHub Docs Status npm downloads

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

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

To use it, simply require or import it.

import party from "party-js";
// or
const party = require("party-js");
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo anubra266 / choc-ui

Prebuilt ⭐⭐⭐⭐⭐ Chakra UI Higher Order Components

License Author Made In


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

  1. Coding Interview University +2,110 stars
  2. React Flow +1,904 stars
  3. Supabase +1,589 stars
  4. 30 seconds of code +1,525stars
  5. Clone Wars +1,031 stars

Top growth(%) over last 7 days

  1. React Flow +61%
  2. Simpler State +45%
  3. Supabase +21%
  4. Superplate +15.46%
  5. Clone Wars +11%

Top risers over last 30 days

  1. Coding Interview University +7,827 stars
  2. Clone Wars +4,717 stars
  3. Public APIs +4,522 stars
  4. JavaScript Algorithms +4,146 stars
  5. Free Programming Books +3,172 stars

Top growth(%) over last 30 days

  1. Appsmith +104%
  2. Simpler State +95%
  3. Clone Wars +85%
  4. React Flow +71%
  5. 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)

Collapse
 
navaneethbysani profile image
Navaneeth Bysani

Hi! Just curious to know where do you get all these amazing data about the github repos?

Collapse
 
iainfreestone profile image
Iain Freestone

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.

Collapse
 
navaneethbysani profile image
Navaneeth Bysani

Great! I have signed up for ur newsletter too 😊

Thread Thread
 
iainfreestone profile image
Iain Freestone

👍 Thank you for signing up

Collapse
 
dionarodrigues profile image
Diona Rodrigues

Thank you for sharing it. I loved Git Tips. 😍