DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

πŸš€10 Trending projects on GitHub for web developers - 11th September 2020

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

1. Boilerplate App for SaaS Product

Open source web app that saves you weeks of work when building your own SaaS product.

GitHub logo async-labs / saas

Build your own SaaS business with SaaS boilerplate. Productive stack: React, Material-UI, Next, MobX, WebSockets, Express, Node, Mongoose, MongoDB. Written with TypeScript.

SaaS Boilerplate

Open source web app that saves you many days of work when building your own SaaS product. The boilerplate comes with many basic SaaS features (see Features below) so that you can focus on features that differentiate your product.

If you want to learn how to build this project from scratch, check out our book: https://builderbook.org/book

The open source project is located in the saas folder. If you purchased our book, codebases for each of the book's chapters are located in the book folder.

Live demo:

Showcase

Check out projects built with the help of this open source app. Feel free to add your own project by creating a pull request.

  • Retaino by Earl Lee: Save, annotate, review, and share great web content. Receive smart email digests to retain key information.
  • Builder Book: Open source web app to publish documentation or books…

2. react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React

GitHub logo atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React

react beautiful dnd logo

react-beautiful-dnd (rbd)

Beautiful and accessible drag and drop for lists with React

CircleCI branch npm

quote application example

Play with this example if you want!

Core characteristics

  • Beautiful and natural movement of items πŸ’
  • Accessible: powerful keyboard and screen reader support ♿️
  • Extremely performant πŸš€
  • Clean and powerful api which is simple to get started with
  • Plays extremely well with standard browser interactions
  • Unopinionated styling
  • No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Get started πŸ‘©β€πŸ«

We have created a free course on egghead.io πŸ₯š to help you get started with react-beautiful-dnd as quickly as possible.

course-logo

Currently supported feature set βœ…

  • Vertical lists ↕
  • Horizontal lists ↔
  • Movement between lists (β–€ ↔ β–€)
  • Virtual list support πŸ‘Ύ - unlocking 10,000 items @ 60fps
  • Combining items
  • Mouse 🐭, keyboard πŸŽΉβ™ΏοΈ and touch πŸ‘‰πŸ“± (mobile, tablet and so on) support
  • Multi drag support
  • Incredible screen reader support ♿️ -…

3. VvvebJs

Drag and drop website builder javascript library. By default the editor comes with Bootstrap 4 and Widgets components and can be extended with any kind of components and inputs.

GitHub logo givanz / VvvebJs

Drag and drop website builder javascript library.

VvvebJs

Drag and drop website builder javascript library.

For a full featured CMS using VvvebJs check Vvveb CMS

Built with jQuery and Bootstrap 4.

Two panel Live Demo

One panel Live Demo

npm

Using Startbootstrap landing page for demo page and Bootstrap 4 components.

Features

  • Components and blocks/snippets drag and drop.
  • Undo/Redo operations.
  • One or two panels interface.
  • File manager and component hierarchy navigation.
  • Add new page.
  • Live code editor.
  • Image upload with example php script included.
  • Page download or export html or save page on server with example php script included.
  • Components/Blocks list search.
  • Bootstrap 4 components.
  • Youtube, Google maps, Charts.js etc widgets.

By default the editor comes with Bootstrap 4 and Widgets components and can be extended with any kind of components and inputs.

Usage

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
…
Enter fullscreen mode Exit fullscreen mode

4. eleventy

A simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML.

GitHub logo 11ty / eleventy

A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.

eleventy Logo

eleventy πŸ•šβš‘οΈ

A simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML.

Works with HTML, Markdown, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, and JavaScript Template Literals.

➑ Documentation

npm Version GitHub issues code style: prettier npm Downloads

Installation

npm install @11ty/eleventy --save-dev

Read our Getting Started guide.

Tests

npm run test

Major Roadmapped Features


5. better-scroll

BetterScroll is a plugin which is aimed at solving scrolling circumstances on the mobile side (PC supported already). The core is inspired by the implementation of iscroll, so the APIs of BetterScroll are compatible with iscroll on the whole. What's more, BetterScroll also extends some features and optimizes for performance based on iscroll.

GitHub logo ustbhuangyi / better-scroll

πŸ“œ inspired by iscroll, and it supports more features and has a better scroll perfermance

better-scroll

npm version downloads Build Status Package Quality codecov.io Gitpod Ready-to-Code

δΈ­ζ–‡ζ–‡ζ‘£

1.x Docs

2.x Docs

2.x Demo

Note: 1.x is not maintained. please migrate your version as soon as possible

Install

npm install better-scroll -S # install 2.x,with full-featured plugin.
npm install @better-scroll/core # only CoreScroll
Enter fullscreen mode Exit fullscreen mode
import BetterScroll from 'better-scroll'

let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})

import BScroll from '@better-scroll/core'

let bs = new BScroll('.wrapper', {})
Enter fullscreen mode Exit fullscreen mode

