DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 8th January 2021

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

curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a dead-simple universal javascript GraphQL client.

GitHub logo hasura / graphqurl

curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a dead-simple universal javascript GraphQL client.

graphqurl

Made by the team at hasura.io, graphqurl is a curl like CLI for GraphQL:

  • CLI for making GraphQL queries with autocomplete
  • Run GraphiQL locally against any endpoint
  • Use as a library with Node.js or from the browser
  • Supports subscriptions
  • Export GraphQL schema

oclif Version

Azure Pipelines Appveyor CI Downloads/week License


Graphqurl Demo

GraphiQL Demo

Subscriptions triggering bash

Installation

CLI

npm install -g graphqurl
Enter fullscreen mode Exit fullscreen mode

Node Library

npm install --save graphqurl
Enter fullscreen mode Exit fullscreen mode

Usage

CLI

Query

gq https://my-graphql-endpoint/graphql \
     -H 'Authorization: Bearer <token>' \
     -q 'query { table { column } }'
Enter fullscreen mode Exit fullscreen mode

Auto-complete

GraphQURL can auto-complete queries using schema introspection. Execute the command without providing a query string:

$ gq <endpoint> [-H <header:value>]
Enter the query, use TAB to auto-complete, Ctrl+Q to execute, Ctrl+C to cancel
gql>
Enter fullscreen mode Exit fullscreen mode

You can use TAB to trigger auto-complete. Ctrl+C to cancel the input and Ctrl+Q/Enter to execute the query.

GraphiQL

Open GraphiQL with a given endpoint:

gq <endpoint
…
Enter fullscreen mode Exit fullscreen mode

2. material-table

Datatable for React based on material-ui's table with additional features

GitHub logo mbrn / material-table

Datatable for React based on material-ui's table with additional features

⚠️ Please do not create pull requests that contains a lot of change. Because we are working on refactoring and testing. Just pull requests that fixes a bug with a few line changes.



material-table

material-table

A simple and powerful Datatable for React based on Material-UI Table with some additional features.

Build Status Financial Contributors on Open Collective npm package NPM Downloads Average time to resolve an issue xscode Follow on Twitter Gitter chat

Roadmap

Key features

Demo and documentation

You can access all code examples and documentation on our site material-table.com.

Support material-table

To support material-table visit SUPPORT page.

Issue Prioritizing

Issues would be prioritized according reactions count. is:issue is:open sort:reactions-+1-desc filter would be use.

List issues according to reaction score

Prerequisites

The minimum React version material-table supports is ^16.8.5 since material-table v1.36.1. This is due to utilising react-beautiful-dnd for drag…


3. Jest

A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects. Fast, interactive watch mode only runs test files related to changed files.

GitHub logo facebook / jest

Delightful JavaScript Testing.

npm version Jest is released under the MIT license. Follow on Twitter

Β 

πŸƒ Delightful JavaScript Testing

πŸ‘©πŸ»β€πŸ’» Developer Ready: A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects.

πŸƒπŸ½ Instant Feedback: Fast, interactive watch mode only runs test files related to changed files.

πŸ“Έ Snapshot Testing: Capture snapshots of large objects to simplify testing and to analyze how they change over time.

See more on jestjs.io

Table of Contents

Getting Started

Install Jest using yarn:

yarn add --dev jest
Enter fullscreen mode Exit fullscreen mode

Or npm:

npm install --save-dev jest
Enter fullscreen mode Exit fullscreen mode

Note: Jest documentation uses yarn commands, but npm will also work. You can compare yarn and npm commands in the yarn docs, here.

Let's get started by writing a test…


4. React Virtualized

React components for efficiently rendering large lists and tabular data.

GitHub logo bvaughn / react-virtualized

React components for efficiently rendering large lists and tabular data

React virtualized

NPM version NPM license NPM total downloads NPM monthly downloads CircleCI Codecov badge OpenCollective OpenCollective

React components for efficiently rendering large lists and tabular data Check out the demo for some examples.

Sponsors

The following wonderful companies have sponsored react-virtualized:

Learn more about becoming a sponsor!

A word about react-window

If you're considering adding react-virtualized to a project, take a look at react-window as a possible lighter-weight alternative. Learn more about how the two libraries compare here.

Getting started

Install react-virtualized using npm.

npm install react-virtualized --save
Enter fullscreen mode Exit fullscreen mode

ES6, CommonJS, and UMD builds are available with each distribution For example:

// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';
…
Enter fullscreen mode Exit fullscreen mode

5. eleventy-high-performance-blog

A starter repository for building a blog with the Eleventy static site generator implementing a wide range of performance best practices.

GitHub logo google / eleventy-high-performance-blog

A high performance blog template for the 11ty static site generator.

eleventy-high-performance-blog

A starter repository for building a blog with the Eleventy static site generator implementing a wide range of performance best practices.

Screenshot showing that the site achieves 100 points on Lighthouse by default

Based on the awesome eleventy-base-blog.

Demo

Getting Started

1. Generate a new repository from this repository template

Click the "Use this template" button. Alternatively you can clone this repo yourself and push your copy to your favorite git repository.

2. Clone your new repository

git clone https://github.com/YOUR_REPO

