loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 2nd October 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. visx

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

GitHub logo airbnb / visx

๐Ÿฏ visx | visualization components

Coverage Status

visx

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.


Docs โ€ข Gallery โ€ข Blog โ€ข Slack #visx โ€ข Changelog โ€ข Getting started tutorial

Usage

Remix on Glitch

Let's make a simple bar graph.

First we'll install the relevant packages:

$ npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale

import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';
// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency;
// Define the graph dimensions and margins
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20
โ€ฆ

2. graphQL Code Generator

GraphQL Code Generator is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can utilize GraphQL Code Generator to generate output from your GraphQL Schema and GraphQL Documents

GitHub logo dotansimha / graphql-code-generator

A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.

CodeGen

npm version CircleCI Discord Chat code style: prettier renovate-app badge

graphql-code-generator.com

GraphQL Codegen 1.0 is here!

GraphQL Code Generator is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can utilize GraphQL Code Generator to generate output from your GraphQL Schema and GraphQL Documents (query/mutation/subscription/fragment).

By analyzing the schema and documents and parsing it, GraphQL Code Generator can output code at a wide variety of formats, based on pre-defined templates or based on custom user-defined ones. Regardless of the language that you're using, GraphQL Code Generator got you covered.

GraphQL Code Generator lets you choose the output that you need, based on plugins, which are very flexible and customizable. You can also write your plugins to generate custom outputs that match your needs.

You can try this tool live on your browser and see some useful examples. Check out GraphQL Code Generator Live Examples.

We currently support andโ€ฆ


3. Tesseract.js

Tesseract.js is a javascript Optical character recognition (OCR) library that gets words in almost any language out of images.

GitHub logo naptha / tesseract.js

Pure Javascript OCR for more than 100 Languages ๐Ÿ“–๐ŸŽ‰๐Ÿ–ฅ

Tesseract.js

Build Status Gitpod Ready-to-Code Financial Contributors on Open Collective npm version Maintenance License Code Style Downloads Total Downloads Month

Version 2 is now available and under development in the master branch, read a story about v2: Why I refactor tesseract.js v2?
Check the support/1.x branch for version 1


Tesseract.js is a javascript library that gets words in almost any language out of images. (Demo)

Image Recognition

fancy demo gif

Video Real-time Recognition

Tesseract.js Video

Tesseract.js wraps an emscripten port of the Tesseract OCR Engine It works in the browser using webpack or plain script tags with a CDN and on the server with Node.js After you install it, using it is as simple as:

import Tesseract from 'tesseract.js';

Tesseract.recognize(
  'https://tesseract.projectnaptha.com/img/eng_bw.png',
  'eng',
  { logger: m => console.log(m) }
).then(({ data: { text } }) => {
  console.log(text);
})

Or more imperative

import { createWorker }
โ€ฆ

4. Tech Interview Handbook

Carefully curated content to help you ace your next technical interview, with a focus on algorithms. System design questions are in-progress. Besides the usual algorithm questions

GitHub logo yangshun / tech-interview-handbook

๐Ÿ’ฏ Materials to help you rock your next coding interview

Tech Interview Handbook


Black Lives Matter. Support the Equal Justice Initiative


What is this?

Carefully curated content to help you ace your next technical interview, with a focus on algorithms. System design questions are in-progress. Besides the usual algorithm questions, other awesome stuff includes:

Help from you in contributing content would be very much appreciated!

Why do I want this?

This repository has practical content that covers all phases of a technical interview, fromโ€ฆ


5. reveal.js

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free.

GitHub logo hakimel / reveal.js

The HTML Presentation Framework

reveal.js

Slides

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free. Check out the live demo.

The framework comes with a broad range of features including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX support, syntax highlighted code and much more.

Get Started

Documentation

The full reveal.js documentation is available at revealjs.com.

Online Editor

Want to create your presentation using a visual editor? Try the official reveal.js presentation platform for free at Slides.com. It's made by the same people behind reveal.js.

License

MIT licensed

Copyright (C) 2011-2020 Hakim El Hattab, https://hakim.se







6. GitHub Actions Starter Workflows

These are the workflow files for helping people get started with GitHub Actions. They're presented whenever you start to create a new GitHub Actions workflow.

GitHub logo actions / starter-workflows

Accelerating new GitHub Actions workflows

Starter Workflows

These are the workflow files for helping people get started with GitHub Actions. They're presented whenever you start to create a new GitHub Actions workflow.

