foobar.fun

Just another Web Engineer

CLI for Frontend Dev

I’m Frontend Developer, since jQuery was cool until JavaScript Renaissance era.

I use Terminal for every task I do. Creating project, compiling/transpiling assets, etc. Maybe you’ve used Grunt, Gulp, or Webpack. These tools is executed in command-line environment. It means, you can only using that tools via terminal.

So, you’ve familiar with CLI, right?

Okay, is it cool? You are using less mouse. All you have to do is typing. Not clicking any element, that’s so wasting time. Now, did you know what else we can do via terminal?

Basic Operation

You are familiar with finder, or nautilus, or Windows Explorer. You can use Spotlight to open Finder, or some shortcut like Win+E to open Explorer. You want to see what directories and files in this directory, how to see byte-size, or you want create file and directories, all you should do is right-click, choose New File/New Folder, then give it a name.

You have 3 steps on it.

Let’s compare with CLI. All you need to do is only:

$ mkdir <name_directory>

To create new directory. Or

$ touch <file_name>.<extension>

To create new file. Wanna create multiple sub-directory?

$ mkdir -p directory/sub/sub-directory/sub-again

Wanna see list of files and directories in current directory?

$ ls -l

Wanna see “byte-size” with human readable format?

$ ls -lh

That’s it. Copy something? Use cp <source> <target>. Rename file/directory? Use mv <source> <new_name>.

REST API Test

You are using Postman, or Insomnia, or Paw, you name it. These GUI tools is very powerful, until you realize how big these app size. Maybe you don’t care with app size, but I do.

Basically you are using that tool only for seeing what response from server in JSON, right? Maybe you’ve heard cURL, but for Frontend Developer like me, I prefer using Httpie.

Something cool with Httpie is, you have “syntax-highlighter”, very easy usage, and suitable for beginner like me.

Let’s take example we need to send GET request to https://jsonplaceholder.typicode.com/posts

$ http https://jsonplaceholder.typicode.com/posts

Httpie GET

Ah, very beautiful output! How about POST?

$ http https://jsonplaceholder.typicode.com/posts hello=world

Just add “some parameter”, httpie will recognize that is POST request. By default you are sending it with application/json, if you want form-url-encoded, you can add -f before URL.

$ http -f https://jsonplaceholder.typicode.com/posts hello=world

You can see all amazing things you can do with Httpie here

Optimizing Assets

If you are using any Build System (like Grunt, Gulp, or Module Bundler: Webpack), you can skip this.

If you use any GUI apps, you are welcome to continue.

There are 4 workflows to optimize our frontend assets:

  • Minify HTML
  • Minify CSS
  • Minify & Uglify JavaScript
  • Compress Image

I remember how easy to handle them using GUI apps like Prepros.io. At least, not for now. Now I prefer CLI tools to handle them.

You can get everything what prepros.io offers in CLI, but you should learn some new tools, and it takes time. If you interesting, you can learn about Gulp or Webpack, then you can enjoy all these features in everywhere. Even in your server. And yeah, you can do others task (like deploying or ehm, uploading your website) to server without leaving your terminal.

You don’t need FTP

FTP is bad for software development, seriously. It hard to tracks, maintenance, and takes more time. You should using version control, like Git. Not because it hype, but for the development sake, it very useful.

Let me show you how your workflow while “Coding in development”, than “Deploy it to production” with FTP:

  • Archive your directory (compress it with RAR/ZIP)
  • Upload to server via FTP (Your image assets, or even dependencies?)
  • Unzip it
  • Done

And this is your workflow while using Version Control:

  • Initialize git project
  • Add all directories to staging area
  • Commit it with some meaningful message
  • Push it to remote repository
  • Pull from remote repository to local repository in server (in case you don’t setting some CD)
  • Done

Yeah it takes so many steps, and you need to learn something new. But this is very worth.

How do you track some changes?

How do you “revert back” from new changes?

How waste your time uploading new content again and again?

Can you track changes for pixel?

With VCS (Version Control System, like Git), you:

  • Can track every changes in your code
  • You can easily back to previous version (hello, client!)
  • You only “upload” content that has change.
  • You can see (diff) changes in every content (file, directory, even images)

It takes time to learn something new, but once again, this is very worth. Learn how to use Git here

Your workflow was in CLI

Yep. You do npm install in your terminal. composer install, gem install, pip install all from terminal.

All you should to do is how to mastering that fit your workflow. You can learn basic usage like ls, rm, mv, cp, ln, mkdir, touch, and cat. You can reduce your touchbar usage with terminal.

How can I see image from terminal?

You mean like this?

I use iTerm2 (and you should too, it’s free & open source!) and use this little script called imgcat. You even can only use imgcat <image_file> (without pipe it like what I did above).

Missing any workflow what you can do in GUI but cannot do in Terminal? Comment below :)