has

Object.prototype.hasOwnProperty.call shortcut.

This module is one of those live examle where a tiny module can make a lot of impact in the node community.

All that this module does is helps in making a shorting function name to Object.prototype.hasOwnProperty.call as has, the code in the module is as below:

1
2
3

var bind = require('function-bind');

module.exports = bind.call(Function.call, Object.prototype.hasOwnProperty);

The impact it has made with 110 dependencies:

1
2
3

151,565 downloads in the last day
823,500 downloads in the last week
3,552,078 downloads in the last month

Get it: npm install --save has

Sample usage:

1
2
3

has({}, 'hasOwnProperty'); // false;

has(Object.prototype, 'hasOwnProperty'); // true;

pino

super fast, all natural json logger.

pino is an uber fast logger, inspired by Bunyan. It also includes a shell utility to pretty-print its log files.

Get it: npm install --save pino

Sample usage:

1
2
3
4
5
6
7
8
9
10
11

var pino = require('pino');
var logger = pino({
  name: 'myapp',
  safe: true,
  serializers: {
    req: pino.stdSerializers.req,
    res: pino.stdSerializers.res
  }
});

//logger will have: trace, debug, info, warn, error and fatal level to log.

1
2

var log = pino({level: 'debug'})
log.debug('interesting object: %j', {foo: 'bar', pino: 'is a way of life'})

pino is available for: koa, express, hapi and restify as well.

GIF FTW!

next.js

Minimalistic framework for server-rendered React applications.

next.js framework helps with SSR of React applications and so far has:

• Automatic transpilation and bundling (with webpack and babel)
• Hot code reloading
• Server rendering and indexing of ./pages
• Static file serving. ./static/ is mapped to /static/

GET IT: npm instll --save next

Sample usage:

1

$ mkdir pages

1
2
3

//pages/index.js:
import React from 'react'
export default () => <div>Hello Next!</div>

Add a script to the package.json like:

1
2
3
4
5

{
  "scripts": {
    "start": "next"
  }
}

and run:

1

$ npm start

GIF FTW

s-ago

Human readable relative times.

26 SLOC to convert Date objects into human readable relative timestamps, such as 7 minutes ago or yesterday or 2 days ago

Get it: npm install --save s-ago

Sample usage:

1
2
3
4
5
6
7
8
9

const ago = require('s-ago');

const now = new Date();
const yesterday = new Date(now - (24 * 60 * 60 * 1000));
const hoursAgo = new Date(now - (6 * 60 * 60 * 1000));

ago(now); // 'just now' 
ago(yesterday); // 'yesterday' 
ago(hoursAgo); // '6 hours ago' 

GIT FTW!

yarn

FAST, RELIABLE, AND SECURE DEPENDENCY MANAGEMENT.

yarn let use call it a faster npm? Open sourced by facebook, has the below features:

• Offline Mode: If you've installed a package before, you can install it again without any internet connection.
• Deterministic: The same dependencies will be installed the same exact way across every machine regardless of install order.
• Network Performance: Yarn efficiently queues up requests and avoids request waterfalls in order to maximize network utilization.
• Multiple Registries: Install any package from either npm or Bower and keep your package workflow the same.
• Network Resilience: A single request failing won't cause an install to fail. Requests are retried upon failure.
• Flat Mode: Resolve mismatching versions of dependencies to a single version to avoid creating duplicates.
• More emojis. 🐈

Get it: npm install --global yarn

CLI usage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

yarn add
yarn bin
yarn cache
yarn check
yarn clean
yarn config
yarn generate-lock-entry
yarn global
yarn info
yarn init
yarn install
yarn licenses
yarn link
yarn login
yarn logout
yarn ls
yarn outdated
yarn owner
yarn pack
yarn publish
yarn remove
yarn run
yarn self-update
yarn tag
yarn team
yarn test
yarn unlink
yarn upgrade
yarn version
yarn why

GIF FTW!

resize-observer-polyfill

A polyfill for Resize Observer API.

Implements event based tracking of changes in the dimensions of elements.

Uses MutationsObserver and falls back to an infinite dirty checking cycle if the first one is not supported.

Handles long running CSS transitions/animations, attributes and nodes mutations along with changes made by :hover pseudo-class (optional).

Compliant with the spec.

Doesn't contain any publicly available methods except for those described in the spec.

Get it:

1

npm install --save resize-observer-polyfill

Sample usage:

1
2
3
4
5

import ResizeObserver from 'resize-observer-polyfill';

const observer = new ResizeObserver((entries, observer) => {});

observer.observe(document.body);

GIF FTW!

P.S: Checkout the Live demo.

autosize-input

Effortless, dynamic-width text boxes.

Features:

• Dynamically adjusts the width of the text box to fit its current contents
• Can be initialised to fit its placeholder attribute
• Optionally set a min-width based on the element’s initial content

Get it: npm install -g autosize-input

Usage:

1
2
3
4
5

autosizeInput(document.querySelector('#foo'));

autosizeInput(document.querySelector('#bar'));

autosizeInput(document.querySelector('#baz'), { minWidth: true });

Implementation details:

• The box-sizing property of the given text box is set, inline, to content-box. Therefore, the width we assign to our text box excludes its padding and border properties.

• A hidden “ghost” div — given the same font-size and font-family as the text box — is used to compute the correct width to assign to the text box. This width is recomputed and assigned to the text box on every input event.

• The single “ghost” element is shared amongst all the “autosized” text boxes on the page.

GIF FTW:

asyncbox

A collection of small async/await utilities.

A simple collection of tiny useful async/await utilities, the below are the list of function that asyncbox gives:

• sleep
• retry
• nodeify
• nodeifyAll
• retryInterval
• asyncify
• parallel
• asyncmap
• asyncfilter
• waitForCondition

Get it: npm install --save asyncbox

Usage:

1
2
3
4
5
6
7
8
9

import { sleep } from 'asyncbox';

async function myFn () {
    // do some stuff 
    await sleep(1000); // wait one second 
    // do some other stuff 
};

myFn();

GIF FTW!

granim

Create fluid and interactive gradients animations.

Zero dependencies,< 10 kB fun module that helps us to do some cool gradient animations!

Get it: npm install granim --save

Sample usage:

1
2

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>

P.S: Don't miss to read their extensive API

GIF FTW!

quill

An API Driven Rich Text Editor.

For the initial commit looks like quill has taken two long years to reach v1.x and indeed it's proven itself to be a very tidy API driven rich text editor.

quill has APIs for:

• Content handling.

• Formatting.

• Selection.

• Events

• Extensions.

quill also modules for:

• TOOLBAR

• KEYBOARD

• HISTORY

• CLIPBOARD

• FORMULA

• SYNTAX

Finally, it has theme(s)!:

• Bubble

• Snow

Get it: npm install --save quill

Sample usage:

1
2
3
4
5
6
7
8
9
10
11
12
13

const Quill = require('quill');

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

GIF FTW!