DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 23rd April 2021

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ・3 min read

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

Disclaimer: pkg was created for use within containers and is not intended for use in serverless environments. For those using Vercel, this means that there is no requirement to use pkg in your projects as the benefits it provides are not applicable to the platform.

Build Status Dependency Status devDependency Status

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 inside the executable to make it even more portable
  • Test your…

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 v3.7 πŸŽ‰ πŸš€ _Updated to typesafe-actions@5.x.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

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.

Version npm

Example

React Kawaii Example

Install

With npm:

npm install --save react-kawaii
Enter fullscreen mode Exit fullscreen mode

With yarn:

yarn add react-kawaii
Enter fullscreen mode Exit fullscreen mode

How to use

import { Planet } from 'react-kawaii';
const Example = () => <Planet size={200} mood="blissful" color="#FDA7DC" />;
Enter fullscreen mode Exit fullscreen mode

How to use with React Native

import { Planet } from 'react-kawaii/lib/native/';
const Example = () => <Planet size={200} mood="blissful" color="#FDA7DC" />;
Enter fullscreen mode Exit fullscreen mode

Depending on your react and react-native version, you might need to to install the package react-native-svg:

With npm:

npm install react-native-svg
Enter fullscreen mode Exit fullscreen mode

With yarn:

yarn add react-native-svg
Enter fullscreen mode Exit fullscreen mode

Link react-native:

react-native link react-native-svg
Enter fullscreen mode Exit fullscreen mode

Read the react-native-svg documentation in case you need help.

Development

So…


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

GitHub logo denolib / awesome-deno

Curated list of awesome things related to Deno

Awesome Deno Awesome

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

Official Docs

External Docs

Online Playgrounds

Assistants

Modules

NOTICE: Deno has a few official modules that could be found at deno_std Consider submitting to the deno.land/x registry.

  • abc - A better Deno framework to create web application.
  • aleph.js - A React framework in Deno, inspired by…

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!

Installation β€’ Usage β€’ Contributing

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

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
yarn add party-js
Enter fullscreen mode Exit fullscreen mode

To use it, simply require or import it.

const party = require("party-js");
import party from "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 effects.

document.querySelector
…
Enter fullscreen mode Exit fullscreen mode

10. Choc UI

Prebuilt Chakra UI Higher Order Components

GitHub logo anubra266 / choc-ui

Prebuilt Chakra UI Higher Order Components

License Author


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
    • Result - Antd
    • Special Elements
  • Page Sections
    • Heros
    • Feature Sections
    • CTA Sections
    • Pricing Sections
    • Client Sections - WickedBlocks
    • Content Sections
    • FAQs
    • Newsletter Sections
    • Stats
    • 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
  • Lists Tailwind
    • Tables
    • Stacked Lists
    • Grid…

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.

Discussion (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 Author

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 Author

πŸ‘ Thank you for signing up

Collapse
diogorodrigues profile image
Diogo Rodrigues

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

Forem Open with the Forem app