DEV Community

Iain Freestone
Iain Freestone

Posted on • Updated on • Originally published at iainfreestone.com

๐Ÿš€10 Trending projects on GitHub for web developers - 6th August 2021

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

1. Radix Primitives

An open-source UI component library for building high-quality, accessible design systems and web apps.

GitHub logo radix-ui / primitives

An open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @modulz.

Radix UI hero image

Radix Primitives

An open-source UI component library for building high-quality, accessible design systems and web apps.

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.


Documentation

For full documentation, visit radix-ui.com/docs/primitives.

Contributing

Please follow our contributing guidelines.

Authors

Contributors


Community

  • Pedro Duarte (@peduarte) - Modulz

  • Colm Tuite (@colmtuite) - Modulz

  • Discord - To get involved with the Radix community, ask questions and share tips.

  • Twitter - To receive updates, announcements, blog posts, and general Radixโ€ฆ


2. superset-ui

Collection of packages that power the Apache Superset UI, and can be used to craft custom data applications that leverage a Superset backend.

GitHub logo apache-superset / superset-ui

Apache Superset UI packages

@superset-ui

Codecov branch Build Status David

Collection of packages that power the Apache Superset UI, and can be used to craft custom data applications that leverage a Superset backend ๐Ÿ“ˆ

Demo

Most recent release: https://apache-superset.github.io/superset-ui/

Current master: https://superset-ui.now.sh/

Packages

Core packages

Chart plugin packages

@superset-ui/legacy-* packages are extracted from the classic Apache Superset and converted into plugins. These packages are extracted with minimal changes (almost as-is). They also depend on legacy API (viz.py) to function.

@superset-ui/plugin-* packages are newer and higher quality in general. A key difference that they do not depend on viz.py (which contain visualization-specific python code) and interface with /api/v1/query/, a new generic endpoint instead meant to serve all visualizations, instead. Also should be written in Typescript.

Package Version
โ€ฆ

3. Next.js Subscription Payments Starter

Clone, deploy, and fully customize a SaaS subscription application with Next.js.

GitHub logo vercel / nextjs-subscription-payments

Clone, deploy, and fully customize a SaaS subscription application with Next.js.

Next.js Subscription Payments Starter

The all-in-one starter kit for high-performance SaaS applications.

Features

Demo

Screenshot of demo

Architecture

Architecture diagram

Deploy with Vercel

The Vercel deployment will guide you through creating a Supabase account and project. After installing the Supabase integration, you'll need to configure Stripe with a few simple steps.

Note: We're working on our Stripe integration. We've documented the required steps below under "Configure Stripe" until the integration is ready.

To get started, click the "Deploy with Vercel" button below.

Deploy with Vercel

Screenshot of Vercel deployment

Once the project has deployed, continue with the configuration steps below.

The initial build will fail due to missing Stripe environment variables. After configuring Stripe, redeploy the application.

Configure Supabase Auth

[Optional] -

โ€ฆ

4. Markdown PDF

Node module that converts Markdown files to PDFs.

GitHub logo alanshaw / markdown-pdf

๐Ÿ“„ Markdown to PDF converter

markdown-pdf Build Status Dependency Status Coverage Status

Node module that converts Markdown files to PDFs.

The PDF looks great because it is styled by HTML5 Boilerplate. What? - Yes! Your Markdown is first converted to HTML, then pushed into the HTML5 Boilerplate index.html. Phantomjs renders the page and saves it to a PDF. You can even customise the style of the PDF by passing an optional path to your CSS and you can pre-process your markdown file before it is converted to a PDF by passing in a pre-processing function, for templating.

Install

npm install -g markdown-pdf --ignore-scripts
Enter fullscreen mode Exit fullscreen mode

Note: elevated (sudo) permissions may be needed for npm install -g

Usage

Usage: markdown-pdf [options] <markdown-file-path&gt
Options
  -h, --help                             output usage information
  -V, --version                          output the version number
  <markdown-file-path>                   Path of the markdown file to convert
  -c, --cwd [path]                       Current working directory
  -p, --phantom-path [path]              Path to phantom binary
  -h, --runnings-path [path]             Path to runnings (header, footer)
โ€ฆ

5. Bumbag

Build accessible & themeable React applications with your Bumbag

GitHub logo bumbag / bumbag-ui

Build themeable React & React Native applications with your Bumbag ๐Ÿ‘







6. Serverless Framework

Serverless Framework โ€“ Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more!

GitHub logo serverless / serverless

โšก Serverless Framework โ€“ Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more! โ€“

โšก Serverless Inc. is hiring to build the next generation of serverless development tools, join us!


Serverless Application Framework AWS Lambda API Gateway

serverless Build Status npm version codecov gitter Known Vulnerabilities license

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

Website โ€ข Docs โ€ข Newsletter โ€ข Swag โ€ข Gitter โ€ข Forum โ€ข Meetups โ€ข Twitter โ€ข We're Hiring

The Serverless Framework โ€“ Build applications comprised of microservices that run in response to events, auto-scale for you, and only charge you when they run. This lowers the total cost of maintaining your apps, enabling you to build more logic, faster.

The Framework uses new event-driven compute services, like AWS Lambda, Google Cloud Functions, and more. It's a command-line tool, providing scaffolding, workflow automation and best practices for developing and deploying your serverless architecture. It's also completely extensible via plugins.

Check out the Serverless Framework Dashboard for monitoring, troubleshooting, ci/cd and more features for serverless teams.

Serverless is actively maintained by Serverless Inc.

Contents


7. Material-UI Treasury

