An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Technology Review
- Web Designer Wall
- Just Creative
- Joshua Blankenship
- Web Design Ledger
- Specky Boy
- Design Modo
- Web Resource Source
- Android Headlines
- Willems Lab
Help Webnuz
Referal links:
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.
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.gitcd umaminpm installCreate database tables
Umami supports MySQL and PostgresqlCreate a database for your Umami installation and install the tables with the included scripts.
For MySQL:
mysql -u username -p databasename < sql/schema.mysql.sqlFor Postgresql:
psql -h hostname -U username -d databasename -f sql/schema.postgresql.sqlThis 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/mydbmysql://username:mypassword@localhost:3306/mydbThe 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.
adam-p / markdown-here
Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it 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
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 recoilOr if you're using yarn:
yarn add recoilContributing
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.
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" /><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><!-- include summernote css/js--><link5. 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 DesignLanguage as its foundation, the system consists of working code, design toolsand resources, human interface guidelines, and a vibrant community ofcontributors.
Getting started
If you're just getting started, check outcarbon-components. If you're looking for Reactcomponents, 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 thatwe 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
A universal framework based on React.js
Features
- EngineeringOut of the box support for ES6+TypeScriptLessSass CSS Modulesetc
- RoutingPowerful Routing System, supports configured routing and conventions routing
- State managementBuilt-in icestore, lightweight state management solution based on React Hooks
- ConfigModes and Environment Variables configuration in the config file
- LoggerBuilt-in logger solution, it's a flexible abstraction over using
console.logas well - HelpersBuilt-in helpers, provide some useful utility functions
- Application configurationProvide powerful and extensible application configuration
- HooksProvide Hooks APIs such as useModel and useHistory, etc
- Plugin systemThe plugin system provides rich features and allow the community to build reusable solutions
- TypeScriptSupport TypeScript
- ModernSupport SPASSRMPA and Micro-frontend
Quick start
Setup by Iceworks
We recommend creating a new icejs app using Iceworks:
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.
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
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.
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
blitz new myAppNamecd myAppNameblitz start- View your baby app at http://localhost:3000
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.
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 --savenpm install primeicons --saveImport
//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
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/cssUsage
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.
Original Link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-28th-august-2020-55e7
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To