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.
hasura
/
graphqurl
curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a dead-simple universal javascript GraphQL client.
graphqurl
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
Table of contents
Installation
Steps to Install CLI
npm install -g graphqurl
Steps to Install Node Library
npm install --save graphqurl
Usage
CLI
Query
gq https://my-graphql-endpoint/graphql \
-H 'Authorization: Bearer <token>' \
-q 'query { table { column } }'
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
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
A simple and powerful Datatable for React based on Material-UI Table with some additional features.
Roadmap
Key features
- Actions
- Component overriding
- Custom column rendering
- Detail Panel
- Editable
- Export
- Filtering
- Grouping
- Localization
- Remote Data
- Search
- Selection
- Sorting
- Styling
- Tree Data
- and more
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.
🃏 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.
See more on jestjs.io
Table of Contents
- Getting Started
- Running from command line
- Additional Configuration
- Documentation
- Badge
- Contributing
- Credits
- License
Getting Started
Install Jest using yarn:
yarn add --dev jest
Or npm:
npm install --save-dev jest
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.
bvaughn
/
react-virtualized
React components for efficiently rendering large lists and tabular data
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
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';…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.
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.
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.
socket.io
Features
Socket.IO enables real-time bidirectional event-based communication. It consists of:
- a Node.js server (this repository)
- a Javascript client library for the browser (or a Node.js client)
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…
7. Octotree
GitHub on steroids. Browser extension that enhances GitHub code review and exploration.
About
Browser extension that enhances GitHub code review and exploration. You can download Octotree for your browser from our website. Octotree supports Chrome, Firefox, Edge, Opera and 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
Copyright
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.
8. deno-puppeteer
A port of puppeteer running on Deno
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@9.0.1/mod.ts";
Puppeteer…
9. react-remove-scroll
Disables scroll outside of children node. Removes and disables scroll in a "React" way
theKashey
/
react-remove-scroll
Removes and disables 📜in a "React" way
React-remove-📜
dont even scroll
react-remove-scroll
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>
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.
saadpasta
/
developerFolio
🚀 Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.
Software Developer Folio ⚡️ 
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
- Sections
- Getting Started
- How to Use
- Linking portfolio to Github
- Change and Customize
- Deployment
- Technologies Used
- Illustrations
- For the Future
- Contributors
Portfolio Sections
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)