Forem: Thanga Ganapathy

NPM: It's Spammers Party Time 🥳

Thanga Ganapathy — Fri, 10 May 2024 06:25:49 +0000

Welcome,

As a Spammer of the registry (pun intended), I want to explain to you what's going on with the NPM registry and its management.

At first, I felt the title itself offensive or unlawful or disrespectful and also asked help from an AI chatbot, got the following results but I purposefully stayed with the same to get attention from both NPM and the dev community.

AI Chatbot: Certainly! Here are some alternative titles for your blog post on spammers in the NPM registry:

“Navigating the Murky Waters: A Deep Dive into NPM Registry Spam”
“Guarding the NPM Gates: Strategies to Combat Registry Spam”
“Unmasking the Shadows: Inside the World of NPM Registry Spammers”

Let's start with some basics and I request that you have a close look at the forthcoming screenshots.

What is NPM?

It is the world's largest software registry and a Node Package Manager for the JavaScript programming language maintained by Microsoft's npm, Inc.

Types of Spam

Let's list out some with my experience and a few real examples currently living in the registry.

Keyword Stuffing:

Packages using irrelevant keywords to appear in more search results.

Malicious Code:

Packages containing harmful code or backdoors.
Rewarding decentralized protocol (New Type):

These packages were created to get some incentives from the OSS block chain technology. You can learn more from here.

Fake Packages:

Impersonating popular packages to deceive users.
Low-Quality Packages:

Flooded with typos, irrelevant content, or empty functionality.

Bot-Generated Packages:

Automated spam submissions.

Phishing Attempts:

Packages designed to steal sensitive information.
Dependency Spam:

Malicious packages as dependencies of legitimate ones.
Hello World Packages (Low priority issue):

The students & learners try their first-time packages.

Weird Packages:

There are many packages with index.js file containing a comment which says something like the below and I try to understand with the google translator, no luck, if you got it, please let me know in the comments.

Fancy Packages Control:

These kinds of users acquire short package names.

NOTE: This list excludes security related malicious packages as they are often reported by the experts.

Some notable past incidents:

Some Spammers List

Here I am going to list out some of them because it is simply not possible to list all of them here. Also, with the number of packages published by each one.

https://www.npmjs.com/~onedionysc - 6931
https://www.npmjs.com/~shivamkalsi2024 - 997
https://www.npmjs.com/~79w - 551
https://www.npmjs.com/~ellentea - 599
https://www.npmjs.com/~uirewikilabs - 323
https://www.npmjs.com/~quinterochris100 - 361
https://www.npmjs.com/~vanthuanbt26 - 250
https://www.npmjs.com/~tiengiangb47 - 230
https://www.npmjs.com/~swenkertreanpm - 227
https://www.npmjs.com/~loandinhb931 - 224

These are my random picks and who knows how many of them are.

The Team's Response

The Problem

The problem is not the spammers, as they always will be, but the real problem is within the management.

Take for example,

If someone reports this via one of your support forums, the reply they get is simply redirection; they are redirecting you to fill out their respective forms for spam submissions.

What if the reporter did not want to do extra work here?

The important thing to note here is that the spammers and their packages live happily even after we provide the absolute spam users and their package links.

Conclusion

I am writing this blog because I waited too long for them to fix it.

Justice delayed is justice denied

- William Blackstone

Please don't forget to check out our important Articles:

Happy coding! 🚀

🙏 Thanks for reading.

🚀 The Fast, Accurate, JavaScript Objects Diffing & Patching Library

Thanga Ganapathy — Wed, 01 May 2024 14:21:25 +0000

Welcome,

I am here to introduce the new JavaScript library for objects diffing & patching.

@opentf/obj-diff

Live Demo with Visualization

Features

Deep Objects Diffing
Patching
Supports comparing custom object types (via diffWith)
TypeScript Support
Cross-Platform

Supported Types

Primitives
- Undefined
- Null
- Number
- String
- Boolean
- BigInt
Objects
- Plain Objects, e.g. {}
- Array
- Date
- Map
- Set

Let's begin with some basics, and we will go through our examples to see the existing solutions and their issues.

Diffing

The diffing is the method used to compare objects, change detection or objects tracking.

The diff result is called patches.

It allows us to send fewer data to the backend to apply the patches.

Patching

The patching is the method used to re-create the modified object at the other end using the original object + Patches (the diff result).

Accuracy

Here, we are going to find out how accurate our library is, and we need similar, popular libraries to compare against them.

So, let's pick three popular libraries.

Let us first create a test file.

import { diff } from '@opentf/obj-diff';
import mDiff from "microdiff";
import { diff as jDiff } from "just-diff";
import { detailedDiff } from "deep-object-diff";

function run(a, b) {
  try {
    console.log("Micro Diff:");
    console.log(mDiff(a, b));
    console.log();
  } catch (error) {
    console.log("Error: ", error.message);
  }

  try {
    console.log("Just Diff:");
    console.log(jDiff(a, b));
    console.log();
  } catch (error) {
    console.log("Error: ", error.message);
  }

  try {
    console.log("deep-object-diff:");
    console.log(detailedDiff(a, b));
    console.log();
  } catch (error) {
    console.log("Error: ", error.message);
  }

  try {
    console.log("diff:");
    console.log(diff(a, b));
    console.log();
  } catch (error) {
    console.log("Error: ", error.message);
  }
}

