DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 6th November 2020

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

1. Lando

A local development and DevOps tool for all your projects that is fast, easy, powerful and liberating

GitHub logo lando / lando

A development tool for all your projects that is fast, easy, powerful and liberating

Lando logo

Lando

A Liberating Dev Tool For All Your Projects

The local development and DevOps tool trusted by professional developers across the galaxy.

Free yourself from the mind-forged manacles of lesser dev tools. Save time, headaches, frustration and do more real work.

learn more | what is it good for? | wait, doesn't docker compose do this?

Support Lando

Lando is and always will be FREE and OPEN SOURCE. As such it relies on generous contributions from its community to fund its development. Join our list of list of great sponsors! by contributing.

GitHub Sponsors | Patreon | OpenCollective

Documentation

Getting Started

Introduction | CLI Usage | Installation

Recipes

Backdrop | Drupal 6, 7, 8, 9, and 10 | Joomla | Lagoon | Laravel | LAMP | LEMP | MEAN | Pantheon | Platform.sh | WordPress

Services

Apache | Compose | dotnet | Elasticsearch | Go | MailHog | MariaDB |…


2. Next.js Commerce

The all-in-one starter kit for high-performance e-commerce sites. With a few clicks, Next.js developers can clone, deploy and fully customize their own store.

GitHub logo vercel / commerce

Next.js Commerce

Deploy with Vercel

Next.js Commerce

A high-perfomance, server-rendered Next.js App Router ecommerce application.

This template uses React Server Components, Server Actions, Suspense, useOptimistic, and more.

Note: Looking for Next.js Commerce v1? View the code, demo, and release notes.

Providers

Vercel will only be actively maintaining a Shopify version as outlined in our vision and strategy for Next.js Commerce.

Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the lib/shopify file with their own implementation while leaving the rest of the template mostly unchanged.


3. Turbolinks

Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework.

GitHub logo turbolinks / turbolinks

Turbolinks makes navigating your web application faster

Turbolinks is no longer under active development

Please note that Turbolinks is no longer under active development. It has been superseded by a new framework called Turbo, which is part of the Hotwire umbrella.

Turbolinks

Turbolinks® makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual. When you follow a link, Turbolinks automatically fetches the page, swaps in its <body>, and merges its <head>, all without incurring the cost of a full page load.

Turbolinks

Features

  • Optimizes navigation automatically. No need to annotate links or specify which parts of the page should change.
  • No server-side cooperation necessary. Respond with full HTML pages, not partial page fragments or JSON.
  • Respects the web. The Back and Reload buttons work just as…

4. Deno

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

GitHub logo denoland / deno

A modern runtime for JavaScript and TypeScript.

Deno

Twitter badge Discord badge YouTube badge

the deno mascot dinosaur standing in the rain

Deno (/ˈdiːnoʊ/, pronounced dee-no) is a JavaScript, TypeScript, and WebAssembly runtime with secure defaults and a great developer experience. It's built on V8 Rust, and Tokio.

Learn more about the Deno runtime in the documentation.

Installation

Install the Deno runtime on your system using one of the commands below. Note that there are a number of ways to install Deno - a comprehensive list of installation options can be found here.

Shell (Mac, Linux):

curl -fsSL https://deno.land/install.sh | sh
Enter fullscreen mode Exit fullscreen mode

PowerShell (Windows):

irm https://deno.land/install.ps1 | iex
Enter fullscreen mode Exit fullscreen mode

Homebrew (Mac):

brew install deno
Enter fullscreen mode Exit fullscreen mode

Chocolatey (Windows):

choco install deno
Enter fullscreen mode Exit fullscreen mode

Build and install from source

Complete instructions for building Deno from source can be found in the manual here.

Your first Deno program

Deno can be used for many different applications, but is most commonly used to build web servers. Create…


5. G2

G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms.

GitHub logo antvis / G2

📊 The concise and progressive visualization grammar.

English | 简体中文

G2

G2 is a visualization grammar for dashboard building, data exploration and storytelling.

Build Status Coverage Status npm Version npm Download npm License

examples

G2 is named after Leland Wilkinson’s book The Grammar of Graphics and was profoundly inspired by it in the very beginning. Here are some resources you can begin with:

  • Introduction - a brief overview and G2's motivations
  • Examples - a large number of demos to learn from and copy-paste
  • Tutorials - interactive case-driven guides of G2's core concepts
  • API Reference - complete documentation for all visualization components
  • Editor - an intelligent generation tool based on AntV. It utilizes AI to reduce the development cost of data visualization, and can quickly generate visual charts through natural language.

✨ Features

  • Progressive Usage - The main objective of G2 is to help you get meaningful visualizations quickly with concise declarations and it infers the rest. But you can configure much more for complex and advanced situations.
  • Declarative

6. Tailwind Starter Kit

Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source.