If you want to get started with GitHub Actions, you can use these starter workflows by clicking the "Actions" tab in the repository where you want to create a workflow.

Directory structure:

  • ci: solutions for Continuous Integration
  • automation: solutions for automating workflows.
  • icons: svg icons for the relevant template

Each workflow must be written in YAML and have a .yml extension. They also need a corresponding .properties.json file that contains extra metadata about the workflow (this is displayed in the GitHub.com UI).

For example: ci/python-django.yml and ci/properties/python-django.properties.json.

Valid properties:

  • name: the name shown in onboarding
  • description: the description shown in onboarding
  • iconName: the icon name in the relevant folder, for example django should have an iconโ€ฆ

7. Apollo Client

Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.

GitHub logo apollographql / apollo-client

๐Ÿš€ A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server

Apollo Client

Apollo Client

npm version Build Status Join the community on Spectrum

Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.

Documentation

All Apollo Client documentation, including React integration articles and helpful recipes, can be found at:
https://www.apollographql.com/docs/react/

The Apollo Client API reference can be found at:
https://www.apollographql.com/docs/react/api/apollo-client/

Maintainers







8. GG Editor

A visual graph editor based on G6 and React

GitHub logo alibaba / GGEditor

A visual graph editor based on G6 and React

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

GGEditor

ๅŸบไบŽ G6 ๅ’Œ React ็š„ๅฏ่ง†ๅŒ–ๅ›พ็ผ–่พ‘ๅ™จ

GitHub npm npm

ๅฎ‰่ฃ…

npm

npm install gg-editor --save

umd

<script src="https://unpkg.com/gg-editor@${version}/dist/index.js"></script>

ไฝฟ็”จ

ๆต็จ‹ๅ›พ

Edit GGEditor - Flow

import GGEditor, { Flow } from 'gg-editor'
const data = {
  nodes: [
    {
      id: '0'
      label: 'Node'
      x: 55,
      y: 55,
    },
    {
      id: '1',
      label: 'Node',
      x: 55,
      y: 255,
    },
  ],
  edges: [
    {
      label: 'Label',
      source: '0',
      target: '1',
    },
  ],
};

<GGEditor>
  <Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;

่„‘ๅ›พ

Edit GGEditor - Mind

import GGEditor, { Mind } 
โ€ฆ

9. Open

Open is a free React landing page template designed for developers/makers who want to create a quick and professional landing page for their open source projects, SaaS products, online services, and more.

GitHub logo cruip / open-react-template

A free React landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by

Free React landing page template

Open React template preview

Open is a free React landing page template designed for developers/makers who want to create a quick and professional landing page for their open source projects, SaaS products, online services, and more.

Use it for whatever you want, and be sure to reach us out on Twitter if you build anything cool/useful with it.

Created and maintained with โค๏ธ by Cruip.com.

Live demo

Check the live demo here ๐Ÿ‘‰๏ธ https://open.cruip.com/

Open PRO

Looking for more pages and components? Have a look at the premium version here ๐Ÿ‘‰๏ธ https://cruip.com/demos/open-pro/

The premium template is built on-the-top of Tailwind CSS, and React components have been re-built from scratch.

Table of contents


10. Renovate

Automated dependency updates. Multi-platform and multi-language.

GitHub logo renovatebot / renovate

Universal dependency update tool that fits into your workflows.

Renovate banner

Renovate

Automated dependency updates. Multi-platform and multi-language.

License: AGPL v3 codecov Renovate enabled Build status

Why Use Renovate?

  • Receive automated Pull Requests whenever dependencies need updating.
  • Define schedules to avoid unnecessary noise in projects (e.g. for weekends or outside of working hours, or weekly updates, etc)
  • Relevant package files are discovered automatically (e.g. supports monorepo architecture such as lerna or yarn workspaces without further configuration)
  • Bot behaviour is extremely customisable via configuration files (config as code)
  • Use eslint-like shared config presets for ease of use and simplifying configuration
  • Lock files are natively supported and updated in the same commit, including immediately resolving conflicts whenever PRs are merged
  • Supports GitHub (.com and Enterprise), GitLab (.com and CE/EE), Bitbucket Server, Azure DevOps and Gitea. Bitbucket Cloud is also supported but considered in Beta until it gets the thumbs-up from more users
  • Open source (installable via npm/yarn or Docker Hub) so can be self-hosted or used via GitHub App

Who Uses

โ€ฆ

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
cervoneluca profile image
Luca Cervone

Tesseract is astonishing !