DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

๐Ÿš€10 Trending projects on GitHub for web developers - 27th November 2020

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

1. JSX Lite

Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid. Import code from Figma and Builder.io

GitHub logo BuilderIO / mitosis

Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.


Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid

code style: prettier PRs Welcome License Types

Fiddle

At a glance

Mitosis is inspired by many modern frameworks. You'll see components look like React components and use React-like hooks, but have simple mutable state like Vue, use a static form of JSX like Solid, compile away like Svelte, and uses a simple, prescriptive structure like Angular.

This is what a basic Mitosis component that manages some state looks like:

import { useState, Show, For } from '@builder.io/mitosis';
export default function MyComponent(props) {
  const state = useState({
    newItemName: 'New item',
    list: ['hello', 'world'],
    addItem() {
      state.list = [...state.list, state.newItemName];
    },
  });

  return (
    <div>
      <Show when={props.showInput
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

2. Ramda

A practical functional library for JavaScript programmersdesigned specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

GitHub logo ramda / ramda

๐Ÿ Practical functional Javascript

Ramda

A practical functional library for JavaScript programmers.

Build Status Test Coverage npm module deno land nest badge dependencies Gitter

Why Ramda?

There are already several excellent libraries with a functional flavor. Typically, they are meant to be general-purpose toolkits, suitable for working in multiple paradigms. Ramda has a more focused goal. We wanted a library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

What's Different?

The primary distinguishing features of Ramda are:

  • Ramda emphasizes a purer functional style. Immutability and side-effect free functions are at the heart of its design philosophy. This can help you get the job done with simple elegant code.

  • Ramda functions are automatically curried. This allows you to easily build up new functions from old ones simply by not supplying the final parameters.

  • The parameters to Ramda functions are arranged to make it convenient for currying. The data to be operated on isโ€ฆ


3. CesiumJS

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.

GitHub logo CesiumGS / cesium

An open-source JavaScript library for world-class 3D globes and maps ๐ŸŒŽ

Build Status npm Docs

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.

CesiumJS Homepage

CesiumJS Features Checklist

๐Ÿš€ Get Started

Visit the Downloads page or use the npm module:

npm install cesium

Have questions? Ask them on the community forum.

Interested in contributing? See CONTRIBUTING.md. โค๏ธ

โ„๏ธ Mission

Our mission is to create the leading 3D globe and map for static and time-dynamic content, with the best possible performance, precision, visual quality, platform support, community, and ease of use.

๐Ÿ“— License

Apache 2.0. CesiumJS is free for both commercial and non-commercial use.

๐ŸŒŽ Where Does the 3D Content Come From?

CesiumJS can stream 3D content such as terrain, imagery, and 3D Tiles from the commercial Cesium ion platform and other content sources. You are freeโ€ฆ


4. G2Plot

G2Plot is an interactive and responsive charting library. Based on the grammar of graphics, you can easily make superior statistical charts through a few lines of code.

GitHub logo antvis / G2Plot

๐Ÿก An interactive and responsive charting library

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

G2Plot

A charting library based on the Grammar of Graphics.

Version NPM downloads Latest commit build Status coverage Percentage of issues still open Average time to resolve an issue

Website โ€ข Quick Start โ€ข Blog โ€ข AntV ThemeSet

G2Plot is an interactive and responsive charting library Based on the grammar of graphics, you can easily make superior statistical charts through a few lines of code.


โœจ Features

๐Ÿ“ฆ Pretty & Lightweight

With AntV design principles of data visualization, G2Plot provides standard and elegant visual styles as well as neat config options.

๐Ÿ“Š Responsive

G2Plot guarantees the readability of the charts in different sizes and data.

๐Ÿ”ณ Storytelling

With the feature of layers, charts can be grouped, nested or linked to do exploratory analysis and expressive storytelling.

๐Ÿ“ฆ Installation

$ npm install @antv/g2plot
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”จ Usage

<div id="container"></div>
Enter fullscreen mode Exit fullscreen mode
import { Bar } from '@antv/g2plot';
const data = [
  { year: '1951 ๅนด', sales: 38
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

5. Layr

Layr is a set of JavaScript/TypeScript libraries to dramatically simplify the development of full-stack applications.

GitHub logo layrjs / layr

Dramatically simplify fullโ€‘stack development

Layr

Dramatically simplify fullโ€‘stack development.

Overview

Layr is a set of JavaScript/TypeScript libraries to dramatically simplify the development of full-stack applications.

Typically, a full-stack application is composed of a frontend and a backend running in two different environments that are connected through a web API (REST, GraphQL, etc.)

Separating the frontend and the backend is a good thing, but the problem is that building a web API usually leads to a lot of code scattering, duplication of knowledge, boilerplate, and accidental complexity.

Layr removes the need of building a web API and reunites the frontend and the backend in a way that you can experience them as a single entity.

On the frontend side, Layr gives you routing capabilities and object observability so that in most cases you don't need to add an external router or a state manager.

Last but not least, Layr offers an ORM to make data storageโ€ฆ





6. Type Challenges

This project is aimed at helping you better understand how the type system works, writing your own utilities, or just having fun with the challenges. We are also trying to form a community that you can ask questions and get answers you have faced in the real world - they may become part of the challenges!

GitHub logo type-challenges / type-challenges

Collection of TypeScript type challenges with online judge

Collection of TypeScript type challenges
Now supports TypeScript 4.1 ๐ŸŽ‰


English | ็ฎ€ไฝ“ไธญๆ–‡ | ๆ—ฅๆœฌ่ชž

Intro

by the power of TypeScript's well-known Turing Completed type system

High-quality types can help improving projects' maintainability while avoiding potential bugs.

There are a bunch of awesome type utility libraries may boosting your works on types, like ts-toolbelt, utility-types, SimplyTyped, etc, which you can already use.

This project is aimed at helping you better understand how the type system works, writing your own utilities, or just having fun with the challenges. We are also trying to form a community that you can ask questions and get answers you have faced in the real world - they may become part of the challenges!

Challenges

Click the following badges to see details of the challenges.

1
13ใƒปHello World

10
4ใƒปPick 7ใƒปReadonly 11ใƒปTuple to Object 14ใƒปFirst of Array 18ใƒปLength of Tuple 43ใƒปExclude 189ใƒปAwaited 268ใƒปIf 533ใƒปConcat 898ใƒปIncludes

40
2ใƒปGet Return Type 3ใƒปOmit 8ใƒปReadonly 2 9ใƒปDeep Readonly 10ใƒปTuple to Union 12ใƒปChainable Options 15ใƒปLast of Array 16ใƒปPop 20ใƒปPromise.all 62ใƒปType Lookup 106ใƒปTrim Left 108ใƒปTrim 110ใƒปCapitalize 116ใƒปReplace 119ใƒปReplaceAll 191ใƒปAppend Argument 296ใƒปPermutation 298ใƒปLength of String 459ใƒปFlatten 527ใƒปAppend to object 529ใƒปAbsolute 531ใƒปString to Union 599ใƒปMerge 610ใƒปCamelCase 612ใƒปKebabCase 645ใƒปDiff 949ใƒปAnyOf 1042ใƒปIsNever 1097ใƒปIsUnion 1130ใƒปReplaceKeys 1367ใƒปRemove Index Signature 1978ใƒปPercentage Parser 2070ใƒปDrop Char 2257ใƒปMinusOne 2595ใƒปPickByType 2688ใƒปStartsWith 2693ใƒปEndsWith 2757ใƒปPartialByKeys 2759ใƒปRequiredByKeys 2793ใƒปMutable

27
6ใƒปSimple Vue 17ใƒปCurrying 1 55ใƒปUnion to Intersection 57ใƒปGet Required 59ใƒปGet Optional 89ใƒปRequired Keys 90ใƒปOptional Keys 112ใƒปCapitalize Words 114ใƒปCamelCase 147ใƒปC-printf Parser 213ใƒปVue Basic Props 223ใƒปIsAny 270ใƒปTyped Get 300ใƒปString to Number 399ใƒปTuple Filter 472ใƒปTuple to Enum Object 545ใƒปprintf 553ใƒปDeep object to unique 651ใƒปLength of String 2 730ใƒปUnion to Tuple 847ใƒปString Join 956ใƒปDeepPick 1290ใƒปPinia 1383ใƒปCamelize 2059ใƒปDrop String 2822ใƒปSplit 2828ใƒปClassPublicKeys

12
5ใƒปGet Readonly Keys 151ใƒปQuery String Parser 216ใƒปSlice 274ใƒปIntegers Comparator 462ใƒปCurrying 2 476ใƒปSum 517ใƒปMultiply 697ใƒปTag 734ใƒปInclusive Range 741ใƒปSort 869ใƒปDistributeUnions 925ใƒปAssert Array Index

By Tags
#application 12ใƒปChainable Options 6ใƒปSimple Vue 213ใƒปVue Basic Props
#arguments 191ใƒปAppend Argument
#array 14ใƒปFirst of Array 533ใƒปConcat 898ใƒปIncludes 15ใƒปLast of Array 16ใƒปPop 20ใƒปPromise.all 459ใƒปFlatten 949ใƒปAnyOf 17ใƒปCurrying 1 2822ใƒปSplit 216ใƒปSlice 734ใƒปInclusive Range 741ใƒปSort 925ใƒปAssert Array Index
#built-in 4ใƒปPick 7ใƒปReadonly 43ใƒปExclude 2ใƒปGet Return Type 3ใƒปOmit 20ใƒปPromise.all
#deep 9ใƒปDeep Readonly 553ใƒปDeep object to unique 956ใƒปDeepPick
#infer 2ใƒปGet Return Type 10ใƒปTuple to Union 2070ใƒปDrop Char 55ใƒปUnion to Intersection 57ใƒปGet Required 59ใƒปGet Optional 399ใƒปTuple Filter 730ใƒปUnion to Tuple 2059ใƒปDrop String 734ใƒปInclusive Range 741ใƒปSort
#map 62ใƒปType Lookup
#math 529ใƒปAbsolute 2257ใƒปMinusOne 274ใƒปIntegers Comparator 476ใƒปSum 517ใƒปMultiply
#object 599ใƒปMerge 645ใƒปDiff 2595ใƒปPickByType 2757ใƒปPartialByKeys 2759ใƒปRequiredByKeys
#object-keys 7ใƒปReadonly 8ใƒปReadonly 2 9ใƒปDeep Readonly 527ใƒปAppend to object 2793ใƒปMutable 5ใƒปGet Readonly Keys
#promise 189ใƒปAwaited
#readonly 7ใƒปReadonly 8ใƒปReadonly 2 9ใƒปDeep Readonly 2793ใƒปMutable
#recursion 1383ใƒปCamelize
#split 2822ใƒปSplit
#string 531ใƒปString to Union 2822ใƒปSplit
#template-literal 106ใƒปTrim Left 108ใƒปTrim 110ใƒปCapitalize 116ใƒปReplace 119ใƒปReplaceAll 298ใƒปLength of String 529ใƒปAbsolute 610ใƒปCamelCase 612ใƒปKebabCase 2070ใƒปDrop Char 2688ใƒปStartsWith 2693ใƒปEndsWith 112ใƒปCapitalize Words 114ใƒปCamelCase 147ใƒปC-printf Parser 270ใƒปTyped Get 300ใƒปString to Number 472ใƒปTuple to Enum Object 545ใƒปprintf 651ใƒปLength of String 2 2059ใƒปDrop String 151ใƒปQuery String Parser 274ใƒปIntegers Comparator 476ใƒปSum 517ใƒปMultiply
#this 6ใƒปSimple Vue 1290ใƒปPinia
#tuple 18ใƒปLength of Tuple 10ใƒปTuple to Union 399ใƒปTuple Filter 472ใƒปTuple to Enum Object 730ใƒปUnion to Tuple 2822ใƒปSplit
#union 4ใƒปPick 3ใƒปOmit 10ใƒปTuple to Union 62ใƒปType Lookup 296ใƒปPermutation 531ใƒปString to Union 1042ใƒปIsNever 730ใƒปUnion to Tuple 1383ใƒปCamelize
#utils 268ใƒปIf 1042ใƒปIsNever 55ใƒปUnion to Intersection 57ใƒปGet Required 59ใƒปGet Optional 89ใƒปRequired Keys 90ใƒปOptional Keys 223ใƒปIsAny 270ใƒปTyped Get 2828ใƒปClassPublicKeys 5ใƒปGet Readonly Keys
#vue 6ใƒปSimple Vue 213ใƒปVue Basic Props 1290ใƒปPinia
ย ย ย ย ย ย ย ย ย ย 

โœจ Upcoming challenges

Recommended Readings

Official


7. DevOps Resources

This repository is about gathering any useful resources and information regarding DevOps

GitHub logo bregman-arie / devops-resources

DevOps resources - Linux, Jenkins, AWS, SRE, Prometheus, Docker, Python, Ansible, Git, Kubernetes, Terraform, OpenStack, SQL, NoSQL, Azure, GCP

โ„น๏ธ ย This repository is about gathering any useful resources and information regarding DevOps and secondly, provide some roadmap for those who want to practice DevOps.

๐Ÿ“ ย Feel free to add more resources by sumitting pull requests


DevOps

DevOps Roadmap

  • The following path is opinionated. You can find alternative paths in the alternative roadmaps section
  • Do NOT attempt to learn everything, especially if you are a complete beginner (the burnout will make you regret you ever heard the word DevOps)
  • Learn enough to say "I know what is DevOps and I understand how to practice it". You can learn everything else by demand or when you feel ready

โ€ฆ


8. SpinKit

Simple loading spinners animated with CSS. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.

GitHub logo tobiasahlin / SpinKit

A collection of loading indicators animated with CSS

SpinKit

Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.

Usage

  • Add spinkit.css or spinkit.min.css to your project (or copy-paste the CSS that you need for your spinnerโ€”there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need)
  • Add a spinner to your project by copy-pasting HTML from spinkit.css or examples.html
  • Add the sk-center utility class to the spinner to center it (it sets margin to auto)
  • By default, the width and height of all spinners are set to 40px. background-color is set to #333.
  • Configure the spinner by overwriting the CSS variables, primarily --sk-size (spinner width & height) and --sk-color (spinner color). If you need broader browser support, remove the CSS variables.

โ€ฆ


9. Beautiful React Hooks

A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development.

GitHub logo beautifulinteractions / beautiful-react-hooks

๐Ÿ”ฅ A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development ๐Ÿ”ฅ

CI/CD Coverage StatusLicense: MIT npm GitHub stars

Beautiful React Hooks


A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development

Usage example

๐Ÿ‡ฌ๐Ÿ‡ง English | ๐Ÿ‡จ๐Ÿ‡ณ ็ฎ€ไฝ“ไธญๆ–‡ | ๐Ÿ‡ฎ๐Ÿ‡น Italiano | ๐Ÿ‡ช๐Ÿ‡ธ Espaรฑol | ๐Ÿ‡บ๐Ÿ‡ฆ Ukrainian | ๐Ÿ‡ง๐Ÿ‡ท Brazilian Portuguese | ๐Ÿ‡ต๐Ÿ‡ฑ Polski | ๐Ÿ‡ฏ๐Ÿ‡ต ๆ—ฅๆœฌ่ชž

๐Ÿ’ก Why?

React custom hooks allow to abstract components' business logic into single reusable functions.
So far, we've found that most of the hooks we've created and therefore shared between our internal projects have quite often a similar gist that involves callback references, events and components' lifecycle.
For this reason we've tried to sum up that gist into beautiful-react-hooks: a collection of (hopefully) useful React hooks to possibly help other companies and professionals to speed up their development process.

Furthermore, we created a concise yet concrete API having in mind the code readability, focusing to keep the learning curve as lower asโ€ฆ


10. Type Fest

A collection of essential TypeScript types

GitHub logo sindresorhus / type-fest

A collection of essential TypeScript types



npm dependents npm downloads Docs

Many of the types here should have been built-in. You can help by suggesting some of them to the TypeScript project.

Either add this package as a dependency or copy-paste the needed types. No credit required. ๐Ÿ‘Œ

PR welcome for additional commonly needed types and docs improvements. Read the contributing guidelines first.

Install

$ npm install type-fest

Requires TypeScript >=4.2

Usage

import {Except} from 'type-fest';

type Foo = {
    unicorn: string;
    rainbow: boolean;
};

type FooWithoutRainbow = Except<Foo, 'rainbow'>;
//=> {unicorn: string}
Enter fullscreen mode Exit fullscreen mode

API

Click the type names for complete docs.

Basic


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)