DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 28th August 2020

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

1. Umami

Umami is a simple, fast, website analytics alternative to Google Analytics.

GitHub logo mikecao / umami

Umami is a simple, fast, website analytics alternative to Google Analytics.

umami

Umami is a simple, fast, website analytics alternative to Google Analytics.

Getting started

A detailed getting started guide can be found at https://umami.is/docs/

Installing from source

Requirements

  • A server with Node.js 12 or newer
  • A database (MySQL or Postgresql)

Get the source code and install packages

git clone https://github.com/mikecao/umami.git
cd umami
npm install

Create database tables

Umami supports MySQL and Postgresql Create a database for your Umami installation and install the tables with the included scripts.

For MySQL:

mysql -u username -p databasename < sql/schema.mysql.sql

For Postgresql:

psql -h hostname -U username -d databasename -f sql/schema.postgresql.sql

This will also create a login account with username admin and password umami.

Configure umami

Create an .env file with the following

DATABASE_URL=(connection url)
HASH_SALT=(any random string)

The connection url is in the following format:

postgresql://username:mypassword@localhost:5432/mydb
mysql://username:mypassword@localhost:3306/mydb

The HASH_SALT is used to generate unique values for your installation.

Build the application

Enter fullscreen mode Exit fullscreen mode

2. Markdown Here

Markdown Here is a Google Chrome, Firefox, Safari, Opera, and Thunderbird extension that lets you write email in Markdown and render them before sending.

GitHub logo adam-p / markdown-here

Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending.

Markdown Here logo Markdown Here

Visit the website.
Get it for Chrome.
Get it for Firefox.
Get it for Safari.
Get it for Thunderbird and Postbox.
Get it for Opera.
Discuss it and ask questions in the Google Group.

Markdown Here is a Google Chrome, Firefox, Safari, Opera, and Thunderbird extension that lets you write email in Markdown and render them before sending. It also supports syntax highlighting (just specify the language in a fenced code block).

Writing email with code in it is pretty tedious. Writing Markdown with code in it is easy. I found myself writing email in Markdown in the Github in-browser editor, then copying the preview into email. This is a pretty absurd workflow, so I decided create a tool to write and render Markdown right in the email.

To discover what can be done with Markdown in Markdown Here, check out the Markdown Here Cheatsheet


3. Recoil

Recoil is an experimental set of utilities for state management with React.

GitHub logo facebookexperimental / Recoil

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · NPM Version Node.js CI GitHub license Follow on Twitter

Recoil is an experimental set of utilities for state management with React.

Please see the website: https://recoiljs.org

Installation

The Recoil package lives in npm. To install the latest stable version, run the following command:

npm install recoil
Enter fullscreen mode Exit fullscreen mode

Or if you're using yarn:

yarn add recoil
Enter fullscreen mode Exit fullscreen mode

Or if you're using bower:

bower install --save recoil
Enter fullscreen mode Exit fullscreen mode

Contributing

Development of Recoil happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving Recoil.

License

Recoil is MIT licensed.





4. Summernote

Super simple WYSIWYG Editor. Summernote is a JavaScript library that helps you create WYSIWYG editors online.

GitHub logo summernote / summernote

Super simple WYSIWYG editor

Summernote

Super simple WYSIWYG Editor.

Build Status npm version Coverage Status

Summernote

Summernote is a JavaScript library that helps you create WYSIWYG editors online.

Home page: https://summernote.org

Why Summernote?

Summernote has a few special features:

  • Paste images from clipboard
  • Saves images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all
  • Simple UI
  • Interactive WYSIWYG editing
  • Handy integration with server
  • Supports Bootstrap 3 and 4 integrities
  • Lots of plugins and connectors provided together

Installation and dependencies

Summernote is built on jQuery.

1. Include JS/CSS

Include the following code in the <head> tag of your HTML:

<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" /&gt
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js-->
<link
Enter fullscreen mode Exit fullscreen mode

5. Carbon Design System

Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

GitHub logo carbon-design-system / carbon

A design system built by IBM

Carbon Design System

Carbon Design System

Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Carbon is released under the Apache-2.0 license CI workflow status Maintained with Lerna PRs welcome Chat with us on Gitter

Getting started

If you're just getting started, check out carbon-components. If you're looking for React components, take a look at carbon-components-react.

We also have community-contributed components for the following technologies:

If you're trying to find something specific, here's a full list of packages that we support!

Package name Description
carbon-components Component styles and Vanilla JavaScript
carbon-components-react React components
@carbon/elements IBM Design Language elements like colors, type, iconography, and more
@carbon/colors Work with IBM Design Language colors
@carbon/grid Build layouts using the new 16 column grid system
@carbon/icons Iconography assets. We also offer support in: React, Angular, Vue, and Svelte
@carbon/pictograms Pictogram assets. We

6. Ice

A universal framework based on React.js

GitHub logo alibaba / ice

🚀 The Progressive Framework Based On React(基于 React 的渐进式研发框架)https://ice.work

English | 简体中文

icejs

Downloads Version GitHub license PRs Welcome Gitter

A universal framework based on React.js, Docs.

