loading...

πŸš€10 Trending projects on GitHub for web developers - 11th 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. 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.

Boilerplate App for SaaS Product

Open source web app that saves you weeks 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.
  • We've used this boilerplate to launch our own SaaS businesses
    • Async - communication tool for small teams of software developers
    • Builder Book - books that teach you to build web apps from scratch

Live demo:

Contents

Features

  • Server-side rendering for fast initial load and SEO.
  • User authentication with Google, cookie, and session.
  • Production-ready Express server with compression, parser, and helmet.
  • Transactional emails (AWS SES): welcome, team invitation, and payment.
  • Adding email addresses to newsletter lists (Mailchimp): new users, paying users.
  • File upload, load, and deletion (…

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.

Built with jQuery and Bootstrap 4.

Two panel Live Demo

One panel Live Demo

Slack Discord 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-->
<script src="js/popper.min.js"></script>
…

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

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

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
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', {})

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>
let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})

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>
let
…

6. Webamp

A reimplementation of Winamp 2.9 in HTML5 and JavaScript.

GitHub logo captbaritone / webamp

Winamp 2 reimplemented for the browser

Tests Discord

Webamp

A reimplementation of Winamp 2.9 in HTML5 and JavaScript.

As seen on TechCrunch, Motherboard, Gizmodo, Hacker News (1, 2, 3, 4), and elsewhere.

Give it a try!

Screenshot of Webamp

Works in modern versions of Edge, Firefox, Safari and Chrome. IE is not supported.

Features

Check out this Twitter thread for an illustrated list of features: https://twitter.com/captbaritone/status/961274714013319168

Use Webamp in your own project

Its possible to use Webamp as a media player on your own website. In fact, the Internet Archive offers it as an optional player for all of their archived audio tracks. Read more.

For examples of how to add Webamp to your projects, check out out examples/ directory.

See the usage documentation for more detailed information.

About This Repository

This repository contains a number of different things:

  1. packages/webamp: The code for the Webamp NPM module
  2. packages/webamp/demo…

7. urql

A highly customisable and versatile GraphQL client

GitHub logo FormidableLabs / urql

The highly customizable and versatile GraphQL client.

urql

A highly customisable and versatile GraphQL client

Test Status Maintenance Status Weekly downloads Visit docs Spectrum badge

✨ 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

πŸ“ƒ 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 help 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

Using yarn

yarn
…

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.

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

pic
Editor guide