Let's start our complete testing.

1. Simple with no difference between objects

run({}, {});

Micro Diff:
[]

Just Diff:
[]

deep-object-diff:
{
  added: {},
  deleted: {},
  updated: {},
}

diff:
[]

2. Simple with single difference

run({ a: 1 }, { a: 2 });

Micro Diff:
[
  {
    path: [ "a" ],
    type: "CHANGE",
    value: 2,
    oldValue: 1,
  }
]

Just Diff:
[
  {
    op: "replace",
    path: [ "a" ],
    value: 2,
  }
]

deep-object-diff:
{
  added: {},
  deleted: {},
  updated: {
    a: 2,
  },
}

diff:
[
  {
    t: 2,
    p: [ "a" ],
    v: 2,
  }
]

3. Primitives

const a = [undefined, null, "string", 0, 1, 1n, true, false];
const b = [undefined, null, "string", 0, 1, 1n, true, false];
run(a, b);

Micro Diff:
[]

Just Diff:
[]

deep-object-diff:
{
  added: {},
  deleted: {},
  updated: {},
}

diff:
[]

All Working fine, no issues.

4. Number properties

const a = [NaN, Infinity, -Infinity];
const b = [NaN, Infinity, Infinity];
run(a, b);

Micro Diff:
[
  {
    path: [ 2 ],
    type: "CHANGE",
    value: Infinity,
    oldValue: -Infinity,
  }
]

Just Diff:
[
  {
    op: "replace",
    path: [ 0 ],
    value: NaN,
  }, {
    op: "replace",
    path: [ 2 ],
    value: Infinity,
  }
]

deep-object-diff:
{
  added: {},
  deleted: {},
  updated: {
    "0": NaN,
    "2": Infinity,
  },
}

diff:
[
  {
    t: 2,
    p: [ 2 ],
    v: Infinity,
  }
]

As you can see the just-diff & deep-object-diff incorrectly reporting the NaN value changed.

5. Simple deep objects

const a = {
  a: {
    b: {
      c: [1, 2, 3]
    },
    d: null
  },
  text: 'Hello'
}

const b = {
  a: {
    b: {
      c: [1, 2, 3, 4, 5]
    },
  },
  text: 'Hello World'
}

run(a, b);

Micro Diff:
[
  {
    type: "CREATE",
    path: [ "a", "b", "c", 3 ],
    value: 4,
  }, {
    type: "CREATE",
    path: [ "a", "b", "c", 4 ],
    value: 5,
  }, {
    type: "REMOVE",
    path: [ "a", "d" ],
    oldValue: null,
  }, {
    path: [ "text" ],
    type: "CHANGE",
    value: "Hello World",
    oldValue: "Hello",
  }
]

Just Diff:
[
  {
    op: "remove",
    path: [ "a", "d" ],
  }, {
    op: "replace",
    path: [ "text" ],
    value: "Hello World",
  }, {
    op: "add",
    path: [ "a", "b", "c", 3 ],
    value: 4,
  }, {
    op: "add",
    path: [ "a", "b", "c", 4 ],
    value: 5,
  }
]

deep-object-diff:
{
  added: {
    a: {
      b: {
        c: { '3': 4, '4': 5 }
      },
    },
  },
  deleted: {
    a: {
      d: undefined,
    },
  },
  updated: {
    text: "Hello World",
  },
}

diff:
[
  {
    t: 1,
    p: [ "a", "b", "c", 3 ],
    v: 4,
  }, {
    t: 1,
    p: [ "a", "b", "c", 4 ],
    v: 5,
  }, {
    t: 0,
    p: [ "a", "d" ],
  }, {
    t: 2,
    p: [ "text" ],
    v: "Hello World",
  }
]

All Working fine, no issues.

6. Different object types

const a = {
  a: 1,
  b: 2,
  c: 3
}
const b = [1, 2, 3]

run(a, b);

Micro Diff:
[
  {
    type: "REMOVE",
    path: [ "a" ],
    oldValue: 1,
  }, {
    type: "REMOVE",
    path: [ "b" ],
    oldValue: 2,
  }, {
    type: "REMOVE",
    path: [ "c" ],
    oldValue: 3,
  }, {
    type: "CREATE",
    path: [ 0 ],
    value: 1,
  }, {
    type: "CREATE",
    path: [ 1 ],
    value: 2,
  }, {
    type: "CREATE",
    path: [ 2 ],
    value: 3,
  }
]

Just Diff:
[
  {
    op: "remove",
    path: [ "c" ],
  }, {
    op: "remove",
    path: [ "b" ],
  }, {
    op: "remove",
    path: [ "a" ],
  }, {
    op: "add",
    path: [ 0 ],
    value: 1,
  }, {
    op: "add",
    path: [ 1 ],
    value: 2,
  }, {
    op: "add",
    path: [ 2 ],
    value: 3,
  }
]

deep-object-diff:
{
  added: {
    "0": 1,
    "1": 2,
    "2": 3,
  },
  deleted: {
    a: undefined,
    b: undefined,
    c: undefined,
  },
  updated: {},
}

diff:
[
  {
    t: 2,
    p: [],
    v: [ 1, 2, 3 ],
  }
]

As you can see, the other libraries are reporting changes within the original object, but the actual object type was changed from plain object to Array.

Note: The empty path array { p: [] } in our diff result denotes the Root path.

