loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 25th September 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. GitHub CLI

gh is GitHub on the command line. It brings pull requests, issues, and other GitHub concepts to the terminal next to where you are already working with git and your code.

GitHub logo cli / cli

GitHubโ€™s official command line tool

GitHub CLI

gh is GitHub on the command line. It brings pull requests, issues, and other GitHub concepts to the terminal next to where you are already working with git and your code.

screenshot of gh pr status

Availability

GitHub CLI is available for repositories hosted on GitHub.com and GitHub Enterprise Server 2.20+, and to install on macOS, Windows, and Linux.

Documentation

Read the official docs for usage and more information.

We want your feedback

We'd love to hear your feedback about gh. If you spot bugs or have features that you'd really like to see in gh, please check out the contributing page.

Installation

macOS

gh is available via Homebrew and MacPorts.

Homebrew

Install: Upgrade:
brew install gh brew upgrade gh

MacPorts

Install: Upgrade:
sudo port install gh sudo port selfupdate && sudo port upgrade gh

Linux

See Linux installation docs.

Windows

gh is available via scoop, Chocolateyโ€ฆ


2. node-http-proxy

node-http-proxy is an HTTP programmable proxying library that supports websockets. It is suitable for implementing components such as reverse proxies and load balancers.

GitHub logo http-party / node-http-proxy

A full-featured http proxy for node.js

node-http-proxy Build Status codecov

node-http-proxy is an HTTP programmable proxying library that supports websockets. It is suitable for implementing components such as reverse proxies and load balancers.

Table of Contents

Installation

npm install http-proxy --save

Back to top

Upgrading from 0.8.x ?

Click here

Back to top

Core Concept

A new proxy is created by calling createProxyServer and passing an options object as argument (valid properties are available here)

var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer(
โ€ฆ

3. Front End Interview Handbook

While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be Front-end Developer Interview Questions. Unfortunately, I couldn't find many complete and satisfactory answers to these questions online, hence here is my attempt at answering them.

GitHub logo yangshun / front-end-interview-handbook

๐Ÿ•ธ No-bullshit answers to the famous h5bp "Front-end Job Interview Questions"

Front End Interview Handbook


Black Lives Matter. Support the Equal Justice Initiative


What is this?

Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domainโ€Šโ€”โ€ŠHTML, CSS, JavaScript, just to name a few areas.

While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be Front-end Developer Interview Questions. Unfortunately, I couldn't find many complete and satisfactory answers to these questions online, hence here is my attempt at answering them. Being an open source repository, the project can live on with the support of the community as the state of web evolves.

Why do I want this?

โ€ฆ

4. ฮผPlot

A small (< 30 KB min), fast chart for time series, lines, areas, ohlc & bars

GitHub logo leeoniya / uPlot

๐Ÿ“ˆ A small, fast chart for time series, lines, areas, ohlc & bars

๐Ÿ“ˆ ฮผPlot

A small (< 30 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed)


Introduction

ฮผPlot is a fast, memory-efficient Canvas 2D-based chart for plotting time series, lines, areas, ohlc & bars; from a cold start it can create an interactive chart containing 150,000 data points in 135ms, scaling linearly at ~25,000 pts/ms. In addition to fast initial render, the zooming and cursor performance is by far the best of any similar charting lib; at < 30 KB, it's likely the smallest and fastest time series plotter that doesn't make use of context-limited WebGL shaders or WASM, both of which have much higher startup cost and code size.

166,650 point bench: https://leeoniya.github.io/uPlot/bench/uPlot.html

However, if you're looking for true real-time 60fps performance with massive datasets, uPlot can only get you so far WebGL should still be the tool ofโ€ฆ


5. umi

Extensible enterprise-level front-end application framework. Umi has built-in routing, building, deployment, testing, and so on. It only requires one dependency to get started. Umi also provides an integrated preset for React with rich functionaries.

GitHub logo umijs / umi

๐ŸŒ‹ Pluggable enterprise-level react application framework.

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

umi

codecov NPM version CircleCI Build Status GitHub Actions status NPM downloads Install size

๐Ÿ™ Extensible enterprise-level front-end application framework.

Please consider following this project's author, sorrycc, and consider starring the project to show your โค๏ธ and support.


Features

  • ๐ŸŽ‰ Extensible, Umi implements the complete lifecycle and makes it extensible, and Umi's internal functions are all plugins. Umi also support plugins and presets.
  • ๐Ÿ“ฆ Out of the Box, Umi has built-in routing, building, deployment, testing, and so on. It only requires one dependency to get started. Umi also provides an integrated preset for React with rich functionaries.
  • ๐Ÿ  Enterprise, It has been verified by 3000+ projects in Ant Financial and projects of Alibaba, Youku, Netease, ้ฃž็Œช, KouBei and other companies.
  • ๐Ÿš€ Self Development, Including micro frontend library, component packaging, documentation tools, request library, hooks library, data flow, etc.
  • ๐ŸŒด Perfect Routing, Supports both configuration routing and convention routing, while with functional completeness, such asโ€ฆ

6. Motion

An open source and production-ready motion library for React on the web.

GitHub logo framer / motion

Open source, production-ready animation and gesture library for React

Framer Motion

An open source and production-ready motion
library for React on the web

Chat on Discord

Motion is an open source, production-ready library that's designed for all creative developers.

It looks like this:

<motion.div animate={{ x: 0 }} />

It does all this:

  • Spring animations
  • Simple keyframes syntax
  • Gestures (drag/tap/hover)
  • Layout and shared layout animations
  • SVG paths
  • Exit animations
  • Server-side rendering
  • Variants for orchestrating animations across components
  • CSS variables

...and a whole lot more.

Get started

Quick start

npm install framer-motion
import { motion } from "framer-motion"
export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)

