TheLazy.Dev
Portfolio GitHub

Blog

javascript |react |typescript |css

🚀10 Trending projects on GitHub for web developers - 27th November 2020

iainfreestone

Iain Freestone

Posted on November 27, 2020

🚀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 React, Vue, Qwik, Solid, Angular, Svelte, and more.



Mitosis logo

Write components once, compile to every framework

code style: prettier PRs Welcome License Types

Overview

Mitosis provides a unified development experience across all frameworks, enabling you to build components in a single codebase and compile them to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more.

Using Mitosis, you can:

PS: We are actively looking for folks interested in becoming contributors to Mitosis. If interested, look at our list of good first issues or reach out on our Discord

Gif example of devloping with Mitosis

Quickstart

To create a new Mitosis project from scratch, run the following create command:

npm create @builder.io/mitosis@latest
Enter fullscreen mode Exit fullscreen mode

Once completed, make sure to read the README.md generated in your new project. It will explain the structure of your project, and provide…


View on GitHub


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 npm module deno land nest badge 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…

View on GitHub

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 🌎

CesiumJS

Build Status npm Docs

Cesium

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.

Built on open formats, CesiumJS is designed for robust interoperability and scaling for massive datasets.

Examples 🌏 Docs 🌎 Website 🌍 Forum 🌏 User Stories

🚀 Get started

Visit the Downloads page to download a pre-built copy of CesiumJS.

npm & yarn

If you’re building your application using a module bundler such as Webpack, Parcel, or Rollup, you can install CesiumJS via the cesium npm package:

npm install cesium --save
Enter fullscreen mode Exit fullscreen mode

Then, import CesiumJS in your app code. Import individual modules to benefit from tree shaking optimizations through most build tools:

import { Viewer } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";

const viewer = new Viewer("cesiumContainer");
Enter fullscreen mode Exit fullscreen mode

In addition to the cesium…

View on GitHub

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 based on G2.

English | 简体中文

G2Plot

基于 G2 4.x 版本二次封装的图表库。

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

📢 新版本 G2 v5 已经发布，未来不会基于 G2 v5 封装 G2Plot v3 版本，但是可以使用 Ant Design Charts 代替。

网站 • 快速开始 • 博客 • AntV ThemeSet

一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，『G2Plot』中的 G2 即意指图形语法 (the Grammar of Graphics)，同时也致敬了 ggplot2。我们想做的事有三件：

  1. 使用户不用成为可视化专家也能够轻松制作出优雅美观的图表。
  2. 保证图表能够经受得起业务的检验，在真实的场景中易用、好用。
  3. 探索统计图表的更多可能性，使统计图表变得更好玩、更酷。

✨ 特性

📦 开箱即用、体验优雅的高质量统计图表

G2Plot 呈现给用户的是一套提炼自企业级产品的视觉语言和设计规范。不仅对图表的整体视觉样式进行了优化，并且针对每一个图表自身的特点，沉淀出一套最佳配置，保证用户能够通过最少的配置制作出优雅、标准的图表。

📊 响应式：让图表更聪明

在现实的图表应用场景中，一个棘手的难题是图表的展示空间往往并不足够显示图表的数据量，造成极值情况下文本的重叠遮挡、内容无法自适应、内容裁剪等问题。G2Plot 借鉴宽容性设计的思想，在图表的信息密度过高时，对图表辅助信息进行抽稀，保证图表主要信息的展示和基本可读性。

🔳 向前一步：会讲故事的图表

在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合、叠加、联动，共同讲述一个数据故事的可能性。未来，我们还将探索统计图表转化信息图的可能性，丰富统计图表的表现能力。

📦 安装

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

🔨 使用

<div id="container"></div>
Enter fullscreen mode Exit fullscreen mode 
import { Bar } from '@antv/g2plot';
const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
];

