Tech – Page 2 – underblob

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.

Comparison Formulae

Collecting performance metrics, I needed a way to compare optimization before/after numbers into some meaningful value that would impress the brass.

Shell String Split

Having some trouble with this operation, found that you can use string replacement syntax to also split a string to array:

NPM_VER=$(npm -v) # 6.12.1
NPM_VER=(${NPM_VER//./ }) # Split on '.' as delimiter

echo "${NPM_VER[0]}" # 6
echo "${NPM_VER[1]}" # 12
echo "${NPM_VER[2]}" # 1

Boilerplate with Maki Module

TL;DR: Make flexible and consistent folder-based modular templates to harden your project’s pattern with Maki Module :)

In programming there is boilerplate:

sections of code that have to be included in many places with little or no alteration.
Wikipedia

Since most things being made follow a pattern of things made before them, boilerplate gives a project consistency and sets the expectations of what you may find in other files, functions, classes, etc.

Shell commands with Node

Running CLI Node scripts, capture the return value of a shell command:

const execSync = require('child_process').execSync;
const nodeVer = execSync('node -v', { encoding: 'utf8' });

Shell command reports in the CLI:

const execSync = require('child_process').execSync;
execSync('npm -g ls', { stdio: 'inherit' });

Package Panic

Here are a couple good resources for deciding which NPM packages to use in a project:

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

Git Branch Print to CLI

Since the release of Git 2.16, the git branch command runs as paged executable instead of printing the branches to the console. To revert back to the old way of printing branches to the console, update your ~/.gitconfig as follows:

[pager]
  branch = false

Stack Overflow

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);