13 command line tools to up your Front-end Game

We're going to use a set of command line tools to see how they can help a (front-end) developer. Most of the tools are cross-platform available and some of them are specific to MacOS.

Hyper, Homebrew and npm are used throughout this article:

• Hyper as the terminal since that is a much more feature rich terminal than Mac OS own native terminal. You can also use iTerm2 or your OS native terminal.
• Homebrew to easily install packages on your Mac.

Simplified and community-driven man pages

📝 Source
👩‍💻 Installation: brew install tldr (other clients also available)

Suppose you need to copy a folder recursively. You forgot the arguments and need some quick and simple examples. Using the man page of cp with $ man cp will give you a very comprehensive page without any examples. A search on the internet also takes some time. Using tldr:

Outputs:

You can use tldr with all of the tools below, for extra comprehension!

Jump to your most used directories

📝 Source
👩‍💻 Installation:

• $ brew install z
• Add . /usr/local/etc/profile.d/z.sh to your .bash_profilefor Bash and run source .bash_profile to reload all your settings in this file.
• Cd into some directories. Z will now track your used directories based on recency and frequency and gives each directory a ranking.

The most commonly used task in a terminal would probably be going to specific folders. Luckily with z you can go to a folder instantly. It tracks your most used directory and gives each a ranking. The more you visit a folder, the higher the ranking.

Show all the rankings of directories that z has tracked so far:

To go to the folder ~/Documents/examples/someProjectA/:

If you want to go to a /src folder in one of your projects you can do:

A CLI, cURL-like tool for humans

📝 Source
👩‍💻 Installation: $ brew install httpie (other clients available)

HTTPie is an HTTP client which goal is to make CLI interaction with web services as human-friendly as possible. It can be used or testing, debugging, and generally interacting with HTTP servers. It's so powerful that replacing cURL for HTTPie is an obvious choice.

Outputs:

This simple example doesn't do any justice of what HTTPie can do. Checkout the docs for a comprehensive writeup of all the possibilities.

JSON processor

📝 Source
👩‍💻 Installation: brew install jq (other clients available)

With jq you can slice, filter, map and transform structured data with ease.

We're going to use HTTPie to make a request to the JSON Placeholder API. The output from the http command will be send to the jq command with the pipe symbol (|). Here jq is used with the expression ., which takes the input and outputs it unchanged. This shows a list of 10 users:

To get the first user:

Outputs:

To get the latitude coordinate:

Outputs:

To get the username, email and company name in a custom object:

Outputs:

Check out these 2 tutorials about jq that go in further detail:

• https://robots.thoughtbot.com/jq-is-sed-for-json
• https://stedolan.github.io/jq/tutorial/

Note: Jid has similar functionality as jq, but you can use it interactively at the command line. Another similar tool is Gron, written in Go.

A command line fuzzy finder

📝 Source
👩‍💻 Installation: $ brew install fzf (other clients available)

fzf is a fast and powerful fuzzy finder. It's an interactive Unix filter for command-line that can be used with any list; files, command history, processes, hostnames, bookmarks, git commits, etc.

Search in current directory for directory names and files:

Outputs:

By default fzf shows the total number of files and below all the files sorted alphabetically. The > is the prompt.

We're going to search in a directory _base for all .svg files that use a dash:

Outputs:

Searching for > - .svg _base would return the same results.

Search in all git commits for the term "header":

fzf needs an application that does the traversing of the file system. By default it uses the find command. The fd command is a fast alternative and has several advantages over find, including ignoring patterns from your .gitignore. To use fd:

You can also save the export command to your .bash_profile and it will remember the setting.

By default, fzf search results show up at the top. You can reverse this as in the screenshots. Put in your .bash_profile to remember this option or execute it directly from the terminal:

Lightning fast full text search

📝 Source
👩‍💻 Installation: brew install the_silver_searcher

When you need a very quick text search, opening up your Code Editor can take too long. Using the find command is awful, if that's not your thing. Using the Silver Searcher is simple and extremely fast. The command name is ag, which is the chemical symbol for silver (Ag). It also respects the entries in your .gitignore.

Searching for the text '</form>' recursively in all directories:

Outputs:

Search for the text '' recursively in all directories where the filenames must match 'search':

Outputs:

Move files and folders to the trash

📝 Source
👩‍💻 Installation: npm install --global trash-cli

In contrast to rm, which permanently deletes files, trash moves all files and folders to the trash. If you’re interested about how rm works and the dangers it brings with it: read more about rm.

Remove the folder build and all the files and folders containing it and move it to the trash:

Execute npm package

📝 Source
👩‍💻 Installation: npx is bundled with npm so there's no need to install it globally

npx is very convenient for one off execution commands. Say you want to quickly fire up a local server in a directory. You could use the npm package serve and install it globally, or locally and execute from ./node_modules/.bin/serve. Sounds tedious.

npx removes all the hassle:

This will after a few moments serve up the current folder on localhost:5000.

With npx you can even execute a gist immediately (this will output yay gist):

Run a mock API from the command line

📝 Source
👩‍💻 Installation: npm install -g json-server or npx json-server

Sometimes you're writing frontend code that needs to consume data from an API which isn't ready yet. In this case you can mock your own API.

Create a db.json file:

Start JSON Server:

Now if you go to http://localhost:5000/posts/1, you'll get:

SSH tunnel to your development machine

📝 Source
👩‍💻 Installation: brew cask install ngrok, npm install -g ngrokor download from https://ngrok.com/download

ngrok allows you to create secure tunnels to localhost and make it available through a secure URL. There are lots of use cases (also see ngrok.com):

• Public URLs for sending previews to clients.
• Public URLs for demoing your own machine.
• Public URLs for testing on mobile devices.
• Public URLs for building webhook integrations.
• Public URLs for SSH access to your Raspberry Pi.
• Public URLs exposing your local web server.

Your local web server running on port 5000:

Outputs:

The development server at port 5000 is now available at http(s)://0a629ef8.ngrok.io, including a web interface. The amount of connections to your ngrok URL is limited, but there are paid tiers that open up a lot of possibilities.

Review yesterday’s commits

📝 Source
👩‍💻 Installation: brew install git-standup

When it's time for a standup and it's a bit of a blur what you did on your last working day, git-standup can save your day. To quickly generate an overview of what you did yesterday:

Outputs:

To check what you did 3 days ago:

Using the same command in a directory with multiple repositories will show you the commits of multiple projects. This will list all your commits since the last working day in all the repositories inside.

Never sleep

"Mac only"

On certain moments, you don't want your Mac to go to sleep. E.g. when you give a presentation or copy a large file:

This command will indefinitely be active, until you press CTRL+C.

To prevent your Mac from sleeping for one hour (3,600 seconds):

To prevent your Mac from sleeping until the copy command completes:

LS, but with colors

📝 Source
👩‍💻 Installation: brew install exa

exa is a small and fast alternative for ls. It uses colors to accentuate files & folders, but also file owner, group, permissions, size, date modified, etc...

If you find it a good alternative for ls, you can create an alias, e.g.:

That’s it! If you like this and have tools to share with us, why not send us a tweet :)