---
title: 13 command line tools to up your front-end game
description: >-
  Use these tools to become faster & more effective as a front-end developer!
  Also, it makes you look like you live inside a movie
language: English
url: 'https://voorhoe.de/en/blog/13-command-line-tools-to-up-your-front-end-game/'
---

Blog

# 13 command line tools to up your Front-end Game

By [Anand](/en/team/anand.md)

10 April 2018

* [TLDR](#tldr)
* [Z](#z)
* [HTTPie](#httpie)
* [jq](#jq)
* [fzf](#fzf)
* [The Silver Searcher](#the-silver-searcher)
* [trash-cli](#trash-cli)
* [npx](#npx)
* [JSON Server](#json-server)
* [ngrok](#ngrok)
* [git-standup](#git-standup)
* [caffeinate](#caffeinate)
* [exa](#exa)

Here’s your chance to go from Zero Cool to Crash Override

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.

![Animation of old fashioned computer screen with green letters on black background](https://www.datocms-assets.com/2850/1523365764-cli.gif)

Hacking in progress...

[Hyper](https://hyper.is/), [Homebrew](https://brew.sh/) and [npm](https://www.npmjs.com/get-npm) are used throughout this article:

* [Hyper](https://hyper.is/) as the terminal since that is a much more feature rich terminal than Mac OS own native terminal. You can also use [iTerm2](http://iterm2.com/) or your OS native terminal.
* [Homebrew](https://brew.sh/) to easily install packages on your Mac.

## TLDR

**Simplified and community-driven man pages**

📝 [Source](http://tldr.sh/)\
👩‍💻 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**:

```
$ tldr cp
```

Outputs:

```
cp

  Copy files and folders.

  - Copy a file to another location:
    cp path/to/file.ext path/to/copy.ext

  - Copy a file into another folder, keeping the filename:
    cp path/to/file.ext path/to/target/parent/folder

  - Copy a folder recursively to another location:
    cp -r path/to/folder path/to/copy

  - Copy a folder recursively into another folder, keeping the folder name:
    cp -r path/to/folder path/to/target/parent/folder

  - Copy a folder recursively, in verbose mode (shows files as they are copied):
    cp -vr path/to/folder path/to/copy

  - Copy the contents of a folder into another folder:
    cp -r path/to/source/folder/* path/to/target/folder

  - Copy text files to another location, in interactive mode (prompts user before overwriting):
    cp -i *.txt path/to/source/
```

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

## Z

**Jump to your most used directories**

📝 [Source](https://github.com/rupa/z)\
👩‍💻 Installation:

* `$ brew install z`
* Add `. /usr/local/etc/profile.d/z.sh` to your `.bash_profile`for 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:

```
$ z
```

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

```
$ z projecta
```

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

```
$ z projecta src
```

## HTTPie

**A CLI, cURL-like tool for humans**

📝 [Source](https://httpie.org/)\
👩‍💻 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.

```
$ http http://httpbin.org/headers
```

Outputs:

```
HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 175
Content-Type: application/json
Date: Mon, 09 Apr 2018 08:54:00 GMT
Server: meinheld/0.6.1
Via: 1.1 vegur
X-Powered-By: Flask
X-Processed-Time: 0

{
    "headers": {
        "Accept": "*/*",
        "Accept-Encoding": "gzip, deflate",
        "Connection": "close",
        "Host": "httpbin.org",
        "User-Agent": "HTTPie/0.9.9"
    }
}
```

This simple example doesn't do any justice of what HTTPie can do. [Checkout the docs](https://httpie.org/doc) for a comprehensive writeup of all the possibilities.

## jq

**JSON processor**

📝 [Source](https://stedolan.github.io/jq/)\
👩‍💻 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](https://jsonplaceholder.typicode.com/users):

```
$ http https://jsonplaceholder.typicode.com/users | jq '.'
```

To get the first user:

```
$ http https://jsonplaceholder.typicode.com/users | jq '.[0]'
```

Outputs:

```
{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}
```

To get the latitude coordinate:

```
$ http https://jsonplaceholder.typicode.com/users | jq '.[0] .address.geo.lat'
```

Outputs:

```
"-37.3159"
```

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

```
$ http https://jsonplaceholder.typicode.com/users | jq '.[0] | {username: .username, email: .email, company: .company.name}'
```

Outputs:

```
{
  "username": "Bret",
  "email": "Sincere@april.biz",
  "company": "Romaguera-Crona"
}
```

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](https://github.com/simeji/jid) has similar functionality as jq, but you can use it interactively at the command line. Another similar tool is [Gron](https://github.com/tomnomnom/gron), written in Go.

## fzf

**A command line fuzzy finder**

📝 [Source](https://github.com/junegunn/fzf)\
👩‍💻 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:

```
$ fzf
```

Outputs:

```
 549/549
> Dockerfile
  app.config.js
  dato.config.js
  docker/Mongo.Dockerfile
  docker/Proxy.Dockerfile
  docker/nginx.conf
  docker-compose.yml
  docs/deployment.md
  docs/environment.md
  docs/front-end-setup.md
  docs/front-end-tooling.md
  docs/i18n.md
  ...
```

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:

```
> _base - .svg
```

Outputs:

```
5/549
sites/_base/public/images/mb-net.svg
sites/_base/public/icons/check-circle.svg
sites/_base/public/icons/shopping-bag.svg
sites/_base/public/icons/app-store-badge.svg
sites/_base/public/icons/google-play-badge.svg
```

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

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

```
$ git log | fzf -q "header"
```

`fzf` needs an application that does the traversing of the file system. By default it uses the `find` command. The [fd](https://github.com/sharkdp/fd) command is a fast alternative and has several advantages over `find`, including ignoring patterns from your `.gitignore`. To use `fd`:

```
$ brew install fd
$ export FZF_DEFAULT_COMMAND='fd --type f'
```

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:

```
export FZF_DEFAULT_OPTS='--reverse'
```

## The Silver Searcher

**Lightning fast full text search**

📝 [Source](https://github.com/ggreer/the_silver_searcher)\
👩‍💻 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:

```
$ ag '</form>'
```

Outputs:

```
sites/_base/components/product-filters/product-filters.js
61:   </form>

sites/_base/components/product-lens-tier/product-lens-tier.js
63:   </form>

sites/_base/components/search-form/search-form.js
40:  </form>
```

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

```
$ ag '</form>' -G search
```

Outputs:

```
sites/_base/components/search-form/search-form.js
40:  </form>
```

## trash-cli

**Move files and folders to the trash**

📝 [Source](https://github.com/sindresorhus/trash-cli)\
👩‍💻 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](https://docstore.mik.ua/orelly/unix3/upt/ch14_03.htm).

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

```
$ trash build
```

## npx

**Execute npm package**

📝 [Source](https://www.npmjs.com/package/npx)\
👩‍💻 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:

```
$ npx serve
```

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`):

```
$ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32
```

## JSON Server

**Run a mock API from the command line**

📝 [Source](https://github.com/typicode/json-server)\
👩‍💻 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:

```
{
  "posts": [
    { "id": 1, "title": "command line tools article", "author": "john doe" }
  ],
  "comments": [
    { "id": 1, "body": "nice", "postId": 1 }
  ],
  "profile": { "name": "john doe" }
}
```

Start JSON Server:

```
$ npx json-server --watch db.json
```

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

```
{ "id": 1, "title": "command line tools article", "author": "john doe" }
```

## ngrok

**SSH tunnel to your development machine**

📝 [Source](https://ngrok.com/)\
👩‍💻 Installation: `brew cask install ngrok`, `npm install -g ngrok`or 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:

```
$ ngrok http 5000
```

Outputs:

```
Session Status                online                                                                           
Session Expires               7 hours, 56 minutes                                                              
Version                       2.2.8                                                                            
Region                        United States (us)                                                               
Web Interface                 http://127.0.0.1:4040                                                            
Forwarding                    http://0a629ef8.ngrok.io -> localhost:5000                                       
Forwarding                    https://0a629ef8.ngrok.io -> localhost:5000
```

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.

## git-standup

**Review yesterday’s commits**

📝 [Source](https://github.com/kamranahmedse/git-standup)\
👩‍💻 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:

```
$ git standup
```

Outputs:

```
ea2483c - fix(cookie-notification): added site container (10 days ago) <John Doe>
8a1dc1e - (fix/full-width-background) refactor: moved site container into the image gallery component to fix issues (11 days ago) <John Doe>
2f64d57 - (origin/fix/full-width-background) refactor: added site container to the breadcrumb on the product detail page (11 days ago) <John Doe>
```

To check what you did 3 days ago:

```
$ git standup -d 3
```

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.

## caffeinate

**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:

```
$ caffeinate
```

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

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

```
$ caffeinate -u -t 3600
```

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

```
$ caffeinate -s cp src/largefile destination/largefile
```

## exa

**LS, but with colors**

📝 [Source](https://github.com/ogham/exa)\
👩‍💻 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...

![exa command line](https://www.datocms-assets.com/2850/1523356161-exa.png)

exa.png

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

```
alias l="exa --all --long --color=always --group-directories-first"
```

That’s it! If you like this and have tools to share with us, why not [send us a tweet](https://twitter.com/intent/tweet?text=.@devoorhoede%20Awesome%20blog%20post!%20Here%E2%80%99s%20my%20%23cli%20tip:%20) :)

[← All blog posts](/en/blog.md)

## Also in love with the web?

For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?

[Join our team](/en/jobs.md)

[Return to top](#top)