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
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
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…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.
Ramda
A practical functional library for JavaScript programmers.
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.
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.
🚀 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.
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.
✨ 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
🔨 Usage
<div id="container"></div>
import { Bar } from '@antv/g2plot';
const data = [
{ year: '1951 年', sales: 38…5. Layr
Layr is a set of JavaScript/TypeScript libraries to dramatically simplify the development of full-stack applications.
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!
type-challenges
/
type-challenges
Collection of TypeScript type challenges with online judge
Collection of TypeScript type challenges
Now supports TypeScript 4.1
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.
By Tags
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
|
Recommended Readings
Official
7. DevOps Resources
This repository is about gathering any useful resources and information regarding DevOps
bregman-arie
/
devops-resources
DevOps resources - Linux, Jenkins, AWS, SRE, Prometheus, Docker, Python, Ansible, Git, Kubernetes, Terraform, OpenStack, SQL, NoSQL, Azure, GCP
- DevOps Roadmap
- Alternative Roadmaps
- Learn About DevOps
- Learn Git
- Programming
- Operating Systems
- DevOps Toolchain
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.
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.cssorspinkit.min.cssto 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.cssorexamples.html - Add the
sk-centerutility class to the spinner to center it (it setsmargintoauto) - By default, the
widthandheightof all spinners are set to40px.background-coloris 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.
beautifulinteractions
/
beautiful-react-hooks
🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development
💡 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
sindresorhus
/
type-fest
A collection of essential TypeScript types
A collection of essential TypeScript types
Sindre Sorhus' open source work is supported by the community
Special thanks to:
Add Single Sign-On (and more) in minutes instead of months.
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}
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)