DEV Community

loading...

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

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. 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 / jsx-lite

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

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

code style: prettier PRs Welcome License Types

Try it out

Try our early our alpha preview here and please report bugs and share feedback!



Why

Component libraries

Managing support for libraries that provide UI components across frameworks is a pain, esp when webcomponents are not an option (e.g. for server side rendering, best performance, etc). With JSX Lite you can write once, and run everywhere with full compatibilty

No-code tools

With JSX lite, you can import designs from Figma or Sketch and convert it to clean code for the framework of your choice. You can even use Builder.io to visually drag/drop to build UIs and edit the code side by side

Modern workflows for all platforms

JSX lite allows you to incrementally adopt modern and familiar workflows for many different platforms, for for Shopify instance…


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

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 },
  { year: '1952 年', sales: 52 },
  { year
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 utilities 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 detail of the challenges.

1
13・Hello World

8
4・Pick<T, K> 7・Readonly<T> 11・Tuple to Object 14・First of Array 18・Length of Tuple 43・Exclude 189・Awaited 268・If

18
2・Get Return Type 3・Omit<T, K> 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・TrimLeft<T> 108・Trim<T> 110・Capitalize<T> 116・Replace 119・ReplaceAll 191・Append Argument 296・Permutation 298・Length of String

14
6・Simple Vue 17・Currying 1 55・Union to Intersection 57・Get Required 59・Get Optional 89・Required Keys 90・Optional Keys 112・CapitalizeWords<T> 114・CamelCase<T> 147・C-printf Parser 213・Vue Basic Props 223・IsAny 270・Typed Get 300・String to Number

4
5・Get Readonly Keys 151・Query String Parser 216・Slice 274・Integers Comparator

By Tags
#4.0 14・First of Array 15・Last of Array 16・Pop 17・Currying 1
#application 12・Chainable Options 6・Simple Vue 213・Vue Basic Props
#arguments 191・Append Argument
#array 14・First of Array 15・Last of Array 16・Pop 20・Promise.all 17・Currying 1 216・Slice
#built-in 4・Pick<T, K> 7・Readonly<T> 43・Exclude 2・Get Return Type 3・Omit<T, K> 20・Promise.all
#deep 9・Deep Readonly
#infer 2・Get Return Type 10・Tuple to Union 55・Union to Intersection 57・Get Required 59・Get Optional
#map 62・Type Lookup
#math 274・Integers Comparator
#object-keys 7・Readonly<T> 8・Readonly 2 9・Deep Readonly 5・Get Readonly Keys
#promise 189・Awaited
#readonly 7・Readonly<T> 8・Readonly 2 9・Deep Readonly
#template-literal 106・TrimLeft<T> 108・Trim<T> 110・Capitalize<T> 116・Replace 119・ReplaceAll 298・Length of String 112・CapitalizeWords<T> 114・CamelCase<T> 147・C-printf Parser 270・Typed Get 300・String to Number 151・Query String Parser 274・Integers Comparator
#this 6・Simple Vue
#tuple 18・Length of Tuple 10・Tuple to Union
#union 4・Pick<T, K> 3・Omit<T, K> 10・Tuple to Union 62・Type Lookup 296・Permutation
#utils 268・If 55・Union to Intersection 57・Get Required 59・Get Optional 89・Required Keys 90・Optional Keys 223・IsAny 270・Typed Get 5・Get Readonly Keys
#vue 6・Simple Vue 213・Vue Basic Props

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

DevOps Resources

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

📝  Feel free to add more resources by sumitting pull requests


DevOps

How to start

Name Description
DevOps Roadmap DevOps skills roadmap. What to to learn at each step.
DevOpsBit DevOps roadmaps, interview questions, blog posts and checklists
What is DevOps? - Amazon Amazon's "What is DevOps?" page
DevOps Best Practices What is DevOps + list of resources
DevOps 3 Weeks Plan Detailed plan on what to do at each day

Practice Coding

Name Comments
HackerRank
LeetCode
Exercism

Tools, Apps & Services

Name Description
Periodic table of DevOps tools Table of DevOps tools per category
DevOps tool chest List of DevOps tools
DevOps Bookmarks NSIA
CNCF Cloud

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



type-fest

A collection of essential TypeScript types



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 >=3.4

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.

Discussion (1)

pic
Editor guide
Collapse
zoedreams profile image