🔥5 Command Line Tips and Tricks All Web Developers NEED to Know

In this post I will show you some commands and configurations that can help you make your life easier as web developer.

I always prefer to use the command line (CLI) before using any graphical user interface (GUI). I think as web developers we should have a good understanding of the command line because this will allow us to automate little tasks and save some time.

The command line might look a bit scary at first for some web developers but it’s an important skill to master, whether you’re a frontend or backend developer.

If you prefer to learn from videos like me check out this screencast:

Let’s get started.

Batch Resize Images

Sometimes you have a group of big images that require to be resized to be usable in a web site. For example a group icons or backgrounds. If you are not using any library or service to manipulate images on the application you usually just need to manually resize them with an image editor.

But instead of using an image editor you can do this from the command line and save some time.

Mac

Sips is a command line tool available on mac to manipulate images. I use it mostly to resize images but it can also crop and change the image format. Here are some examples:

Resize all the jpg files in the current dir to 800 pixels width:

-Z = preserve aspect ratio
800 = Width of the image
*.jpg = All the files with jpg extension

Create a 100 pixels width thumbnail:

We would need some BASH scripting to create 100 pixels width thumbnails for all the png files in the current dir, in this example we loop all the .png files and generate a thumbnail for each one:

${file%%.*} = This will get the string that is before the dot in the filename, so in other words that would be the name of the file without the extension. This will allow us to add the “-thumb” suffix to the name of the generated thumbnails.

Linux

If you are on Linux you can use the convert command which comes with the imagemagick package:

The usage is very similar to sips:

Aspect ratio will be preserved by default if you specify an exact size:

Note: This cases are mainly for static images but if you have an application where users can upload profile images for example, I would recommend using a service like Cloudinary that allows to generate thumbs on-the-fly and put them on the Cloud in a CDN.

SSH into Servers Faster

We often have to ssh into different servers, and this require you to remember IPs, users and ssh keys locations. But we can simplify this process so we don’t have to memorize or copy and paste commands all the time.

Aliases

When you ssh into a server (assuming you have an ssh key) you usually run a command like this:

In this example I’m using a Vagrant VM I created previously, I ssh into it using the “vagrant” user and a key found in ~/.ssh/vagrant-key-sf4app.pem, but instead of running that long command we could create an alias with a more easy to remember name, in this example I will call it “dev” :

Now if you want to ssh into the server you would just run:

Note: If you want this change to persist after a reboot you need to add it to your ~/.bash_profile file.

~/.ssh/config

But there’s another similar option, you could add this to your SSH config file (~/.ssh/config):

And then when you want to ssh into the server you should type this:

I personally prefer to use aliases because I can just type one word to ssh into a server, also I can use tab to autocomplete the name and I can easily copy and paste commands there when I need to add more servers.

Quickly Find Commands in History

There’s a shortcut I use all the time to find previous commands:

Ctrl + r

After you press Ctrl + r in your terminal, you should see a message like this:

Here you should type part of the command you previously run. For example, we previously run the “sips” command, so if we type “s” or “sip”, it should come up. If you press ctrl + r again it will find other commands containing “s” or “sip”. When you find the command you want to run you just have to hit enter or use the arrow keys to edit it before running it:

Reuse Last Item from Previous Command

It’s a very common case that we run a command and we want to use the last part of that command, for example after we create a dir or a file:

Instead of typing the whole path to the file again we can just do:

Here’s another example, you want to create a new file with the “touch” command and you want to open it with an editor, vim in this case:

Note: The “!” is usually called “bang”.

Check zip File without Unzipping It

Vim is a very powerful editor and you can even use it to open zip files, just type vi/vim and the name of the zip file in your terminal:

Once vim is open you can browse the files included in the zip file and even open them if you hit enter. If you open a file inside the zip file, type “:q” and hit enter to exit.

If you don’t know how to exit vim, you have to type “:q” and hit enter. But if you made a modification and you want to save it, type “:wq” and hit enter. If you made a modification and you want to discard it type “:q!” and hit enter.

I hope this tips and tricks were helpful if you have any you want to share leave your comment below.