DEV Community: Henry Unite

What's in my RC 2022

Henry Unite — Mon, 19 Dec 2022 20:04:13 +0000

Welcome to a tour of my .zshrc file! I thought it would be fun to take a dive into the different tools I use to elevate my developer game.

If you want to see my whole config, I keep all my setup files on GitHub: https://github.com/unitehenry/config

Also check out last years:
https://dev.to/unitehenry/what-s-in-my-rc-2021-3llh

The Variables

# EDITOR
export EDITOR="vi";
export VISUAL="vi";

# iCloud Directory
export DOCS="/Users/$(whoami)/Library/Mobile Documents/com~apple~CloudDocs";

# Work Directory
export WORK="/Users/$(whoami)/Projects/lula";

# Vault Address
export VAULT_ADDR=https://vault.stallions.dev/

Continuing to use vim, so just exporting my preferred editor variables
Reference my iCloud directory which I use to keep all my personal files
Adding an environment variable to help reference where my company is storing secrets

Credentials

# Credentials Fetcher
function op-create() {
  op item template get Login > /tmp/login.json;
  if [ -n "$3" ]
  then
    echo $(cat /tmp/login.json | jq -r -c "(.fields[] | select(.id | contains(\"username\"))) .value = \"$2\"") > /tmp/login.json;
    echo $(cat /tmp/login.json | jq -r -c "(.fields[] | select(.id | contains(\"password\"))) .value = \"$3\"") > /tmp/login.json;
    op item create --template /tmp/login.json --title $1;
  else
    echo $(cat /tmp/login.json | jq -r -c "(.fields[] | select(.id | contains(\"username\"))) .value = \"$2\"") > /tmp/login.json;
    op item create --template /tmp/login.json --title $1 --generate-password;
  fi
  rm /tmp/login.json;
}

function op-list() {
  op item list --format=json | jq -c -r '.[].title';
}

function op-username() {
 op item get $@ --format=json | jq -c -r '.fields[] | select(.id | contains("username")) | .value';
}

function op-password() {
  op item get $@ --format=json | jq -c -r '.fields[] | select(.id | contains("password")) | .value';
}

function op-delete() {
  op item delete $@;
}

I used to be anti hosted password managers, but I was recommended using 1password and their CLI client to manage my passwords.

Code Formatter

## Code Formatter
function format-file() {
  export FILENAME="$(basename $@)";
  export EXTENSION="${FILENAME##*.}";

  if [ $EXTENSION = 'py' ]
  then
    yapf --in-place $@;
    return 0;
  fi

  if [ $EXTENSION = 'php' ]
  then
    php-cs-fixer fix $@;
    rm .php_cs.cache;
    return 0;
  fi

  if [ $EXTENSION = 'sql' ]
  then
    npx sql-formatter-cli --file $@ --out $@;
    return 0;
  fi

  npx prettier --write --single-quote $@;

  unset FILENAME; unset EXTENSION;
}

Using the same code formatter, but added something to handle sql files now!

Spell Check

## Spellcheck
function spellcheck-file() {
  npx spellchecker-cli --files $@;
}

Handy spellchecker utility through npx is always useful.

What the Commit

## What the Commit
function wtf() { git commit -am "$(curl http://whatthecommit.com/index.txt)"; }

For when I don't know what to type in for a commit message.

Cheat Sheet

