loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 21st August 2020

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ใƒป2 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. Design resources for developers

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

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

Repository Banner

Please read contributing guidelines before submitting new resources.

Table of Contents

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
UI Design Daily Awesome UI Components of all types
100 Daily UI Free Figma library of products, elements, and screens
Sketch App Sources Sketch UIs, wireframes, icons and much more
Humaaans Cool illustrations of people with the ability to mix and match
Paaatterns
โ€ฆ

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.

GitHub logo alpinejs / alpine

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

Alpine.js

npm bundle size npm version Chat

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.

Note: This tool's syntax is almost entirely borrowed from Vue (and by extension Angular). I am forever grateful for the gift they are to the web.

Translated documentation

Install

From CDN: Add the following script to the end of your <head> section.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

That's it. It will initialize itself.

For production environments, it's recommended to pin a specific version number in the link to avoid unexpected breakage from newer versions For example, to use version 2.3.5:

<script src="
โ€ฆ

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.

GitHub logo DIYgod / RSSHub

๐Ÿฐ Everything is RSSible

RSSHub

RSSHub

๐Ÿฐ Everything is RSSible

telegram build status Test coverage

Introduction

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

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.

RSSHub can be used with browser extension RSSHub Radar

English docs | Telegram Group | Telegram Channel


RSSHub ๆ˜ฏไธ€ไธชๅผ€ๆบใ€็ฎ€ๅ•ๆ˜“็”จใ€ๆ˜“ไบŽๆ‰ฉๅฑ•็š„ RSS ็”Ÿๆˆๅ™จ๏ผŒๅฏไปฅ็ป™ไปปไฝ•ๅฅ‡ๅฅ‡ๆ€ชๆ€ช็š„ๅ†…ๅฎน็”Ÿๆˆ RSS ่ฎข้˜…ๆบใ€‚RSSHub ๅ€ŸๅŠฉไบŽๅผ€ๆบ็คพๅŒบ็š„ๅŠ›้‡ๅฟซ้€Ÿๅ‘ๅฑ•ไธญ๏ผŒ็›ฎๅ‰ๅทฒ้€‚้…ๆ•ฐ็™พๅฎถ็ฝ‘็ซ™็š„ไธŠๅƒ้กนๅ†…ๅฎน

ๅฏไปฅ้…ๅˆๆต่งˆๅ™จๆ‰ฉๅฑ• RSSHub Radar ้ฃŸ็”จ

ไธญๆ–‡ๆ–‡ๆกฃ | Telegram ็พค | Telegram ้ข‘้“

Special Thanks

Special Sponsors

ย ย ย ย ย ย ย ย ย 

Sponsors

Sayori Studio . Sion Kazama . ็š่‡ด่ฟœ . Rolly RSS ้˜…่ฏปๅ™จ . mokeyjay . tkaray . NeverBehave . ่Œๅผ€ๆบ่”็›Ÿ . hooke007 . feeds.pub

Contributors

Logo designer sheldonrrr

Backers

ย ย ย ย ย ย ย 

Join Us

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

Refer to Join Us

่ง ๅ‚ไธŽๆˆ‘ไปฌ

Deployment

Refer toโ€ฆ


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.

GitHub logo 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 is looking for new members on the maintenance team!

selectize.js

NPM version CDNJS version Build Status Coverage Status

Selectize is an extensible jQuery-based custom <select> 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.

Features

  • Smart Option Searching / RankingOptions are efficiently scored and sorted on-the-fly (using sifter). Want to search an item's title and description? No problem.
  • Caret between itemsOrder matters sometimes. Use the โ† and โ†’ arrow keys to move between selected items.
  • Select & delete multiple items at onceHold down option on Mac or ctrl on Windows to select more than one item to delete.
  • Dรญรฅcritรฎรงs supportedGreat for international environments.
  • Item creationAllow users to create itemsโ€ฆ

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.

GitHub logo formium / tsdx

Zero-config CLI for TypeScript package development

tsdx

Blazing Fast Blazing Fast Blazing Fast Greenkeeper badge

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.

โ€ฆ

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.

GitHub logo open-wa / wa-automate-nodejs

๐Ÿ’ฌ ๐Ÿค– The most advanced NodeJS whatsapp library for chatbots with advanced features. Be sure to ๐ŸŒŸ this repository for updates!

wa-automate-nodejs

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

npm version node Downloads Average time to resolve an issue Percentage of issues still open

WhatsApp_Web 2.2029.4

Key Features โ€ข Getting Started โ€ข Easy API โ€ข Documentation โ€ข Support

Installation

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

Usage

// import { create, Client } from '@open-wa/wa-automate';
const wa = require('@open-wa/wa-automate');
wa.create().then(client => start(client));
function start(client) {
  client.onMessage(message => {
    if (message.body === 'Hi') {
      client.sendText(message.from, '๐Ÿ‘‹ Hello!');
    }
  });
}
After executing create() function, @open-wa/wa-automate will create an instance of WA web. If you are not logged in, it will print a QR code in the terminal. Scan it with your phone and you are ready to go!
@open-wa/wa-automate will remember the session
โ€ฆ

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.

GitHub logo typeorm / typeorm

ORM for TypeScript and JavaScript (ES7, ES6, ES5). 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 (ES5, ES6, ES7, ES8) 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 the most productive way.

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

Sponsors

TypeORM is being sponsored by the following partner: GitAds

Features

  • supports both DataMapper and ActiveRecord (your choice)
  • entities and columns
  • database-specific column types
  • entity manager
  • repositories andโ€ฆ

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.

GitHub logo react-spring / zustand

๐Ÿป Bear necessities for state management in React

Bundle Size Build Status npm version npm

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.

Don't disregard it because it's cute. It has quite the claws, lots of time was spent to deal 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 install zustand

First create a store

Your store is a hook! You can put anything in it: primitives, objects, functions. The set function merges state.

import create from 'zustand'
const useStore = create(set => ({
  bears: 0
  increasePopulation: () => set(state => ({ bears: state.bears + 1 }))
  removeAllBears
โ€ฆ

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.

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

Build Status

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โ€ฆ


10. joi

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

GitHub logo sideway / joi

The most powerful data validation library for JS





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.

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

pic
Editor guide
 

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!

 

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.