GitHub logo creativetimofficial / tailwind-starter-kit

Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source

Tailwind Starter Kit Tweet

version license GitHub issues open GitHub issues closed Join the chat at https://gitter.im/NIT-dgp/General Chat

Tailwind Starter Kit

A beautiful extension for TailwindCSS.

Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the original TailwindCSS framework. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular.

CSS Components

Tailwind Starter Kit comes with 120 Fully Coded CSS elements.

Pages

This extension also comes with 4 sample pages.

JavaScript Components

We also feature 16 dynamic components.

Table of Contents

Versions

FREE Dashboard

Dashboard Page

Angular Dashboard Page HTML Dashboard Page React Dashboard Page VueJS Dashboard Page
Download Angular Download HTML Download React Download Vue

FREE Design System (UI Kit)

Landing Page

Angular Landing Page HTML Landing Page React Landing Page VueJS Landing Page NextJS Landing Page
Download Angular Download HTML Download React Download Vue Download Next

Login Page

Angular Login Page HTML

7. Razzle

Create server-rendered universal JavaScript applications with no configuration

GitHub logo jaredpalmer / razzle

✨ Create server-rendered universal JavaScript applications with no configuration

repo-banner

npm version npm Node CI Known Vulnerabilities Razzle-status license Discord

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all the complex configuration needed for building SPA's and SSR applications into a single dependency--giving you the awesome developer experience of create-react-app, but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Preact, Vue, Svelte, and Angular, and most importantly......whatever comes next.

Getting Started

Visit https://razzlejs.org/getting-started to get started with Razzle.

Examples

Razzle has many examples, we might have one that fits your needs

See: The examples

Documentation

Visit https://razzlejs.org/ to view the documentation.

Getting help

If you get stuck, check out Razzle's GitHub Discussions. In addition, #razzle-afterjs on the Formium Community


8. Nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

GitHub logo plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries

nivo

Backers on Open Collective Sponsors on Open Collective License GitHub Actions NPM version nivo channel on discord

nivo provides supercharged React components to easily build dataviz apps it's built on top of d3.

Several libraries already exist for React d3 integration but just a few provide server side rendering ability and fully declarative charts.

Installation

In order to use nivo, you have to install the @nivo/core package and then choose some of the scoped @nivo packages according to the charts you wish to use:

yarn add @nivo/core @nivo/bar

Features

Discussion

Join the nivo discord community.

Packages & components

nivo is comprised of several packages/components, for a full list, please use the Components Explorer.

Guides

Backers

Donations are welcome to help improving nivo [Become a backer]

Open Collective Sponsors


9. GraphQL Server

GraphQL Server for Express, Koa, Hapi, Lambda, and more.

GitHub logo apollographql / apollo-server

🌍  Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more.

@apollo/server

This @apollo/server package is new with Apollo Server 4. Previous major versions of Apollo Server used a set of package names starting with apollo-server, such as apollo-server, apollo-server-express, apollo-server-core, etc.

npm version Build Status Join the community Join our Discord server


Announcement:
Join 1000+ engineers at GraphQL Summit for talks, workshops, and office hours, Oct 8-10 in NYC. Get your pass here ->


A TypeScript/JavaScript GraphQL server

Apollo Server is an open-source, spec-compliant GraphQL server that's compatible with any GraphQL client, including Apollo Client. It's the best way to build a production-ready, self-documenting GraphQL API that can use data from any source.

You can use Apollo Server as:

Apollo Server provides a simple API for integrating with any Node.js web framework or serverless environment. The @apollo/server package itself ships with a minimally-configurable, standalone web…


10. Boring Cyborg

A GitHub App built with Probot that automatically label PRs, issues and performs all the boring operations that you don't want to do.

GitHub logo kaxil / boring-cyborg

🤖 A Github bot to automatically label PRs, issues and perform all the boring operations that you don't want to do.

Boring Cyborg

🤖 A GitHub App built with Probot that automatically label PRs, issues and performs all the boring operations that you don't want to do.

Using Boring Cyborg Probot to add new labels

Congratulate user on first merged PR

Verifies that commit title matches regexp (single commit)

Verifies that PR title matches regexp (multiple commits)

Add reviewers based on label

Features

  • Add labels based on the path of the file that are modified in the PR.
  • Welcome new users to your project when they open their first Issue/PR or first merged PR by an automated comment.
  • Insert Issue (Jira/Github etc) link in PR description based on the Issue ID in PR title.
  • Verifies if commits/PR titles match the regular expression specified
  • Check if a branch is up to date with the master when specific files are modified in the PR This is helpful when you desire the changes to be applied sequentially, for example, alembic migrations.
  • Add reviewers to PR based on labels present on the PR. This is especially helpful if you are auto-assigning labels based on functional areas of ownership.

Usage

  1. Configure

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.

Top comments (0)