Cheat Sheet
## Cheat
function cheat(){ curl https://cheat.sh/"$@"; }

When I don't remember how to use a certain utility, this cheatsheet API is always handy.

Git

## Commit Count
function commit-count() {
  if [ -n "$1" ]
  then
    git rev-list --count $1;
  else
    echo "commit-count <branch-name>";
  fi
}

Not as useful, but interesting. I use this to get the number of commits on my current working branch.

Document Generation

## Generate Markdown
function generate-doc() { 
  cp -rf . /tmp;
  if [ -n "$2" ]
  then
    pandoc -s $1 -c $2 -o "/tmp/$1.html";
  else
    pandoc -s $1 -o "/tmp/$1.html"; 
  fi
  open "/tmp/$1.html";
}

## Generate Slide
function generate-slide() {
  # https://revealjs.com/config/
  pandoc -t revealjs \
    -V controls="false" \
    -V progress="false" \
    -V navigationMode="linear" \
    -V transition="none" \
    -s $1 -o "/tmp/$1.html";
  cp -rf . /tmp;
  open "/tmp/$1.html";
}

function mmdc() {
  npx @mermaid-js/mermaid-cli $@;
}

Continuing to leverage pandoc whenever I need to create some quick slides or a document.

Homebrew Install

## Homebrew Install Script
function install-homebrew() { /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"; }

Handy script to install homebrew on a new machine.

Vundle Install

## Vundle Install Script
function install-vundle() {
  git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim;
  sudo gem install vundle-cli;
  if ! grep -Fxq 'set rtp+=~/.vim/bundle/Vundle.vim' ~/.vimrc
  then
    echo "\nset nocompatible\nfiletype off\nset rtp+=~/.vim/bundle/Vundle.vim\ncall vundle#begin()\n\nPlugin 'VundleVim/Vundle.vim'\n\ncall vundle#end()\nfiletype plugin indent on" >> ~/.vimrc;
  fi
}

I use vundle to manage my vim packages. But this handy cli makes installing/removing those packages much easier.

Docker

function clear-docker() {
  docker system prune -a -f --volumes
}

function kill-docker() {
  killall Docker && open /Applications/Docker.app;
}

For when I just want to wipe docker of all images, containers, and volumes.

Also something to help restart the docker daemon.

Google Cloud Platform

function gcloud-adc() {
  gcloud auth login --update-adc
}

function use-gcloud-project () {
  gcloud config set project "$1";
}

function impersonate() {
    if [ -z "$1" ]; then
        echo "Must provide a service account to impersonate."
        return 1
    fi
    gcloud config set auth/impersonate_service_account "$1"
}

function unimpersonate() {
    gcloud config unset auth/impersonate_service_account
}

function connect() {
    # Set the context
    CONTEXT=${1}

    export PGUSER=$(vault kv get -field=username secrets/${CONTEXT}/postgres-terraform)
    export PGPASSWORD=$(vault kv get -field=password "secrets/${CONTEXT}/postgres-terraform")
    psql -h 127.0.0.1 -p 54320  -d "${CONTEXT}"
}

Logging into Google ADC
Setting GCP project to work with
Service account impersonation
Connect to cloud sql

Vault

function vs() {
    # Verify inputs
    environment="$1"
    if [ "$environment" != "common" ] && [ "$environment" != "staging" ] && [ "$environment" != "production" ]; then
        echo "\"$environment\" is not a valid environment."
        return 1
    fi

    # Setup
    [ ! -d ~/.vault-tokens ] && mkdir ~/.vault-tokens

    # Move the current environment's token to the correct location
    if [ -f ~/.vault-tokens/current-environment ] && [ -f ~/.vault-token ]; then
        current="$(cat ~/.vault-tokens/current-environment)"
        cp ~/.vault-token ~/.vault-tokens/${current}
    fi

    # Set the new current environment
    echo "${environment}" > ~/.vault-tokens/current-environment

    # Set the correct vault address
    if [ "$environment" = "common" ]; then
        export VAULT_ADDR="https://vault.stallions.dev"
    else
        export VAULT_ADDR="https://vault.${environment}.stallions.dev"
    fi

    # Get the token from the current environment if it exist
    if [ -f ~/.vault-tokens/${environment} ] ; then
        cp ~/.vault-tokens/${environment} ~/.vault-token
    fi

    # Prompt login if the token is not valid
    if ! vault token lookup > /dev/null; then
        vault login --method oidc
    fi
}

This script helps me switch vault contexts for pulling secrets in different environments like staging and production.

Generate ID

function uuid() {
    uuidgen | tr '[:upper:]' '[:lower:]'
}

function vin() {
  echo "$(curl -sS https://randomvin.com/getvin.php\?type\=fake | tr -d '[:space:]')"
}

I use this to create new uuids and new vin numbers.

What's in my RC 2021

Henry Unite — Sat, 29 May 2021 19:13:30 +0000

Welcome to a tour of my .zshrc file! I thought it would be fun to take a dive into the different tools I use to elevate my developer game.

If you want to see my whole config, I keep all my setup files on GitHub: https://github.com/unitehenry/config

Tools I Use

Before we dive into my configuration, here are the tools I use that help me speed up my tasks as a developer:

fzf | Fuzzy File Finder

pandoc | Pandoc Document Converter

brew | MacOS Package Manager

The Variables

# EDITOR
export EDITOR="vi";
export VISUAL="vi";

# iCloud Directory
export DOCS="/Users/henryunite/Library/Mobile Documents/com~apple~CloudDocs";

# Work Directory
export WORK="/Users/henryunite/Projects/bicycletransit";

Pretty straightforward, but these are what I use to:

Default editing to be opened in vim
Reference my iCloud directory which I use to keep all my personal files
A quick reference to where I keep all my work repositories, notes, projects

Credentials

# Credentials Fetcher
function username() {
  export PASS_BACK_PATH=$(pwd);
  cd $DOCS/passwords;
  echo $(decrypt-file $(fzf) | grep "Username:" | cut -d ":" -f2) | pbcopy;
  cd $PASS_BACK_PATH && unset PASS_BACK_PATH;
}

function password() {
  export PASS_BACK_PATH=$(pwd);
  cd $DOCS/passwords;
  echo $(decrypt-file $(fzf) | grep "Password:" | cut -d ":" -f2) | pbcopy;
  cd $PASS_BACK_PATH && unset PASS_BACK_PATH;
}

There are so many chrome extensions, keychains, any ways to access your passwords. I personally encrypt my passwords in my cloud storage so I can access them by utilizing a aes-256-cbc decryption tool.

File Formatting

## Code Formatter
function format-file() {
  export FILENAME="$(basename $@)";
  export EXTENSION="${FILENAME##*.}";

  if [ $EXTENSION = 'py' ]
  then
    yapf --in-place $@;
    return 0;
  fi

  if [ $EXTENSION = 'php' ]
  then
    php-cs-fixer fix $@;
    rm .php_cs.cache;
    return 0;
  fi

  npx prettier --write --single-quote $@;

  unset FILENAME; unset EXTENSION;
}

File formatter that handles the languages I use on a day-to-day basis. It gets the job done for most file types including JSON, YAML, and even markdown.

Spell Check

## Spellcheck
function spellcheck-file() {
  npx spellchecker-cli --files $@;
}

When you're writing as much markdown documentation as me, you'll want an easy way to spell check your files.

What the Commit

## What the Commit
function wtf() { git commit -am "$(curl http://whatthecommit.com/index.txt)"; }

This is a gimmick, but if you ever just want to commit file changes and you just don't know what to say in the commit message, what the commit is just a fun resource to get whacky commit messages.

Cheat Sheet

## Cheat
function cheat(){ curl https://cheat.sh/"$@"; }

There are so many times I use a CLI tool and can't remember simple commands and options that it takes to perform certain tasks. Check out cheat.sh if you're looking for an easy way to reference different CLI tools.

Document Generation

## Generate Markdown
function generate-doc() { 
  cp -rf . /tmp;
  if [ -n "$2" ]
  then
    pandoc -s $1 -c $2 -o "/tmp/$1.html";
  else
    pandoc -s $1 -o "/tmp/$1.html"; 
  fi
  open "/tmp/$1.html";
}

## Generate Slide
function generate-slide() {
  # https://revealjs.com/config/
  pandoc -t revealjs \
    -V progress="false" \
    -V navigationMode="linear" \
    -V transition="none" \
    -s $1 -o "/tmp/$1.html";
  cp -rf . /tmp;
  open "/tmp/$1.html";
}

I use markdown to write documentation all the time, but if I need to send a coworker a document or present a slide with content that is written in markdown, I'll use pandoc to generate these intermediary file formats.

It's really nice to leverage CSS when I want to make my documents look nice or need a clean way to look at markdown files.

File Encryption

## Encrypt : aes-256-cbc
function encrypt-file() {
  if [ -z $@ ]
  then
    echo -n "Enter Encrypt Phrase: "; read -s ENCRYPTINPUT; echo "\n";
    echo $ENCRYPTINPUT | openssl enc -aes-256-cbc;
    unset ENCRYPTINPUT;
  else
    openssl enc -aes-256-cbc -in $@;
  fi
}

## Decrypt : aes-256-cbc
function decrypt-file() {
  if [ -z $@ ]
  then
    openssl enc -d -aes-256-cbc;
  else
    openssl enc -aes-256-cbc -d -in $@;
  fi
}

It's nice to have a quick way to encrypt and decrypt files with sensitive information.

Homebrew

## Homebrew Install Script
function install-homebrew() { /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"; }

This is just in my configuration in the event that I just want to install homebrew without copying and pasting the install script from the website.

If I have a new Mac I need to setup, it'll make the setup so much easier.

Version Managers

source ~/.nvmrc;
source ~/.rvmrc;

I've been using nvm and rvm to manage my node and ruby installations. They append rc scripts to load into your base rc file which I extract into their own designated files and load them in at the end.

Building my Portfolio Website with Next.js

Henry Unite — Fri, 20 Nov 2020 16:43:21 +0000

It's time for a new portfolio website! This time I decided to use Next.js to generate my static site with these principles in mind:

Take a README markdown file of my resume and convert it to a static homepage
Use semantic HTML with global styles for easy customization
Adding next pages will append links to the homepage

README Conversion

The core concepts of this project are built on the foundation of these methods:

Bootstrap a create-next-app
Use the getStaticProps to generate HTML from the README with showdown
Use dangerouslySetInnerHTML for SEO optimization

Getting Started with Next

We can start bootstrapping our application using the create-next-app npm script.

$ npx create-next-app

Generating HTML from README

Using getStaticProps and showdown, we can generate some HTML to use for our site generation.

export async function getStaticProps() {
  const path = require('path');
  const fs = require('fs');
  const { Converter } = require('showdown');
  const converter = new Converter();

  function parseREADME() {
    return new Promise((res) => {
      fs.readFile(path.join(process.cwd(), 'README.md'), (err, data) => {
        const readme = data.toString();
        const html = converter.makeHtml(pReadme);
        res(html);
      });
    });
  }

  const html = await parseREADME();

  return {
    props: { html },
  };
}

Serving HTML optimized for SEO

The key to using dangerouslySetInnerHTML with next.js is that we want to ensure the content of our HTML is served as static content for SEO.

return (
    <div>
      <Head>
        <title> {title} </title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main dangerouslySetInnerHTML={{ __html: html }} />

      <footer> 

      </footer>
    </div>
  );

Semantic Styling

After your content is being injected in the page, you should be staring at a wall of black and white text like this:

Using the global.css file provided by next, we can globally style semantic elements like this:

body {
     /* CSS Styles */
}

main {
     /* CSS Styles */
}

main hr {
     /* CSS Styles */
}

main strong {
     /* CSS Styles */
}

main p {
     /* CSS Styles */
}

main h1, main h2, main h3, main h4, main h5, main h6 {
     /* CSS Styles */
}

main ul, main ol {
     /* CSS Styles */
}

main li {
     /* CSS Styles */
}

main a {
     /* CSS Styles */
}

Page Extensibility

One of the design concepts I wanted to implement was the idea that you could add a next page in the pages directory and a navigation link be appended to the homepage.

Taking advantage of the the getStaticProps function, we can use node to read the directory, exclude unrelated files, and generate links in our homepage.

// CONFIG['pageExcludes'] = [ 'app', 'api', 'index']

  function getPages() {
    return new Promise((res) => {
      fs.readdir(path.join(process.cwd(), 'pages'), (err, data) => {
        const pageFiles = data.filter((f) => {
          return !CONFIG['pageExcludes'].filter((ex) => f.includes(ex)).pop();
        });

        res(pageFiles.map((p) => p.replace('.js', '')));
      });
    });
  }

  const html = await parseREADME();
  const pages = await getPages();

  return {
    props: { html, pages },
  };

      <footer> 
        <div id="pages">
          { pages.map((p) => p ? <a key={p} href={`/${p}`}>{ p }</a> : null }
        </div>
      </footer>

Gathering my Blog Post Data

With this feature, I can now create unique CMS pages to extend my static site. Let's create a blog page to fetch my DEV posts.

I'll be using the axios library to make a request to the DEV api, gather my posts data, and send those props to the page for static site generation. Again, taking advantage of the getStaticProps hook.

// pages/blog.js

export async function getStaticProps() {
  const axios = require('axios');

  function getArticle() {
    return new Promise(async (res) => {
      const req = await axios({
        method: 'GET',
        url: 'https://dev.to/api/articles?username=unitehenry'
      });

      if(req['data']) {
        try {
          const data = req['data'];
          res(data.map((article) => {
            return {
              title: article['title'], 
              description: article['description'], 
              url: article['url'],
              date: article['created_at'],
              image: article['cover_image']
            };
          })); 
        } catch(e) {
          res([]);
        }
      } else {
        res([]);
      }
    }); 

  }

  const articles = await getArticle();

  return {
    props: { articles }
  }
}

        <section>

        { (articles.length === 0) && <p>No Blog Posts</p>}

        {
          articles.map(({ title, description, date, url, image }) => {
            return (
              <article key={title} className={style['blog-article']}>
                { image ? <img src={image} /> : null}
                <div className={style['blog-article-content']}>
                  <h2>{ title }</h2>
                  <p>{ description }</p>
                  <a title="Read Article" className={style['blog-button']} href={url} target="_blank">Read Article</a>
                </div>
              </article>
            );
          })
        }

        </section>

Bootstrapping of my Repository

If you want to see the source code or fork this repo and generate your own static site, I've created a GitHub repository and documented in detail how to customize the code for your own static portfolio site.

GitHub Trick

As a side note, there is a GitHub trick that will take your README and display it on your GitHub profile as well.

Striven Editor

Henry Unite — Sun, 27 Oct 2019 19:12:33 +0000

Introduction

At Striven, we were looking for potential editors that would be suitable for our client side customer portal revamp. In the past, we have always used the Kendo UI editor. We were dynamically loading these components into our pages, but even then the editor was shipping over 1MB of scripts over the network.

One of the key features of this portal was its lightweight optimization. When you look at the Kendo UI minified script over the network, you'll notice a whoping 1.3MB are being shipped to the browser. With the editor component alone making up nearly 1MB of that script.

An editor was a fundamental component of this customer portal, so we wanted to provide a more optimal solution to our users. I was tasked with the research of finding a lighter editor with just as much, or as much as we needed, functionality.

These were some notable candidates:

Quill

Quill would be great; its open source, inline, and used by top companies. My experience when trying to integrate with the editor invloved the developer push for the adoption of the editor's delta api.

My advice to anyone trying to include this control in their project is that you'll have a much easier time designing your system with the concept of delta in mind than trying to bring the concept of the quill editor and its delta api into an existing system.

Froala and TinyMCE

So these editors are obviously top tier editors, but usually have some licensing and enterprise support costs that we weren't ready to explore just yet. I never tried to demo or pitch it to my team, but I still think these were candidates worth considering when all else failed.

Undertaking a Custom Built Editor

After working on mentions and exploring all these different editor solutions, I formed an understanding of the underlying concepts that went into the inner workings of a WYSIWYG editor. My manager was convinced that I was capable of taking on the project of building a tailored editor for Striven, as it would be worth the time and investment to work on this component in house.

We decided to work on the component in phases.

What did we need out of the initial phase of the control?

Simple Editing Functions (bold, italic, underline, unordered lists)
File Attachments and Link Insertions
Mention Support

With these functionalities in pipeline, editor phase one development was underway. But I decided that I wasn't going to do it alone.

The Benefits of Open Source

With permission from my manager, I decided that open sourcing this control would have the following benefits:

Faster development
Development guidance from the community on building an editor
Product brand awareness
Component development independent from the internal system

The idea was a success*, as I could gain input from the open source community and work on the component without having to rely on the internal structure of our client side ecosystem. I also learned a lot as a project maintainer and was really proud of the overall traction that the editor had received in early development.

*Even though 13 contributors isn't a terribly significant amount, I still take pride in it 😅

What I Learned From This Project

I've been actively maintaining this code base for about a year now and if I could given some wisdom to the young software engineer that does it next, this would be the advice I would give:

Avoid document.execCommand

It's old, buggy, and just a pain of an API to use
It's one of those Internet Explorer that still lives to see modern web development

Start with an engine or library

I've explored ways I would've redesigned this component on the trix engine
I've considered how nice it would've been to use contenteditable libraries

Understand the Range API

Although I don't see this system going anywhere in future iterations of the browser, I still believe it to be mediocre
Learning how to use the Range API and window.getSelection() will make your life much easier * Try exploring libraries like rangy

Final Thoughts

When I reflect on the development of this project, my goal was always to accomplish two things:

Allow developers to contribute, collaborate, and learn open source with a smaller scale project
It's an editor for Striven, not for anything else (but feel free to use it)

It's satisfying to have the ability of opening an issue and letting someone contribute to this project. I also enjoy the ability to work on this component in an independent environment from Striven. It lets me flex my ES6 muscles and have all the luxuries of hot reloading, webpack loaders, and working in Vue.

There are definitely things that I would've done differently, but at the end of the day it does what Striven needs.