DEV Community: Junaid Shaikh

Terminal commands I use as a frontend developer

Junaid Shaikh — Sun, 10 Mar 2024 07:13:35 +0000

Using a terminal can be a daunting task if you are just starting or don’t know the commands required to do the work at hand.

The good news is you don’t need to remember or learn every command out there in the wild before you start using a terminal ( You don’t need to be an expert ). I don’t use more than a dozen commands in my daily job. And once you get used to using the terminal it becomes a superpower.

In this article, we will talk about setting up the terminal, common terminal commands you need to know for daily work and some tips and tricks. Let’s get started.

Terminal Setup

Here is how my terminal looks at the moment.

Pretty simple. We use micro-service architecture, and I like to have a separate tab for each service for easy and quick access.

Every operating system comes up with a built-in terminal feature. macOS has a Terminal app while on Windows we have PowerShell.

I am using iTerm2 on my macOS. Other available options are Hyper and VS Code’s inbuilt terminal, which I sometimes use for quick tests. You can open a terminal in VS Code by using the keyboard shortcut CMD + J or CTRL + J on Windows, or View → Terminal.

We also need the shell language for the terminal to work. Terminal software runs the command line environment. It’s a way for the user to input the commands and see the output. Shell language executes the command we run on the command line.

macOS already ships with zsh shell language. If you are on Windows you need to do some extra work. Check out this tutorial: Setup terminal with ZSH on Windows. Another popular shell language is Bash

That’s the minimum terminal setup. You can modify the look and add plugins such as autocompletion to your terminal by installing ohmyzsh and using themes such as powerlevel10k. I am already using them.

Terminal Commands

Before we look at commands, we first need to understand the syntax of the commands. Every command takes some input and produces output.

Also, every command comes with some default behaviour. This default behaviour can be tweaked in a pre-defined way using options ( also called as flags ). Multiple options can be combined or can be used separately. This makes it very powerful. So, the general structure of every command goes as follows, where options and input are sometimes optional.

command [options] [input]

pwd

pwd stands for “Print Working Directory”. It’s a way of knowing where we currently are in the file system.

If you are not sure what the current path of the directory you are in the file system pwd can help locate the current path.

When we open a terminal, it lands us in the home directory of the user. On my machine, it’s located at /Users/junaid

Look at the ~ character, it represents the home directory and that cute little home icon is from the powerlevel10k theme mentioned above.

You might not need to use this command if you are not deep inside the file tree structure, up to a certain level the terminal helps us locate where we currently are.

If the terminal window is small enough, it trims the directory name.

ls

Terminal by default doesn’t help us much in understanding the content of the current directory. ls command short for “list” helps us list down the content of the current directory.

Notice that the directories look different than the files. Directory names are in a shade of blue colour and are bold while file names are in greyish and regular weight. The visual indication might differ in your terminal but generally there is some distinction between the two.

cd

Now that we know what the directory contains, we can start moving in between the directories. That’s where the cd command stands for “change directory” is useful.

cd followed by the name of the directory we want to go in.

How do we go back to the previous directory?

We go one step back by using a double dot ( .. ) This is a special character.

A single dot . represent the current directory
A double dot .. represents the parent directory.

But, if we want to go deep inside the file structure, do we need to run the cd command for each directory? That would be a terrible experience.

cd command can take complex paths as well.

But, how do I know what is the content of the current directory I am in?

tab-completion for the rescue. tab inside the terminal can do amazing things. After cd try clicking the tab. To go to the previous selection click shift + tab and Enter to select.

mkdir

Once in a while, we need to create a new folder in the file system. mkdir (make directory ) helps us achieve this. cd into the directory you want to create a new directory and run mkdir <directory name>

touch

touch command is used to create a new empty file. This is something I don’t use often, but it’s good to know and can come in handy sometimes.

cat

cat command is useful to view the content of the file. We need to pass the file we want to view the content of and it will print it out on the screen.

I took the liberty to edit the file we created above using the touch command.

We can also print files to show the line numbers using the -n option.

rm

Now, that we learned how to create new files and directories. We should also learn to delete stuff.

rm (remove) helps in removing the file or directory. Be extremely cautious when using rm It deletes the file / directory permanently.

By default rm only delete files and not directories. When we input directory name it throws an error.

rm: [dir_name]: is a directory

To delete directory we need to tweak the behaviour of the command using options. We can use -r ( recursive ) options to remove directory.