7. Passing null as object

const a = {
  a: 1,
  b: 2,
  c: 3
}
const b = null

run(a, b);

Micro Diff:
Error:  newObj is not an Object. (evaluating 'key in newObj')
Just Diff:
Error:  both arguments must be objects or arrays
deep-object-diff:
{
  added: {},
  deleted: {},
  updated: null,
}

diff:
[
  {
    t: 2,
    p: [],
    v: null,
  }
]

8. Commonly used object types: Maps & Sets

const a = {
  obj: {
    m: new Map([['x', 0], ['y', 1]]),
    s: new Set([1, 2, 3])
  }
}

const b = {
  obj: {
    m: new Map([['x', 1], ['y', 0]]),
    s: new Set([1, 2, 3, 4, 5])
  }
}

run(a, b);

Micro Diff:
[]

Just Diff:
[]

deep-object-diff:
{
  added: {},
  deleted: {},
  updated: {},
}

diff:
[
  {
    t: 2,
    p: [ "obj", "m" ],
    v: Map(2) {
      "x": 1,
      "y": 0,
    },
  }, {
    t: 2,
    p: [ "obj", "s" ],
    v: Set(5) {
      1,
      2,
      3,
      4,
      5,
    },
  }
]

Performance

For performance evaluation, we have created a benchmark file with some objects in our repo.

The following table is the output.

┌───┬──────────────────┬─────────┬───────────────────┬────────┬─────────┐
│   │ Task Name        │ ops/sec │ Average Time (ns) │ Margin │ Samples │
├───┼──────────────────┼─────────┼───────────────────┼────────┼─────────┤
+ 0 │ diff             │ 252,694 │ 3957.346814404028 │ ±1.60% │ 25270   │
│ 1 │ microdiff        │ 218,441 │ 4577.892286564301 │ ±0.92% │ 21845   │
│ 2 │ deep-object-diff │ 121,385 │ 8238.188318642591 │ ±1.66% │ 12139   │
│ 3 │ just-diff        │ 105,292 │ 9497.35384615396  │ ±1.66% │ 10530   │
│ 4 │ deep-diff        │ 160,802 │ 6218.820533549017 │ ±1.59% │ 16081   │
└───┴──────────────────┴─────────┴───────────────────┴────────┴─────────┘

Conclusion

I hope I have justified the Fast & Accurate aspect of the library.

We have FAQs section; you can learn more there.

Please try to use it in your next project and feel free to send your feedback & issues you encounter via GitHub issues.

Please don't forget to check out our important Articles:

Happy coding! 🚀

🙏 Thanks for reading.

How to Compare Same Contents but Different Ordered Arrays in JavaScript?

Thanga Ganapathy — Mon, 22 Apr 2024 11:06:32 +0000

Welcome,

One common challenge developers face is comparing arrays—specifically, determining if two arrays contain the same contents, regardless of the order of those contents. This task might seem straightforward at first glance, but it quickly delves into complexities.

In this blog post, we’ll discuss various methods, from the simple and direct to the more sophisticated and efficient, ensuring that by the end of this article.

Basics

This is for Beginners, in JavaScript, comparing two arrays with equality operators simply do not work.

[] == [] // false
[] === [] // false

Comparing Two Arrays

Let us begin with regular array comparisons.

function arraysEqual(a, b) {
  if (a === b) return true;
  if (a == null || b == null) return false;
  if (a.length !== b.length) return false;

  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }

  return true;
}

// Example usage:
const array1 = [1, 2, 3];
const array2 = [1, 2, 3];
const array3 = [1, 2, 4];

arraysEqual(array1, array2); // true
arraysEqual(array1, array3); // false

Level 1

Our arraysEqual function works for regular array comparisons but not for different ordered.

const array1 = [1, 2, 3];
const array2 = [2, 3, 1];

arraysEqual(array1, array2); // false

Let's change it to work for different ordered arrays.

We can do this by simply sort the given arrays before comparison.

function arraysEqual(a, b) {
  a.sort();
  b.sort();

  if (a === b) return true;
  if (a == null || b == null) return false;
  if (a.length !== b.length) return false;

  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }

  return true;
}

Now our function works well with different ordered arrays.

const array1 = [1, 2, 3];
const array2 = [2, 3, 1];

arraysEqual(array1, array2); // true

Level 2

Now we test the arraysEqual function by giving mixed type of values.

arraysEqual(['1', 1], [1, '1']); // false

As you can see our function failed even with the two arrays contain same values.

Let's fix this.

function compareMixedTypes(a, b) {
  if (typeof a === typeof b) {
    return a === b ? 0 : a < b ? -1 : 1;
  }
  return typeof a < typeof b ? -1 : 1;
}

function arraysEqual(a, b) {
  a.sort(compareMixedTypes);
  b.sort(compareMixedTypes);

  if (a === b) return true;
  if (a == null || b == null) return false;
  if (a.length !== b.length) return false;

  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }

  return true;
}

arraysEqual(['1', 1], [1, '1']); // true

Level 3

Let's test the arraysEqual function with array of objects.

const a = [{a: 1}, {b: 2}];
const b = [{b: 2}, {a: 1}];

arraysEqual(a, b); // false

As you can see our function failed because the sorting does work for primitives but simply not for objects.

Let's remove sorting and try different method.

