DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 18th December 2020

iainfreestone profile image Iain Freestone 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. Hyper

A terminal built on web technologies

GitHub logo vercel / hyper

A terminal built on web technologies

Node CI macOS CI Status Windows CI status Linux CI status Changelog #213

For more details, head to: https://hyper.is

Project goals

The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards. In the beginning, our focus will be primarily around speed, stability and the development of the correct API for extension authors.

In the future, we anticipate the community will come up with innovative additions to enhance what could be the simplest, most powerful and well-tested interface for productivity.

Usage

Download the latest release!

Linux

Arch and derivatives

Hyper is available in the AUR. Use an AUR package manager like aurman

aurman -S hyper
Enter fullscreen mode Exit fullscreen mode

NixOS

Hyper is available as Nix package, to install the app run this command:

nix-env -i hyper
Enter fullscreen mode Exit fullscreen mode

macOS

Use Homebrew Cask to download the app by running these commands:

brew update
brew cask install hyper
Enter fullscreen mode Exit fullscreen mode

Windows

Use chocolatey to install the app by running the…


2. Google APIs Node.js Client

Google's officially supported Node.js client library for accessing Google APIs. Support for authorization and authentication with OAuth 2.0, API Keys and JWT (Service Tokens) is included.

GitHub logo googleapis / google-api-nodejs-client

Google's officially supported Node.js client library for accessing Google APIs. Support for authorization and authentication with OAuth 2.0, API Keys and JWT (Service Tokens) is included.

Google Inc. logo

Google APIs Node.js Client

npm version Code Coverage Downloads Dependency Status Known Vulnerabilities

Node.js client library for using Google APIs. Support for authorization and authentication with OAuth 2.0, API Keys and JWT tokens is included.

Google APIs

The full list of supported APIs can be found on the Google APIs Explorer. The API endpoints are automatically generated, so if the API is not in the list, it is currently not supported by this API client library.

Working with Google Cloud Platform APIs?

If you're working with Google Cloud Platform APIs such as Datastore, Cloud Storage or Pub/Sub, consider using the @google-cloud client libraries: single purpose idiomatic Node.js clients for…


3. 50 Projects in 50 Days - HTML/CSS and JavaScript

50+ mini web projects using HTML, CSS & JS


4. PACE

Automatically add a progress bar to your site. Pace will monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!

GitHub logo CodeByZach / pace

Automatically add a progress bar to your site.

PACE

Latest Release

An automatic web page progress bar.

Demo

Documentation

Include pace.js and the theme css of your choice on your page (as early as is possible), and you're done!

Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!

If you use AMD or Browserify, require pace.js and call pace.start() as early in the loading process as is possible.

Example

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /&gt
</head>
Enter fullscreen mode Exit fullscreen mode

Configuration

Pace is fully automatic, no configuration is necessary to get started.

If you would like to make some tweaks, here's how:

You can set window.paceOptions before bringing in the file:

