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 ❤️ by Hasura
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.
📸 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
- Running from command line
- Additional Configuration
- Documentation
- Badge
- Contributing
- Credits
- License
- Copyright
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…
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.
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
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
…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 at…
6. socket.io
Socket.IO enables real-time bidirectional event-based communication.
socket.io
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:
- read our documentation
- check our troubleshooting guide
- look for/ask questions on Stack Overflow
- create a new discussion
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
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 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.
Support
- Check the troubleshooting guide for common issues
- Submit a ticket if you want to report bugs or suggest features
- Follow @octotree on Twitter for product updates
- If you need help with payment and billing, email support@octotree.io
Learn more
8. deno-puppeteer
A port of puppeteer running on Deno
lucacasonato / deno-puppeteer
A port of puppeteer running on Deno
deno-puppeteer
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";
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-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 dont…
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. (This is currently not being maintained)
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
- Linking blogs section to Medium
- Change and Customize
- Deployment
- Technologies Used
- Illustrations
- For the Future
- Contributors
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)