function inArray(array, el) {
  for (var i = array.length; i--; ) {
    if ( array[i] === el ) return true;
  }
  return false;
}

function arraysEqual(a, b) {
  if (a === b) return true;
  if (a == null || b == null) return false;
  if (a.length !== b.length) return false;

  for (var i = a.length; i--; ) {
    if (!inArray(b, a[i])) {
      return false;
    }
  }
  return true;
}

Let's test again.

const array1 = [1, 2, 3];
const array2 = [2, 3, 1];

arraysEqual(array1, array2); // true
arraysEqual(['1', 1], [1, '1']); // true
arraysEqual([1, 1, 2, 2], [1, 2, 1, 2]); // true

const a = [{a: 1}, {b: 2}];
const b = [{b: 2}, {a: 1}];

arraysEqual(a, b); // false

As you can see the modified function works for primitives but not for objects, let's fix it in next level.

Level 4

The problem with the inArray function is that we are comparing two values using === operator, we need to find a way to compare objects also with deep nested.

We can use the popular lodash library's isEqual function here. Let's change it.

function inArray(array, el) {
  for (var i = array.length; i--; ) {
    if (_.isEqual(array[i], el)) return true;
  }
  return false;
}

Now let's try it.

let a = [{a: 1}, {b: 2}];
let b = [{b: 2}, {a: 1}];

arraysEqual(a, b); // true

a = [{a: {b: {c: ['a', 'b', 'c']}}}, [1, 2, 3]];
b = [[1, 2, 3], {a: {b: {c: ['a', 'b', 'c']}}}];
arraysEqual(a, b); // true

Level 5

Now what? If our code is working fine for all cases, then why do we need another level here?

There are some problems in the _.isEqual function.

https://github.com/lodash/lodash/issues/5401

https://github.com/lodash/lodash/issues/3640

https://github.com/lodash/lodash/issues/3428

Let's verify it now.

const a = [{m: new Map([['x', 'y']])}]
const b = [{m: new Map([['y', 'x']])}]

arraysEqual(a, b); // true

console.log(a, b);
/* 
[ { m: Map(1) { 'x' => 'y' } } ] 
[ { m: Map(1) { 'y' => 'x' } } ]
*/

So, what is next?

Let me introduce our organization's Standard Library function isEqlArr here.

import { isEqlArr, shuffle } from '@opentf/std';

let a = [1, 2, 3];
let b = [2, 3, 1];
isEqlArr(a, b); // true

a = ['1', 1];
b = [1, '1'];
isEqlArr(a, b); // true

a = [1, 1, 2, 2];
b = [1, 2, 1, 2];
isEqlArr(a, b); // true

a = 'Apple'.split('')
b = shuffle('Apple')
isEqlArr(a, b); // true

a = [{a: 1}, {b: 2}];
b = [{b: 2}, {a: 1}];
isEqlArr(a, b); // true

a = [{a: {b: {c: ['a', 'b', 'c']}}}, [1, 2, 3]];
b = [[1, 2, 3], {a: {b: {c: ['a', 'b', 'c']}}}];
isEqlArr(a, b); // true

a = [{m: new Map([['x', 'y']])}]
b = [{m: new Map([['y', 'x']])}]
isEqlArr(a, b); // false

Example: Real-World Use Case

In this example, we are going to find out how many sets of the same products were in the invoices of a company.

Note: If it doesn't make sense, just ignore this example.

import { isEqlArr } from '@opentf/std';

const invoices = [
  {
    userID: 'c2607dc9-bd74-446d-ac83-de201d158b87',
    products: [
      {
        id: '4e5fe7a0-0fd2-44f3-bdcd-6a3b2eea4b50',
        name: 'Product A'
      },
       {
        id: '863cb499-1943-473b-85f2-285ed9128c74',
        name: 'Product B'
      }
    ]
  },
  {
    userID: '6e523056-1601-41ba-b89e-6ae41164a843',
    products: [
      {
        id: '4e5fe7a0-0fd2-44f3-bdcd-6a3b2eea4b50',
        name: 'Product A'
      },
       {
        id: '401cc691-92f1-4e9e-bd78-995cb9663c5e',
        name: 'Product C'
      },

    ]
  },
  {
    userID: '3d375953-4c60-433c-b8c2-c45628d8f2d6',
    products: [
      {
        id: '863cb499-1943-473b-85f2-285ed9128c74',
        name: 'Product B'
      },
      {
        id: '4e5fe7a0-0fd2-44f3-bdcd-6a3b2eea4b50',
        name: 'Product A'
      }
    ]
  }
]

let count = 0

for (let i = 0; i < invoices.length; i += 1) {
  for (let j = 0; j < invoices.length; j += 1) {
    if (i !== j) {
      if (isEqlArr(invoices[i].products, invoices[j].products)) {
        count++
      }
    }
  }
}

console.log(count); // 2

Note: You can try out these examples on our online Node.js REPL

Conclusion

Here, we have seen various levels in comparing arrays elements unordered.

The new Standard library function is used to achieve the same for the following reasons:

Cross-Environment Compatibility: Execute seamlessly in browsers, Node.js, Bun, Deno, etc.
TypeScript Support
Works with both CJS & ESM
Supports some Older Browsers & Node.js >= 16

If you need to find out the performance of the lib, please check out these benchmarks.

Please don't forget to check out our important Articles:

Happy coding! 🚀

