loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 28th August 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. 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 10.13 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

โ€ฆ

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 ยท Node.js CI GitHub license

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

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
โ€ฆ

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 Build 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, and Vue
@carbon/pictograms Pictogram assets. We also offer support
โ€ฆ

6. Ice

A universal framework based on React.js

GitHub logo alibaba / ice

๐Ÿš€ Simple and friendly front-end development system๏ผˆ้ฃžๅ†ฐ๏ผŒ็ฎ€ๅ•่€Œๅ‹ๅฅฝ็š„ๅ‰็ซฏ็ ”ๅ‘ไฝ“็ณป ๏ผ‰https://ice.work/

English | ็ฎ€ไฝ“ไธญๆ–‡

Downloads Version GitHub license PRs Welcome Gitter

A universal framework based on React.js

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
  • ๐Ÿฑ Helpers๏ผšBuilt-in helpers, provide some useful utility functions
  • ๐Ÿฆ 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 Iceworks

We recommend creating a new icejs app using Iceworks:

demo

See Quick start by Iceworks for more details.

Setup

โ€ฆ

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 chat

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

Makes you far more productive than you ever dreamed was possible ๐Ÿ˜‰

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.

Includes everything you need for production apps. Everything end-to-end from the database to the frontend.

Blitz brings back the simplicity and conventions of server-rendered frameworks like Ruby on Rails while preserving everything we love about React and client-side rendering!

Quick Start

You need Node.js 12 or newer

Install Blitz

Run npm install -g blitz

Create a New App

  1. blitz new myAppName
  2. cd myAppName
  3. blitz start
  4. View your baby app at http://localhost:3000

Architecture diagram

Features:
โšก๏ธ Built on Next.js
โšก๏ธ Don't have to build an API for client-side rendering
โšก๏ธ Client-side rendering, Server-side renderingโ€ฆ


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

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

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, classNames package to manage style classes and react-transition-group for animations.

dependencies: {
    "react": "^16.0.0"
    "react-dom": "^16.0.0"
    "react-transition-group": "^2.2.1"
    "classnames": "^2.2.5"
    "primeicons": 
โ€ฆ

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

Migrating

๐Ÿšจ If you currently use the primer or primer--prefixed npm packages, please read the migration guide!

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.

Documentation

The Primer CSS docs site isโ€ฆ


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