Iain Freestone

Posted on Mar 12, 2021 • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 12th March 2021

#javascript #react #css #webdev

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

1. Sweet Alert

A beautiful replacement for JavaScript's "alert"

Installation

$ npm install --save sweetalert

Usage

import swal from 'sweetalert';

swal("Hello world!");

Upgrading from 1.X

Many improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the upgrade guide to avoid nasty surprises!

Guides

Documentation

Examples

An error message:

swal("Oops!", "Something went wrong!", "error");

A warning message, with a function attached to the confirm message:

Using promises:

swal({
  title: "Are you sure?",
  text: "Are you sure that you want to leave this page?",
  icon: "warning",
  dangerMode: true,
})
.then(willDelete => {
  if (willDelete) {
    swal("Deleted!", "Your imaginary file has been deleted!", "success")

…

View on GitHub

2. Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

🎉 Anime.js V4 is now available in early access 🎉

After years in the making, Anime.js V4 is finally available in early access for my GitHub Sponsors!

anime.js

JavaScript animation engine | animejs.com

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Getting started | Documentation | Demos and examples | Browser support

Powered by


Huly	Your logo here

Getting started

Download

Via npm

$ npm install animejs --save

or manual download.

Usage

ES6 modules

import anime from 'animejs/lib/anime.es.js';

CommonJS

const anime = require('animejs');

File include

Link anime.min.js in your HTML :

<script src="anime.min.js"></script>

Hello world

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration

…

View on GitHub

3. cote

A Node.js library for building zero-configuration microservices. cote lets you write zero-configuration microservices in Node.js without nginx, haproxy, redis, rabbitmq or anything else. It is batteries — and chargers! — included.

dashersw / cote

A Node.js library for building zero-configuration microservices.

cote — A Node.js library for building zero-configuration microservices

cote lets you write zero-configuration microservices in Node.js without nginx haproxy, redis, rabbitmq or anything else. It is batteries — and chargers! — included.

Join us on for anything related to cote.

Features

Zero dependency: Microservices with only JavaScript and Node.js
Zero-configuration: No IP addresses, no ports, no routing to configure
Decentralized: No fixed parts, no "manager" nodes, no single point of failure
Auto-discovery: Services discover each other without a central bookkeeper
Fault-tolerant: Don't lose any requests when a service is down
Scalable: Horizontally scale to any number of machines
Performant: Process thousands of messages per second
Humanized API: Extremely simple to get started with a reasonable API!

Develop your first microservices in under two minutes:

in time-service.js...

const cote = require('cote');
const timeService = new cote.Responder({ name: 'Time Service'

…

View on GitHub

4. Chroma.js

Chroma.js is a small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales.

gka / chroma.js

JavaScript library for all kinds of color manipulations

Chroma.js

Chroma.js is a ~~tiny~~ small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales.

Usage

Install from npm

npm install chroma-js

Import package into project

import chroma from "chroma-js";

Initiate and manipulate colors:

chroma('#D4F880').darken().hex();  // #a1c550

Working with color scales is easy, too:

scale = chroma.scale(['white', 'red']);
scale(0.5).hex(); // #FF7F7F

Lab/Lch interpolation looks better than RGB

chroma.scale(['white', 'red']).mode('lab');

Custom domains! Quantiles! Color Brewer!!

chroma.scale('RdYlBu').domain(myValues, 7, 'quantiles');

And why not use logarithmic color scales once in your life?

chroma.scale(['lightyellow', 'navy']).domain

…

View on GitHub

5. Plotly.js

Plotly.js is a standalone Javascript data visualization library. Can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosystems (referred to as Plotly.py and Plotly.R).

Plotly.js can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.

Load as a node module

Install a ready-to-use distributed bundle

npm i --save plotly.js-dist-min

and use import or require in node.js

// ES6 module
import Plotly from 'plotly.js-dist-min'

// CommonJS
var Plotly = require('plotly.js-dist-min')

You may also consider using plotly.js-dist if you prefer using an unminified…

View on GitHub

6. Complete Intro to React

The Complete Intro to React, the fifth version

btholt / complete-intro-to-react-v5

The Complete Intro to React, the fifth version

Welcome to the Complete Intro to React v5 and Intermediate React v2!

To find the latest version of the React courses, head to the React Learning Path on Frontend Masters.

See the course website here.

Before starting the course, please have VSCode or another code editor installed.

The master branch and commits within are all covered in Introduction to React v5. The other branches, excluding the gh-pages-src and gh-pages branches (these create the course website), are all covered in Intermediate React as modular segments that can be taken individually, or out of order.

Brian is using a font called Dankmono (not necessary to install -- just for those curious), but FiraCode is another great option. This course was written for and recorded by Frontend Masters. The code here is licensed under the Apache 2.0 license and the course notes are licensed under the Creative Commons…

View on GitHub

7. ReactContentLoader

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

danilowoz / react-content-loader

⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Features

⚙️ Customizable: Feel free to change the colors, speed, sizes, and even RTL;
👌 Plug and play: with many presets to use, see the examples;
✏️ DIY: use the create-content-loader to create your own custom loaders easily;
📱 React Native support: same API, as same powerful features;
⚛️ Really lightweight: less than 2kB and 0 dependencies for web version;

Index

Getting Started

npm i react-content-loader --save

yarn add react-content-loader

For React Native

npm i react-content-loader react-native-svg --save

yarn add react-content-loader react-native-svg

CDN from JSDELIVR

Usage

There are two ways to use it:

1. Presets, see the examples:

import ContentLoader, { Facebook } from 'react-content-loader'
const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook /

…

View on GitHub

8. goober

goober, a less than 1KB css-in-js alternative with a familiar API

cristianbote / goober

🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API

🥜 goober, a less than 1KB css-in-js solution.

🪒 The Great Shave Off Challenge

Can you shave off bytes from goober? Do it and you're gonna get paid! More info here

Motivation

I've always wondered if you could get a working solution for css-in-js with a smaller footprint. While I was working on a side project I wanted to use styled-components, or more accurately the styled pattern. Looking at the JavaScript bundle sizes, I quickly realized that I would have to include ~12kB(styled-components) or ~11kB(emotion) just so I can use the styled paradigm. So, I embarked on a mission to create a smaller alternative for these well established APIs.

Why the peanuts emoji?

It's a pun on the tagline.

css-in-js at the cost of peanuts! 🥜goober

Talks and Podcasts

React Round Up 👉 https://reactroundup.com/wrangle-your-css-in-js-for-peanuts-using-goober-ft-cristian-bote-rru-177
ReactDay Berlin 2019 👉 https://www.youtube.com/watch?v=k4-AVy3acqk
PodRocket by LogRocket 👉 https://podrocket.logrocket.com/goober
ngParty 👉…

View on GitHub

9. Tagify

Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and small code footprint, exploded with features.

yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue

Tagify - tags input component

Transforms an input field or a textarea into a Tags component, in an easy, customizable way with great performance and small code footprint, exploded with features
Vanilla ⚡ React ⚡ Vue ⚡ Angular

👉 See Many Examples 👈

View on GitHub

10. Polacode

Polaroid for your code

octref / polacode

📸 Polaroid for your code

Polacode — Polaroid for your code 📸

Why?

You have spent countless hours finding the perfect JavaScript grammar, matching it with a sleek-looking VS Code theme, trying out all the best programming fonts.

You take three days porting over your theme before starting to use VS Code.
You shell out $200 for italic cursive html attributes.

The code has to look right.

Tips

Resize the snippet / container by dragging the lowerright corner
Use polacode.target, polacode.shadow, polacode.transparentBackground and polacode.backgroundColor to control image appearance