Docs

Check out our documentation for guides and a full API reference.

Or checkout our examples for inspiration.

Contribute

Want to contribute to Motion? Our contributing guide has you covered.

License

Motion isโ€ฆ


7. Stripe Subscription Use Cases

This sample shows how to create a customer and subscribe them to a plan with Stripe Billing. You can find step by step directions in the billing overview documentation page.

GitHub logo stripe-samples / subscription-use-cases

Create subscriptions with fixed prices or usage based billing.

Set up subscriptions with Stripe Billing

This sample shows how to create a customer and subscribe them to a plan with Stripe Billing. You can find step by step directions in the billing overview documentation page.

fixed-price-subscriptions usage-based-subscriptions per-seat-subscriptions Checkout (checkout-subscription-and-add-on)
Demo See a hosted version of the sample in test mode or fork on codesandbox.io See a hosted version of the sample in test mode or fork on codesandbox.io See a hosted version of the sample in test mode or fork on codesandbox.io See a hosted version of the sample in test mode or fork on codesandbox.io
Define prices in: CLI, Dashboard, or API Create a price with the Stripe: CLI, Dashboard, or API. โœ… โœ… โœ… โœ…
Charge users a fixed price on a recurring basis Create a subscription with a fixed price recurring monthly/yearly/etc. โœ… โœ…
Charge users per seat on a recurring basis.
โ€ฆ

8. Laravel Fortify

Laravel Fortify is a frontend agnostic authentication backend for Laravel. Fortify powers the registration, authentication, and two-factor authentication features of Laravel Jetstream.

Build Status Total Downloads Latest Stable Version License

Introduction

Laravel Fortify is a frontend agnostic authentication backend for Laravel. Fortify powers the registration, authentication, and two-factor authentication features of Laravel Jetstream.

Using Fortify For Headless Authentication

Note: Want an example of implementing each of these authentication related views? Check out their Blade based Jetstream implementations!

You may use Fortify (without Jetstream) to serve a headless authentication backend for your Laravel application. In this scenario, you are required to build your own templates using the frontend stack of your choice (Blade, Vue, etc.)

Installation

To get started, install Fortify using Composer:

composer require laravel/fortify

Next, publish Fortify's resources:

php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"

This command will publish Fortify's actions to your app/Actions directory. Thisโ€ฆ


9. Faker

Generate massive amounts of fake data in the browser and node.js

GitHub logo Marak / faker.js

generate massive amounts of realistic fake data in Node.js and the browser

faker.js - generate massive amounts of fake data in the browser and node.js

Faker.js

Build Status Coverage Status

npm version

OpenCollective OpenCollective

Demo

https://rawgit.com/Marak/faker.js/master/examples/browser/index.html

Usage

Browser

    <script src = "faker.js" type = "text/javascript"></script>
    <script>
      var randomName = faker.name.findName(); // Caitlyn Kerluke
      var randomEmail = faker.internet.email(); // Rusty@arne.info
      var randomCard = faker.helpers.createCard(); // random contact card containing many properties
    </script>

Node.js

    var faker = require('faker');
    var randomName = faker.name.findName(); // Rowan Nikolaus
    var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz
    var randomCard = faker.helpers.createCard(); // random contact card containing many properties

API

JSDoc API Browser

http://marak.github.io/faker.js/

API Methods

  • address
    • โ€ฆ

10. What the f*ck JavaScript?

A list of funny and tricky JavaScript examples. JavaScript is a great language. It has a simple syntax, large ecosystem and, what is most important, a great community. At the same time, we all know that JavaScript is quite a funny language with tricky parts. Some of them can quickly turn our everyday job into hell, and some of them can make us laugh out loud.

GitHub logo denysdovhan / wtfjs

๐Ÿคช A list of funny and tricky JavaScript examples

What the f*ck JavaScript?

WTFPL 2.0 NPM version

A list of funny and tricky JavaScript examples

JavaScript is a great language. It has a simple syntax, large ecosystem and, what is most important, a great community.

At the same time, we all know that JavaScript is quite a funny language with tricky parts. Some of them can quickly turn our everyday job into hell, and some of them can make us laugh out loud.

The original idea for WTFJS belongs to Brian Leroux. This list is highly inspired by his talk โ€œWTFJSโ€ at dotJS 2012:

dotJS 2012 - Brian Leroux - WTFJS

Node Packaged Manuscript

You can install this handbook using npm. Just run:

$ npm install -g wtfjs

You should be able to run wtfjs at the command line now. This will open the manual in your selected $PAGER. Otherwise, you may continue reading on here.

The source is available here: https://github.com/denysdovhan/wtfjs

Translations

Currently, there areโ€ฆ


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

pic
Editor guide
Collapse
jwp profile image
John Peters

Thanks Iain!