DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 12th February 2021

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. Remotion

Create videos programmatically in React. Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

GitHub logo JonnyBurger / remotion

๐ŸŽฅ Create videos programmatically in React

Discord Shield Join the Discord

Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

Why create videos in React?

  • Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
  • Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
  • Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

Example videos

  • Remotion Trailer Watch โ€ข Source code โ€ข The announcement video for Remotion was written in Remotion itself!
  • AnySticker Welcome Video Watch โ€ข Source code โ€ข An in-app explainer video for my app AnySticker.
  • "Game changer or no game changer" intro Watch โ€ข Source code โ€ข An intro for a quiz show I did with William Candillon.

Feel free to pull request your creations!

Get started

If you already have Yarn and FFMPEG installed, type

yarn create video
Enter fullscreen mode Exit fullscreen mode

to get started. Otherwise, read the installation page in the documentation.

โ€ฆ




2. Evergreen

Evergreen React UI Framework by Segment. Components are built on top of a React UI Primitive for endless composability.

GitHub logo segmentio / evergreen

๐ŸŒฒ Evergreen React UI Framework by Segment

  • Works out of the box. Evergreen contains a set of polished React components that work out of the box.

  • Flexible & composable. Evergreen components are built on top of a React UI Primitive for endless composability.

  • Enterprise-grade. Evergreen features a UI design language for enterprise-grade web applications.

Documentation & Community

Evergreen v4 to v5 Migration guide

Evergreen v4 to v5 migration guide

Install and use components

๐ŸŒฒ Evergreen is made up of multiple components and tools which you can import one by one. All you need to do is install the evergreen-ui package:

$ yarn add evergreen-ui
# or
$ npm install --save evergreen-ui
Enter fullscreen mode Exit fullscreen mode

