loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 18th September 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. React Pro Sidebar

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

GitHub logo azouaoui-med / react-pro-sidebar

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

React Pro Sidebar

npm License Peer Download Stars

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

Demo

Live preview

Screenshot

react-pro-sidebar

Installation

yarn

yarn add react-pro-sidebar

npm

npm install react-pro-sidebar

Usage

import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar'
import 'react-pro-sidebar/dist/css/styles.css'
<ProSidebar&gt
  <Menu iconShape="square">
    <MenuItem icon={<FaGem />}>Dashboard</MenuItem>
    <SubMenu title="Components" icon={<FaHeart />}>
      <MenuItem>Component 1</MenuItem>
      <MenuItem>Component 2</MenuItem>
    </SubMenu>
  </Menu>
</ProSidebar>;

If you are using sass then you can import the styles.scss directly into your scss file

@import '~react-pro-sidebar/dist/scss/styles.scss';

Sidebar Layout

You can take advantage of the sidebar layout components to organize the content of your sidebar

โ€ฆ

2. Conquer of Completion

Make your Vim/Neovim as smart as VSCode.

GitHub logo neoclide / coc.nvim

Intellisense engine for Vim8 & Neovim, full language server protocol support as VSCode

Coc Logo

Make your Vim/Neovim as smart as VSCode.

Software License Actions Doc Gitter


Gif

True snippet and additional text editing support

Why?

Quick Start

Install nodejs >= 10.12:

curl -sL install-node.now.sh/lts | bash

For vim-plug users:

" Use release branch (recommend)
Plug 'neoclide/coc.nvim', {'branch': 'release'}
" Or build from source code by using yarn: https://yarnpkg.com
Plug 'neoclide/coc.nvim', {'do': 'yarn install --frozen-lockfile'}

in your .vimrc or init.vim, then restart Vim and run :PlugInstall.

Checkout Install coc.nvim for more info.

You have to install coc extension or configure language servers for LSP support.

Install extensions like:

:CocInstall
โ€ฆ

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.

GitHub logo microsoft / botframework-sdk

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

Bot Framework

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, Python and Java or using Bot Framework Composer, an open-source, visual authoring canvas for developers and multi-disciplinary teams to design and build conversational experiences with Language Understanding, QnA Maker and sophisticated composition of bot replies (Language Generation).

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

Bot Framework SDK

Quicklinks

| Bot Framework Composer | C# Repo | JS Repo | Python Repo | Java Repo | BF CLI |

Bot Framework SDK v4

The Bot Framework SDK v4โ€ฆ


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.

GitHub logo nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

Build Status jsDelivr Hits

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.

Getting Started

Dist / Build

On production use files (JS and CSS) only from package/ folder, there will be the most stable versions, build/ folder is only for development purpose.

Development Build

Swiper uses gulp to build a development (build) and production (dist) versions.

First you need to have gulp-cli which you should install globally.

$ npm install --global gulp

Then install all dependencies, in repo's root:

$ npm install

And build development version of Swiper:

$ npm run build:dev

The resultโ€ฆ


5. Strapi

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

GitHub logo strapi / strapi

๐Ÿš€ Open source Node.js Headless CMS to easily build customisable APIs

Strapi logo

API creation made simple, secure and fast.

The most advanced open-source headless CMS to build powerful APIs with no effort.


NPM Version Monthly download on NPM Travis Build Status Strapi on Slack


Administration panel


Strapi is a free and open-source headless CMS delivering your content anywhere you need.

  • Keep control over your data. With Strapi, you know where your data is stored, and you keep full control at all times.
  • Self-hosted. You can host and scale Strapi projects the way you want. You can choose any hosting platform you want: AWS, Netlify, Heroku, a VPS, or a dedicated server. You can scale as you grow, 100% independent.
  • Database agnostic. You can choose the database you prefer. Strapi works with SQL & NoSQL databases: MongoDB, PostgreSQL, MySQL, MariaDB, and SQLite.
  • Customizable. You can quickly build your logic by fully customizing APIs, routes, or plugins to fit your needs perfectly.

Getting Started

Read the Getting Started tutorial or follow the steps below:

โ€ฆ

6. Day.js

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

GitHub logo iamkun / dayjs

โฐ Day.js 2KB immutable date library alternative to Moment.js with the same modern API

English | ็ฎ€ไฝ“ไธญๆ–‡ | ๆ—ฅๆœฌ่ชž | Portuguรชs Brasileiro | ํ•œ๊ตญ์–ด | Espaรฑol (Espaรฑa) | ะ ัƒััะบะธะน

Day.js

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


Gzip Size NPM Version Build Status Codecov License
Sauce Test Status

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 for 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 display dates and times.

dayjs
โ€ฆ

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.

GitHub logo surveyjs / survey-library

JavaScript Survey and Form Library

SurveyJS is a JavaScript Survey and Form Library.

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

Build Status Software License Tested with TestCafe Issues Closed issues

Documentation

SurveyJS Library Documentation

Live Examples

SurveyJS Library Live Examples

Survey Creator / Form Builder

Create your Survey or Form now

Survey Creator sources are here

Export Survey to PDF

Export to pdf overview

Export to PDF sources are here

More info about SurveyJS

alt tag

SurveyJS is the most feature-rich Survey / Form Library available at the current moment. It can be easily customized and extended to suit your needs.

Main Features

A lot of question types with a lot of built-in functionalities.


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.

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

Table of Contents

Usage

  1. Download and include the CSS in the <head> of your site:
<link href="dist/hamburgers.css" rel="stylesheet">
  1. 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>
  1. Append the class nameโ€ฆ

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.

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

Buy Me A Coffee

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.

Demo | Tutorial

Contents

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


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.

GitHub logo SoftwareBrothers / admin-bro

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

Admin Bro

codecov Build Status

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.

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

How it looks

Example application

Check out the example application with mongodb and postgres models here:

  • login: test@example.com
  • password: password

https://admin-bro-example-app-staging.herokuapp.com/admin

Getting Started

OpenSource SoftwareBrothers community

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 works fine, but now you wouldโ€ฆ


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
 

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!