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
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
Linux
Arch and derivatives
Hyper is available in the AUR. Use an AUR package manager e.g. paru
paru -S hyper
NixOS
Hyper is available as Nix package, to install the app run this command:
nix-env -i hyper
macOS
Use Homebrew Cask to download the app by running these commands:
brew update
brew install --cask hyper
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.
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 APIs Node.js Client
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
- Getting started
- Authentication and authorization
- Usage
- License
- Contributing
- Questions/problems?
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
bradtraversy
/
50projects50days
50+ mini web projects using HTML, CSS & JS
50 Projects in 50 Days - HTML/CSS and JavaScript
This is the main repository for all of the projects in the course.
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!
CodeByZach
/
pace
Automatically add a progress bar to your site.
PACE
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="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
</head>
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,
//…5. Chrome Extensions samples
Official samples for Chrome Extensions.
GoogleChrome
/
chrome-extensions-samples
Chrome Extensions Samples
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.
Note: Samples for Manifest V3 are still being prepared. In the mean time, consider referring to mv2-archive/
Samples
The directory structure is as follows:
- api/ - extensions focused on a single API package
- (To be added) howto/ - extensions that show how to perform a particular task
- tutorials/ - multi-step walkthroughs referenced inline in the docs
- examples/ - full featured extensions spanning multiple API packages
- apps/ - deprecated Chrome Apps platform (not listed below)
- mv2-archive/ - resources for manifest version 2
To experiment with these samples, please clone this repo and use 'Load Unpacked Extension' Read more on Getting Started.
| Sample | Calls |
|---|---|
Hello World examples/hello-world
|
|
Page Redder examples/page-redder
|
|
| My Bookmarks |
6. SPCSS
A simple, minimal, classless CSS for simple HTML pages
SPCSS
SPCSS is a simple and plain stylesheet for simple text-based websites.
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:
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.7.0">
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.
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.
Free & Open Source Gatsby Themes by LekoArts
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
💼 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/examplesas starters to individual GitHub repositories. -
cypress: Contains the Cypress tests forexamples -
examples: Contains the corresponding example sites for thethemes. 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
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 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.
Sponsor GitLens
Sponsored by
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, developed, and maintained 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…
9. React Leaflet
React components for Leaflet maps.
PaulLeCam
/
react-leaflet
React components for Leaflet maps
React Leaflet 
React components for Leaflet maps.
Documentation
Changes
See the CHANGELOG file.
Contributing
See the CONTRIBUTING file.
Support
Please do not use GitHub issues for support, but instead post your questions on StackOverflow using the react-leaflet tag.
License
Hippocratic License - see the LICENSE file.
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.
carloscuesta
/
gitmoji
An emoji guide for your commit messages. 😜
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
Contributing to gitmoji
Contributing to gitmoji is a piece of
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)