A working version, assuming you are using something like Create React App, might look like this:

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'
ReactDOM.render(
  <Button>I am using ๐ŸŒฒ Evergreen!
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

3. CORS Anywhere

CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request.

GitHub logo Rob--W / cors-anywhere

CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request.

Build Status Coverage Status

CORS Anywhere is a NodeJS proxy which adds CORS headers to the proxied request.

The url to proxy is literally taken from the path, validated and proxied. The protocol part of the proxied URI is optional, and defaults to "http". If port 443 is specified the protocol defaults to "https".

This package does not put any restrictions on the http methods or headers, except for cookies. Requesting user credentials is disallowed The app can be configured to require a header for proxying a request, for example to avoid a direct visit from the browser.

Example

// Listen on a specific host via the HOST environment variable
var host = process.env.HOST || '0.0.0.0';
// Listen on a specific port via the PORT environment variable
var port = process.env.PORT || 8080;
var cors_proxy = require('cors-anywhere');
cors_proxy.createServer
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

4. Vuetify

Material Component Framework for Vue

GitHub logo vuetifyjs / vuetify

๐Ÿ‰ Material Component Framework for Vue

Vuetify Logo

CI badge Coverage Downloads Downloads
License zenhub Chat
Version CDN

Supporting Vuetify

Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from the entire Core Team. Sponsor Vuetify and receive some awesome perks and support Open Source Software at the same time! ๐ŸŽ‰

What's the difference between Patreon and OpenCollective

Funds donated via Patreon go directly to support John and Heather's full-time work on Vuetify. Funds donated via Open Collective are managed with transparent expenses and will be used for compensating work and expenses for Core team members. Your name/logo will receive proper recognition and exposure by donating on either platform.

Diamond Sponsors

Platinum Sponsors

Gold

โ€ฆ

5. Oasis Engine

Oasis Engine is a web-first and mobile-first high-performance real-time development platform.

GitHub logo oasis-engine / engine

Oasis Engine is a web-first and mobile-first high-performance real-time development platform.

Oasis Engine (Ant Graphics Engine)

Oasis logo

npm-version npm-size npm-download

Oasis is a web-first and mobile-first high-performance real-time development platform. Use component system design and pursue ease of use and light weight. This repository is the core engine of Oasis. Developers can independently use and write Typescript scripts to develop projects using pure code.

Features

  • ๐Ÿ–ฅ ย Platform - Suppport HTML5 and Alipay miniprogram
  • ๐Ÿ”ฎ ย Graphics - Advanced 2D + 3D graphics engine
  • ๐Ÿƒ ย Animation - Powerful animation system
  • ๐Ÿ“‘ ย Scripts - Use TypeScript to write logic efficiently

Usage

// Create engine by passing in the HTMLCanvasElement name and get root entity.
const engine = new WebGLEngine("canvas");
const canvas = engine.canvas;
const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root");
canvas.width = window.innerWidth * SystemInfo.devicePixelRatio;
canvas.height = window.innerHeight * SystemInfo.devicePixelRatio;
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

6. ag-Grid

ag-Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no third-party dependencies and integrates smoothly with all major JavaScript frameworks.

GitHub logo ag-grid / ag-grid

Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

alt text

CDNJS npm npm

Module SonarCloud Status
ag-grid-community Quality Gate Status
ag-grid-enterprise Quality Gate Status

ag-Grid

ag-Grid is a fully-featured and highly customizable JavaScript data grid It delivers outstanding performance, has no third-party dependencies and integrates smoothly with all major JavaScript frameworks.

Here's how our grid looks with multiple filters and grouping enabled:

alt text

Features

In addition to the standard set of features you'd expect from any grid:

  • Column Interactions (resize, reorder, and pin columns)
  • Pagination
  • Sorting
  • Row Selection

Here are some of the features that make ag-Grid stand out:

  • Grouping / Aggregation *
  • Custom Filtering
  • In-place Cell Editing
  • Records Lazy Loading *
  • Server-Side Records Operations *
  • Live Stream Updates
  • Hierarchical Data Support & Tree View *
  • Customizable Appearance
  • Customizable Cell Contents
  • Excel-like Pivoting *
  • State Persistence
  • Keyboard Navigation
  • Data Export to CSV
  • Data Export to Excel *
  • Row Reordering
  • Copy / Paste
  • Column Spanning
  • Pinned Rows
  • Full Width Rows

* The features marked with an asterisk are availableโ€ฆ


7. Fontsource

Self-host Open Source fonts in neatly bundled NPM packages.

GitHub logo fontsource / fontsource

Self-host Open Source fonts in neatly bundled NPM packages.

Fontsource

Generic badge Monthly Downloads Total Downloads License GitHub stars

An updating monorepo full of self-hostable Open Source fonts bundled into individual NPM packages Inspired by the aging Typefaces project and primarily built using Google Font Metadata.

Our supported font search directory can be found here (in very early development and may contain outdated information) or alternatively in Markdown format here.

  • Self-hosting brings significant performance gains as typically loading fonts from hosted font services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to double visual load times. Benchmarks can be found here and here.

  • Fonts remain version locked. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency.

  • Your fonts load offline. Often there may be situations, like working in an airplane or trainโ€ฆ


8. cssnano

cssnano is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately.

GitHub logo cssnano / cssnano

A modular minifier, built on top of the PostCSS ecosystem.


cssnano


A modular minifier, built on top of the PostCSS ecosystem.

Backers on Open Collective Sponsors on Open Collective NPM version Build Status codecov Gitter

cssnano is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately.

Our preset system allow you to load cssnano in a different configuration depending on your needs; the default preset performs safe transforms, whereas the advanced preset performs more aggressive transforms that are safe only when your site meets the requirements; but regardless of the preset you choose, we handle more than whitespace transforms!

Optimisations range from compressing colors & removing comments, to discarding overridden at-rules, normalising unicode-range descriptors, even mangling gradient parameters for a smaller output value! In addition, where it's made sense for a transform, we've added Browserslist to provide different output depending on the browsers that you support.

For further details check out the website:


9. Objection.js

Objection.js is an ORM for Node.js that aims to stay out of your way and make it as easy as possible to use the full power of SQL and the underlying database engine while still making the common stuff easy and enjoyable.

GitHub logo Vincit / objection.js

An SQL-friendly ORM for Node.js

Build Status Coverage Status Join the chat at https://gitter.im/Vincit/objection.js

Objection.js

Objection.js is an ORM for Node.js that aims to stay out of your way and make it as easy as possible to use the full power of SQL and the underlying database engine while still making the common stuff easy and enjoyable.

Even though ORM is the best commonly known acronym to describe objection, a more accurate description is to call it a relational query builder. You get all the benefits of an SQL query builder but also a powerful set of tools for working with relations.

Objection.js is built on an SQL query builder called knex. All databases supported by knex are supported by objection.js. SQLite3, Postgres and MySQL are thoroughly tested.

What objection.js gives you:


10. Victory

A collection of composable React components for building interactive data visualizations

GitHub logo FormidableLabs / victory

A collection of composable React components for building interactive data visualizations

victory

an ecosystem of composable React components for building interactive data visualizations

weekly downloads current version build status Gzip size Maintenance Status

Victory

Contents

Getting started

  1. Add Victory to your project:
# npm
$ npm i --save victory
# or yarn
$ yarn add victory
Enter fullscreen mode Exit fullscreen mode
  1. Add your first Victory component:
import React from "react";
import { render } from "react-dom";
import { VictoryPie } from "victory";
const PieChart = () => {
  return <VictoryPie />;
};
render(<PieChart />, document.getElementById("app"));
Enter fullscreen mode Exit fullscreen mode
  1. VictoryPie component will be rendered, and you should see:

pie

Requirements

Projects using Victory should also depend on React. Victory works with React version 15โ€ฆ





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

Forem Open with the Forem app