🙏 Thanks for reading.

References:

https://stackoverflow.com/questions/29672847/how-to-compare-contents-of-javascript-array-but-not-the-order-of-them

https://stackoverflow.com/questions/3243275/javascript-arrays-checking-two-arrays-of-objects-for-same-contents-ignoring-o

https://stackoverflow.com/questions/47072055/how-to-make-a-deep-comparison-of-unordered-arrays?noredirect=1&lq=1

https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript

Use JavaScript's New Set Composition Methods Without Polyfills

Thanga Ganapathy — Fri, 19 Apr 2024 21:07:07 +0000

Welcome,

There is a proposal to add methods like union and intersection to JavaScript's built-in Set class.

It is currently at stage 3, but some browsers like chrome already supports it.

As you can see the currently supported runtimes are very limited.

Polyfills

Currently, you can safely use these methods by using polyfills.

Set Composition Methods

The Set object provides some methods that allow you to compose sets like you would with mathematical operations.

These methods include:

Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
Set.prototype.symmetricDifference(other)
Set.prototype.isSubsetOf(other)
Set.prototype.isSupersetOf(other)
Set.prototype.isDisjointFrom(other)

Using without Polyfills

You can use our std library functions to achieve the same.

Let us explain each method by examples on how to use these functions.

Set.prototype.intersection()

import { intersection } from '@opentf/std';

const odds = [1, 3, 5, 7, 9];
const squares = [1, 4, 9];

// Using native method
new Set(odds).intersection(new Set(squares)); //=> Set(2) { 1, 9 }

// Using std function
intersection([odds, squares]); //=> [ 1, 9 ]

Set.prototype.union()

import { union } from '@opentf/std';

const evens = [2, 4, 6, 8];
const squares = [1, 4, 9];

// Using native method
new Set(evens).union(new Set(squares)); //=> Set(6) { 2, 4, 6, 8, 1, 9 }

// Using std function
union([evens, squares]); //=> [ 2, 4, 6, 8, 1, 9 ]

Set.prototype.difference()

import { diff } from '@opentf/std';

const odds = [1, 3, 5, 7, 9];
const squares = [1, 4, 9];

// Using native method
new Set(odds).difference(new Set(squares)); //=> Set(3) { 3, 5, 7 }

// Using std function
diff([odds, squares]); //=> [ 3, 5, 7 ]

Set.prototype.symmetricDifference()

import { symDiff } from '@opentf/std';

const evens = [2, 4, 6, 8];
const squares = [1, 4, 9];

// Using native method
new Set(evens).symmetricDifference(new Set(squares)); 
//=> Set(5) {2, 6, 8, 1, 9}

// Using std function
symDiff([evens, squares]); //=> [ 2, 6, 8, 1, 9 ]

Set.prototype.isSubsetOf()

import { isSubsetOf } from '@opentf/std';

const fours = [4, 8, 12, 16];
const evens = [2, 4, 6, 8, 10, 12, 14, 16, 18];

// Using native method
new Set(fours).isSubsetOf(new Set(evens)); //=> true

// Using std function
isSubsetOf(fours, evens); //=> true

Set.prototype.isSupersetOf()


import { isSupersetOf } from '@opentf/std';

const evens = [2, 4, 6, 8, 10, 12, 14, 16, 18];
const fours = [4, 8, 12, 16];

// Using native method
new Set(evens).isSupersetOf(new Set(fours)); //=> true

// Using std function
isSupersetOf(evens, fours); //=> true

Set.prototype.isDisjointFrom()

import { isDisjointFrom } from '@opentf/std';

const primes = [2, 3, 5, 7, 11, 13, 17, 19];
const squares = [1, 4, 9, 16];

// Using native method
new Set(primes).isDisjointFrom(new Set(squares)); //=> true

// Using std function
isDisjointFrom(primes, squares); //=> true

Bonus

The subset relationship can be determined by passing Boolean value to the proper param. Learn more about it on our website.

Conclusion

By using our library functions, you can compose sets like you would with mathematical operations.

Here are some of the benefits from using our library:

Works across runtimes, e.g. Browsers, Node.js, Bun, Deno, etc.
Consistent & Concise function names
TypeScript Support
Works with both CJS & ESM
Supports some Older Browsers & Node.js >= 16

And finally, you can avoid polyfills in your codebase.

Please don't forget to check out our important Articles:

Introducing Our New JavaScript Standard Library

You Don’t Need JavaScript Native Methods!

Happy coding! 🚀

🙏 Thanks for reading.

I Published a Dummy Pkg to NPM, and Here is What Happened

Thanga Ganapathy — Thu, 18 Apr 2024 12:45:50 +0000

Welcome,

I have published a dummy package to the npm registry called cli-pbar, let me explain why I did this and what happens next.

Backstory

A few years ago, I published some packages to npm and tried their search to see if my packages were popping up in the results. I could find my packages somewhere around the 5th results page.

So, I thought there were packages that were more eligible than ours.

Later, sometimes, even after consistent package maintenance and applying the appropriate search keywords, it doesn't work either. Still, my packages are behind many pages.

Problem with Search

Later, I found there are problems with the NPM search scores.

The following are my observations:

The inefficient quality score calculations.
Minified code pkgs scores are lowered.
The dependencies must be up-to-date, even if you don't need it.
The pkg must have a custom website to get a higher score.
Scores may be lower if your pkg is not in SemVer major release.
Not considering pkg provenance.
The unknown mechanism for code complexity measures.