rm will ask for permission to delete file if it is write protected. If the file is write protected the user can’t update or delete the file. In such case we can use -f (force) option to delete such files.

This one is my favourite command to delete node modules in a project. Also notice, we combined two options here -r and -f

rm -rf node_modules

clear

Terminal output can get messy. To clear the terminal we can use clear command.

You can also use keyboard shortcut cmd + k to clear the terminal. Benefit of using the keyboard shortcut is that you can clear the terminal while the process is running. To use clear command we need to stop the currently running process.

open

If you want to open any directory in the file explorer, you can use the open command. The following command will open the current directory in file explorer.

open .

lsof

Sometimes, when starting a project in my local machine, I get this warning.

It tells that some other service is running on the same port we are trying to start our server so instead we will choose another one.

Now, this isn’t a big issue, we can continue using this port as well, but on new port I don’t get the benefit of path completion in my browser. I need to type them again.

Instead of trying to find terminal tabs in which other service is running on a particular port, 3000 in this case, we can use the lsof (list of open files) command with -i options to do the work for us. It list down all the open network on this particular port.

Now, we can’t do much with this output to stop this open network. But, the column data PID is useful for us to stop this service. That’s where next command enters.

kill

We got a PID ( process ID ). Now to kill the process, we can run following command.

-9 is the signal number for SIGKILL which signal the command to immediately terminate the process

code

This command is specific to VSCode. To open a directory in VS Code you can run this command.

code .

You might run into command not found error. To fix, head to VS Code. Open command palette using cmd + shift + p and search for code. Click the option seen below and you will be able to use this command from your terminal.

That’s all the commands I use. There are lot’s of other powerful commands which you can learn and use but this will give a great start in your terminal journey. Start using terminal today! It’s useful skill to have.

I want to end this article with quick tip. You can use your up and down arrow keyboard button to navigate between your previous entered commands. This is useful if you did ran some long command, for example,

git commit -m "fix: footer colors"

and this command fails for some reason. After fixing the issue, I can go back to this command using up arrow key and run it again.

I hope this was useful for you. Thank you for taking the time to read this. You can find me on Twitter and Linkedin

Cover Photo by Francesco Ungaro on Unsplash

Mysterious space beneath images

Junaid Shaikh — Sun, 04 Feb 2024 06:02:44 +0000

Images are everywhere on the web. In today’s world, no website is complete without using images. When using an img tag in HTML to render images, have you ever noticed a mysterious space beneath the image?

Take the example above, we have an image with a width of 500px and height of 350px wrapped inside the div with a border. Notice that the height of the div in the box model is 354px which is a little bit bigger than the height of the image. Take a closer look.

Where is this space coming from? and how do we solve this?

Here is a deal. img is an inline element and the browser treats it as typography and adds this space so that it doesn’t place those elements too tight. This makes sense with texts though.

There are two ways we can solve this problem.

Change the display property of images to display: block

Setting the line height of the parent div to 0

line-height CSS property is used to set the distance between two lines of text and we can leverage this to our advantage.

You can find the codepen here: https://codepen.io/Junaid-Shaikh-the-lessful/pen/BabxZoZ

I hope that was useful for you. Thank you for taking the time to read this. You can find me on Twitter and Linkedin

Cover pic by Natalia Trofimova on Unsplash

Everything about Promises in JavaScript

Junaid Shaikh — Sun, 05 Jun 2022 18:55:53 +0000

Hey folks! 👋 Today, in this post we will look at one of the important concepts of JavaScript and that is Promises. We will look at what is a promise, consumer methods, and promise static methods. So, let's get started. This is going to be a bit long post.

Introduction to Promise

A promise in JavaScript is an object that represents the completion or failure of an asynchronous operation and its result. That means we always get something back from the promise, whether it will be a success value or the error value.

A promise can be in one of the following states

pending - the initial state, the results are yet to be decided
fulfilled - represents the successful completion of the task
rejected - represents the failure of the task

A promise is settled when it is either fulfilled or rejected.

Create your own promise

We can create a promise using the promise constructor

const promise = new Promise((resolve, reject) => {
  // your asynchronous task
});

A new promise object is returned from the constructor. The promise constructor needs an executor function to be passed, and the resolve and reject callbacks are passed by the JavaScript itself.

The executor function is executed immediately when new Promise is called. The work of the executor function is to produce a value. Whenever it gets the value, it should call resolve or reject based on the results.

