Tech – Page 2 – underblob

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

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

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!

Git Automatically Resolve Conflicts

$ git merge -Xours branch-name
$ git merge -XTheirs banch-name

Comes in really handy for sweeping updates, like running eslint --fix on an entire code base or merging package-lock.json.

Alias for Git sanity

Git command line is pretty confusing. Here are some aliases that I found helpful that normalize it with other command line commands and add a little bit better context.

Open global .gitconfig file:

$ open ~/.gitconfig

If there isn’t an [alias] section already, add one:

[alias]
  cd = checkout
  ll = branch
  ls = branch
  delete-merged = !git branch --merged | egrep -v \"(^\\*|master|development)\" | xargs git branch -d
  mk = checkout -b
  new-up = !git push -u origin `git symbolic-ref --short HEAD`
  stage = add
  unstage = reset HEAD

Update 2018-07:

To set VS Code as the default editor for commit and merge messages:

[core]
  editor = code --wait

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

SSH Car Key

Start your car with the physical key.
Connect your phone to your car with Bluetooth.
Handshake/exchange encryption keys.
Unlock/start your car from your phone.

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

Category: Tech