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.
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
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
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.
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.
naptha / tesseract.js
Pure Javascript OCR for more than 100 Languages ๐๐๐ฅ
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
Video Real-time Recognition
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
yangshun / tech-interview-handbook
๐ฏ Curated interview preparation materials for busy engineers
Tech Interview Handbook
Get paid more. Moonchaser has negotiated hundreds of tech offers. Get 1-1 guidance from their experienced team of ex-FAANG PMs, SWEs, and Recruiters. Find out more
What is this?
No one has time to do a few hundred LeetCode questions. Here's free and curated technical interview preparation materials for busy engineers, brought to you by the author of the Blind 75 List.
Besides the usual algorithm questions, other awesome stuff includes:
- How to prepare for coding interviews
- Interview Cheatsheet - Straight-to-the-point Do's and Don'ts
- Algorithm tips and the best practice questions categorized by topic
- "Front-end Job Interview Questions" answers
- Interview formats of the top tech companies
- Behavioral questions asked by the top tech companies
- Good questions to ask your interviewers at the end of the interviews
- Helpful resume tips to get your resumeโฆ
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.
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-2021 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.
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 and Deployments
- automation: solutions for automating workflows.
- code-scanning: starter workflows for Code Scanning
- 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/django.yml
and ci/properties/django.properties.json
.
Valid properties
-
name
: the name shown in onboarding. This property is unique within the repository. -
description
: the description shown in onboarding - โฆ
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.
apollographql / apollo-client
๐ ย A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
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.
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
- @benjamn (Apollo)
- @hwillson (Apollo)
- @jcreighton (Apollo)
- @brainkim (Apollo)
Who is Apollo?
Apollo Graph, Inc. creates industry-leading tools for building applications with GraphQL:
- Apollo Client โ The most popular GraphQL client for the web. Apollo also builds and maintains Apollo iOS and Apollo Android.
- Apollo Server โย Build a production-ready JavaScript GraphQL server with a schema-first approach.
- Apollo Studio โ A turnkey portal for GraphQL developers, featuring a powerful GraphQL IDE (the Apollo Explorer)โฆ
8. GG Editor
A visual graph editor based on G6 and React
English | ็ฎไฝไธญๆ
GGEditor
ๅฎ่ฃ
npm
npm install gg-editor --save
umd
<script src="https://unpkg.com/gg-editor@${version}/dist/index.js"></script>
ไฝฟ็จ
ๆต็จๅพ
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>;
่ๅพ
import GGEditor, { Mind } from 'gg-editor';
const data = {
โฆ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.
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 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
Live demo
Check the live demo here
Open PRO
Looking for more pages and components? Have a look at the premium version here
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.
renovatebot / renovate
Universal dependency update tool that fits into your workflows.
Renovate
Automated dependency updates Multi-platform and multi-language.
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 behavior is extremely 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 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 Cloud, Bitbucket Server, Azure DevOps and Gitea.
- Open source (installable via npm/Yarn or Docker Hub) so can be self-hosted or used via GitHub App
Who Uses Renovate?
Renovate was released in 2017 and already is widely used inโฆ
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)
Tesseract is astonishing !