const bar = new Bar(
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

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.

Documentation

Check out the documentation for a quick introduction and a comprehensive API description.

Roadmap

Components

  • Basic components
  • Controlled attributes
  • Component provision
  • Cross-layer inheritance
  • Remote method invocation
  • Optimized serialization
  • Weak Identity Map
  • Component subscriptions (realtime updates)
  • HTTP Caching

Storage

  • Basic storage (MongoDB)
  • Indexes
    • Identifier attributes
    • Regular attributes
    • Compound attributes
    • Referenced components
    • Embedded components
  • Automatic migrations
    • Indexes
    • Default values
    • Renamed components
    • Renamed attributes
  • Custom migrations
  • Polymorphism
  • Transactions
  • Sugar to query reverse relationships
  • Query subscriptions (realtime updates)
  • Support for more databases (PostgreSQL, MySQL, DynamoDB,...)

Routing

  • Basic routing
  • Nested routing

Authorizations

  • Basic authorizations
  • Role-based authorizations

Integrations

  • React integration
  • Basic AWS integration

Contributing

Contributions are welcome.

Before contributing please read the code of conduct and search the issue tracker to find out if your issue has already been discussed before.

To contribute, fork this repository, commit your changes, and send a pull request.

License

MIT




View on GitHub


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

English | 简体中文 | 日本語 | 한국어 | Português

Intro

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

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

There are a bunch of awesome type utility libraries that may boost 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 where 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.

Note: Challenges work in the strict mode.

1
13・Hello World

13
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 3057・Push 3060・Unshift 3312・Parameters

98
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 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 2852・OmitByType 2946・ObjectEntries 3062・Shift 3188・Tuple to Nested Object 3192・Reverse 3196・Flip Arguments 3243・FlattenDepth 3326・BEM style string 3376・InorderTraversal 4179・Flip 4182・Fibonacci Sequence 4260・AllCombinations 4425・Greater Than 4471・Zip 4484・IsTuple 4499・Chunk 4518・Fill 4803・Trim Right 5117・Without 5140・Trunc 5153・IndexOf 5310・Join 5317・LastIndexOf 5360・Unique 5821・MapTypes 7544・Construct Tuple 8640・Number Range 8767・Combination 8987・Subsequence 9142・CheckRepeatedChars 9286・FirstUniqueCharIndex 9616・Parse URL Params 9896・GetMiddleElement 9898・Appear only once 9989・Count Element Number To Object 10969・Integer 16259・ToPrimitive 17973・DeepMutable 18142・All 18220・Filter 21104・FindAll 21106・Combination key type 21220・Permutations of Tuple 25170・Replace First 25270・Transpose 26401・JSON Schema to TypeScript 27133・Square 27152・Triangular number 27862・CartesianProduct 27932・MergeAll 27958・CheckRepeatedTuple 28333・Public Type 29650・ExtractToObject 29785・Deep Omit 30301・IsOdd 30430・Tower of hanoi 30958・Pascal's triangle 30970・IsFixedStringLiteralType 34007・Compare Array Length

53
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 2857・IsRequiredKey 2949・ObjectFromEntries 4037・IsPalindrome 5181・Mutable Keys 5423・Intersection 6141・Binary to Decimal 7258・Object Key Paths 8804・Two Sum 9155・ValidDate 9160・Assign 9384・Maximum 9775・Capitalize Nest Object Keys 13580・Replace Union 14080・FizzBuzz 14188・Run-length encoding 15260・Tree path array 19458・SnakeCase 25747・IsNegativeNumber 28143・OptionalUndefined 30178・Unique Items 30575・BitwiseXOR 31797・Sudoku 31824・Length of String 3 32427・Unbox 32532・Binary Addition 34286・Take Elements

17
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 6228・JSON Parser 7561・Subtract 31447・CountReversePairs 31997・Parameter Intersection 33345・Dynamic Route

By Tags



















































































































































#JSON
26401・JSON Schema to TypeScript
#application
12・Chainable Options 8767・Combination 6・Simple Vue 213・Vue Basic Props 30178・Unique Items
#arguments
191・Append Argument 3196・Flip Arguments
#array
14・First of Array 533・Concat 898・Includes 3057・Push 3060・Unshift 15・Last of Array 16・Pop 20・Promise.all 459・Flatten 949・AnyOf 3062・Shift 3243・FlattenDepth 4425・Greater Than 5117・Without 5153・IndexOf 5310・Join 5317・LastIndexOf 5360・Unique 8767・Combination 18142・All 18220・Filter 25270・Transpose 27133・Square 27152・Triangular number 27932・MergeAll 30430・Tower of hanoi 30958・Pascal's triangle 34007・Compare Array Length 17・Currying 1 2822・Split 5423・Intersection 8804・Two Sum 9160・Assign 9384・Maximum 9775・Capitalize Nest Object Keys 14080・FizzBuzz 31797・Sudoku 32427・Unbox 32532・Binary Addition 34286・Take Elements 216・Slice 734・Inclusive Range 741・Sort 925・Assert Array Index 31997・Parameter Intersection
#built-in
4・Pick 7・Readonly 43・Exclude 189・Awaited 3312・Parameters 2・Get Return Type 3・Omit
#cif
30178・Unique Items
#conditional type
21220・Permutations of Tuple
#deep
9・Deep Readonly 17973・DeepMutable 553・Deep object to unique 956・DeepPick
#filter
18220・Filter
#function
32427・Unbox
#game
31797・Sudoku
#infer
3312・Parameters 2・Get Return Type 10・Tuple to Union 2070・Drop Char 4260・AllCombinations 9616・Parse URL Params 55・Union to Intersection 57・Get Required 59・Get Optional 399・Tuple Filter 730・Union to Tuple 2059・Drop String 14080・FizzBuzz 734・Inclusive Range 741・Sort
#intersection
31997・Parameter Intersection
#json
6228・JSON Parser
#map
62・Type Lookup 5821・MapTypes
#math
529・Absolute 2257・MinusOne 25270・Transpose 27133・Square 27152・Triangular number 30958・Pascal's triangle 6141・Binary to Decimal 8804・Two Sum 14080・FizzBuzz 274・Integers Comparator 476・Sum 517・Multiply
#number
25747・IsNegativeNumber
#object
599・Merge 645・Diff 2595・PickByType 2757・PartialByKeys 2759・RequiredByKeys 2852・OmitByType 2946・ObjectEntries 3188・Tuple to Nested Object 3376・InorderTraversal 4179・Flip 5821・MapTypes 27932・MergeAll 29650・ExtractToObject 2949・ObjectFromEntries 9160・Assign 9775・Capitalize Nest Object Keys
#object-keys
7・Readonly 11・Tuple to Object 8・Readonly 2 9・Deep Readonly 527・Append to object 1130・ReplaceKeys 1367・Remove Index Signature 2793・Mutable 28333・Public Type 7258・Object Key Paths 5・Get Readonly Keys
#omit object-keys deep
29785・Deep Omit
#optional
31997・Parameter Intersection
#parameters
31997・Parameter Intersection
#promise
189・Awaited 20・Promise.all 32427・Unbox
#readonly
7・Readonly 8・Readonly 2 9・Deep Readonly 2793・Mutable 17973・DeepMutable
#recursion
21220・Permutations of Tuple 34007・Compare Array Length 1383・Camelize 32532・Binary Addition
#rest
31997・Parameter Intersection
#split
2822・Split
#string
531・String to Union 8767・Combination 9142・CheckRepeatedChars 9286・FirstUniqueCharIndex 9616・Parse URL Params 21104・FindAll 30301・IsOdd 2822・Split 4037・IsPalindrome 19458・SnakeCase
#template literal
25747・IsNegativeNumber
#template-literal
106・Trim Left 108・Trim 110・Capitalize 116・Replace 119・ReplaceAll 298・Length of String 529・Absolute 612・KebabCase 1978・Percentage Parser 2070・Drop Char 2688・StartsWith 2693・EndsWith 3326・BEM style string 4260・AllCombinations 4803・Trim Right 5140・Trunc 9616・Parse URL Params 10969・Integer 21104・FindAll 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 19458・SnakeCase 151・Query String Parser 274・Integers Comparator 476・Sum 517・Multiply 6228・JSON Parser
#this
6・Simple Vue 1290・Pinia
#tuple
18・Length of Tuple 3312・Parameters 10・Tuple to Union 3188・Tuple to Nested Object 3192・Reverse 3326・BEM style string 4471・Zip 4484・IsTuple 4499・Chunk 4518・Fill 7544・Construct Tuple 21220・Permutations of Tuple 27133・Square 27152・Triangular number 399・Tuple Filter 472・Tuple to Enum Object 730・Union to Tuple 2822・Split 30178・Unique Items 31797・Sudoku 32427・Unbox 7561・Subtract
#union
4・Pick 43・Exclude 3・Omit 10・Tuple to Union 62・Type Lookup 296・Permutation 531・String to Union 1042・IsNever 1097・IsUnion 3326・BEM style string 4260・AllCombinations 5117・Without 8987・Subsequence 9142・CheckRepeatedChars 21220・Permutations of Tuple 27862・CartesianProduct 27932・MergeAll 730・Union to Tuple 1383・Camelize 5423・Intersection 31797・Sudoku
#utils
268・If 1042・IsNever 5821・MapTypes 55・Union to Intersection 57・Get Required 59・Get Optional 89・Required Keys 90・Optional Keys 223・IsAny 270・Typed Get 2828・ClassPublicKeys 2857・IsRequiredKey 5181・Mutable Keys 32427・Unbox 5・Get Readonly Keys
#variadic
31997・Parameter Intersection
#vue
6・Simple Vue 213・Vue Basic Props 1290・Pinia
          

By Plain Text

warm-up (1)

…
View on GitHub

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 submitting pull requests

DevOps
DevOps		 Jenkins
Jenkins		 Git
Git		 Ansible
Ansible		 Network
Network		 Linux
Linux		 Terraform
Terraform
coding
Coding		 Python
Python		 Go
Go		 Bash
Shell Scripting		 kubernetes
Kubernetes		 VictoriaMetrics
VictoriaMetrics		 Prometheus
Prometheus		 Mongo
Mongo
Cloud
Cloud		 AWS
AWS		 azure
Azure		 gcp
Google Cloud Platform		 openstack
OpenStack		 security
Security		 puppet
Puppet
ELK
ELK		 ELK
DataOps		 OpenShift
OpenShift		 sql
SQL		 Containers
Containers

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…
View on GitHub

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.

…


View on GitHub


9. Beautiful React Hooks

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

GitHub logo antonioru / 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 tailor-made React hooks to enhance your development process and make it faster

Usage example

🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 | 🇹🇷 Türkçe

💡 Why?

Custom React hooks allow developers to abstract the business logic of components into single, reusable functions.
I have noticed that many of the hooks I have created and shared across projects involve callbacks, references, events, and dealing with the component lifecycle.
Therefore, I have created beautiful-react-hooks, a collection of useful React hooks that may help other developers speed up their development process.
Moreover, I have strived to create a concise and practical API that emphasizes code readability, while keeping the learning curve as low as possible, making it suitable for larger teams to use and share t -- Please before using…

View on GitHub

10. Type Fest

A collection of essential TypeScript types

GitHub logo sindresorhus / type-fest

A collection of essential TypeScript types



npm dependents npm downloads

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.

Help wanted with reviewing proposals and pull requests.

Install

npm install type-fest
Enter fullscreen mode Exit fullscreen mode

Requires TypeScript >=5.1

Works best with {strict: true} in your tsconfig.

Usage

import type {Except} from 'type-fest';
type Foo = {
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

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.

💖 💪 🙅 🚩
iainfreestone
Iain Freestone

Posted on November 27, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React animation onDestroy (removed from the DOM)
javascript React animation onDestroy (removed from the DOM)

July 14, 2022

🚀10 Trending projects on GitHub for web developers - 27th November 2020
javascript 🚀10 Trending projects on GitHub for web developers - 27th November 2020

November 27, 2020