Features

  • 🐒 Engineering:Out of the box support for ES6+、TypeScript、Less、Sass、 CSS Modules,etc
  • 🦊 Routing:Powerful Routing System, supports configured routing and conventions routing
  • 🐯 State management:Built-in icestore, lightweight state management solution based on React Hooks
  • 🐦 Config:Modes and Environment Variables configuration in the config file
  • 🐶 Logger:Built-in logger solution, it's a flexible abstraction over using console.log as well
  • 🦁 Application configuration:Provide powerful and extensible application configuration
  • 🐴 Hooks:Provide Hooks APIs such as useModel and useHistory, etc
  • 🐌 Plugin system:The plugin system provides rich features and allow the community to build reusable solutions
  • 🐘 TypeScript:Support TypeScript
  • 🐂 Modern:Support SPA、SSR、MPA and Micro-frontend

Quick start

Setup by VS Code

We recommend creating a new icejs app using AppWorks:

demo

See Quick start by AppWorks for more details.

Setup by CLI

We recommend creating…


7. Electron Builder

A complete solution to package and build a ready for distribution Electron, Proton Native app for macOS, Windows and Linux with “auto update” support out of the box.

GitHub logo electron-userland / electron-builder

A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box

electron-builder npm version downloads per month donate project discussions

A complete solution to package and build a ready for distribution Electron, Proton Native app for macOS, Windows and Linux with “auto update” support out of the box.

See documentation on electron.build.

  • NPM packages management
  • Code Signing on a CI server or development machine.
  • Auto Update ready application packaging.
  • Numerous target formats
    • All platforms: 7z, zip, tar.xz, tar.7z, tar.lz, tar.gz, tar.bz2, dir (unpacked directory).
    • macOS: dmg, pkg, mas.
    • Linux: AppImage, snap, debian package (deb), rpm, freebsd, pacman, p5p, apk.
    • Windows: nsis (Installer), nsis-web (Web installer), portable

8. Blitz

The Fullstack React Framework. Includes everything you need for production apps. Everything end-to-end from the database to the frontend. Brings back the simplicity and conventions of frameworks like Ruby on Rails while preserving everything we love about React.

GitHub logo blitz-js / blitz

⚡️The Fullstack React Framework — built on Next.js

Blitz.js

The Fullstack React Framework

"Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails

Read the Documentation

“Zero-API” data layer lets you import server code directly into your React components instead of having to manually add API endpoints and do client-side fetching and caching.

New Blitz apps come with all the boring stuff already set up for you! Like ESLint, Prettier, Jest, user sign up, log in, and password reset.

Provides helpful defaults and conventions for things like routing, file structure, and authentication while also being extremely flexible.

Quick Start

You need Node.js 12 or newer

Install Blitz

Run npm install -g blitz or yarn global add blitz

You can alternatively use npx

Create a New App

  1. blitz new myAppName
  2. cd myAppName
  3. blitz dev
  4. View your brand new app at http://localhost:3000
Bytes Newsletter

The Foundational Principles

  1. Fullstack & Monolithic
  2. API Not Required
  3. Convention over Configuration
  4. Loose Opinions
  5. Easy to…

9. Prime React

Build Better Apps with React. The ultimate collection of design-agnostic, flexible and accessible React UI Components.

GitHub logo primefaces / primereact

The Most Complete React UI Component Library

License: MIT npm version Discord Chat

PrimeReact Hero

PrimeReact

PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation.

Download

PrimeReact is available at npm, if you have an existing application run the following command to download it to your project.

npm install primereact --save
npm install primeicons --save

Import

//import {ComponentName} from 'primereact/{componentname}';
import {Dialog} from 'primereact/dialog';
import {Accordion,AccordionTab} from 'primereact/accordion';
Enter fullscreen mode Exit fullscreen mode

Dependencies

Majority of PrimeReact components (95%) are native and there are some exceptions having 3rd party dependencies such as Google Maps for GMap.

In addition, components require PrimeIcons for icons and react-transition-group for animations.

dependencies: {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-transition-group": "^4.4.1",
    "primeicons": "^4.1.0"
}
Enter fullscreen mode Exit fullscreen mode

Styles

The css dependencies are as follows, note that you…


10. Primer CSS

The CSS implementation of GitHub's Primer Design System

GitHub logo primer / css

The CSS design system that powers GitHub

Primer CSS

The CSS implementation of GitHub's Primer Design System

Documentation

Our documentation site lives at primer.style/css. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.

Install

This repository is distributed with npm. After installing npm, you can install @primer/css with this command:

npm install --save @primer
/css
Enter fullscreen mode Exit fullscreen mode

Usage

The included source files are written in Sass using SCSS syntax. After installing with npm, you can add your project's node_modules directory to your Sass include paths (AKA load paths in Ruby), then import it like this:

@import "@primer
/css/index.scss";
Enter fullscreen mode Exit fullscreen mode

You can import individual Primer modules directly from the @primer/css package:

@import "@primer
/css/core/index.scss";
@import "@primer
/css/product/index.scss";
@import "@primer
/css/marketing/index.scss";
Enter fullscreen mode Exit fullscreen mode

Development

See DEVELOP.md for development docs.

Releasing (for GitHub staff)

You can find docs about our release process in RELEASING.md


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

Collapse
 
glapoyeu profile image
Genaro Lapoyeu

Nice