Iain Freestone

Posted on Sep 18, 2020 • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 18th September 2020

#javascript #css #webdev #react

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

1. React Pro Sidebar

Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus

azouaoui-med / react-pro-sidebar

React Pro Sidebar provides a set of components for creating high level and customizable side navigation

React Pro Sidebar

React Pro Sidebar provides a set of components for creating high level and customizable side navigation

Old versions

v0.x

Live Preview

Screenshot

Installation

yarn

yarn add react-pro-sidebar

npm

npm install react-pro-sidebar

Usage

import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

<Sidebar>
  <Menu>
    <SubMenu label="Charts">
      <MenuItem> Pie charts </MenuItem>
      <MenuItem> Line charts </MenuItem>
    </SubMenu>
    <MenuItem> Documentation </MenuItem>
    <MenuItem> Calendar </MenuItem>
  </Menu>
</Sidebar>;

Using React Router

You can make use of the component prop to integrate React Router link

Example Usage

import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
import { Link } from 'react-router-dom';
<Sidebar>
  <Menu

…

View on GitHub

2. Conquer of Completion

Make your Vim/Neovim as smart as VSCode.

neoclide / coc.nvim

Nodejs extension host for vim & neovim, load extensions like VSCode and host language servers.

Make your Vim/Neovim as smart as VS Code

Custom popup menu with snippet support

Why?

🚀 Fast: separated NodeJS process that does not slow down Vim most of the time.
💎 Reliable: typed language, tested with CI.
🌟 Featured: all LSP 3.16 features are supported, see :h coc-lsp.
❤️ Flexible: configured like VS Code, Coc extensions function similarly to VS Code extensions

Quick Start

Make sure use Vim >= 9.0.0438 or Neovim >= 0.8.0.

Install nodejs >= 16.18.0:

curl -sL install-node.vercel.app/lts | bash

For vim-plug users:

" Use release branch (recommended)
Plug 'neoclide/coc.nvim', {'branch': 'release'}

" Or build from source code by using npm
Plug 'neoclide/coc.nvim', {'branch': 'master', 'do': 'npm ci'}

in your .vimrc or init.vim, then…

View on GitHub

3. Bot Framework SDK

Bot Framework provides the most comprehensive experience for building conversation applications.With the Bot Framework SDK, developers can build bots that converse free-form or with guided interactions including using simple text or rich cards that contain text, images, and action buttons.

microsoft / botframework-sdk

Bot Framework provides the most comprehensive experience for building conversation applications.

What's new with Bot Framework?

Bot Framework provides the most comprehensive experience for building conversation applications.

With the Bot Framework SDK, developers can build bots that converse free-form or with guided interactions including using simple text or rich cards that contain text, images, and action buttons.

Developers can model and build sophisticated conversation using their favorite programming languages including C#, JS, and Python for developers and multi-disciplinary teams to design and build conversational experiences.

Checkout the Bot Framework ecosystem section to learn more about other tooling and services related to the Bot Framework SDK.

Quicklinks

Bot Framework SDK v4

The Bot Framework SDK v4 is an open source SDK that enable developers to model and build sophisticated conversation using their favorite programming language.

C#	JS	Python
Stable Release	packages	packages	packages
Docs	docs	docs	docs
Samples

…

View on GitHub

4. Swiper

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos

Swiper

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Features

Tree-shakeable: Only modules you use will be imported into your app's bundle.
Mobile-friendly: It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Library Agnostic: Swiper doesn't require any JavaScript libraries like jQuery, which makes Swiper much smaller and faster. It can be safely used with libraries such as jQuery, Zepto, jQuery Mobile, etc.
1:1 Touch movement: By default, Swiper provides 1:1 touch movement interaction, but this ratio can…

View on GitHub

5. Strapi

API creation made simple, secure and fast. The most advanced open-source headless CMS to build powerful APIs with no effort.

strapi / strapi

🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.

Open-source headless CMS, self-hosted or Cloud you’re in control.

The leading open-source headless CMS, 100% JavaScript/TypeScript, flexible and fully customizable.

Cloud · Try live demo

Strapi Community Edition is a free and open-source headless CMS enabling you to manage any content, anywhere.

Self-hosted or Cloud: You can host and scale Strapi projects the way you want. You can save time by deploying to Strapi Cloud or deploy to the hosting platform you want**: AWS, Azure, Google Cloud, DigitalOcean.
Modern Admin Panel: Elegant, entirely customizable and a fully extensible admin panel.
Multi-database support: You can choose the database you prefer: PostgreSQL, MySQL, MariaDB, and SQLite.
Customizable: You can quickly build your logic by fully customizing APIs, routes, or plugins to fit your needs perfectly.
Blazing Fast and Robust: Built on top of Node.js and TypeScript, Strapi delivers reliable and solid performance.
Front-end Agnostic: Use any…

View on GitHub

6. Day.js

Fast 2kB alternative to Moment.js with the same modern API

iamkun / dayjs

⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

Fast 2kB alternative to Moment.js with the same modern API

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

dayjs().startOf('month').add(1, 'day').set('year', 2018).format('YYYY-MM-DD HH:mm:ss');

🕒 Familiar Moment.js API & patterns
💪 Immutable
🔥 Chainable
🌐 I18n support
📦 2kb mini library
👫 All browsers supported

Getting Started

Documentation

You can find more details, API, and other docs on day.js.org website.

Installation

npm install dayjs --save

📚Installation Guide

API

It's easy to use Day.js APIs to parse, validate, manipulate, and…

View on GitHub

7. SurveyJS

SurveyJS is a modern way to add surveys and forms to your website. It has versions for angular2+, jQuery, knockout, react and vue.

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.

SurveyJS Form Library

SurveyJS Form Library is a free to use MIT-licensed client-side component that allows you to render dynamic JSON-based forms in any JavaScript application, collect responses, and send all form submission data to a database of your choice. You can use it for multi-page forms of any length and complexity, pop-up surveys, quizzes, scored surveys, calculator forms, and more. SurveyJS Form Library has native support for React, Angular, Vue, and Knockout; jQuery is supported via a wrapper over the Knockout version. The library interacts with the server using JSON objects—for both form metadata, also known as form JSON schemas, and results. The SurveyJS product family also includes a robust form builder library that automatically generates form configuration files in JSON format. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.

Documentation · Roadmap · View Demos · Generate JSON…

View on GitHub

8. Hamburgers

Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

jonsuh / hamburgers

Tasty CSS-animated Hamburgers

Hamburgers

Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

Usage

Download and include the CSS in the <head> of your site:

<link href="dist/hamburgers.css" rel="stylesheet">

Add the base hamburger markup:

<button class="hamburger" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

You can use <div>s if you insist, but they’re not accessible as a menu button.

<div class="hamburger">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

Append the class name…

View on GitHub

9. Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Hover.css

Demo | Tutorial

Download/Install

NPM: npm install hover.css --save
Bower: bower install hover --save
Download Zip

How To Use

Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd…

View on GitHub

10. Admin Bro

AdminBro is An automatic admin interface which can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products or whatever else your application uses), and AdminBro generates UI which allows you (or other trusted users) to manage content.

SoftwareBrothers / adminjs

AdminJS is an admin panel for apps written in node.js

AdminJS

AdminJS is an automatic admin interface that can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products or whatever else your application uses), and AdminJS generates UI which allows you (or other trusted users) to manage content.

Inspired by: django admin, rails admin and active admin.

Example application

Check out our demo application:

Login: admin@example.com
Password: password

https://demo.adminjs.co

You can also have a look at our customized AdminJS dashboard which shows various library statistics:

https://stats.adminjs.co

Getting started

Check out the documentation
Try the live demo as mentioned above

Our open source community on Discord

Join the community to get help and be inspired.

What kind of problems it solves

So you have a working service built in Node.js. It uses (for example) Hapi.js for rendering a couple of REST routes and mongoose as the connector to the database.

Everything…

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

Juan F Gonzalez • Sep 19 '20

Great resources as always Iain! I was aware of CoC and Strapi and have used Hover.css it-s definitely a great library. Gotta check the other resources as well
Thanks!

sophiebennett543 • Feb 22 '22

Searching for literary analysis? We can help you!

1. React Pro Sidebar

azouaoui-med / react-pro-sidebar

React Pro Sidebar provides a set of components for creating high level and customizable side navigation

React Pro Sidebar

Old versions

Live Preview

Screenshot

Installation

yarn

npm

Usage

Using React Router

2. Conquer of Completion

neoclide / coc.nvim

Nodejs extension host for vim & neovim, load extensions like VSCode and host language servers.

Why?

Quick Start

3. Bot Framework SDK

microsoft / botframework-sdk

Bot Framework provides the most comprehensive experience for building conversation applications.

What's new with Bot Framework?

Quicklinks

Bot Framework SDK v4

4. Swiper

nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

Swiper

Sponsors

Features

5. Strapi

strapi / strapi

🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.

Open-source headless CMS, self-hosted or Cloud you’re in control.

6. Day.js

iamkun / dayjs

⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

Getting Started

Documentation

Installation

API

7. SurveyJS

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.

SurveyJS Form Library

8. Hamburgers

jonsuh / hamburgers

Tasty CSS-animated Hamburgers

Hamburgers

Table of Contents

Usage

9. Hover.css

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Hover.css

Contents

Download/Install

How To Use

10. Admin Bro

SoftwareBrothers / adminjs

AdminJS is an admin panel for apps written in node.js

AdminJS

Example application

Getting started

Our open source community on Discord

What kind of problems it solves

Read next

Implementing Auth in .NET WebApi & SPAs: Why is it still so painful?

Typing App (docx)

Day 4: Enhancing UX with a Custom Cursor Using GSAP 🚀🎨

¡Hola Wagtail!