CDN

BetterScroll with full-featured plugin.

<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>

<!-- minify -->
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
Enter fullscreen mode Exit fullscreen mode
let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})
Enter fullscreen mode Exit fullscreen mode

Only CoreScroll

<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>

<!-- minify -->
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>
Enter fullscreen mode Exit fullscreen mode
let
…
Enter fullscreen mode Exit fullscreen mode

6. Webamp

A reimplementation of Winamp 2.9 in HTML5 and JavaScript.

GitHub logo captbaritone / webamp

Winamp 2 reimplemented for the browser

gzip size Tests Discord

Webamp

A reimplementation of Winamp 2.9 in HTML5 and JavaScript with full skin support As seen on TechCrunch, Motherboard, Gizmodo, Hacker News (1, 2, 3, 4), and elsewhere.

Screenshot of Webamp

Check out this Twitter thread for an illustrated list of features. Works in modern versions of Edge, Firefox, Safari and Chrome. IE is not supported.

Add Webamp to Your Site

Here is the most minimal example of adding Webamp to a page:

<div id="app"></div>
<script src="https://unpkg.com/webamp"></script>
<script>
    const app = document.getElementById("app")
    const webamp = new Webamp();
    webamp.renderWhenReady(app);
</script>
Enter fullscreen mode Exit fullscreen mode

For more examples, including how to add audio files, check out examples/ directory and the API documentation.

About This

…

7. urql

A highly customisable and versatile GraphQL client

GitHub logo FormidableLabs / urql

The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.

urql

A highly customisable and versatile GraphQL client

CI Status Maintenance Status Weekly downloads Visit docs GitHub Discussions: Chat With Us

✨ Features

urql is a GraphQL client that exposes a set of helpers for several frameworks. It's built to be highly customisable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients.

While GraphQL is an elegant protocol and schema language, client libraries today typically come with large API footprints. We aim to create something more lightweight instead.

Installation

yarn add urql graphql
# or
npm install --save urql graphql
Enter fullscreen mode Exit fullscreen mode

πŸ“ƒ Documentation

The documentation contains everything you need to know about urql…





8. Reactjs-popup

Reactjs-popup is a simple react popup component that help you create simple and complex Modals, tooltips and Menus for your next React App.

GitHub logo yjose / reactjs-popup

React Popup Component - Modals,Tooltips and Menusβ€Šβ€”β€Š All inΒ one

Reactjs-popup

Build Status npm bundle size version downloads

MIT License All Contributors PRs Welcome Code of Conduct

Watch on GitHub Star on GitHub Tweet

Reactjs-popup is a simple react popup component that helps you create simple and complex Modals, tooltips, and Menus for your next React App.

You should consider using reactjs-popup for those couple of reasons :

  • βœ… Modal, Tooltip, MenuΒ : All in one library πŸ‹οΈ
  • βœ… Very tiny library (3kb) ⚑️
  • βœ… Fully accessible
  • βœ… Function as children pattern to take control over your popup anywhere in your code πŸ’ͺ
  • βœ… Easy to use πŸš€
  • βœ… TypeScript Support πŸ‘Œ
  • βœ… IE Support. πŸš€
  • βœ… Full style customization πŸ‘Œ (js, CSS, styled-components)
  • βœ… Support for controlled Modals & Tooltips
  • βœ… Default & Custom Animations

Demo

This is a simple Demo to demonstrate how you can create Modals, Tooltips, Menus using reactjs-popup.

Live Demo

 reactjs popup demo

Installing / Getting started

This package is available in NPM repository as reactjs-popup. It will work correctly with all popular bundlers.

npm install reactjs-popup --save
Enter fullscreen mode Exit fullscreen mode

Using yarn

…
Enter fullscreen mode Exit fullscreen mode

9. Docker Curriculum

Learn to build and deploy your distributed applications easily to the cloud with Docker

GitHub logo prakhar1989 / docker-curriculum

🐬 A comprehensive tutorial on getting started with Docker!

Docker Curriculum

Learn to build and deploy your distributed applications easily to the cloud with Docker

Follow the curriculum on docker-curriculum.com





10. Spectre.css

Spectre.css is a lightweight, responsive and modern CSS framework.

GitHub logo picturepan2 / spectre

Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css

Reviewed by Hound

Spectre.css is a lightweight, responsive and modern CSS framework.

  • Lightweight (~10KB gzipped) starting point for your projects
  • Flexbox-based, responsive and mobile-friendly layout
  • Elegantly designed and developed elements and components

Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.

Spectre.css is completely free to use. If you enjoy it, please consider donating via Paypal or via Patreon for the further development. β™₯

Getting started

There are 5 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.

Install manually

Download the compiled and minified Spectre CSS files. And include spectre.css located in /docs/dist in your website or Web app <head> part.

<link rel="stylesheet" href="spectre.min.css">

…

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.

Discussion (0)