3. Navigate to the directory

cd my-blog-name

4. Install dependencies

npm install

5. Build, serve, watch and test

npm run watch

6. Build and test

npm run build

Customize

  • Search for "Update me" across files in your editor to find all the site specific things you should update.
  • Update the favicons in 'img/favicon/'.
  • Otherwise: Knock yourself out. This is a template repository.
  • For a simple color override, adjust these CSS variables…

6. socket.io

Socket.IO enables real-time bidirectional event-based communication.

GitHub logo socketio / socket.io

Realtime application framework (Node.JS server)

socket.io

Backers on Open Collective Sponsors on Open Collective Build Status Dependency Status devDependency Status NPM version Downloads

Features

Socket.IO enables real-time bidirectional event-based communication. It consists of:

Some implementations in other languages are also available:

Its main features are:

Reliability

Connections are established even in the presence of:

  • proxies and load balancers.
  • personal firewall and antivirus software.

For this purpose, it relies on Engine.IO, which first establishes a long-polling connection, then tries to upgrade to better transports that are "tested" on the side, like WebSocket. Please see the Goals section for more information.

Auto-reconnection support

Unless instructed otherwise a disconnected client will try to reconnect forever, until the server is available again. Please see the available reconnection options here.

Disconnection detection

A heartbeat mechanism is implemented at the Engine.IO level, allowing both the server and the client to know when the other one is…


7. Octotree

GitHub on steroids. Browser extension that enhances GitHub code review and exploration.

GitHub logo ovity / octotree

GitHub on steroids

About

Browser extension that enhances GitHub code review and exploration. This repo contains the old source code of a limited version of Octotree. You can download Octotree for your browser from our website. Octotree supports Chrome, Firefox, Edge, Opera and Safari.

Chrome Firefox Opera Edge Safari

Support

Please check out the troubleshooting guide to see if it solves the problem. If it doesn't, please either create a forum ticket or send an email to support@octotree.io.

Learn more

Octotree





8. deno-puppeteer

A port of puppeteer running on Deno

GitHub logo lucacasonato / deno-puppeteer

A port of puppeteer running on Deno

deno-puppeteer

API

A fork of Puppeteer running on Deno.

Puppeteer is a library which provides a high-level API to control Chrome, Chromium, or Firefox Nightly over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:

  • Generate screenshots and PDFs of pages.
  • Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. "SSR" (Server-Side Rendering)).
  • Automate form submission, UI testing, keyboard input, etc.
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.
  • Capture a timeline trace of your site to help diagnose performance issues.
  • Test Chrome Extensions.

Getting Started

Installation

To use Puppeteer, import it like so:

import puppeteer from "https://deno.land/x/puppeteer@5.5.1/mod.ts";
Enter fullscreen mode Exit fullscreen mode

Puppeteer…


9. react-remove-scroll

Disables scroll outside of children node. Removes and disables scroll in a "React" way

GitHub logo theKashey / react-remove-scroll

Removes and disables πŸ“œin a "React" way

React-remove-πŸ“œ


dont even scroll
Build status npm downloads bundle size

react-remove-scroll

NPM version

Disables scroll outside of children node.

  • πŸ–± mouse and touch devices friendly
  • πŸ“ˆ vertical and horizontal
  • πŸ“œ removes document scroll bar maintaining it space
  • βœ… support nested scrollable elements
  • πŸ•³ supports react-portals (uses React Event system)
  • ☠️ it could block literally any scroll anywhere

Usage

Just wrap content, which should be scrollable, and everything else would not.

import {RemoveScroll} from 'react-remove-scroll';

<RemoveScroll>
  Only this content would be scrollable
</RemoveScroll>  
Enter fullscreen mode Exit fullscreen mode

RemoveScroll accept following props

  • children
  • [enabled] - activate or deactivate component behaviour without removing it.
  • [allowPinchZoom=false] - enabled "pinch-n-zoom" behavior. By default it might be prevented. However - pinch and zoom might break "scroll isolation", and disabled by default.
  • [noIsolation=false] - disables outer event capturing. Event capturing is React friendly and unlikely be a problem But if you are using shadowbox of some sort - you…

10. Software Developer Folio

A clean, beautiful and responsive portfolio template for Developers.

GitHub logo saadpasta / developerFolio

πŸš€ Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.

Software Developer Folio ⚑️ GitHub GitHub stars All Contributors

A clean, beautiful and responsive portfolio template for Developers!

Just change src/portfolio.js to get your personal portfolio. Feel free to use it as-is or customize it as much as you want.

But if you want to contribute and make this much better for other developer have a look at Issues.

If you created something awesome and want to contribute then feel free to open an pull request.

Table of Contents

Sections

βœ”οΈ Summary and About me
βœ”οΈ Skills
βœ”οΈ Education
βœ”οΈ Work Experience
βœ”οΈ Open Source Projects Connected with Github
βœ”οΈ Big Projects
βœ”οΈ Achievements And Certifications πŸ†
βœ”οΈ Blogs
βœ”οΈ Talks
βœ”οΈ Podcast
βœ”οΈ Contact me
βœ”οΈ Twitter Timeline
βœ”οΈ Github Profile

To view a live example, click here.

Getting Started

…


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