Iain Freestone

Posted on Aug 21, 2020 • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 21st August 2020

#react #typescript #webdev #javascript

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

1. Design resources for developers

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more.

bradtraversy / design-resources-for-developers

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more

Please read `contributing guidelines` before submitting new resources.

UI Graphics

Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI

Website	Description
SVG sine waves	Export perfect sine waves as SVG for your front-end projects
UI Design Daily	Awesome UI Components of all types
100 Daily UI

…

View on GitHub

2. Alpine.js

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.Think of it like Tailwind for JavaScript.

alpinejs / alpine

A rugged, minimal framework for composing JavaScript behavior in your markup.

Alpine.js

Go to the Alpine docs for most things: Alpine Docs

You are welcome to submit updates to the docs by submitting a PR to this repo. Docs are located in the /packages/docs directory.

Stay here for contribution-related information.

Looking for V2 docs? here they are

Contribution Guide:

Quickstart

clone this repo locally
run npm install & npm run build
Include the /packages/alpinejs/dist/cdn.js file from a <script> tag on a webpage and you're good to go!

Brief Tour

You can get everything installed with: npm install in the root directory of this repo after cloning it locally.

This repo is a "mono-repo" using npm workspaces for managing the packages. Each package has its own folder in the /packages directory.

Rather than having to run separate builds for each package, all package bundles are handled with the same command: npm run build

Here's a brief look at each package in this…

View on GitHub

3. RSSHub

RSSHub is an open source, easy to use, and extensible RSS feed aggregator, it's capable of generating RSS feeds from pretty much everything.

DIYgod / RSSHub

🧡 Everything is RSSible

RSSHub

🧡 Everything is RSSible

Introduction

RSSHub is the world's largest RSS network, consisting of over 5,000 global instances.

RSSHub delivers millions of contents aggregated from all kinds of sources, our vibrant open source community is ensuring the deliver of RSSHub's new routes, new features and bug fixes.

Documentation | Telegram Group | Telegram Channel | X (Twitter)

Related Projects

RSSHub Radar | A browser extension that can help you quickly discover and subscribe to the RSS and RSSHub of current websites.
RSSBud | RSSHub Radar for iOS platform, designed specifically for mobile ecosystem optimization.
RSSAid | RSSHub Radar for Android platform built with Flutter.
DocSearch | Link RSSHub DocSearch into Raycast

Contribute

We welcome all pull requests. Suggestions and feedback are also welcomed here.

Refer to Quick Start

Deployment

Refer to Deployment

Special Thanks

Logo designer sheldonrrr

Author

RSSHub © DIYgod, Released under the MIT License.
Authored…

View on GitHub

4. selectize.js

Selectize is an extensible jQuery-based custom UI control. It's useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable experience with a clean and powerful API.

selectize / selectize.js

Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

selectize.js

→ Selectize is looking for new members on the maintenance team!

Selectize is an extensible jQuery-based custom <select>; UI control. It's useful for tagging, contact lists, country selectors, and so on. The goal is to provide a solid & usable experience with a clean and powerful API.

Features

Smart Option Searching / Ranking Options are efficiently scored and sorted on-the-fly (using sifter). Want to search for an item's title and description? No problem.
Caret between items Order matters sometimes. Use the ← and → arrow keys to move between selected items.
Select & delete multiple items at once Hold down option on Mac or ctrl on Windows to select more than one item to delete.
Díåcritîçs supported Great for international environments.
Item creation Allow users to create items on the fly (async saving is supported; the control locks until the callback is…

View on GitHub

5. TSDX

Setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, ESLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up). TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration.

jaredpalmer / tsdx

Zero-config CLI for TypeScript package development

Despite all the recent hype, setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, ESLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up). TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration.

View on GitHub

6. wa-automate-nodejs (WhatsApp)

The most advanced NodeJS WhatsApp library for chatbots with advanced features. wa-automate-nodejs is the most advanced NodeJS library which provides a high-level API to control WhatsApp.

open-wa / wa-automate-nodejs

💬 🤖 The most reliable tool for chatbots with advanced features. Be sure to 🌟 this repository for updates!

Warning

By visiting this page you explicitly agree to the Terms of Service (read here)

wa-automate-nodejs

wa-automate-nodejs is the most advanced NodeJS library which provides a high-level API to control WA.

Key Features • Getting Started • Easy API • Documentation • Get a License Key • Support

Installation and Updating

Use this command to install the library for the first time and to keep the library up to date.

> npm i --save @open-wa/wa-automate@latest

Usage

CLI

Want to convert your WA account to an API instantly? You can now with the CLI. For more details see Easy API

> npx @open-wa/wa-automate --help

Custom Setup

Learn more about all possible configuration options here: ConfigObject

