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

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.

Radix Primitives Logo

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.

Releases

For changelog, visit radix-ui.com/docs/primitives/overview/releases.

Contributing

Please follow our contributing guidelines.

Authors

Contributors


Community

  • Pedro Duarte (@peduarte)

  • Colm Tuite (@colmtuite) - WorkOS

  • 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

πŸ”΄This repo has been archived, and is no longer receiving issues/pull requests. Please open all new issues/PRs on the Apache Superset GitHub repo.πŸ”΄

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)…


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

Step-by-step setup

When deploying this template, the sequence of steps is important. Follow the steps below in order to get up and running.

Initiate Deployment

Vercel Deploy Button

Deploy with Vercel

The Vercel Deployment will create a new repository with this template on your GitHub account and guide you through a new Supabase project creation. The Supabase Vercel Deploy Integration will set up the necessary Supabase environment variables and run the SQL migrations to set up the Database schema on your account. You can inspect the created tables in your project's Table editor.

Should the automatic setup…


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 jxom / bumbag-ui

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

Warning This library is currently unmaintained. You may want to look at a similar alternative like Chakra UI, Material UI or Mantine. 😊

Bumbag

Build themeable React & React Native applications with your Bumbag.

Getting started

Visit the Bumbag docs to get started with Bumbag.

Join our community

Join our discord server to get the latest updates, chat with other Bumbag enthusiasts, and see what's happening in the community!

Contributing

Feel like contributing? That's awesome! We have a Contributing guide to help you out





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 – Effortlessly build apps that auto-scale, incur zero costs when idle, and require minimal maintenance using AWS Lambda and other managed cloud services.

Serverless Framework AWS Lambda AWS DynamoDB AWS API Gateway


Website Β β€’Β  Documentation Β β€’Β  X / Twitter Β β€’Β  Community Slack Β β€’Β  Forum


The Serverless Framework – Makes it easy to use AWS Lambda and other managed cloud services to build applications that auto-scale, cost nothing when idle, and overall result in radically low maintenance.

The Serverless Framework is a command-line tool with approachable YAML syntax to deploy both your code and cloud infrastructure needed to make tons of serverless application use-cases, like APIs, front-ends, data pipelines and scheduled tasks. It's a multi-language framework that supports Node.js, Typescript, Python, Go, Java, and more. It's also completely extensible via over 1,000 plugins which add more serverless use-cases and workflows to the Framework.

Actively maintained by Serverless Inc.


Serverless Framework - V.4


September 24th, 2024 – We have introduced a ton of new features since the release of Serverless Framework V4 GA in May. Check out the list below for everything recently…


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

πŸ‘‹ Welcome! to Material Treasury

All Contributors

Material Treasury is a collection of blocks that are ready-to-use for Material UI projects.

The blocks are made to live from design inspiration resources such as Dribbble and Pinterest, etc.

There are 2 way to use the blocks in your project.

  • Copy and paste: open the "Doc" of the block you want and copy the code. Then paste it to your project, it should work instantly (open an issue if it does not).
  • Use CLI to clone the latest blocks to your project.

CLI

  1. go to mui-treasury
  2. find a block you want to clone from the sidebar (let's say that I want the Card/News/Maldives)
  3. open your terminal and go to your root project directory
  4. run npx mui-treasury@latest clone card-news-maldives
  5. you will see that the code is downloaded to src/mui-treasury folder (in your local project)

Note: to clone multiple blocks, just add more names…


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
Enter fullscreen mode Exit fullscreen mode

In-browser:

npm install marked
Enter fullscreen mode Exit fullscreen mode

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! 🚨

DOMPurify.sanitize(marked.parse(`<img src="x" onerror="alert('not happening')">`));

CLI

# Example with stdin input
$
…
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 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 and some canvas/WebGL.

Highcharts is a source available product. Please refer to shop.highcharts.com for details on licensing.

Installing and using Highcharts

This is the working repo for Highcharts code. 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

ES6 modules, AMD, CommonJS and others

For other ways to use Highcharts in your projects, please refer to our installation docs…


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.

Top comments (1)

Collapse
 
embluk profile image
Luke Embrey

Great list!