DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 12th March 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
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. Sweet Alert

A beautiful replacement for JavaScript's "alert"

GitHub logo t4t5 / sweetalert

A beautiful replacement for JavaScript's "alert"

SweetAlert

A beautiful replacement for JavaScript's "alert"

npm version Build status

A success modal

Installation

$ npm install --save sweetalert
Enter fullscreen mode Exit fullscreen mode

Usage

import swal from 'sweetalert';
swal("Hello world!");
Enter fullscreen mode Exit fullscreen mode

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

Guides

Documentation

Examples

An error message:

swal("Oops!", "Something went wrong!", "error");
Enter fullscreen mode Exit fullscreen mode

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")
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo juliangarnier / anime

JavaScript animation engine


anime.js

JavaScript animation engine | animejs.com

npm version npm downloads

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

Getting started

Download

Via npm

$ npm install animejs --save
Enter fullscreen mode Exit fullscreen mode

or manual download.

Usage

ES6 modules

import anime from 'animejs/lib/anime.es.js';
Enter fullscreen mode Exit fullscreen mode

CommonJS

const anime = require('animejs');
Enter fullscreen mode Exit fullscreen mode

File include

Link anime.min.js in your HTML :

<script src="anime.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Hello world

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});
Enter fullscreen mode Exit fullscreen mode

Documentation

Demos and examples


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.

GitHub logo dashersw / cote

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

cote

cote โ€” A Node.js library for building zero-configuration microservices

npm version Build Status Coverage Status dependencies Status GitHub license FOSSA Status

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 cote Slack 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'
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

4. Chroma.js

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

GitHub logo gka / chroma.js

JavaScript library for all kinds of color manipulations

Chroma.js

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

Build Status

Usage

Initiate and manipulate colors:

chroma('#D4F880').darken().hex();  // #9BC04B
Enter fullscreen mode Exit fullscreen mode

Working with color scales is easy, too:

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

Lab/Lch interpolation looks better than RGB

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

Custom domains! Quantiles! Color Brewer!!

chroma.scale('RdYlBu').domain(myValues, 7, 'quantiles');
Enter fullscreen mode Exit fullscreen mode

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

chroma.scale(['lightyellow', 'navy']).domain([1, 100000], 7, 'log');
Enter fullscreen mode Exit fullscreen mode
โ€ฆ

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.

GitHub logo plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash

npm version circle ci MIT License

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.

Contact us for Plotly.js consulting, dashboard development, application integration, and feature additions.

Table of contents

Quick start options

Install with npm

npm install plotly.js-dist
Enter fullscreen mode Exit fullscreen mode

and import plotly.js as

import Plotly from 'plotly.js-dist'
// Or using require,
var Plotly = require('plotly.js-dist')
Enter fullscreen mode Exit fullscreen mode

Use the plotly.js CDN hosted by Fastly

<!-- Latest compiled and minified plotly.js JavaScript -->
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
<!-- OR use
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

6. Complete Intro to React

The Complete Intro to React, the fifth version

GitHub logo btholt / complete-intro-to-react-v5

The Complete Intro to React, the fifth version

All PRs and issues for the course code and website have been resolved as of November 29th, 2019. The code for each commit and branch has also been tested! ๐Ÿ˜€

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

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โ€ฆ


7. ReactContentLoader

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

GitHub logo danilowoz / react-content-loader

โšช SVG-Powered component to easily create skeleton loadings.

react-content-loader

Example's react-content-loader

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
Enter fullscreen mode Exit fullscreen mode
yarn add react-content-loader
Enter fullscreen mode Exit fullscreen mode

For React Native

npm i react-content-loader react-native-svg --save
Enter fullscreen mode Exit fullscreen mode
yarn add react-content-loader react-native-svg
Enter fullscreen mode Exit fullscreen mode

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 /
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

8. goober

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

GitHub logo cristianbote / goober

๐Ÿฅœ goober, a less than 1KB ๐ŸŽ‰ css-in-js alternative with a familiar API

goober

๐Ÿฅœ goober, a less than 1KB css-in-js solution.

Backers on Open Collective Sponsors on Open Collective

version status gzip size downloads coverage Slack Greenkeeper badge

Motivation

I always wondered, if you can get a working solution for css-in-js with a smaller footprint. So, while I was working on a side-project I wanted a to use styled-components or more accurate the styled pattern. Looking at the JavaScript bundled 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 in 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

Table of contents


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.

GitHub logo 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 Demos ๐Ÿ‘ˆ

Table of Contents

Installation

npm i @yaireo
/tagify --save
Enter fullscreen mode Exit fullscreen mode

Usage (in your bundle):

live demo using Parcel as bundler

import Tagify from '@yaireo
/tagify'

var tagify = new Tagify(...)
Enter fullscreen mode Exit fullscreen mode

Don't forget to include tagify.css file in your project. CSS location: @yaireo/tagify/dist/tagify.css SCSS location: @yaireo/tagify/src/tagify.scss See SCSS usecase & example

Features

  • Can be applied on input & textarea elements
  • Supports mix contentโ€ฆ

10. Polacode

Polaroid for your code

GitHub logo octref / polacode

๐Ÿ“ธ Polaroid for your code

Polacode โ€” Polaroid for your code ๐Ÿ“ธ

usage

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

Demo

Nord + Input Mono

demo1

Monokai Pro + Operator Mono

demo2

Material Theme Palenight + Fira Code

demo3

Credit

Thanks to @tsayen for making dom-to-image, which Polacode is using for generating the images.

Thanks to Dawn Labs for making Carbon that inspired Polacode.

Many color are taken from the elegant Nord theme by @arcticicestudio.

Download button animation is made with Vivusโ€ฆ


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 (12)

Collapse
stremovsky profile image
Yuli

Hi

You can add my open-source tool to the list.

Databunker is a Swiss army knife tool for storing personal records or PII:
databunker.org/

Node.js example:
github.com/securitybunker/databunk...

Collapse
souviktests profile image
Souvik Paul

Thanks. Awesome post ;)

Collapse
ra1nbow1 profile image
Matvey Romanov

So useful, thanks

Collapse
rafaacioly profile image
Rafael Acioly

everything is about JS and i'm not even surprised anymore :)

awesome post!

Collapse
andrewbaisden profile image
Andrew Baisden

Anime.js ๐Ÿ˜ Yes I am an Anime geek ๐Ÿ˜

Collapse
seyavan profile image
Seyavan Y.

Thank you, Very useful

Collapse
machineno15 profile image
Tanvir Shaikh

Sweetalert I'm using from years now,
But why it's trending ? any new update ?

Collapse
mitya profile image
Collapse
rajmohanpdy profile image
rajmohan s

Thanks so much. useful content. Bookmarked.

Collapse
rayvikram profile image
rayvikram

Thanks. I always bookmark your content ๐Ÿ˜„.

Collapse
iainfreestone profile image
Iain Freestone Author

Thank you, I enjoy compiling it each week. So many great resources out there

Collapse
georgefareed profile image
Forem Open with the Forem app