const wa = require('@open-wa/wa-automate');
wa.create({
  sessionId: "COVID_HELPER",
  multiDevice: true, //required to enable multiDevice support
  authTimeout: 60, //wait only 60 seconds to get

…

View on GitHub

7. TypeORM

TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used with TypeScript and JavaScript. Its goal is to always support the latest JavaScript features and provide additional features that help you to develop any kind of application that uses databases - from small applications with a few tables to large scale enterprise applications with multiple databases.

typeorm / typeorm

ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used with TypeScript and JavaScript (ES2021) Its goal is to always support the latest JavaScript features and provide additional features that help you to develop any kind of application that uses databases - from small applications with a few tables to large-scale enterprise applications with multiple databases.

TypeORM supports both Active Record and Data Mapper patterns unlike all other JavaScript ORMs currently in existence which means you can write high-quality, loosely coupled, scalable, maintainable applications in the most productive way.

TypeORM is highly influenced by other ORMs, such as Hibernate, Doctrine and Entity Framework.

Features

Supports both DataMapper and ActiveRecord (your choice).
Entities and columns.
Database-specific column types.
Entity manager.
Repositories and custom repositories.
Clean object-relational model.
Associations (relations).
Eager and lazy relations.
Uni-directional, bi-directional…

View on GitHub

8. Zustand

Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated, but still just enough to be explicit and flux-like.

pmndrs / zustand

🐻 Bear necessities for state management in React

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.

Don't disregard it because it's cute. It has quite the claws, lots of time was spent dealing with common pitfalls, like the dreaded zombie child problem, react concurrency, and context loss between mixed renderers. It may be the one state-manager in the React space that gets all of these right.

You can try a live demo here.

npm i zustand

⚠️ This readme is written for JavaScript users. If you are a TypeScript user, be sure to check out our TypeScript Usage section.

First create a store

Your store is a hook! You can put anything in it: primitives, objects, functions. State has to be updated immutably and the set function merges state to help it.

import { create } from 'zustand'
const

…

View on GitHub

9. jsQR

A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.

cozmo / jsQR

A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.

jsQR

A pure javascript QR code reading library This library takes in raw images and will locate, extract and parse any QR code found within.

Demo

Installation

NPM

Available on npm. Can be used in a Node.js program or with a module bundler such as Webpack or Browserify.

npm install jsqr --save

// ES6 import
import jsQR from "jsqr";

// CommonJS require
const jsQR = require("jsqr");

jsQR(...);

Browser

Alternatively for frontend use jsQR.js can be included with a script tag

<script src="jsQR.js"></script>
<script>
  jsQR(...);
</script>

A note on webcams

jsQR is designed to be a completely standalone library for scanning QR codes. By design it does not include any platform specific code. This allows it to just as easily scan a frontend webcam stream…

View on GitHub

10. joi

The most powerful schema description language and data validator for JavaScript.

hapijs / joi

The most powerful data validation library for JS

joi

The most powerful schema description language and data validator for JavaScript.

Installation

npm install joi

Visit the joi.dev Developer Portal for tutorials, documentation, and support

Useful resources

View on GitHub

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 (4)

John Peters • Aug 21 '20 • Edited

Brad Travery's work is always excellent!

Alpine looks very interesting. With the advent of -data- attributes, they may be onto something. This snippet shows their design well.

<div x-data="dropdown()">
    <button x-on:click="open">Open</button>

    <div x-show="isOpen()" x-on:click.away="close">
        // Dropdown
    </div>
</div>

Notice that the GUI is only concerned with GUI State, whereAs the x-data is used to tie in the event handlers. Pretty cool...

Thanks Iain!

Iain Freestone • Aug 21 '20

I am also excited to dig into Alpine looks like an awesome project.

Brad Traversy YouTube channel is brilliant, I was a bit sad to see that he will be stepping back from the camera for a while. Hopefully the channel will continue to grow under his guidance.

Jakub Pomykała • Feb 13 '21

Great! I also made such list but for react localization and i18n libraries 📦
dev.to/jpomykala/top-12-libraries-...
:D

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

1. Design resources for developers

bradtraversy / design-resources-for-developers

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more

Please read contributing guidelines before submitting new resources.

Table of Contents

UI Graphics

2. Alpine.js

alpinejs / alpine

A rugged, minimal framework for composing JavaScript behavior in your markup.

Alpine.js

Contribution Guide:

Quickstart

Brief Tour

3. RSSHub

DIYgod / RSSHub

🧡 Everything is RSSible

RSSHub

Introduction

Related Projects

Contribute

Deployment

Special Thanks

Author

4. selectize.js

selectize / selectize.js

Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

selectize.js

Features

5. TSDX

jaredpalmer / tsdx

Zero-config CLI for TypeScript package development

6. wa-automate-nodejs (WhatsApp)

open-wa / wa-automate-nodejs

💬 🤖 The most reliable tool for chatbots with advanced features. Be sure to 🌟 this repository for updates!

wa-automate-nodejs

Installation and Updating

Usage

CLI

Custom Setup

7. TypeORM

typeorm / typeorm

ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

Features

8. Zustand

pmndrs / zustand

🐻 Bear necessities for state management in React

First create a store

9. jsQR

cozmo / jsQR

A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.

jsQR

Installation

NPM

Browser

A note on webcams

10. joi

hapijs / joi

The most powerful data validation library for JS

joi

The most powerful schema description language and data validator for JavaScript.

Installation

Visit the joi.dev Developer Portal for tutorials, documentation, and support

Useful resources

Read next

Blur page body when hover on Nav Bar

5 Steps You Must Follow to Deploy a React App on Hostinger

JavaScript - A Blessing or a Curse?

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Please read `contributing guidelines` before submitting new resources.