DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 8th January 2021

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

oclif Version

Azure Pipelines Appveyor CI Downloads/week License

graphqurl is a curl like CLI for GraphQL. It's features include:

  • CLI for making GraphQL queries. It also provisions queries with autocomplete.
  • Run a custom GraphiQL, where you can specify request's headers, locally against any endpoint
  • Use as a library with Node.js or from the browser
  • Supports subscriptions
  • Export GraphQL schema

Made with ❤️ by Hasura


Graphqurl Demo

GraphiQL Demo

Subscriptions triggering bash


Table of contents

Installation

Steps to Install CLI

npm install -g graphqurl
Enter fullscreen mode Exit fullscreen mode

Steps to Install 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…


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 jestjs / jest

Delightful JavaScript Testing.

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

GitHub CI Status Coverage Status

Gitpod ready-to-code

 

🃏 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…





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

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

If you like this project, 🎉 become a sponsor or ☕ buy me a coffee

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

Deploy with Vercel

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 at…

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

Latest NPM version Build status Downloads per month

Getting Started

Please check our documentation here.

Questions

Our issues list is exclusively reserved for bug reports and feature requests. For usage questions, please use the following resources:

Security

If you think that you have found a security vulnerability in our project, please do not create an issue in this GitHub repository, but rather refer to our Security Policy.

Issues and contribution

Please make sure to read our Contributing Guide before creating an issue or making a pull request.

Thanks to everyone who has already contributed to Socket.IO!

License

MIT





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. You can download Octotree for your browser from our website.

Chrome Firefox Edge Safari Brave Opera

Octotree is a proprietary software. This repository contains the old source code of a very limited version of Octotree. The Octotree team owns the complete copyright over this code.

Octotree

Support

Learn more





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@16.2.0/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 dont…

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. (This is currently not being maintained)

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. Customize portfolio theme by using your own color scheme globally in the src/_globalColor.scss file. Feel free to use it as-is or personalize it as much as you want.

If you'd like to contribute and make this much better for other users, have a look at Issues.

Created something awesome for your fork of the portfolio and want to share it? Feel free to open a pull request.

Table of Contents

Portfolio Sections

✔️ Summary and About me
✔️ Skills
✔️ Education
✔️ Work Experience
✔️ Open Source Projects Connected with GitHub
✔️ Big Projects
✔️ Achievements And Certifications 🏆
✔️ Blogs…


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)