paceOptions = {
  // Disable the 'elements' source
  elements: false,
  //
…
Enter fullscreen mode Exit fullscreen mode

5. Chrome Extensions samples

Official samples for Chrome Extensions.

Chrome Extensions samples

Official samples for Chrome Extensions and the Chrome Apps platform Note that Chrome Apps are deprecatedβ€”learn more on the Chromium blog.

For more information on extensions, see Chrome Developers.

Samples

The directory structure is as follows:

  • api/ - extensions focused on a single API package
  • howto/ - extensions that show how to perform a particular task
  • tutorials/ - multi-step walkthroughs referenced inline in the docs
  • extensions/ - full featured extensions spanning multiple API packages
  • apps/ - deprecated Chrome Apps platform (not listed below)

To experiment with these samples, please clone this repo and use 'Load Unpacked Extension' Read more on Getting Started.

Sample Calls
My Bookmarks
A browser action with a popup dump of all bookmarks, including search, add, edit and delete.
  • bookmarks.create
  • bookmarks.getTree
  • bookmarks.remove
  • bookmarks.update
  • tabs.create
Page Redder
Make the current page red
  • browserAction.onClicked
  • tabs.executeScript
Print this page
Adds a print button to
…

6. SPCSS

A simple, minimal, classless CSS for simple HTML pages

GitHub logo susam / spcss

A simple, minimal, classless CSS for simple HTML pages

SPCSS

SPCSS is a simple and plain stylesheet for simple text-based websites.

View Demo View CSS NPM Version MIT License Twitter

Contents

Demo

Check this demo page to see how SPCSS styles a simple HTML page.

SPCSS supports systems and web browsers with dark color theme too, so how the page looks depends on the color theme selected on your system or browser.

If you are unable to change your desktop or browser theme right now here are some screenshots to see what the output looks like with both themes:

Demo of SPCSS light theme Demo of SPCSS light theme

Use SPCSS

To use SPCSS, merely add this line of code to the <head> element of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spcss@0.5.0">
Enter fullscreen mode Exit fullscreen mode

Alternatively, download the CSS file from here, edit and customize it as per your requirements, and use it in your project. You are also welcome to fork this…


7. Free & Open Source Gatsby Themes

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.

GitHub logo LekoArts / gatsby-themes

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.

LekoArts

Free & Open Source Gatsby Themes by LekoArts

@lekoarts/gatsby-themes is released under the MIT license. npmcharts.com Overview CircleCI Status PRs welcome! Follow @lekoarts_de

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options. Use Gatsby Themes to take your project to the next level and let you and your customers take advantage of the many benefits Gatsby has to offer.

🎨 Themes Overview

Themes Preview Banner

πŸ’Ό Contents

This repository is a collection of my Gatsby themes, managed as a monorepo with Lerna and yarn workspaces.

  • .circleci: Contains the configuration file for CircleCI
  • .github: GitHub actions, templates for issues, and FUNDING file. A GitHub action will publish the /examples as starters to individual GitHub repositories.
  • cypress: Contains the Cypress tests for examples
  • examples: Contains the corresponding example sites for the themes. These projects can and should be used as a starter and will be…

8. GitLens

Supercharge the Git capabilities built into Visual Studio Code β€” Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

GitHub logo eamodio / vscode-gitlens

Supercharge the Git capabilities built into Visual Studio Code β€” Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more


GitLens Logo

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.


What's New in GitLens 11 Button

Sponsor GitLens

Sponsored by

CodeStream Logo β€” Pull Requests and Code Reviews in your IDE

Embark Studios Logo

Localize Logo

If you find GitLens useful, please consider sponsoring it. And if you use GitLens for work, please encourage your employer to sponsor it. Also please write a review, star it on GitHub, and follow me on Twitter

GitLens

GitLens is an open-source extension for Visual Studio Code created by Eric Amodio.

GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

GitLens…


9. React Leaflet

React components for Leaflet maps.

GitHub logo PaulLeCam / react-leaflet

React components for Leaflet maps


10. gitmoji

Using emojis on commit messages provides an easy way of identifying the purpose or intention of a commit with only looking at the emojis used. As there are a lot of different emojis I found the need of creating a guide that can help to use emojis easier.

GitHub logo carloscuesta / gitmoji

An emoji guide for your commit messages. 😜

gitmoji

Build Status Gitmoji

About

Gitmoji is an initiative to standardize and explain the use of emojis on GitHub commit messages.

Using emojis on commit messages provides an easy way of identifying the purpose or intention of a commit with only looking at the emojis used. As there are a lot of different emojis I found the need of creating a guide that can help to use emojis easier.

The gitmojis are published on the following package in order to be used as a dependency πŸ“¦.

Using gitmoji-cli

To use gitmojis from your command line install gitmoji-cli. A gitmoji interactive client for using emojis on commit messages.

npm i -g gitmoji-cli
Enter fullscreen mode Exit fullscreen mode

Contributing to gitmoji

Contributing to gitmoji is a piece of 🍰, read the contributing guidelines. You can discuss emojis using the issues section. To add a new emoji to the list create an issue and send a…





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)

pic
Editor guide