Javascript – underblob

Extend URLSearchParams to object

There must be a reason this is a bad idea or it would be included in the API, right? 😅

URLSearchParams.prototype.toObject = function() {
  return […this.keys()]
    .reduce((o,k) => ({ …o, [k]: this.get(k) }), {});
}

Deferred Promise

Found myself in a situation where I wanted to execute a process and then check back on it later to be sure it had completed.

class MyClass {
  constructor() {
    this.readyPromise = new Promise(
      resolve => (this.readyResolve = resolve)
    );
  }

  async executeProcesses() {
    await // ...executing processes...
    this.readyResolve();
  }

  ready() { return this.readyPromise }
}

Chrome extension with imports

To write a Chrome extension that allows ES6 imports, imitate <script type="module"> with a dynamic import:

Chrome extension MV2 access to page data

Chrome extensions exist in an “isolated world” to prevent global var collisions between the website and the extension that runs on a given website. This mostly applies to content_scripts in an extension.

E.g. window.foo: my extension declares foo in the global scope and the website the extension runs on also declares foo in the global scope. With “isolated world” scoping for the extension, this is not a worry since it doesn’t share scope with the web page it runs on.

Update a NPM Project

Update all the packages in a NPM project to the latest version and sort out Babel dependencies:

npx npm-check-updates --upgradeAll
npx babel-upgrade --write
npm install

Colored Console Output

const out = {

  end: '\x1b[0m',

  // Modifiers.
  blink: '\x1b[5m',
  bright: '\x1b[1m',
  dim: '\x1b[2m',
  hidden: '\x1b[8m',
  reverse: '\x1b[7m',
  underscore: '\x1b[4m',

  // Foreground Colors.
  black: '\x1b[30m',
  blue: '\x1b[34m',
  cyan: '\x1b[36m',
  green: '\x1b[32m',
  magenta: '\x1b[35m',
  red: '\x1b[31m',
  yellow: '\x1b[33m',
  white: '\x1b[37m',

  // Background Colors.
  bgBlack: '\x1b[40m',
  bgBlue: '\x1b[44m',
  bgCyan: '\x1b[46m',
  bgGreen: '\x1b[42m',
  bgMagenta: '\x1b[45m',
  bgRed: '\x1b[41m',
  bgYellow: '\x1b[43m',
  bgWhite: '\x1b[47m',
};

Usage:

console.log(out.red, 'Something went wrong:', err, out.end);

Validate the Crickets’ Nest

I have a problem getting values from deeply nested objects: if one of the properties along the namespace is incorrect|modified|removed, Javascript throws. To avoid this, you can end up with obnoxious validation:

// Trying to get this.data.homeScene.user.name
const isValid = (
  typeof this.data === 'object' &&
  typeof this.data.homeScene === 'object' &&
  typeof this.data.homeScene.user === 'object' &&
  typeof this.data.homeScene.user.name === 'string'
);
if (isValid) {
  const { name } = this.data.homeScene.user;
  ...
}

What if I made a reusable helper to validate the namespace and return the value?

export default function getNamespace(startObj, path) {
  const isValidArgs = (
    typeof startObj === 'object' &&
    typeof path === 'string'
  );
  if (!isValidArgs) return undefined;

  const finalValue = path
    .split('.')
    .reduce((obj, p) => ((typeof obj === 'object') 
      ? obj[p]
      : undefined
    ), startObj);{

  return finalValue;
}

Now the obnoxious validation looks like this:

// Trying to get this.data.homeScene.user.name
const name = getNamespace(this, 'data.homeScene.user.name');
if (name) { ... }

Dude! Sweet!

Better Object Traversal in Javascript

ES6 introduced Object.entries and destructuring and template strings:

for (let [key, val] of Object.entries(myObjectPrimitive)) {
  console.log(`myObjectPrimitive[${key}]: ${val}`);
}

Multi-line Text Ellipsis

CSS can only add ellipsis to a single line of text. Here’s how to do it in Javascript using lodash:

// Update wrapping text to limit the number of lines.
var maxLines = 2;
var textEls = document.getElementsByClassName('text-els-class');
var textMaxH = Math.ceil(textEls[0].getBoundingClientRect().height) * maxLines;

_.forEach(textEls, function(el) {

    el.style.whiteSpace = 'normal';

    var elH = el.getBoundingClientRect().height;
    var isOverflow = elH > textMaxH;
    var text = el.innerHTML;

    // Remove the last word until the height is within bounds.
    while (elH > textMaxH) {

        text = (text
            .split(' ')
            .slice(0,-1)
            .join(' ')
        );
        el.innerHTML = text;
        elH = el.getBoundingClientRect().height;
    }

    if (isOverflow) {
        title.innerHTML += ' ...';
        title.style.maxHeight = titleMaxH + 'px';
    }
});

Tag: Javascript

Await Timeout