DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at stargazing.dev

πŸš€10 Trending projects on GitHub for web developers - 20th August 2021

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

1. Shiki

A beautiful Syntax Highlighter.

GitHub logo shikijs / shiki

A beautiful Syntax Highlighter.

Shiki

Shiki is a beautiful Syntax Highlighter. Demo

Usage

npm i shiki
# yarn add shiki
Enter fullscreen mode Exit fullscreen mode
const shiki = require('shiki')

shiki
  .getHighlighter({
    theme: 'nord'
  })
  .then(highlighter => {
    console.log(highlighter.codeToHtml(`console.log('shiki');`, 'js'))
  })

// <pre class="shiki" style="background-color: #2e3440"><code>
//   <!-- Highlighted Code -->
// </code></pre>
Enter fullscreen mode Exit fullscreen mode
<script src='https://unpkg.com/shiki'></script>
<script>
shiki
  .getHighlighter({
    theme: 'nord'
  })
  .then(highlighter => {
    const code = highlighter.codeToHtml(`console.log('shiki');`, 'js')
    document.getElementById('output').innerHTML = code
  })
</script>
Enter fullscreen mode Exit fullscreen mode

Clone shikijs/shiki-starter to play with Shiki, or try it out on Repl.it.

Seen


2. Awesome Guidelines

A curated list of high quality coding style conventions and standards.

GitHub logo Kristories / awesome-guidelines

A curated list of high quality coding style conventions and standards.

Awesome Guidelines

Awesome Guidelines Awesome

A set of guidelines for a specific programming language that recommend programming style, practices, and methods for each aspect of a program written in that language.

Contributions welcome. Please read the contribution guidelines before contributing. Add links through pull requests or create an issue to start a discussion.

Make a small donation to help us fight Covid19

Visit kitabisa.com and dompetdhuafa.org Your small help goes a long way. ❀️

Contents

Programming Languages

Brainfuck

C

C#

C++

Clojure


3. absurd-sql

Implements a backend for sql.js (sqlite3 compiled for the web) that treats IndexedDB like a disk and stores data in blocks there. That means your sqlite3 database is persisted. And not in the terrible way of reading and writing the whole image at once -- it reads and writes your db in small chunks.

GitHub logo jlongster / absurd-sql

sqlite3 in ur indexeddb (hopefully a better backend soon)

This is an absurd project.

It implements a backend for sql.js (sqlite3 compiled for the web) that treats IndexedDB like a disk and stores data in blocks there. That means your sqlite3 database is persisted. And not in the terrible way of reading and writing the whole image at once -- it reads and writes your db in small chunks.

It basically stores a whole database into another database. Which is absurd.

See the demo. You can also view an entire app using this here.

You should also read this blog post which explains the project in great detail.

If you like my work, feel free to buy me a coffee!

How do I use it?

You can check out the example project to get started. Or follow the steps below:

First you install the packages:

yarn add @jlongster/sql.js absurd-sql.js-backend

Right now you need to use my fork…


4. HyperFormula

A complete, open-source Excel-like calculation engine written in TypeScript. Includes 380+ built-in functions.

GitHub logo handsontable / hyperformula

A complete, open-source Excel-like calculation engine written in TypeScript. Includes 380+ built-in functions. Maintained by the Handsontable team⚑

HyperFormula

HyperFormula is an open source, spreadsheet-like calculation engine ⚑

GitHub Workflow Status FOSSA Status codecov Language grade: JavaScript Known Vulnerabilities GitHub contributors

Description

HyperFormula allows you to perform spreadsheet-like calculations in your web applications. It is written in TypeScript and supports all major JavaScript frameworks. You can use it in a browser or as a service with Node.js as your back-end technology.

The engine comes with a built-in, localized library of functions grouped into different categories, and covers most user-triggered actions such as CRUD operations undo/redo and clipboard operations It also supports the use of cross-sheet references, named expressions, different data types, and custom functions.

Documentation

Getting started

Install the library from npm:

npm install hyperformula
Enter fullscreen mode Exit fullscreen mode

Once properly installed, you can use it like this:

import { HyperFormula } from 'hyperformula';
…
Enter fullscreen mode Exit fullscreen mode

5. React Desktop

React UI Components for macOS High Sierra and Windows 10

GitHub logo gabrielbull / react-desktop

React UI Components for macOS High Sierra and Windows 10

React Desktop

Build Status Code Climate Dependency Status peerDependency Status devDependency Status npm downloads npm version Gitter

React UI Components for macOS High Sierra and Windows 10.

npm install react-desktop --save

Demo

Help wanted!

I am looking for developers to help me develop this project. Please submit some ideas in the issues section or some PRs to get this project going. If you are interested, you can become a collaborator on the project. Thanks.

Contributing

This library has been created to bring a native desktop experience to the web. It works extremely well with tools such as node-webkit or Electron.js!

Everyone is welcome to contribute and add more components/documentation whilst following the contributing guidelines.

Documentation

Guides on installation, components and advanced usage are found in the documentation.





6. Release Changelog Builder Action

A GitHub action that builds your release notes / changelog fast, easy and exactly the way you want.

GitHub logo mikepenz / release-changelog-builder-action

A GitHub action that builds your release notes / changelog fast, easy and exactly the way you want.

