A beautiful replacement for JavaScript's "alert"

$ npm install --save sweetalert

import swal from 'sweetalert';

swal("Hello world!");

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

• Installation
• Getting started
• Advanced examples
• Using with libraries
• Upgrading from 1.X

• Configuration
• Methods
• Theming

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

• 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")

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

Huly	Your logo here

Via npm

$ npm install animejs --save

or manual download.

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

const anime = require('animejs');

Link anime.min.js in your HTML :

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

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

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.

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

in time-service.js...

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

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

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

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.

• Load as a node module
• Load via script tag
• Bundles
• Alternative ways to load and build plotly.js
• Documentation
• Bugs and feature requests
• Contributing
• Notable contributors
• Copyright and license
• Community

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…

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…

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

• ⚙️ 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;

• Getting Started
• Usage
  • Native
• Options
• Examples
• Troubleshooting
• Similar packages
• Development

npm i react-content-loader --save

yarn add react-content-loader

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

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

CDN from JSDELIVR

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 /

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

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

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.

It's a pun on the tagline.

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

• 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 👉…

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

• Table of Contents
• Installation
  • Option 1 - import from CDN:
  • option 2 - import as a Node module:
• Basic Usage Examples
  • Debugging
• Features
• Building the project
  • Output files:
• Adding tags dynamically
• Output value
  • Modify original input value format
• Ajax whitelist
• Persisted data
• Edit tags
• Validations
• Drag & Sort
  • Integration example:
• DOM Templates
  • Example of overriding the tag template:
• Suggestions list
  • Example for a suggestion item alias
  • Example whitelist:
• Mixed-Content
• Single-Value
• React
  • Update regarding onChange prop:
    • Updating the component's state
• Vue
• jQuery version
  • jQuery.tagify.js
• HTML input & textarea attributes
• Caveats
• FAQ
• CSS Variables
  • Suggestions Dropdown CSS variables
  • Full list of Tagify's SCSS variables
• …

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.

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

Nord + Input Mono

Monokai Pro + Operator Mono

Material Theme Palenight + Fira Code

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…