DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 6th November 2020

Iain Freestone
A Web developer from Hampshire in the south of England.
Originally published at iainfreestone.com ใƒป2 min read

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 local development and DevOps 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

This project is currently under development.

Goals and Features

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

Work in progress

We're using Github Projects to keep track of issues in progress and todo's. Here is our Board

Integrations

Next.js Commerce integrates out-of-the-box with BigCommerce. We plan to support all major ecommerce backends.

Troubleshoot

I already own a BigCommerce store. What should I do?
First thing you do is: set your environment variables

.env.local
BIGCOMMERCE_STOREFRONT_API_URL=<>
BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
BIGCOMMERCE_STORE_API_URL=<>
BIGCOMMERCE_STORE_API_TOKEN=<>
BIGCOMMERCE_STORE_API_CLIENT_ID=<>
Enter fullscreen mode Exit fullscreen mode

If your project was started with a "Deploy with Vercel" button, you can useโ€ฆ


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

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 youโ€™d expect. Search engine-friendly by design.
  • Supports mobile apps. Adapters for iOS and Android let you build hybrid applications using native navigation controls.

Supported Browsers

Turbolinks works in all modern desktop and mobile browsers. Itโ€ฆ


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

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

Build and install from source using Cargo:

cargo install deno
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:

import { serve } from "https://deno.land/std/http/server.ts";
const
โ€ฆ
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

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 SVG freely.
  • โ€ฆ

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

GitHub version npm Node CI Known Vulnerabilities Razzle-status license Join the community on Spectrum

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or react-server, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all complex configuration needed for SSR 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 Reason, Elm, Vue, Angular, and most importantly......whatever comes next.

Getting Started

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

Documentation

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

Contributing

Please see our CONTRIBUTING.md.

Getting help

If you get stuck, check out Razzle's GitHub Discussions. In addition, #razzle-afterjs on Formium Community Discord Server is a great way to get help quickly too.

Inspiration


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 just have to pick the scoped @nivo packages according to the charts you wish to use.

yarn add @nivo/bar @nivo/sankey

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

Donations are welcome to help improvingโ€ฆ





9. GraphQL Server

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

GitHub logo apollographql / apollo-server

๐ŸŒ GraphQL server for Express, Connect, Hapi, Koa and more

Apollo Server

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

npm version Build Status Join the community on Spectrum Read CHANGELOG

Apollo Server is a community-maintained open-source GraphQL server. It works with pretty much all Node.js HTTP server frameworks, and we're happy to take PRs to add more! 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 PR!

Getting

โ€ฆ

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)