Developer Experience with Command Line Interface(CLI) Tools

I think my job is about writing code, but that’s not true. My job is actually typing and making each keystroke count. Trying to save keystrokes every time by using keyboard shortcuts or tools that make the work faster and better is a niche I find very and worthwhile researching about.

My aim with this article is to help you save keystrokes by adopting better tooling and also improving your productivity and developer experience with some command-line interface CLI tools. All because I care to help the developer save more time by automating some repetitive tasks in their everyday tasks.

Embracing the new wave of CLI tools will give you great improvement in the amount of time you spend clicking around to make things happen.

Prerequisites

Things you need to know to understand this article includes:

• Familiarity with terminals from the Powershell, CMD and gitbash for windows operating system to Bash, FISH, zsh, iterm on Mac and Linux respectively.
• Access to CLI environments.

Scope

I will show you how I use CLI tools to improve my developer experience (DX) when creating a new GitHub repository, to uploading images to Cloudinary, to reducing the size of image files with tinify API, to doing all my netlify related tasks.

At the end of this post you will be able:

• to save more time by automating repeated tasks.
• making life easy for you by avoiding long and boring styles of handling repetitive tasks.
• bring more joy to your workflow as you do those repetitive tasks you go through every now and then.

Introduction

CLI is a new wave of change considering the amount of tools that get released every day in the programming ecosystem.

Companies creating their own CLI manage the interaction with their service is gaining adoption lately. GitHub created hub and then gh. Netlify created netlify-CLI(ntl), Heroku has its own CLI’s for managing its services. The node package manager has tools like npm, npx, yarn, pnpm to get the best out of their services. There is cloudinary CLI as well, which you can use to interact with Cloudinary related services.

There is a whole range of starter files generators that runs on the CLI - create-react-app, create-keystone-app, vue-cli, vitejs starter and a lot more.

Improvement In Service Delivery

One thing that is common with all the tools I’ve listed above is that they did not start their business of service delivery with just CLI alone. They have built successful businesses on the web that many developers enjoy a lot. To reach more people and make life easy for them, they created these CLI tools which they believe will improve the Developer Experience (DX) of people using their service. Let us examine some of these tools one after the other.

gh - GitHub on Steriods

I wrote two articles about hub and how it provides an extremely fast way for me to access GitHub from my terminal. Check it out here. hub browse command saves me about 2 to 5 seconds of navigating to a browser and inputting a GitHub URL and waiting for that URL to load. What does hub browse command do? It opens the remote URL of the project you’re in the terminal. For more on hub commands check out my post.

Hub brings GitHub to your terminal by extending git. They call it an extension to the git commands you run. In the real sense hub was more of extending git giving you access to do more git and GitHub commands.

After a while, a tool was announced by the GitHub team which they called GitHub CLI. Two of its selling preposition includes taking GitHub to the command line and 👋 goodbye context switching, hello 👋 terminal. Let us imagine a scenario together, John needs to create a GitHub repository for a new project he plans to share with his Manager at work the next day. He initializes a git repository and goes off to the browser to create a repository and then comes back to the terminal where he has been working to add the GitHub URL of the repository to the local git history as git remote. Now he can push the code to GitHub. How many minutes do you think John used to get a sharable GitHub URL containing his code? When at least 5 minutes I assume.

Going back to the beginning of John’s story, instead of the context switching to a browser to create a repository, you can do all that and more with just a CLI command called gh. This command gives you access to all things GitHub including access to gh api itself. All the API endpoints both the rest version 4 and the graphql API. That is a lot of power yet in little time with great developer experience. The gh command is among my top 10 most used CLI commands. Let me share some of the gh command i cannot do without.

# install Github CLI today, right away.
# https://cli.github.com/ and start saving time.

gh repo create user/repo

gh gist create

gh git edit

gh pr list

ntl - Netlify From The Terminal

What is Netlify? It is a static site hosting powerhouse with lots of sweetness. A CI/CD from access to host directly from your GitHub account. Any push or pull request will rebuild your site instantly. They believe the future will be JAMstack on the edge with serverless functions to list a few. So imagine a CLI to access netlify services. I can go to my admin dashboard with just a command. I can even host a static or JAMstack website directly from my terminal using the netlify-cli or ntl for short.

Here are some of the command line I run with netlify-cli.

ntl open:admin

ntl open:sites

ntl dev

ntl sites

ntl list

ntl link

cld - Cloudinary On The Terminal

A need to upload images happens to us all in this field, this CLI from Cloudinary is an important tool in the box of any developers with the ease of uploading images. You can perform Admin operations, the CLI gives me access to helper tools that make it possible to use the Cloudinary offering features like transformations and optimizations.

I need to upload an image and get a URL copied to my clipboard.

cld uploader upload bejamas.png folder=personal use_filename=true | jq '.url' | pbcopy

Showing few commands on how to set up cld on your computer.

pip3 install cloudinary-cli
# requires python to be installed