The Dummy Package

Now I wanted to test the npm's Package search rank criteria.

As the npm's docs says:

Quality includes considerations such as the presence of a README file, stability, tests, up-to-date dependencies, custom website, and code complexity.

I created a dummy package named cli-pbar of our organization original package @opentf/cli-pbar with all the following requirements:

✅ README file

✅ Stability - Released Major SemVer

✅ Tests - Added dummy tests

✅ Up-to-date Dependencies - Zero dependencies

✅ Custom Website - Pointed to our Organization website

✅ Code Complexity - Single index.js file with just a console.log()

The Result

Now, when I again tried with the same search keywords, the experiment got surprising results.

Guess what? 🎉 Now our dummy package is featured in the first page that is also within the top 10 packages.

https://www.npmjs.com/search?q=cli%20progress

Conclusion

This is just an experiment and no intention to spam the registry.

I had discussions with the npm team about this; they are aware of this and planning to remove the PQM score, and I hope they will fix it ASAP.

https://github.com/npm/feedback/discussions/1104

Other related discussions:

https://github.com/npm/feedback/discussions/66

https://github.com/npm/feedback/discussions/1043

😂 Fun Fact: Someone cloned my pkg and published it under a different scope; that pkg features on top of my original package in the search results.

Let me know your comments please.

Please don't forget to check out our important Articles:

🙏 Thanks for reading.

You Don’t Need JavaScript Native Methods!

Thanga Ganapathy — Sun, 14 Apr 2024 12:08:14 +0000

Welcome,

I'm sure you have come across articles like, You don't need Lodash, Underscore or Ramda, but this is the opposite.

When ES6 came, people got excited and started using native JS methods instead of using utility lib functions for various reasons like performance, size reduction, dependencies-free, etc.

Context

I recommend you check out this post, Introducing Our New JavaScript Standard Library, to learn more about the JS library @opentf/std, which we will be using throughout this article.

Why?

Let us explain why again you need to reverse it when using a standard library like @opentf/std.

Works across runtime environments (Browsers, Node.js, Deno, Bun, etc.)
Consistent & Concise function names
Helpful in functions composition (Pipe or Compose)
Supports some older browsers & Node.js >=16
Avoids polyfills

Examples

Let us compare some native methods vs @opentf/std functions.

1. Array.prototype.toReversed()

✅ Browsers: Baseline 2023
✅ Node.js: 20.0.0

import { reverse } from "@opentf/std";

const items = [1, 2, 3];

items.toReversed(); //=> [3, 2, 1]

reverse(items); //=> [3, 2, 1]

2. Array.prototype.toSorted()

✅ Browsers: Baseline 2023
✅ Node.js: 20.0.0

import { sort } from "@opentf/std";

const values = [1, 10, 21, 2];

values.toSorted((a, b) => b - a); //=> [ 21, 10, 2, 1 ]

sort(values, "desc"); //=> [ 21, 10, 2, 1 ]

3. Array.prototype.toSpliced()

✅ Browsers: Baseline 2023
✅ Node.js: 20.0.0

import { arrIns, arrRm, arrReplace } from "@opentf/std";

const months = ["Jan", "Mar", "Apr", "May"];

// Inserting an element at index 1
const months2 = months.toSpliced(1, 0, "Feb");
//=> ["Jan", "Feb", "Mar", "Apr", "May"]
const m2 = arrIns(months, 1, "Feb");
//=> ["Jan", "Feb", "Mar", "Apr", "May"]

// Deleting two elements starting from index 2
const months3 = months2.toSpliced(2, 2);
//=> ["Jan", "Feb", "May"]
const m3 = arrRm(m2, 2, 2);
//=> ["Jan", "Feb", "May"]

// Replacing one element at index 1 with two new elements
const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
//=> ["Jan", "Feb", "Mar", "May"]
const m4 = arrReplace(m3, 1, 1, "Feb", "Mar");
//=> ["Jan", "Feb", "Mar", "May"]

4. Object.groupBy()

✅ Browsers: Baseline 2024
✅ Node.js: 21.0.0

import { groupBy } from "@opentf/std";

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

