DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

πŸš€10 Trending projects on GitHub for web developers - 16th July 2021

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

1. Budibase

Budibase is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools on their own infrastructure in minutes.

GitHub logo Budibase / budibase

Budibase is an open-source low code platform that helps IT professionals build, automate and self-host internal tools in minutes πŸš€

Budibase

Budibase

Build, automate and self-host internal tools in minutes

Budibase is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools on their own infrastructure in minutes

πŸ€– 🎨 πŸš€

Budibase design ui

GitHub all releases GitHub release (latest by date) Follow @budibase Code of conduct

Get started Β· Docs Β· Feature request Β· Report a bug Β· Support: Discussions

✨ Features

  • Build and ship real software. Unlike other platforms, with Budibase you build and ship single page applications. Budibase applications have performance baked in and can be designed responsively, providing your users with a great experience.

  • Open source and extensible. Budibase is open-source - licensed as GPL v3. This should fill you with confidence that Budibase will always be around. You can also code against Budibase or fork it and make changes as you please, providing a developer-friendly experience.

  • Load data or start from scratch. Budibase pulls in data from multiple sources, including MongoDB, CouchDB, PostgreSQL, MySQL, Airtable, S3, DynamoDB…


2. Draw.io VS Code Integration

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.

GitHub logo hediet / vscode-drawio

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.

Draw.io VS Code Integration

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.

Features

  • Edit .drawio, .dio, .drawio.svg or .drawio.png files in the Draw.io editor
    • To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it.
    • .drawio.svg are valid .svg files that can be embedded in Github readme files! No export needed.
    • .drawio.png are valid .png files! No export needed. You should use .svg though whenever possible - they look much better!
    • To convert between different formats, use the Draw.io: Convert To... command.
  • Uses an offline version of Draw.io by default.
  • Multiple Draw.io themes are available.
  • Use liveshare to collaboratively edit a diagram with others.
  • Nodes/edges can be linked with code spans.

Demo

Like it so far? You might also like my open source Chrome extension that enhances the Github markdown editor!

Editing .drawio.svg/.drawio.png Files

You…





3. Leetcode Patterns

A curated list of leetcode questions grouped by their common patterns. This repo is intended for any individual wanting to improve their problem solving skills for software engineering interviews.

GitHub logo seanprashad / leetcode-patterns

A curated list of leetcode questions grouped by their common patterns

Leetcode Patterns

Table of Contents

Background

This repo is intended for any individual wanting to improve their problem solving skills for software engineering interviews.

Problems are grouped under their respective subtopic, in order to focus on repeatedly applying common patterns rather than randomly tackling questions.

All questions are available on leetcode.com with some requiring leetcode premium.

Preface

It is highly recommended to read chapters 1, 2, 3, 4, 8, and 10 of Cracking The Coding Interview to familiarize yourself with the following data structures and their operations:

  • Arrays
  • Maps
  • Linked Lists
  • Queues
  • Heaps
  • Stacks
  • Trees
  • Graphs

In addition, you should have a good grasp on common algorithms such as:

  • Breadth-first search
  • Depth-first search
  • Binary search
  • Recursion

Notes

This pdf contains useful information for the built-in data structures in Java.

Other useful methods to know include substring()…


4. use-color

The powerful color hook that all designers deserve. Parse and stringify that just works & Strict type checking at compile time.

GitHub logo junhoyeo / use-color

πŸ›ΌπŸ›ΌπŸ›Ό The powerful color hook that all designers deserve. ✨ Parse and stringify that just works & 🦾 Strict type checking at compile time

roller skate emoji

use-color

NPM version Package size codecov Build

The powerful color hook that all designers deserve.

πŸ‘‰ I'm planning to detach the core class to @roller-skates/core. The same workspace will include a lot of cool packages that will help you to "use colors", so stay tuned!

yarn add use-color
import { useColor } from 'use-color'
Enter fullscreen mode Exit fullscreen mode

Core functions

All the functions and types that power the hook are exported. Detailed documentation is TBD(planning to detach them as a core module).

import { parseColor } from 'use-color/parser'
import { ColorInput } from 'use-color/types/ColorInput'
const givenColor: ColorInput = 'rgb(34, 114, 235)'
const color = parseColor(givenColor)
Enter fullscreen mode Exit fullscreen mode

Parse

const [color] = useColor('#2272eb')
color.rgb // { r: 34, g: 114, b: 235 }
color.rgba // { r: 34, g: 114, b: 235, a: 1 }
const [color] = useColor('rgb(34, 114, 235)')
color.
…
Enter fullscreen mode Exit fullscreen mode

5. Boxicons

Boxicons is a carefully designed open source iconset with 1000+ icons. It's crafted to look enrich your website/app experience.

GitHub logo atisawd / boxicons

High Quality web friendly icons

boxicons

Financial Contributors on Open Collective GitHub issues Twitter Donate

High Quality web friendly icons

'Boxicons' is a carefully designed open source iconset with 1500+ icons. It's crafted to look enrich your website/app experience.

Announcing Boxicons v2.0.9!

  • Fixed the errors with a few svgs, added viewbox

Installation

To install via npm, simply do the following:

$ npm install boxicons --save
Enter fullscreen mode Exit fullscreen mode

import the module

import 'boxicons'

Usage

Using via CSS

  1. Include the stylesheet on your document's <head>
<head>
  <link rel="stylesheet" href="boxicons.min.css">
</head>
Enter fullscreen mode Exit fullscreen mode

Instead of installing you may use the remote version

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
</head>
Enter fullscreen mode Exit fullscreen mode
  1. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-' for regular icons…

6. Awesome Scalability

The Patterns of Scalable, Reliable, and Performant Large-Scale Systems. Concepts are explained in the articles of prominent engineers and credible references. Case studies are taken from battle-tested systems that serve millions to billions of users.

