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 | Drupal 7 | Drupal 8 | Drupal 9 | Joomla | Lagoon | Laravel | LAMP | LEMP | MEAN | Pantheon | Platform.sh | WordPress

Services

Apache | Compose | dotnet | Elasticsearch | Go |โ€ฆ


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

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 Start right now at nextjs.org/commerce

Demo live at: demo.vercel.store

Features

  • Performant by default
  • SEO Ready
  • Internationalization
  • Responsive
  • UI Components
  • Theming
  • Standardized Data Hooks
  • Integrations - Integrate seamlessly with the most common ecommerce platforms.
  • Dark Mode Support

Integrations

Next.js Commerce integrates out-of-the-box with BigCommerce, Shopify, Swell, Saleor and Vendure. We plan to support all major ecommerce backends.

Considerations

  • framework/commerce contains all types, helpers and functions to be used as base to build a new provider.
  • Providers live under framework's root folder and they will extend Next.js Commerce types and functionality (framework/commerce).
  • We have a Features API to ensure feature parity between the UI and the Provider. Theโ€ฆ

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 secure JavaScript and TypeScript runtime

Deno

Build Status - Cirrus Twitter handle Discord Chat

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

Features

  • Secure by default. No file, network, or environment access, unless explicitly enabled.
  • Supports TypeScript out of the box.
  • Ships only a single executable file.
  • Built-in utilities like a dependency inspector (deno info) and a code formatter (deno fmt).
  • Set of reviewed standard modules that are guaranteed to work with Deno.

Install

Shell (Mac, Linux):

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

PowerShell (Windows):

iwr https://deno.land/x/install/install.ps1 -useb | 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

Scoop (Windows):

scoop install deno
Enter fullscreen mode Exit fullscreen mode

Build and install from source using Cargo:

cargo install deno --locked
Enter fullscreen mode Exit fullscreen mode

See deno_install and releases for other options.

Getting Started

Try running a simple program:

deno run https://deno.land/std/examples/welcome.ts
Enter fullscreen mode Exit fullscreen mode

Or a more complex one:

const listener
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

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

๐Ÿ“Š A highly interactive data-driven visualization grammar for statistical charts.

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

G2

A highly interactive data-driven visualization grammar for statistical charts.

CI Coverage Status NPM Package NPM Downloads Dependencies Percentage of issues still open PRs Welcome

Website โ€ข Tutorial Docs โ€ข Blog โ€ข G2Plot

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. With G2, you can describe the visual appearance and interactive behavior of a visualization just by one statement, and generate web-based views using Canvas or SVG.

๐Ÿ“บ Live Demos

โœจ Features

  • ๐Ÿ’ฏStable grammar of graphics: enable to draw all kinds of charts by mapping data to graphics.
  • ๐ŸคฉNew grammar of interaction: interaction behaviors combined with Trigger and Action mechanisms are used to exploring data.
  • ๐ŸฆAdvanced View module: with the ability to develop customized multi-dimension data analysis graphics.
  • ๐Ÿ‘ฌDual-engine rendering: with the ability to switch Canvas andโ€ฆ

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 already one from TailwindCSS. 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 Login Page React
โ€ฆ

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 Reactjs 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.

HTTP API

Components available through the HTTP rendering API.

Guides

Backers

โ€ฆ





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

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

npm version Build Status Join the community forum Read CHANGELOG

Apollo Server is a community-maintained open-source GraphQL server. It works with many Node.js HTTP server frameworks, or can run on its own with a built-in Express server. Apollo Server works with any GraphQL schema built with GraphQL.js--or define a schema's type definitions using schema definition language (SDL).

Read the documentation for information on getting started and many other use cases and follow the CHANGELOG for updates.

Principles

Apollo Server is built with the following principles in mind:

  • By the community, for the community: Its development is driven by the needs of developers.
  • Simplicity: By keeping things simple, it is more secure and easier to implement and contribute.
  • Performance: It is well-tested and production-ready.

Anyone is welcome to contribute to Apollo Server, just read CONTRIBUTING.md, take a look at the roadmap and make your firstโ€ฆ


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)

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.

Usage

  1. Configure the Github App
  2. After installing the Github app, create .github/boring-cyborg.yml in the default branch to enable it
  3. It will start scanning for pull requests within fewโ€ฆ

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 (0)