DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 2nd October 2020

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 Discussions 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
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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.

npm version

https://the-guild.dev/graphql/codegen

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 has 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 maintain these plugins (TypeScript, Flow…


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

Lint & Test CodeQL Gitpod Ready-to-Code Financial Contributors on Open Collective npm version Maintenance License Code Style npm jsDelivr hits (npm)

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 a webassembly port of the Tesseract OCR Engine It works in the browser using webpack, esm, 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 { createWorker } from 'tesseract.js';

(async () => {
  const worker = await createWorker('eng');
  const ret = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
  console.log(ret.data.text);
  await worker.terminate();
})();
Enter fullscreen mode Exit fullscreen mode

When recognizing multiple images, users should create a worker once, run worker.recognize for each image, and then run worker.terminate() once at the end (rather than running the…


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

💯 Curated coding interview preparation materials for busy software engineers

Tech Interview Handbook


Start Reading Tech Interview Handbook

What is this?

Not everyone has the time to do a few hundred LeetCode questions. Here are free and curated technical interview preparation materials for busy engineers, brought to you by me, the author of Blind 75. Over 1,000,000 people have benefitted from this handbook!

Besides the usual algorithm questions, other awesome stuff includes:

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

Why would you read


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 beautiful presentations for free. Check out the live demo at revealjs.com.

The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax highlighted code and an extensive API.


Want to create reveal.js presentation in a graphical editor? Try https://slides.com. It's made by the same people behind reveal.js.


Sponsors

Hakim's open source work is supported by GitHub sponsors. Special thanks to:



Getting started


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

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/django.yml and ci/properties/django.properties.json.

Valid properties

  • name: the name shown in onboarding. This property is unique…

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 Join our Discord server


Announcement:
Join 1000+ engineers at GraphQL Summit for talks, workshops, and office hours, Oct 8-10 in NYC. Get your pass here ->


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.

☑️ Apollo Client User Survey
What do you like best about Apollo Client? What needs to be improved? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

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/

Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apollo's official learning platform:
https://odyssey.apollographql.com/

Maintainers

Name Username
Ben Newman @benjamn
Alessia Bellisario @alessbell
Jeff Auriemma

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

基于 G6React 的可视化图编辑器

GitHub npm npm

安装

npm

npm install gg-editor --save
Enter fullscreen mode Exit fullscreen mode

umd

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

使用

流程图

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>;
Enter fullscreen mode Exit fullscreen mode

脑图

Edit GGEditor - Mind

import GGEditor, { Mind } from 'gg-editor';
const data = {
Enter fullscreen mode Exit fullscreen mode

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 / Next.js landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by

Free React / Next.js landing page template

Open React / Next.js template preview

Open is a free React / Next.js landing page template built with Tailwind CSS 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.

Version 1.0.0 built with the Cruip CSS is available here. Version 2.0.3 built with Tailwind CSS and React + Vite is available here. Version 3.3.0 (before redesign) built with Tailwind CSS and Next.js is available here.

Live demo

Check the live demo here 👉️ https://open.cruip.com/

Open PRO

Open Pro

Design files

If you need the design files, you can download them from Figma's Community 👉 https://bit.ly/401KSUS

Usage

This is a Next.js project bootstrapped with create-next-app


10. Renovate

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

GitHub logo renovatebot / renovate

Home of the Renovate CLI: Cross-platform Dependency Automation by Mend.io

Mend Renovate CLI banner

Renovate

Automated dependency updates Multi-platform and multi-language.

License: AGPL-3.0-only codecov Renovate enabled Build status Docker Pulls OpenSSF Scorecard

Why Use Renovate?

  • Get automated Pull Requests to update your dependencies
  • Reduce noise by running Renovate on a schedule, for example:
    • on weekends
    • outside of working hours
    • each week
    • each month
  • Relevant package files are discovered automatically
  • Supports monorepo architectures with workspaces with no extra configuration
  • Bot behavior is customizable via configuration files (config as code)
  • Use ESLint-like shared config presets for ease of use and simplifying configuration (JSON format only)
  • Lock files are supported and updated in the same commit, including immediately resolving conflicts whenever PRs are merged
  • Get replacement PRs to migrate from a deprecated dependency to the community suggested replacement, works with most managers, see issue 14149 for exceptions
  • Open source (installable via npm/Yarn or Docker Hub) so can be self-hosted or used via the Mend Renovate App

Supported Platforms

Renovate works on these platforms:






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 (1)

Collapse
 
cervoneluca profile image
Luca Cervone

Tesseract is astonishing !