GitHub logo binhnguyennus / awesome-scalability

The Patterns of Scalable, Reliable, and Performant Large-Scale Systems

Logo

An updated and organized reading list for illustrating the patterns of scalable, reliable, and performant large-scale systems. Concepts are explained in the articles of prominent engineers and credible references. Case studies are taken from battle-tested systems that serve millions to billions of users.

If your system goes slow

Understand your problems: scalability problem (fast for a single user but slow under heavy load) or performance problem (slow for a single user) by reviewing some design principles and checking how scalability and performance problems are solved at tech companies. The section of intelligence are created for those who work with data and machine learning at big (data) and deep (learning) scale.

If your system goes down

"Even if you lose all one day, you can build all over again if you retain your calm!" - Thuan Pham, former CTO of Uber. So, keep calm and mind the availability and stability matters!

…

7. Geist

Modern and minimalist React UI library, originating from Vercel's design.

GitHub logo geist-org / react

Modern and minimalist React UI library.

Codecov CircleCI npm (scoped)

Modern and minimalist React UI library, originating from Vercel's design.

Quick Start

  1. run yarn add @geist-ui/react or npm i @geist-ui/react install it.

  2. import into project:

import { GeistProvider, CssBaseline } from '@geist-ui/react'

const Application = () => (
  <GeistProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Your App Component
  </GeistProvider>
)
Enter fullscreen mode Exit fullscreen mode

Documentation


Development


Showcases


LICENSE

MIT


8. Nuxt.js

Build your next Vue.js application with confidence using Nuxt: a framework making web development simple and powerful.

GitHub logo nuxt / nuxt.js

The Intuitive Vue Framework


Tests Status Windows Status Β Coverage Status Downloads Version License Discord

Support us

Hire Nuxt

Build your next Vue.js application with confidence using Nuxt: a framework making web development simple and powerful.

Links

Features

  • Automatic transpilation and bundling (with webpack and babel)
  • Hot code reloading
  • Server-side rendering OR Single Page App OR Static Generated, you choose πŸ”₯
  • Static file serving. ./static/ is mapped to /
  • Configurable with a nuxt.config.js file
  • Custom layouts with the layouts/ directory
  • Middleware
  • Code splitting for every pages/
  • Loading just the critical CSS (page-level)

Learn more at https://nuxtjs.org.

Getting started

$ npx create-nuxt-app <project-name>
Enter fullscreen mode Exit fullscreen mode

It's as simple as that!

Learn more at https://nuxtjs.org/guide/installation

Examples

Please take a look at https://nuxtjs.org/examples or directly in https://github.com/nuxt/nuxt.js/tree/dev/examples.

Production deployment

To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and…


9. Baileys

Lightweight full-featured typescript/javascript WhatsApp Web API

GitHub logo adiwajshing / Baileys

Lightweight full-featured typescript/javascript WhatsApp Web API

Baileys - Typescript/Javascript WhatsApp Web API

Baileys does not require Selenium or any other browser to be interface with WhatsApp Web, it does so directly using a WebSocket. Not running Selenium or Chromimum saves you like half a gig of ram :/

Thank you to @Sigalor for writing his observations on the workings of WhatsApp Web and thanks to @Rhymen for the go implementation.

Baileys is type-safe, extensible and simple to use. If you require more functionality than provided, it'll super easy for you to write an extension. More on this here.

If you're interested in building a WhatsApp bot, you may wanna check out WhatsAppInfoBot and an actual bot built with it, Messcat.

Read the docs here Join the Discord here

Example

Do check out & run example.ts to see example usage of the library The script covers most common use cases To run the example…


10. react-window

React components for efficiently rendering large lists and tabular data. React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks.

GitHub logo bvaughn / react-window

React components for efficiently rendering large lists and tabular data

react-window

React components for efficiently rendering large lists and tabular data

React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:

  1. It reduces the amount of work (and time) required to render the initial view and to process updates.
  2. It reduces the memory footprint by avoiding over-allocation of DOM nodes.

NPM registry Travis NPM license OpenCollective OpenCollective

Sponsors

The following wonderful companies have sponsored react-window:

Learn more about becoming a sponsor!

Install

# Yarn
yarn add react-window
# NPM
npm install --save react-window
Enter fullscreen mode Exit fullscreen mode

Usage

Learn more at react-window.now.sh:

Related libraries

  • react-virtualized-auto-sizer: HOC that grows to fit all of the available space and passes the width and height values to its child.
  • react-window-infinite-loader: Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite…

Stargazing πŸ“ˆ

Top risers over last 7 days

  1. Machine Learning for Beginners +3,208 stars
  2. JavaScript Algorithms +1,800 stars
  3. 30 seconds of code +1,643 stars
  4. Free Programming Books +1,310 stars
  5. Airbnb JavaScript Style Guide +1,073 stars

Top growth(%) over last 7 days

  1. Machine Learning for Beginners +38%
  2. Fronts +35%
  3. Captain Stack +34%
  4. petite-vue +22%
  5. Fullstack Boilerplate +18%

Top risers over last 30 days

  1. Public APIs +7,012 stars
  2. The Book Of Secret Knowledge +5,193 stars
  3. JavaScript Algorithms +4,348 stars
  4. Web Development for Beginners +3,989 stars
  5. 30 seconds of code +3,848 stars

Top growth(%) over last 30 days

  1. React Virtual Cool +177%
  2. Security Scorecards +171%
  3. Fullstack Boilerplate +137%
  4. SigNoz +126%
  5. Slides +78%

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.

Discussion (2)

Collapse
budibase profile image
Budibase

Thanks for the mention

Collapse
100lvlmaster profile image
Navin Kodag

60 parts? what? I appreciate the consistency.