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.
remotion-dev / remotion
🎥 Make videos programmatically with React
Remotion is a framework 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
Created with Remotion
View more in the Remotion Showcase! |
Get started
If you already have Node.JS installed, type
npx create-video@latest
to get started. Otherwise, read the installation page in the documentation.
Documentation
Documentation: remotion.dev/docs
API Reference: remotion.dev/api
License
Be aware of that Remotion has a special license and requires obtaining a company license in some cases. Read the LICENSE page for more information.
Contributing
Please read CONTRIBUTING.md to learn about contributing to this project.
2. Evergreen
Evergreen React UI Framework by Segment. Components are built on top of a React UI Primitive for endless composability.
-
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 v7 Migration guide
Evergreen v7 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
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!</Button>
…3. CORS Anywhere
CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request.
Rob--W / cors-anywhere
CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request.
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
…4. Vuetify
Material Component Framework for Vue
💖 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! 🎉
- Become a backer or sponsor on GitHub or Patreon (supports John and Heather)
- Become a backer or sponsor on Open Collective (supports the Core team)
- Become a subscriber on Tidelift
- Make a one-time payment with Paypal
- Book time with the Team
What's the difference between GitHub Sponsors, Patreon, and OpenCollective?
Funds donated through GitHub Sponsors and 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…
5. Oasis Engine
Oasis Engine is a web-first and mobile-first high-performance real-time development platform.
galacean / engine
A typescript interactive engine, support 2D, 3D, animation, physics, built on WebGL and glTF.
Galacean Engine
Galacean is a web-first and mobile-first high-performance real-time interactive engine. Use component system design and pursue ease of use and light weight. Developers can independently use and write Typescript scripts to develop projects using pure code.
Features
- 🖥 Platform - Support HTML5 and Alipay miniprogram
- 🔮 Graphics - Advanced 2D + 3D graphics engine
- 🏃 Animation - Powerful animation system
- 🧱 Physics - Powerful and easy-to-use physical features
- 👆 Input - Easy-to-use interactive capabilities
- 📑 Scripts - Use TypeScript to write logic efficiently
npm
The engine is published on npm with full typing support. To install, use:
npm install @galacean/engine
This will allow you to import engine entirely using:
import * as GALACEAN from "@galacean/engine";
or individual classes using:
import { Engine, Scene, Entity } from "@galacean/engine";
Usage
// Create engine by passing in the HTMLCanvasElement id and adjust canvas size
const engine =
…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.
ag-grid / ag-grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
JavaScript Data Grid | JavaScript Table
AG Grid is a fully-featured and highly customizable JavaScript Data Grid. It delivers outstanding performance, has no third-party dependencies and comes with support for React, Angular and Vue.
📖 Overview
Table of Contents
AG Grid is available in two versions: Community & Enterprise.
-
ag-grid-community
is free, available under the MIT license, and comes with all of the core features expected from a JavaScript Data Grid, including Sorting, Filtering, Pagination, Editing, Custom Components, Theming and more. -
ag-grid-enterprise
is available under a commercial license and comes with advanced features, like Integrated Charting, Row Grouping…
7. Fontsource
Self-host Open Source fonts in neatly bundled NPM packages.
fontsource / fontsource
Self-host Open Source fonts in neatly bundled NPM packages.
Fontsource
Looking for privacy-focused website analytics? Check out Medama, an open-source, lightweight and self-hostable analytics solution designed to respect user privacy.
An updating monorepo full of self-hostable Open Source fonts bundled into individual NPM packages!
Our full documentation and search directory can be found here.
-
Self-hosting fonts can significantly improve website performance by eliminating the extra latency caused by additional DNS resolution and TCP connection establishment that is required when using a CDN like Google Fonts. This can help to prevent doubled visual load times for simple websites, as benchmarked 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.
-
Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an…
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.
A modular minifier, built on top of the PostCSS ecosystem.
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.
Vincit / objection.js
An SQL-friendly ORM for Node.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:
- An easy declarative way of defining models and relationships between them
- Simple and fun way to fetch, insert, update and delete objects using the full power of SQL
- …
10. Victory
A collection of composable React components for building interactive data visualizations
FormidableLabs / victory
A collection of composable React components for building interactive data visualizations
Victory
Contents
- See the docs and examples on the website: https://commerce.nearform.com/open-source/victory
- Experiment with all Victory components in this code sandbox
Getting started
- Add Victory to your project:
# npm
$ npm i --save victory
# or yarn
$ yarn add victory
- 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"));
-
VictoryPie
component will be rendered, and you should see:
Requirements
Projects using Victory should also depend on React. As of victory@34.0.0
Victory requires React version 16.3.0
or above
Victory Native
Victory Native shares most of…
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)