# set up your config with cloudinary secrets
# windows
set CLOUDINARY_URL=cloudinary://123456789012345:abcdefghijklmnopqrstuvwxyzA@cloud_name

# mac or linux
export CLOUDINARY_URL=cloudinary://123456789012345:abcdefghijklmnopqrstuvwxyzA@cloud_name

cld config #show your config


cld search --help #search api
cld uploader #upload api
cld admin #admin operations
cld --help #show a usage helper
cld utils #show utils

In overall, Cloudinary CLI will offer a lot of developer experience benefit to anyone who loves Cloudinary services.

Nodejs Package Managers

Node Package Managers are tools used to manage different Nodejs versions installed on a local computer. I use a variant named nvm, nodejs version manager helps me to install and manage several versions of nodejs.

For installation of nvm on your computer check this link.

$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6

The common use case I run into always is having globally installed packages that I need to carry along to a new version installed. The script below helps me to do this conveniently.

# allow me to carry over my global npm package after any change of version

nvm_use (){
  NODE_NEW=$1

  PREVIOUS_PACKAGES=$(npm ls -g --parseable --depth=0)

  nvm use ${NODE_NEW}

  ALL_PACKAGES=$(npm ls -g --depth=0)

  for PACKAGE in $(echo "$PREVIOUS_PACKAGES" | grep "/node_modules/[^npm]");
  do
          PACKAGE_NAME=${PACKAGE##*/}
          PACKAGE_IN_CURRENT_VERSION=$(echo "$ALL_PACKAGES" | grep $PACKAGE_NAME)
          if [ "$PACKAGE_IN_CURRENT_VERSION" = "" ]; then
                  npm i -g $PACKAGE_NAME
          fi
  done
}

zsh and git alias

zsh and git alias will make life easy for you as a developer because you can encapsulate recurring command line instructions you run repeatedly into shorter versions with an alias.

I choose to alias git with g because it saves me 2 keystrokes in the end. 2 keystrokes are saved from git aliasing with g multiplied by the number of times I run a git command on a daily basis. This type of Developer Experience doesn’t get talked about a lot of time but it helps you save time on repeated commands.

To alias git with g:

alias g='git'
alias ga='git add'
alias gaa='git add .'

Instead of git, I can type g and it will behave like I used git. For file and folder manipulations try this.

alias ~='cd ~'
alias .='cd ..'
alias ..='cd ../..'
alias ...='cd ../../..'
alias ....='cd ../../../..'
alias -- -='cd -'
alias ..l="cd ../ && ll"
alias cd..='cd ../'
alias ll="ls -1a"
alias la="ls -la"

zsh functions

We can take zsh alias further with functions. They abstract little processes in line with bash or zsh commands to callable functions.

This helps me abstract git add, git commit and git push. It was taken from one of the open-source works of Ahmad Awais called emoji-log.

# Git commit, Add all
function gcaz() {
    git add . && git commit -m "$*"
}
# NEW.
function gnew() {
    gcaz "📦 NEW: $@"
}

Searching Through Your Terminal History

Searching through your command line history will help you reach commands you have used before but cannot remember. It saves you the effort of googling. You may increase the history size to increase the number of commands that can be saved.

# history size
HISTSIZE=7000
HISTFILESIZE=14000

SAVEHIST=10000
setopt EXTENDED_HISTORY
HISTFILE=${ZDOTDIR:-$HOME}/.zsh_history
# share history across multiple zsh sessions
setopt SHARE_HISTORY
# append to history
setopt APPEND_HISTORY
# adds commands as they are typed, not at shell exit
setopt INC_APPEND_HISTORY
# do not store duplications
setopt HIST_IGNORE_DUPS

This function will return a list of frequently used cli commands.

# List the 10 most frequently used command
function historyTop () { history | awk '{print $2}' | sort | uniq -c | sort -rn | head -10 }

hg () {
    grep "$1" ~/.zsh_history
}
alias h='HISTTIMEFORMAT= history 10 | cut -c8-'

Learn How to Create CLI Apps

This deserves a worthy mention in terms of the tools creation process and automating workflow with command-line apps. You can become a command-line developer as well - I mean one who is focused on creating tools that people use on the command line. Check out Node Cli course by Ahmad Awais for learning. He created a tool to help automate the creation of CLI apps.

Conclusion

Improving Developer Experience with tools is becoming a fast domain, I just showed you some of the tools I use regularly to improve my dev experience and save time (saving keystrokes).

If you have some tools that you use regularly that has improved your developer experience kindly share them with me with comments or social media.th comments or social media.

Comments Should Load Here 😜

Written by Oluwasetemi Ojo Stephen {...OOS}, A FullStack Developer (Reactjs, Nodejs, Typescript), currently lives in Osogbo, Osun State Nigeria with my lovely and priceless Wife Temidayo .🎈
Say Hi to Him on Twitter.
You can search through my blog using custom tags• 🏷 .
Click here to read more about me. For RSS feed.🌍

• ← Mentorship Series: Kolade Will Not Just Give Up