A collection of ready-to-use components based on Material-UI

GitHub logo siriwatknp / mui-treasury

A collection of ready-to-use components based on Material-UI

Gatsby

Material-UI Treasury PRs Welcome lerna

All Contributors

Imagine a place with millions of real-world, ready-to-use, and themable components that you can install to your project. I believe that it will boost many projects that want to prove their ideas or even improve complex monolith project to move faster.

Material-UI v5

@mui-treasury/layout

BREAKING CHANGE see v5 documentation

Summary Highlight

  • smaller bundle size (-30%)
  • faster
  • single sidebar (no duplicate for all variants)

@mui-treasury/components, @mui-treasury/styles

  1. upgrade material-ui
yarn add @material-ui/core@next @material-ui/styles@next
// make sure that it is 5.0.0-alpha.37
Enter fullscreen mode Exit fullscreen mode

Note: the above installation requires @material-ui/styles because mui-treasury depends on it.

  1. upgrade mui-treasury
yarn add @mui-treasury/components@next @mui-treasury/styles@next
Enter fullscreen mode Exit fullscreen mode

As a result, you will get 2.0.0-alpha for both packages. However, these packages still use the old style-engine (JSS) while material-ui v5 have moved to either emotion or styled-components. This will increase the bundle size a bit because you will have 2 style-engine in the project (JSS + emotion or styled-components).

In theโ€ฆ


8. Marked

A markdown parser and compiler. Built for speed.

GitHub logo markedjs / marked

A markdown parser and compiler. Built for speed.

Marked

npm gzip size install size downloads github actions snyk

  • โšก built for speed
  • โฌ‡๏ธ low-level compiler for parsing markdown without caching or blocking for long periods of time
  • โš–๏ธ light-weight while implementing all markdown features from the supported flavors & specifications
  • ๐ŸŒ works in a browser, on a server, or from a command line interface (CLI)

Demo

Checkout the demo page to see marked in action โ›น๏ธ

Docs

Our documentation pages are also rendered using marked ๐Ÿ’ฏ

Also read about:

Compatibility

Node.js: Only current and LTS Node.js versions are supported. End of life Node.js versions may become incompatible with Marked at any point in time.

Browser: Not IE11 :)

Installation

CLI: npm install -g marked

In-browser: npm install marked

Usage

Warning: ๐Ÿšจ Marked does not sanitize the output HTML. Please use a sanitize library, like DOMPurify (recommended), sanitize-html or insane on the output HTML! ๐Ÿšจ

CLI

$ marked -o hello.html
hello world
^D
$ cat hello.html
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

9. nodemon

Monitor for any changes in your node.js application and automatically restart the server - perfect for development

GitHub logo remy / nodemon

Monitor for any changes in your node.js application and automatically restart the server - perfect for development

Nodemon Logo

nodemon

nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

nodemon does not require any additional changes to your code or method of development. nodemon is a replacement wrapper for node. To use nodemon, replace the word node on the command line when executing your script.

NPM version Travis Status Backers on Open Collective Sponsors on Open Collective

Installation

Either through cloning with git or by using npm (the recommended way):

npm install -g nodemon # or using yarn: yarn global add nodemon
Enter fullscreen mode Exit fullscreen mode

And nodemon will be installed globally to your system path.

You can also install nodemon as a development dependency:

npm install --save-dev nodemon # or using yarn: yarn add nodemon -D
Enter fullscreen mode Exit fullscreen mode

With a local installation, nodemon will not be available in your system path or you can't use it directly from the command line. Instead, the local installation of nodemon can beโ€ฆ


10. Highcharts

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.

GitHub logo highcharts / highcharts

Highcharts JS, the JavaScript charting framework

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.

Download and install Highcharts

This is the working repo for Highcharts. If you simply want to include Highcharts into a project, use the distribution package instead, or read the download page. Please note that there are several ways to use Highcharts. For general installation instructions, see the docs.

Use our CDN

Instead of downloading, you can use our CDN to access files directly. See code.highcharts.com for details.

<script src="https://code.highcharts.com/highcharts.js"></script&gt

Install from npm

See npm documentation on how to get started with npm.

npm install --save highcharts

Install from Bower

Bower is deprecated, but to install, run:

bower install highcharts

Load Highcharts from the CDN as ECMAScript modules

Starting with v6.1.0, Highcharts is available on ourโ€ฆ


Stargazing ๐Ÿ“ˆ

Top risers over last 7 days๐Ÿ”—

  1. Web Development for Beginners +1,797 stars
  2. Machine Learning for Beginners +1,793 stars
  3. Electron +1,433 stars
  4. Free Code Camp +1,174 stars
  5. Daisy UI +1,060 stars

Top growth(%) over last 7 days๐Ÿ”—

  1. Daisy UI +38%
  2. html-to-image +35%
  3. accessibility-snippets +21%
  4. Welcome UI +16%
  5. Mammoth +15%

Top risers over last 30 days๐Ÿ”—

  1. Public APIs +9,189 stars
  2. Machine Learning for Beginners +8,187 stars
  3. Coding Interview University +5,507 stars
  4. Free Programming Books +3,203 stars
  5. Web Development for Beginners +3,135 stars

Top growth(%) over last 30 days๐Ÿ”—

  1. Fullstack Boilerplate +180%
  2. Machine Learning for Beginners +110%
  3. Fronts +110%
  4. Captain Stack +79%
  5. Astro +69%

For all for the latest rankings please checkout Stargazing.dev


Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev 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.

Discussion (1)

Collapse
embluk profile image
Luke Embrey

Great list!