When resolve is called promise moves to the fulfilled state, and when reject is called promise moves to the rejected state.

Now, let's do some work inside the executor function

const promise = new Promise((resolve, reject) => {
  // this function is executed immediately when a new promise is created

  // the promise will be resolve with value 5 after 1 second.
  setTimeout(() => {
    resolve(5);
  }, 1000);
});

The executor function contains an asynchronous task, the promise will be resolved with a value of 5 after 1 second. The promise object has two hidden properties [[PromiseState]] and [[PromiseResult]] which keep track of the current state of promise and the resulting value.

We can also directly resolve the promise without waiting for any action to take place.

const promise = new Promise((resolve, reject) => {
  // the promise will be resolved immediately 
  resolve(5)

  // any resolve or reject call after this will be ignored 
  reject('Error'); // ignored
})

That's how we create a new promise.

Accessing the promise results

We can not directly access the state and result property of the promise. We can access the result value using .then, .catch, and .finally promise methods.

All the above methods return a new promise which means they can be further chained to do some other work based on the result of a previous promise. That is something called promise chaining.

then

.then method accepts up to two arguments. The first one is the function executed when the promise is fulfilled, the second argument is the function which executed when the promise is rejected.

promise.then((result) => {
  // here handle fulfilled promise
}, (error) => {
  // handle rejected promise
})

The second argument is optional.

Let's look at the example

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(5);
  }, 1000);
});

promise.then(
  (result) => console.log(result),  // 5
  (error) => console.log(error)  // doesn't run
);

Here is the reaction to the rejected promise

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("Promise rejected");
  }, 1000);
});

promise.then(
  (result) => console.log(result), // doesn' run
  (error) => console.log(error) // Promise rejected
);

catch

What if we are only interested in the errors? We can handle this in two ways, we can pass the first argument to .then as null and provide the second callback function or we can use the .catch method.

The .catch requires a function that will be executed when the promise is rejected and get an error value as the argument.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("Promise rejected");
  }, 1000);
});

promise.catch(
  (error) => console.log(error) // Promise rejected
);

finally

The .finally method requires a function that will be executed when the promise is settled. A promise is said to be settled when it is either fulfilled or rejected.

The function passed to the .finally doesn't get any arguments. That means it doesn't know whether the promise is fulfilled or rejected. We can perform clean-up inside this handler like stopping the loader.

promise.finally(() => {
  // perform clean up
});

The resolved value or rejected value is passed through the finally handler. We can access the value by chaining .then or .catch to the .finally method.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(5);
  }, 1000);
});

promise
  .finally(() => {
    // perform clean up
  })
  .then((result) => console.log(result)); // 5

This way we handle the result of the promise using .then, .catch, and .finally.

Promise static methods

There are 6 static methods that we will look at.

Promise.all()

Promise.all() method allows one to process several promises in parallel and wait until all the promises are resolved. It returns a single promise that resolves the array of all promises' results.

If any one of the promises in the list of promises passed is rejected then Promise.all() is immediately rejected and other promises are ignored.

Syntax

Promise.all(iterable)

Here iterable is generally an array of promises.

An example,

const promise1 = new Promise((resolve) =>
  setTimeout(() => resolve("promise1"), 3000)
);

const promise2 = new Promise((resolve) =>
  setTimeout(() => resolve("promise2"), 3000)
);

const listOfPromise = [promise1, promise2];

Promise.all(listOfPromise).then((results) => console.log(results)); // ["promise1", "promise2"]

Note that the resulting array will get be in the same order as the input array.

Promise.allSettled()

Promise.all() is rejected as a whole if one of the promises provided is rejected. But sometimes we need the result of every promise regardless of their results. That's where we can use Promise.allSettled()

Promise.allSettled() takes an iterable of promises and returns a new Promise which is resolved to an array of objects having information about the status and value of each promise.

for the fulfilled promise, the object looks like

{ status: "fulfilled" , value: result }

for the rejected promise, the object looks like

{ status: "rejected", value: error }

const promise1 = new Promise((resolve) =>
  setTimeout(() => resolve("promise1"), 3000)
);

const promise2 = new Promise((resolve, reject) =>
  setTimeout(() => reject("promise2"), 3000)
);

const listOfPromise = [promise1, promise2];

Promise.allSettled(listOfPromise).then((results) => console.log(results)); 

// [{status: 'fulfilled', value: 'promise1'}, {status: 'rejected', reason: 'promise2'}]

Promise.any()

