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.

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

…

View on GitHub

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.

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…

View on GitHub

3. Recoil

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

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 ·

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

Or if you're using yarn:

yarn add recoil

Or if you're using bower:

bower install --save recoil

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.

View on GitHub

4. Summernote

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

summernote / summernote

Super simple WYSIWYG editor

Summernote

Super simple WYSIWYG Editor.

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

…

View on GitHub

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.

carbon-design-system / carbon

A design system built by IBM

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.

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

…

View on GitHub

6. Ice

A universal framework based on React.js

alibaba / ice

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

English | 简体中文

icejs

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:

See Quick start by AppWorks for more details.

Setup by CLI

We recommend creating…

View on GitHub

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.

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

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
- Native application dependencies compilation (including Yarn support).
- Development dependencies are never included. You don't need to ignore them explicitly.
- Two package.json structure is supported, but you are not forced to use it even if you have native production dependencies.
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…

View on GitHub

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.

blitz-js / blitz

⚡️The Fullstack React Framework — built on Next.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

blitz new myAppName
cd myAppName
blitz dev
View your brand new app at http://localhost:3000

The Foundational Principles

Fullstack & Monolithic
API Not Required
Convention over Configuration
Loose Opinions
Easy to…

View on GitHub

9. Prime React

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

primefaces / primereact

The Most Complete React UI Component Library

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';

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"
}

Styles

The css dependencies are as follows, note that you…

View on GitHub

10. Primer CSS

The CSS implementation of GitHub's Primer Design System

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

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";

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";

Development

See DEVELOP.md for development docs.

Releasing (for GitHub staff)

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

View on GitHub

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.

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

Iain Freestone

1. Umami

mikecao / umami

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

umami

Getting started

Installing from source

Requirements

Get the source code and install packages

Create database tables

Configure umami

Build the application

2. Markdown Here

adam-p / markdown-here

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

Markdown Here

3. Recoil

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 ·

Installation

Contributing

License

4. Summernote

summernote / summernote

Super simple WYSIWYG editor

Summernote

Summernote

Why Summernote?

Installation and dependencies

1. Include JS/CSS

5. Carbon Design System

carbon-design-system / carbon

A design system built by IBM

Carbon Design System

Getting started

6. Ice

alibaba / ice

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

icejs

Features

Quick start

Setup by VS Code

Setup by CLI

7. Electron Builder

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

8. Blitz

blitz-js / blitz

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

The Fullstack React Framework

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

Read the Documentation

Quick Start

Install Blitz

Create a New App

The Foundational Principles

9. Prime React

primefaces / primereact

The Most Complete React UI Component Library

PrimeReact

Download

Import

Dependencies

Styles

10. Primer CSS

primer / css

The CSS design system that powers GitHub

Primer CSS

Documentation

Install

Usage

Development

Releasing (for GitHub staff)

Join Our Newsletter. No Spam, Only the good stuff.

Related