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
Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus
React Pro Sidebar
Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus
Demo
Screenshot
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>
<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…
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 VSCode.
True snippet and additional text editing support
Why?
-
🚀 Fast: instant increment completion, increment buffer sync using buffer update events. -
💎 Reliable: typed language, tested with CI. -
🌟 Featured: full LSP support -
❤️ Flexible: configured like VSCode, extensions work like in VSCode
Quick Start
Install nodejs >= 12.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', {'branch': 'master', '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…
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, 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.
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.
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.
Sponsors
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…
5. Strapi
API creation made simple, secure and fast. The most advanced open-source headless CMS to build powerful APIs with no effort.
API creation made simple, secure and fast.
The most advanced open-source headless CMS to build powerful APIs with no effort.
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, Render, 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…
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
English | 简体中文 | 日本語 | Português Brasileiro | 한국어 | Español (España) | Русский
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 for more details, API, and other docs on day.js.org website.
Installation
npm install dayjs --save
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.
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 Angular, jQuery, knockout, react and vue.
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 sources are here
More info about SurveyJS
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.
- Text Question
- Radigroup Question
- Dropdown Question
- Checkboxes Question
- Boolean Question
- Matrix Question
- Matrix Rubric Question
- Matrix Dropdown Question
- Matrix Dynamic Question
- Multiple Text Question
- Rating Question
- Ranking Question
- Comment Question
- Html Question
- Files uploading Question
- Panel Container
- …
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.
Table of Contents
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…
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
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.
Contents
- Download/Install
- How To Use
- What's Included?
- Browser Support
- Using Grunt for Development
- Using Sass/LESS for Development
- Contribute to Hover.css
- Licenses
- Hire Ian Lunn
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.
SoftwareBrothers / adminjs
AdminBro is an admin panel for apps written in node.js
AdminJS
AdminJS 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 AdminJS 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
Getting Started
- Check out the documentation
- Try the live demo as mentioned above
OpenSource SoftwareBrothers community
- Join the community to get help and be inspired.
- subscribe to our newsletter
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 like…
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)
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!
Searching for literary analysis? We can help you!