Object.groupBy(inventory, ({ type }) => type);
/*
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

groupBy(inventory, "type");
/*
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

5. Array Unique

import { uniq } from "@opentf/std";

const arr = [2, 1, 2];

[...new Set(arr)]; //=> [2, 1]

uniq(arr); //=> [2, 1]

6. Set.prototype.intersection()

Here we need Set intersection method for finding intersecting values in arrays.

⚠️ Browsers: Limited availability
❌ Node.js: Not available

import { intersection } from "@opentf/std";

const odds = [1, 3, 5, 7, 9];
const squares = [1, 4, 9];

const result = new Set(odds).intersection(new Set(squares));
[...result]; //=> [1, 9]

intersection([odds, squares]); //=> [1, 9]

7. Async/Await With Array.prototype.map()

import { aMap } from "@opentf/std";

const arr = [1, 2, 3, 4, 5];

function multiply(n, i) {
  return Promise.resolve(n * i);
}

async function main(params) {
  // Using Promise, runs in parallel
  let result = await Promise.all(arr.map((e, i) => multiply(e, i)));
  console.log(result); //=> [ 0, 2, 6, 12, 20 ]

  // Using for...of, runs in sequence
  result = [];
  let i = 0;
  for (const n of arr) {
    result.push(await multiply(n, i));
    i++;
  }
  console.log(result); //=> [ 0, 2, 6, 12, 20 ]

  // Using aMap, runs in sequence
  result = await aMap(arr, async (n, i) => await multiply(n, i));
  console.log(result); //=> [ 0, 2, 6, 12, 20 ]
}

main();

8. structuredClone() global function

✅ Browsers: Baseline 2022
✅ Node.js: 17.0.0

import { clone } from "@opentf/std";

const obj = {
  arr: [1, 2, 3],
  obj: {
    a: "abc",
    b: new Map([
      ["a", 1],
      ["b", 2],
    ]),
  },
  date: new Date(),
};

structuredClone(obj); // Returns a deeply clone value

clone(obj); // Returns a deeply clone value

9. Object.prototype.hasOwnProperty() & Object.hasOwn()

import { has } from "@opentf/std";

const foo = Object.create(null);
foo.prop = "exists";
foo.a = { b: 1 };

foo.hasOwnProperty("prop"); // Uncaught TypeError: foo.hasOwnProperty is not a function

Object.hasOwn(foo, "prop"); //=> true
Object.hasOwn(foo, "a.b"); //=> false

has(foo, "prop"); //=> true
has(foo, "a.b"); //=> true
has(foo, "a.c"); //=> false

10. Number.isFinite() & global isFinite()

import { isNum } from "@opentf/std";

Number.isFinite(Infinity); // false
Number.isFinite(NaN); // false
Number.isFinite(-Infinity); // false
Number.isFinite(0); // true
Number.isFinite(2e64); // true
Number.isFinite("0"); // false

isFinite("0"); // true; coerced to number 0

isNum(Infinity); // false
isNum(NaN); // false
isNum(-Infinity); // false
isNum(0); // true
isNum(2e64); // true
isNum("0"); // false
isNum("0", true); // true; coerced to number 0

Conclusion

In this exploration of JavaScript native methods and their alternatives, we’ve discovered the power of the @opentf/std library. By replacing native functions with well-tested alternatives, developers can achieve cleaner, more efficient code.

If you need to find out the performance of the lib, please check out these benchmarks.

Note:
Here we don't say you should stop using regular array methods like map, filter, or reduce, but the external library is not bad at all and will give you some benefits from using it.

As you continue your coding journey, consider adopting these alternatives and contributing to the open-source ecosystem.

Remember that collaboration and community involvement play a crucial role in advancing our collective knowledge.

Happy coding! 🚀

🙏 Thanks for reading.

Introducing Our New JavaScript Standard Library

Thanga Ganapathy — Fri, 12 Apr 2024 17:31:22 +0000

Welcome,

I would like to introduce our new JavaScript Standard Library @opentf/std, please keep on reading.

Docs: https://js-std.pages.dev/

Why a Standard Library Matters

Over the past few years, JavaScript has evolved at breakneck speed. The language has seen a proliferation of features, modules, and packages. The JavaScript projects with dependencies crisscrossing like a tangled web.

The Quest for Simplicity

As developers, our primary goal is to find the simplest solution to a problem. Simplicity means functionality, performance, readability, and efficiency. We walk a fine line between complexity and elegance.

The Package Proliferation Problem

Many NPM packages are one-liners—tiny snippets of code packaged up for convenience. But is this proliferation of trivial code a good thing? Not always. In the real world, it leads to issues. If a package is removed, chaos ensues. Dependencies become a house of cards, and maintaining sanity becomes a challenge.

Features

Simple & Familiar API with some differences
Practical Default Options
Cross-Environment Compatibility: Execute seamlessly in browsers, Node.js, Bun, Deno, etc.
Clean Code: We’ve followed best practices to ensure readability and maintainability.
Documentation: Clear explanations and examples for every function.
TypeScript Support

Usage Examples:

Let’s explore some of the library’s capabilities:

Checking if a Value is Numeric:

import { isNum } from "@opentf/std";

isNum(NaN); //=> false

Converting Strings to Pascal Case:

import { pascalCase } from "@opentf/std";

pascalCase("pascal case"); //=> PascalCase

Sorting an Array in Descending Order:

import { sort } from "@opentf/std";

sort([1, 10, 21, 2], "desc"); //=> [21, 10, 2, 1]

Deep Cloning an Object:

import { clone } from "@opentf/std";

const obj = { a: 1, b: "abc", c: new Map([["key", "val"]]) };
clone(obj); // Returns deeply cloned value

Checking Equality of Objects & Arrays:

import { isEql, isEqlArr } from "@opentf/std";

const mapA = new Map([["a", 1], ["b", 2]]);
const mapB = new Map([["b", 2], ["a", 1]]);
isEql(mapA, mapB); //=> false

isEqlArr([1, 2, 3], [2, 3, 1]); //=> true

Adding a Delay (1 second) with sleep:

import { sleep } from "@opentf/std";

await sleep(1000); // Suspends execution for 1 second.

Functions composition using pipe & compose functions:

import { pipe, compose } from "@opentf/std";

pipe(
  1,
  (x) => x + 1,
  (x) => x * 5
); //=> 10

compose(
  1,
  (x) => x + 1,
  (x) => x * 5
); //=> 6

*You can try out these examples on the Playground.

Benchmarks

Some benchmark outputs are shown here for reference.

*Note: Our priorities are reliability and accuracy rather than performance.

clone:
┌───┬──────────────────────────┬─────────┬────────────────────┬────────┬─────────┐
│   │ Task Name                │ ops/sec │ Average Time (ns)  │ Margin │ Samples │
├───┼──────────────────────────┼─────────┼────────────────────┼────────┼─────────┤
│ 0 │ structuredClone (Native) │ 276,824 │ 3612.3959469709525 │ ±1.29% │ 27683   │
│ 1 │ _.cloneDeep (Lodash)     │ 216,965 │ 4609.032953864744  │ ±2.41% │ 21697   │
│ 2 │ R.clone (ramda)          │ 174,567 │ 5728.439422580611  │ ±1.92% │ 17457   │
│ 3 │ R2.clone (remeda)        │ 310,268 │ 3223.0154703960834 │ ±2.40% │ 31027   │
│ 4 │ cloneDeep (clone-deep)   │ 468,908 │ 2132.611673882092  │ ±1.70% │ 46891   │
│ 5 │ copy (fast-copy)         │ 486,179 │ 2056.852050680814  │ ±1.91% │ 48618   │
+ 6 │ clone                    │ 535,302 │ 1868.1028376072306 │ ±2.07% │ 53531   │
└───┴──────────────────────────┴─────────┴────────────────────┴────────┴─────────┘
*Note:
    - Here the lodash does not support errors, sparse arrays & objects in map keys.

    - Here the ramda & remeda does not support cloning Map & Set.

    - The fast-copy does not clone objects within Map, buffers in TypedArray, sparse arrays.

    - The clone-deep does not handle circular refs, does not clone objects within map,
    sparse arrays, internal refs within the object, TypedArray buffers & DataView.

sortBy:
┌───┬────────────────────┬───────────┬───────────────────┬────────┬─────────┐
│   │ Task Name          │ ops/sec   │ Average Time (ns) │ Margin │ Samples │
├───┼────────────────────┼───────────┼───────────────────┼────────┼─────────┤
│ 0 │ _.orderBy (Lodash) │ 1,231,295 │ 812.1529684071648 │ ±3.09% │ 123130  │
│ 1 │ R.sortWith (Ramda) │ 1,279,200 │ 781.7380570822326 │ ±2.27% │ 127921  │
│ 2 │ R2.sortBy (Remeda) │ 1,419,707 │ 704.3703291518029 │ ±2.81% │ 141971  │
│ 3 │ sort (Moderndash)  │ 2,697,568 │ 370.7042634668106 │ ±1.82% │ 269757  │
+ 4 │ sortBy             │ 2,728,366 │ 366.5196435965459 │ ±2.19% │ 272837  │
└───┴────────────────────┴───────────┴───────────────────┴────────┴─────────┘

*Note: Here the Moderndash does not support passing object prop as string.

isEql:
┌───┬─────────────────────────────────────┬─────────┬────────────────────┬────────┬─────────┐
│   │ Task Name                           │ ops/sec │ Average Time (ns)  │ Margin │ Samples │
├───┼─────────────────────────────────────┼─────────┼────────────────────┼────────┼─────────┤
│ 0 │ deepStrictEqual (Native)            │ 950,686 │ 1051.871609041841  │ ±0.24% │ 95069   │
│ 1 │ fastDeepEqual (fast-deep-equal/es6) │ 652,611 │ 1532.3058134904193 │ ±1.49% │ 65262   │
│ 2 │ dequal                              │ 120,791 │ 8278.7573675501    │ ±0.74% │ 12080   │
│ 3 │ _.isEqual (Lodash)                  │ 152,075 │ 6575.660376117521  │ ±2.02% │ 15208   │
│ 4 │ R.equals (Ramda)                    │ 51,496  │ 19418.976504855284 │ ±1.70% │ 5150    │
+ 5 │ isEql                               │ 104,355 │ 9582.655710998957  │ ±1.13% │ 10436   │
└───┴─────────────────────────────────────┴─────────┴────────────────────┴────────┴─────────┘

*Note:

  - The native util `deepStrictEqual` not available in browsers, does not check `Map` ordering & same invalid dates.
  - The `fast-deep-equal/es6` does not support cyclic refs, Map ordering check, invalid dates, symbols, objects values in Set & TypedArrays.
  - The lodash `isEqual` does not check `Map` ordering & object values in `Set`.
  - The ramda `equals` does not check `Map` ordering & symbols.
  - The dequal does not support cyclic refs, Map ordering, symbols & same invalid dates.

Conclusion:

We invite you to be part of our journey. The world of JavaScript development is ever-evolving, and together, we can shape it for the better. Here’s what we’d like you to take away:

Collaboration Matters:

Open-source projects thrive on collaboration. Whether you’re contributing code, reporting issues, or sharing ideas, your voice matters. Join us on GitHub and let’s build something remarkable.

Simplicity Wins:

In a sea of complexity, simplicity stands out. Our library aims to simplify your coding life, one function at a time. Embrace the elegance of clean code and watch your productivity soar.

Keep Learning:

JavaScript surprises us daily. Stay curious, explore new ideas, and never stop learning. The next breakthrough might be just a line of code away.

Visit our docs website for more info.

🙏 Thanks for reading.