:octocat:πŸ“„πŸ”–πŸ“¦

release-changelog-builder-action

... a GitHub action that builds your release notes / changelog fast, easy and exactly the way you want


What's included πŸš€ β€’ Setup πŸ› οΈ β€’ Sample πŸ–₯️ β€’ Customization πŸ–οΈ β€’ Contribute 🧬 β€’ License πŸ““


What's included πŸš€

  • Super simple integration
    • ...even on huge repositories with hundreds of tags
  • Parallel releases support
  • Rich changelogs based on PRs
    • Alternative commit based mode
  • Blazingly fast execution
  • Supports any git project
  • Highly flexible configuration
  • Lightweight
  • Supports any branch
  • Rich build log output


Setup

Configure the workflow

Specify the action as part of your GitHub actions workflow:

- name: "Build Changelog"
  id: build_changelog
  uses: mikepenz/release-changelog-builder-action@{latest-release}
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

Action outputs

After action execution it will return the changelog and additional information as step output. You can use it in any follow-up step by referencing the output by referencing it…


7. Peeky

A testing framework for curious minds

GitHub logo Akryum / peeky

A testing framework for curious minds 🐈️





8. Web Components Examples

A series of web components examples, related to the MDN web components documentation

GitHub logo mdn / web-components-examples

A series of web components examples, related to the MDN web components documentation at https://developer.mozilla.org/en-US/docs/Web/Web_Components.

web-components-examples

A series of web components examples, related to the MDN web components documentation at https://developer.mozilla.org/en-US/docs/Web/Web_Components.

The following examples are available:


9. Hackathon Starter

A boilerplate for Node.js web applications

GitHub logo sahat / hackathon-starter

A boilerplate for Node.js web applications

Hackathon Starter

Dependency Status devDependencies Status Build Status Join the chat at https://gitter.im/sahat/hackathon-starter

Live Demo: https://hackathon-starter.walcony.com

Jump to What's new?

A boilerplate for Node.js web applications.

If you have attended any hackathons in the past, then you know how much time it takes to get a project started: decide on what to build, pick a programming language, pick a web framework pick a CSS framework. A while later, you might have an initial project up on GitHub and only then can other team members start contributing. Or how about doing something as simple as Sign in with Facebook authentication? You can spend hours on it if you are not familiar with how OAuth 2.0 works.

When I started this project, my primary focus was on simplicity and ease of use I also tried to make it as generic and reusable as possible to cover most use cases of hackathon web apps without being too specific. In the worst case,…


10. Math.js

An extensive math library for JavaScript and Node.js

GitHub logo josdejong / mathjs

An extensive math library for JavaScript and Node.js

math.js

https://mathjs.org

Math.js is an extensive math library for JavaScript and Node.js. It features a flexible expression parser with support for symbolic computation, comes with a large set of built-in functions and constants, and offers an integrated solution to work with different data types like numbers, big numbers, complex numbers, fractions, units, and matrices. Powerful and easy to use.

Version Downloads Build Status Maintenance License FOSSA Status Codecov Github Sponsor

Features

  • Supports numbers, big numbers, complex numbers, fractions, units, strings, arrays, and matrices.
  • Is compatible with JavaScript's built-in Math library.
  • Contains a flexible expression parser.
  • Does symbolic computation.
  • Comes with a large set of built-in functions and constants.
  • Can be used as a command line application as well.
  • Runs on any JavaScript engine.
  • Is easily extensible.
  • Open source.

Usage

Math.js can be used in both node.js and in the browser.

Install math.js using npm:

npm install mathjs

Or download mathjs via one of the CDN's listed on the downloads page:

Β Β Β Β https://mathjs.org/download.html

…


Stargazing πŸ“ˆ

Top risers over last 7 daysπŸ”—

  1. Public APIs +2,635 stars
  2. Tauri +1,518 stars
  3. Build your own X +1,203 stars
  4. Bulletproof React +984 stars
  5. JavaScript Algorithms +892 stars

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

  1. giscus +54%
  2. Bulletproof React +31%
  3. Growth Book +22%
  4. xicons +18%
  5. Milkdown +17%

Top risers over last 30 daysπŸ”—

  1. Public APIs +9,058 stars
  2. Coding Interview University +5,249 stars
  3. Machine Learning for Beginners +3,733 stars
  4. Bulletproof React +3,305 stars
  5. NocoDB +2,904 stars

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

  1. Bulletproof React +408%
  2. html-to-image +95%
  3. useCookieConsent +89%
  4. DaisyUI +75%
  5. Mitosis +66%

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 about HTML, CSS and JavaScript.

Top comments (4)

Collapse
 
creativemacmac profile image
creativemacmac

The trending projects on github newsletter was really something i wanted to sign up for (get the sign up form up on top of the page) it was a bit har to findπŸ€—

Collapse
 
iainfreestone profile image
Iain Freestone

Thank you, I assume you were looking on a mobile device? I have now moved the sign up to the top on smaller screens. Thanks again this was not something I had noticed.

Collapse
 
creativemacmac profile image
creativemacmac • Edited

Sorry I forgot to mention, yes was indeed on a mobile and of course did sign up :) Your site is really interesting so cant wait to get your newsletter :)

Collapse
 
tim012432 profile image
Timo

Thanks for that interesting collection