Promise.any() takes an iterable of promises and returns the result of the promise which gets resolved as soon as possible. If none of the promises are resolved then it returns an Aggregate Error.

const promise1 = new Promise((resolve) =>
  setTimeout(() => resolve("promise1"), 5000)
);

const promise2 = new Promise((resolve) =>
  setTimeout(() => resolve("promise2"), 3000)
);

const listOfPromise = [promise1, promise2];

Promise.any(listOfPromise).then((result) => console.log(result));

// promise2

Promise.race()

Just like Promise.any() Promise.race() takes an iterable of promises and wait until any one of the promises is settled and return the result or error depending upon the condition.


const promise1 = new Promise((resolve) =>
  setTimeout(() => resolve("promise1"), 5000)
);

const promise2 = new Promise((resolve, reject) =>
  setTimeout(() => reject("promise2 rejected"), 3000)
);

const listOfPromise = [promise1, promise2];

Promise.race(listOfPromise)
  .then((result) => console.log(result))
  .catch((error) => console.log(error));

// promise2 rejected

Promise.resolve()

The Promise.resolve(value) creates a resolved promise with the result of value. If the value is a promise then that promise is returned.

Promise.reject()

The Promise.reject(error) creates a new promise which is rejected with the given error.

These are the 6 static methods of promises.

That's all for this post, thank you for reading. I hope you learned something new.

If you have any questions, feel free to get in touch with me.

You can connect with me on

I will see you in the next post. Till then, keep coding :)

Emmet Shortcuts You Should Know

Junaid Shaikh — Sat, 15 Jan 2022 13:23:54 +0000

Hey readers 👋

This is my first post on DEV, I hope you all will love it.

Introduction

In this post, we will look at some of the useful Emmet shortcuts. Though there are tons of Emmet shortcuts, we will be looking at major and useful ones.

Before getting started, what Emmet actually is? As per official website

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

That's right. Emmet helps you to improve your HTML and CSS workflow, we will look at how. You have been using Emmet if you are using VS Code ( Duh, who doesn’t use VS Code? )

Okay, without further ado, let’s get started.

HTML Boilerplate

You can type ( ! ) and hit enter to get the HTML boilerplate

The same can be achieved by html:5 but as a developer, we love to type fewer characters.

Nesting Operators

Nesting operators will help you to generate HTML elements that may be nested or can be placed as a sibling or you can add text and generate numbers too.

Child: >

The child (>) operator can be used to nest elements inside each other.

nav>ul>li

Sibling: +

Let’s say you need to place three elements as siblings, use + operator to achieve this.

header+main+footer

Climb up: ^

What if you need to climb one stage up? We are nesting element using child (>) operator but with ( ^ ) operator you can go one step up.

header+main>section>article^h1

Here we are inserting section and article inside of main but we want to add h1 nested inside the main and sibling of section

Multiplication: *

My favorite one. Using this operator we can specify how many elements we want.

ol>li*5

Grouping: ()

Grouping allows us to create complex markup. It basically considers a group a single element.

header>(nav>ul>li*5)+main+footer

We can also multiply the group and it will return the group multiple time

dl>(dt+dd)*3

Attribute Operators

Emmet allows you to set the attributes for your HTML elements.

ID and Class

To set the ID on your HTML element use # and for class attribute use dot ( . )

div.container>h1#heading

Custom Attributes

Just like the attribute selector in CSS, we can use Emmet to set the custom attribute

input[type='text']

Note:

We can specify as many attributes as we want.
We also don’t need to add value to the attribute, providing only attribute names will generate elements with empty attributes.

Text - {}

The last shortcut we will be looking at is adding text content in the element. And also the lorem ipsum text generation.

Use {} to add text and lorem keyword to add the dummy text

p{lorem}

p>lorem10

CSS

Emmet provides a lot of CSS abbreviations to write faster. It will be tiresome to add all of them here. I will link the cheat sheet at the end of the article.

Some of the examples of CSS are pos get converted into position: relative you can also specify which position value you need like pos:a it will give position: absolute

Similarly, there are shortcuts for margin and padding, border, outline, box-sizing, and so on.

Awesome! You reached the end of this article. Thank you for taking the time to read this.

If you liked this article, you will love my tweets. I share useful tips around web development and resources to learn the same.

You can follow me on Twitter or connect with me on LinkedIn

Here is the cheatsheet I was talking about.

Keep coding 😃

You can support this article here...