DEV Community: zaira

JavaScript "textContent" vs "innerHTML"

zaira — Tue, 25 Jul 2023 10:50:01 +0000

In JavaScript, both the innerHTML and textContent can be used to manipulate the text inside HTML elements.However, there is a slight difference between the two.

Let's see that difference in this article.

`textContent` vs `innerHTML`

textContent is used to set the text between any tag.You pass the text as the string.

Whereas, innerHTML is used to pass any other HTML as the content of an HTML tag.

For the upcoming examples, we will use this HTML

    <h1>Using innerHTML:</h1>
    <h2 id = "innerHTML"></h2>

    <h1>Using textContent:</h1>
    <h2 id = "textContent"></h2>

Example of `textContent`

We have passed a string "Hello World" as the textual content of h2.

document.getElementById("textContent").textContent = "Hello World";

Here, passing any HTML tags as a string won't render as HTML.

Output

Example of `innerHTML`

Here, we passed some additional HTML <em>Hello World</em> in between the h2 tags. That is why we got the output in italics

document.getElementById("innerHTML").innerHTML = "<em>Hello World</em>";

Output

Wrapping up

I hope you found this tutorial helpful. Thank you for reading till the end.

I would love to connect with you on any of these platforms.

Create a chessboard using CSS Grid

zaira — Wed, 12 Jul 2023 14:09:40 +0000

It is fairly easy to create a Chessboard using just CSS Grid. With a CSS grid, you can create a grid-based layout pretty much like an actual chess board.

In this article, we would use only HTML and CSS to create a chessboard.

Step1: Define the grid container.

Here, we have set the width of the container to be 800px.
We have enabled the grid display using display: grid;



.container {
      width: 800px;
      display: grid;
    }

Step2: Define rows and columns using `fr`- fractional ratios

Here, we have defined 8 columns and 8 rows, each equal to 1 fr.



.container {
      width: 800px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

Step3: Define classes for alternating boxes.

Now, we can define the height and width of each box.
As the container width was 800px, we can create each box of 800/8=100px each.
Note that the chessboard grid is 8x8.




.white {
      height: 100px;
      width: 100px;
      background-color: black;
    }

.black {
      height: 100px;
      width: 100px;
      background-color: white;
    }

Here is the complete code:

Wrapping up

I hope you found this tutorial helpful. Thank you for reading till the end.

I would love to connect with you on any of these platforms.

How to Use Linux on a Windows Machine – 5 Different Approaches

zaira — Tue, 11 Jul 2023 14:12:49 +0000

As a developer, you might need to run both Linux and Windows side by side. Luckily, there are a number of ways you can get the best of both worlds without getting different computers for each operating system.

In this article, we'll explore a few ways to use Linux on a Windows machine. Some of them are browser-based or cloud-based that do not need any installation prior to using them.

Here are the methods we'll be discussing:

Dual boot
Windows Subsystem for Linux (WSL)
Virtual Machines (VM)
Browser-based solutions
Cloud-based solutions

Option 1: "Dual-boot" Linux + Windows

With dual boot, you can install Linux alongside Windows on your computer, allowing you to choose which operating system to use at startup.

This requires partitioning your hard drive and installing Linux on a separate partition. With this approach, you can only use one operating system at a time.

If this sounds like the way you want to go, here is a useful tutorial on setting up dual boot on Windows 10.

Option 2: Use Windows Subsystem for Linux (WSL)

Windows Subsystem for Linux provides a compatibility layer that lets you run Linux binary executables natively on Windows.

Using WSL has some advantages:

The setup for WSL is simple and not time consuming.
It is lightweight compared to VMs where you have to allocate resources from the host machine.
You don't need to install any ISO or virtual disc image for Linux machines which tend to be heavy files.
You can use Windows and Linux side by side.

If this sounds like the right option for you, here is a detailed guide on how to install and use WSL.

Option 3: Use a Virtual Machine (VM)

A virtual machine (VM) is a software emulation of a physical computer system. It allows you to run multiple operating systems and applications on a single physical machine simultaneously. Here's a detailed explanation of VMs:

You can use virtualization software such as Oracle VirtualBox or VMware to create a virtual machine running Linux within your Windows environment. This allows you to run Linux as a guest operating system alongside Windows.

VM software provides options to allocate and manage hardware resources for each VM, including CPU cores, memory, disk space, and network bandwidth. You can adjust these allocations based on the requirements of the guest operating systems and applications.

Here are some of the options available for virtualization:

Option 4: Use a Browser-based Solution

Browser based solutions are particularly useful for quick testing, learning, or accessing Linux environments from devices that don't have Linux installed.

You can either use online code editors or web based terminals to access Linux. Note that you usually don't have full administration privileges in these cases.

Online code editors

Online code editors offer editors with built-in Linux terminals. While their primary purpose is coding, you can also utilize the Linux terminal to execute commands and perform tasks.

Replit is an example of an online code editor, where you can write your code and access the Linux shell at the same time.

Replit provides a code editor and a Linux shell.

Web-based Linux terminals

Online Linux terminals allow you to access a Linux command-line interface directly from your browser. These terminals provide a web-based interface to a Linux shell, enabling you to execute commands and work with Linux utilities.

One such example is JSLinux. The screenshot below shows a ready to use Linux environment:

Accessing Linux via JSLinux

Option 5: Use a Cloud-based Solution

Instead of running Linux directly on your Windows machine, you can consider using cloud-based Linux environments or virtual private servers (VPS) to access and work with Linux remotely.

Services like Amazon EC2, Microsoft Azure, or DigitalOcean provide Linux instances that you can connect to from your Windows computer. Note that some of these services offer free tiers, but they are not usually free in the long run.

How to Choose the Correct Method

The choice is totally dependent on your use case. But there are some factors that may help you decide which option works the best for you. Let's discuss them:

Access level/elevated privilege: If you require full administrative privileges, it is better to skip the browser-based solutions. WSL, dual booting, VMs, and cloud-based solutions provide you with full administrative control.
Cost: Cloud-based solutions offer services against a subscription fee. This cost varies depending on the choice of operating system, hardware specs of the machine, traffic, and so on. If you are on a tight budget, cloud-based solutions might not be the best.
Scalability: If you are just starting, but plan to do resource exhaustive development in the future, you can always scale up the physical specs of your machine. Some options that support upgrading are cloud-based solutions and VMs. You can add more processors or increase the RAM as per your needs.
Current system's hardware specs: If your current system has lower RAM and storage, running VMs can make the system heavy. It would be better to opt for cloud-based or browser based solutions.
Switching: If you don't plan to use Windows and Linux side by side, dual-boot can be a really good option. It offers a complete and focused Linux experience.

My Setup

I am using Ubuntu VM installed through VMWare workstation player. It is doing a great job as I can frequently switch between two operating systems. It was also simple to setup and I can enjoy the admin privileges as well!

Wrapping Up

I hope you found this article helpful. What’s your favorite thing you learned from this tutorial? I would love to connect with you on any of these platforms. 📧

See you in the next tutorial, happy coding 😁

Flex-box layout properties and live demo

zaira — Wed, 05 Jul 2023 17:30:31 +0000

Flexbox allows you to create a responsive layout that is flexible to the window size.

In this post, I would share some of the important flex-box properties. There is also a demo at the end.

Ordering content with `order:0...` using flexbox

[Child item property]

The higher the order, the later that item comes.

Syntax:

.child-item {
   order:0;
}

In case of a row layout, the higher order item is pushed to the extreme right.

In case of a column layout, the higher order item is pushed to the very end.

By default, the order is 0 of all items.

Example:

    .red {
      background-color: #eb4d4b;
    }

    .green {
      background-color: #6ab04c;
      order: 1;
    }

    .indigo {
      background-color: #30336b;
      order: 2;
    }

    <div class="green">order:1</div>
    <div class="indigo">order:2</div>
    <div class="red">order:0</div>

Output

Enabling wrap with `flex-wrap` using flexbox

[Parent property]

Wrap allows you to control the content in horizontal layout when you run out of space.

By default wrap is disabled.

Syntax:

.container{
   flex-wrap: nowrap | wrap;
}

When wrap is enabled, the items are pushed to the next line, if the screen is shrunk and space runs out.

Justifying content using flexbox

[Parent property]

justify-content: flex-start;: Items are bunched up to the left.

justify-content: flex-end;: Items are bunched up to the right.

justify-content: center;: Items are aligned to the center.

justify-content: space-between;: Items have space between them.

Aligning content across a container using flexbox

[Parent property]

For the align-items to properly work, you need to set the height of the container.

align-items: flex-start;

align-items: flex-end;

align-items: center;

Demo

You can view a live preview of the flexbox layout concepts in this link.
Feel free to experiment and play around :)

Wrapping up

I hope you found this tutorial helpful. Thank you for reading till the end.

I would love to connect with you on any of these platforms.

Media Queries in CSS

zaira — Sun, 02 Jul 2023 11:02:20 +0000

A responsive website is a website that adapts according to its target device. For example a responsive website would adapt its layout to suit a laptop, a phone and a tablet. A phone has a smaller display, so a responsive website might make the font-size a bit bigger in smaller screens.

But how do you do that? You can use media queries in your CSS to explicitly tell your website to change according to the screen size.

Targeting smaller screens with media queries
Targeting larger screens with media queries
Targeting a screen range using media queries
See media queries in action

Targeting smaller screens with media queries

Let's discuss an example of defining media queries.

@media (max-width:600px) {

/*
CSS for screens equal to or below 600px
*/

}

In the code above, 600px is the breaking point. This means that you are targeting screen sizes equal to or below 600px.

In the code below, any screen equal to or below 600px would have its background set to red.

@media (max-width:600px) {

  body{
    background-color: red;
  }

}

Targeting larger screens with media queries

In the below, example 900px is the breaking point. It is targeting screens whose width is at least 900px.

@media (min-width:900px) {

/*
CSS for screens equal to or above 900px
*/

}

In the below example, any screen greater than 900px would have its background set to green.

@media (min-width:900px) {

  body{
    background-color: green;
  }

}

Targeting a screen range using media queries

The below code targets any screen greater than 600px and smaller than 900px.

@media (min-width:600px) and (max-width:900px){

  body{
    background-color: burlywood;
  }

}

See media queries in action

Go to this link to see media queries in action! Adjust the screen size and see how media queries are being applied!

To review the code, go to this GitHub repo.

Wrapping up!

I hope you found this tutorial helpful. Thank you for reading till the end.

I would love to connect with you on any of these platforms.

Display in CSS

zaira — Tue, 27 Jun 2023 11:04:54 +0000

In this article, we would discuss the three ways that elements can be displayed on the web page. The three methods are:

Inline
Block
Inline-block

Inline display in CSS
Block display in CSS
Inline-block display in CSS

Inline display in CSS

span by default has the inline display. This means that a span element would stay on the same line where it was declared. Two spans declared together, would always stay on the same line.

Other html elements such as a div are block level elements by default. This means that each div goes to a separate line and takes full width of the screen.

You can make a div inline like this:

div {

    display: inline;
}

Almost all other elements besides span are block by default.

Note that, you cannot set the height and width of inline elements. they take the space as much as the content inside needs.

Block display in CSS

Block elements take full width of the page. Block elements force the next element to go to the next line.

element{
   display: block;
}

You can make them appear on the same line using this CSS:

.blue {
  display: inline;
}

.yellow {
  display: inline;
}

Result:

Inline-block display in CSS

An inline-block uses the powers of both- inline and block displays:

block allows us to set the height and width.
inline allows us to position elements in the same line.

You can use inline-block like this:

element{
   display: inline-block;
}

CSS Positioning

zaira — Thu, 22 Jun 2023 10:13:40 +0000

CSS provides 4 ways through which you can position elements on your page.

Let's study them all.

Table of contents
- Static positioning in CSS
- Relative positioning in CSS
- Absolute positioning in CSS
- Z-index
- Fixed positioning in CSS

Static positioning in CSS

This is the default positioning. This is the order in which elements are placed when you don't specify any particular position. It starts from the top-left corner of the page and continues down.

To apply static positioning to an element in CSS, you don't need to add any specific positioning property. It is the default behavior. For example:


.my-element {
  /* No specific positioning property needed */
}

Relative positioning in CSS

This is the position relative to the default static positioning.

Note that this is not relative to any particular element as some may confuse it.

Relative positioning introduces four offset properties that you can use to adjust the element's position:

top: Specifies the distance from the top edge of the element's containing block to the top edge of the element.
bottom: Specifies the distance from the bottom edge of the element's containing block to the bottom edge of the element.
left: Specifies the distance from the left edge of the element's containing block to the left edge of the element.
right: Specifies the distance from the right edge of the element's containing block to the right edge of the element.

.my-element {
  position: relative;
  top: 10px;
  left: 20px;
}

Absolute positioning in CSS

Absolute positioning means that the elements get positioned relative to the nearest positioned ancestor OR relative to the top left corner of the page in case the ancestor is not using any position property.

If there is no positioned ancestor, the default behavior is relative to the top-left corner of the webpage.

To apply absolute positioning to an element in CSS, you can use the position property with the value absolute. For example:

.my-element {
  position: absolute;
  top: 50px;
  left: 100px;
}

Z-index

This is another aspect of the absolute positioning. It specifies which property goes on top of which.

The default z-index is 0.

A lower z-index means the element is behind.

A z-index:-1 means, the element is at the farthest back of the page.

Fixed positioning in CSS

As the name suggests, the element stays in a fixed position even when you scroll down the page.

Fixed positioning is commonly used for creating persistent elements that should remain in view regardless of scrolling, such as headers or sticky navigation menus. It's important to note that fixed positioning can sometimes cause layout issues or overlapping with other elements, so proper consideration should be given to ensure a good user experience.

To apply fixed positioning to an element in CSS, you can use the position property with the value fixed. For example:

.my-element {
  position: fixed;
  top: 20px;
  left: 50px;
}

Wrapping up

I hope you found this tutorial useful!

I would love to connect with you on any of these platforms.

Cascading in CSS

zaira — Mon, 19 Jun 2023 14:31:39 +0000

In CSS, it is possible to apply multiple styles to a single element. However, there is an order or precedence. One style always takes precedence over the other.

In this article, we would learn how precedence works.

Position

The lower down a property is in the style sheet, the more important it is.

h1{
    color: red;
    color: blueviolet;
}

This is the output:

Here is another example:

h1{
    color: red;
    color: blueviolet;
}

h1{
    color: orange;
}

and this is the output:

Specificity

This rule works on how specifically an element is selected.
Here is the order:

id
attribute
class
element

This means that an id selector would override an attribute selector and a class selector would override an element selector.

Let's see an example HTML, we would apply styles to the li:


<ul>
  <li id="all-items" class="list-items" draggable="true">First</li>
  <li id="all-items" class="list-items" draggable="true">Second</li>
  <li id="all-items" class="list-items" draggable="true">Third</li>
  <li id="all-items" class="list-items" draggable="true">Fourth</li>
  <li id="all-items" class="list-items" draggable="true">Fifth</li>

</ul>

The rule targeting the id is applied, as it has the highest priority.

Type

There are 3 ways in which you can apply styles to your HTML.

Internal style sheet: This method uses an internal style sheet, which means that you specify style in your HTML within the style tags.
External style sheet: In this approach, you link an external style sheet to your HTML using <link rel="stylesheet" href="./style.css"> in the head element.
Inline style: In this method, the style is applied using the style attribute inside an element. For example: <h1 style="color: aliceblue;"></h1>

The order of precedence of applying styles is as follows:

Inline style.
Internal style sheet
External style sheet

Importance- adding the `important` keyword

If you specify that a property is important in your CSS, you can re-inforce that rule, regardless of the order.

li{
font-weight: 600;
color: rebeccapurple;
color: brown !important;
}

Here is the output:

Linux `Vimdiff` Command – How to Compare Two Files in the Command Line

zaira — Sun, 18 Jun 2023 10:29:32 +0000

Software development and maintenance can get complicated sometimes. And you might find yourself comparing code or configuration changes.

When you compare them manually, you might make a mistake, and it's easy to miss minute changes. Apart from that, finding changes in large files can be exhausting.

There are many online tools and text editors that help you efficiently compare files. But there is an easier, hassle-free method to compare files using the Linux command line.

The Linux command line is very powerful and provides a file comparison utility within vim to differentiate files side by side.

Learning file comparison in the command line is helpful because many servers use only a CLI (Command Line Interface). This means that you don't have the luxury of a GUI where you can run the browser or other text editors.

What is vimdiff?

Vimdiff is a Linux command that can edit two, three, or four versions of a file with Vim and show their differences.

`Vimdiff` syntax

For comparing two files, the syntax is the following:

 vimdiff [options] file1 file2

Let's compare two files index.js and index.js.bkp to see their differences.

vimdiff index.js index.js.bkp

Output:

Here we can see the difference in the highlighted line.

To make things easier, we can show the line number as well. When you are in Vim, go to the extended command mode by pressing escape twice and typing :set number. This will reveal the line numbers for the current session.

Let's have a closer look at the output again:

Uncollapsed lines: These are the lines of codes that have not been changed. these are wrapped and can be uncollapsed using a combination of the z+c and z+o keys.
Highlighted changes: These are the differences present in a file.
Line numbers: These are the corresponding line numbers in files.
File names: The file name on the left is the first filename mentioned in the command. The file name on the right is the second filename provided in the command.

There is also a way to enable line numbers in Vim by default so you don't have to set it manually each time.

How to show line numbers by default in Vim on Linux

If you like to view line numbers by default in Vim, you can follow these steps:

Locate the vimrc file.

Vim configurations are present in the vimrc file. The file location might vary from one Linux distribution to the other. In Ubuntu, the vimrc file is located in /usr/share/vim/.

Edit the vimrc file.

Simply append set number in the file and save and exit.

Now whenever you open Vim, the line numbers will be there by default.

`Vimdiff` Operations

Let's see how we can utilize the powers of vimdiff.

First, make sure you are in the command mode.

You can go into the command mode by pressing the escape key twice.

How to split screens horizontally

By default, vimdiff splits the screen vertically. If you like to see the files split horizontally, you can use the flag -o like this:

vimdiff -o index.js index.js.bkp

Output:

How to navigate in diff window

Navigate between diff windows

To navigate between panes, use a key combination of Ctrl+W+W. The cursor will switch between the files once you press the keys.

Jump to changes

Instead of scrolling down line by line and scanning for the changes, you can jump to the change with a specific key combination.

To move to the previous change use: [ + c.
To move to the previous change use: ] + c

How to apply changes from diff window

To apply changes from the left file to the right file:

To apply the changes from the left file to the right file, first, move to the highlighted change. Then, use the command:

:diffput

Remember that you'll need to be in the command mode.

Using diffput to apply changes from left to right:

To apply changes from the right file to the left file:

To apply the changes from the right file to the left file, first, move to the highlighted change. Then, use the command:

:diffget

Using diffget to apply changes from right to left:

How to undo changes

If you make a mistake, you can undo the changes provided you didn't save the file.

When you are in the command mode press u to undo the last change.

If you've recently undone a change, you won't be able to see the highlighted changes as before. You'll need to refresh to see the changes once again. You can do this by using the command:

:diffupdate

How to open and close folds

The unchanged lines are wrapped to provide better readability.

To view the uncollapsed lines as shown above, move the cursor there and use the following key combinations:

To open the folds: z + o.
To close the folds: z + c.

How to exit the diff window

There are many ways to exit the diff window depending on the end result.

:qa to exit all the files without saving.
:q to exit the files one by one without saving.
:wq! to save and exit files one by one.

Wrapping up

Comparing files is easy and fast with vimdiff as we compare files within the command line. In this tutorial, you learned how to use the vimdiff command to efficiently find differences in code or configuration files.

I hope you found this tutorial helpful. Thank you for reading till the end.

What’s your favorite thing you learned from this tutorial? Let me know on Twitter!

I would love to connect with you on any of these platforms.

Image credits:

Programming vector created by storyset - www.freepik.com

Vim tutorial- learn Vim the easy way

zaira — Sat, 17 Jun 2023 10:22:14 +0000

Vim is a very powerful and easy to use built-in Linux text editor. In fact, once you master it, vim is the only text editing tool you need to know. Many say it's hard to use, dull and boring but it's all gibberish! I am writing this post to change your views about vim :)

Vi or vim (vi enhanced) are text editors available in Linux distributions by default. It would be quite unfair to simply not be bestowed with their advantages.

If you are used to downloading the file, making changes using a GUI, and then uploading the file back to server, then please stop :p You'll stop doing this once you get to know vi. Besides, these steps are unnecessary and Kafkaesque*, right? This also puts the file in danger by adding extra whitespace which might soon turn into an untraceable production nightmare.

Nerd fact - Kafkaesque meaning: something that has been made complex illogically and in a bizarre way.

Advantaged of using Vim?

Vim editor is available by default on all Linux distros. You can start working on it right-away.
Some other Linux utilities, for example, editing cron jobs, work in the same pattern as vim.
No internet, no mercy. Let's say you are used to working in other (non-default) editing tools but suddenly if you lose access to those tools, and there is no internet access to install them, then you know where you stand. This could happen if you are trouble shooting in someone else's environment.
Most servers run headless, so in system administration, you don't necessarily have the luxury of a GUI. But vim has got your back; it would always be there.
As vim is a CLI tool, it is faster than GUI tools.
Vim keeps the file properties intact. Downloading the file, editing and uploading it increases the chance of whitespace addition. This could be the case with third party text editing tools as well.
Vim is suitable for all- beginners and advanced users. Vim supports complex string searches, highlighting searches and much more. Some developers even use vim for code editing, sounds strange right? But you can see the potential here :)

How to start using Vim ?

It's easy. You need to know the 3 operating modes of Vim and how to switch between them. Keystrokes behave differently in each command mode, and that's the magic of Vim :D Let's dive deeper.

Moving to Start or End of Line in Vim

Press ^ to move the cursor to the start of the current line. Press $ to move the cursor to the end of the current line.

Vim modes

In Vim, there are three modes to work with:

Command mode.
Edit mode.
Visual mode.

Command Mode.

When starting vim editor, you land in the command mode by default. This mode allows you to access other modes.

⚠ To switch to other modes, you need to be present in the command mode first

Edit Mode

This mode allows you to make changes to the file. To enter edit mode, press 'I' while in command mode.

Note the '-- INSERT' switch at the end of the screen.

Visual mode

This mode allows you to work on a single character, a block of text, or lines of text.

Let's break it down into simple steps. Remember, use the below combinations when in command mode.

Shift + V → Select multiple lines.
Ctrl + V → Block mode
V → Character mode

The visual mode comes into handy when you need to copy and paste or edit lines in bulk.

Extended command mode.

The extended command mode allows you to perform advanced operations like searching, setting line numbers, and highlighting text. We'll cover extended mode in the next section.

How to stay on track?

If you forget your current mode, just press ESC twice and you would be back in Command Mode.

Some common operations using Vim

1. How to copy and paste in Vim?

Copy-paste is known as 'yank' and 'put' in Linux terms.

To copy-paste, follow these steps:

Select text in visual mode.
Press 'y' to copy/ yank.
Move your cursor to the required position and press 'p'.

2. How to search for text in Vim?

Any series of strings can be searched with vim using the '/' in command mode.

To search, use /string-to-match.

In the command mode, type :set hls. This will highlight the searches.

Let's search a few strings:

3. How to exit Vim?

That is a million dollar question! 😃
But it is as easy as abc, trust me.

First, move to command mode(by pressing escape twice) and then use these flags:

Exit without saving → :q!

Exit and save → :wq!

Using hjkl for navigation

In early days of CLI, the keyboards didn't have arrow keys. Hence, navigation was done using the set of available keys, hjkl being one of them.

Although arrow keys would work totally fine, you can still experiment with hjkl keys to navigate. Some people find this this way of navigation comfortable.

Tip to remember: hang back, jump down, kick up, leap forward.

Time for action !! 😁

Remember learning in IT is nothing without hands-on. To quickly access a Linux shell and practice what you have learned, hop on to Replit! It's free! This tutorial was made using replit.

So, this is it ! You have mastered the basics. With this tutorial, you can easily view, edit and save your files using the Vim editor.

Wrapping up

I would love to connect with you on any of these platforms.

Bash Scripting Tutorial – Linux Shell Script and Command Line for Beginners

zaira — Thu, 15 Jun 2023 17:56:38 +0000

In Linux, process automation relies heavily on shell scripting. This involves creating a file containing a series of commands that can be executed together.

In this article, we'll start with the basics of bash scripting which includes variables, commands, inputs/ outputs, and debugging. We'll also see examples of each along the way.

Let's get started. 🚀

Pre-requisites
Introduction

Definition of Bash scripting
Advantages of Bash scripting
Overview of Bash shell and command line interface

How to Get Started with Bash Scripting

How to Run Bash Commands from the Command Line
How to Create and Execute Bash Scripts

Bash Scripting Basics

Comments in bash scripting
Variables and data types in Bash
Input and output in Bash scripts
Basic Bash commands (echo, read, etc.)
Conditional statements (if/else)

Looping and Branching in Bash

While loop
For loop
Case statements

How to Schedule Scripts using cron
How to Debug and Troubleshoot Bash Scripts
Conclusion

Resources for learning more about Bash scripting

Pre-requisites

To follow along with this tutorial, you should have the following accesses:

A running version of Linux with access to the command line.

If you do not have Linux installed or you are just starting out, you can easily access the Linux command line through Replit. Replit is a browser-based IDE where you can access the bash shell in a few minutes.

You can also install Linux on top of your Windows system using WSL (Windows Subsystem for Linux). Here is a tutorial for that.

Introduction

Definition of Bash scripting

A bash script is a file containing a sequence of commands that are executed by the bash program line by line. It allows you to perform a series of actions, such as navigating to a specific directory, creating a folder, and launching a process using the command line.

By saving these commands in a script, you can repeat the same sequence of steps multiple times and execute them by running the script.

Advantages of Bash scripting

Bash scripting is a powerful and versatile tool for automating system administration tasks, managing system resources, and performing other routine tasks in Unix/Linux systems. Some advantages of shell scripting are:

Automation: Shell scripts allow you to automate repetitive tasks and processes, saving time and reducing the risk of errors that can occur with manual execution.
Portability: Shell scripts can be run on various platforms and operating systems, including Unix, Linux, macOS, and even Windows through the use of emulators or virtual machines.
Flexibility: Shell scripts are highly customizable and can be easily modified to suit specific requirements. They can also be combined with other programming languages or utilities to create more powerful scripts.
Accessibility: Shell scripts are easy to write and don't require any special tools or software. They can be edited using any text editor, and most operating systems have a built-in shell interpreter.
Integration: Shell scripts can be integrated with other tools and applications, such as databases, web servers, and cloud services, allowing for more complex automation and system management tasks.
Debugging: Shell scripts are easy to debug, and most shells have built-in debugging and error-reporting tools that can help identify and fix issues quickly.

Overview of Bash shell and command line interface

The terms "shell" and "bash" are used interchangeably. But there is a subtle difference between the two.

The term "shell" refers to a program that provides a command-line interface for interacting with an operating system. Bash (Bourne-Again SHell) is one of the most commonly used Unix/Linux shells and is the default shell in many Linux distributions.

A shell or command-line interface looks like this:

The shell accepts commands from the user and displays the output

In the above output, zaira@Zaira is the shell prompt. When a shell is used interactively, it displays a $ when it is waiting for a command from the user.

If the shell is running as root (a user with administrative rights), the prompt is changed to #. The superuser shell prompt looks like this:

[root@host ~]#

Although Bash is a type of shell, there are other shells available as well, such as Korn shell (ksh), C shell (csh), and Z shell (zsh). Each shell has its own syntax and set of features, but they all share the common purpose of providing a command-line interface for interacting with the operating system.

You can determine your shell type using the ps command:

ps

Here is the output for me:

Checking the shell type. I'm using bash shell

In summary, while "shell" is a broad term that refers to any program that provides a command-line interface, "Bash" is a specific type of shell that is widely used in Unix/Linux systems.

Note: In this tutorial, we will be using the "bash" shell.

How to Get Started with Bash Scripting

Running Bash commands from the command line

As mentioned earlier, the shell prompt looks something like this:

[username@host ~]$

You can enter any command after the $ sign and see the output on the terminal.

Generally, commands follow this syntax:

command [OPTIONS] arguments

Let's discuss a few basic bash commands and see their outputs. Make sure to follow along :)

date: Displays the current date

zaira@Zaira:~/shell-tutorial$ date
Tue Mar 14 13:08:57 PKT 2023

pwd: Displays the present working directory.

zaira@Zaira:~/shell-tutorial$ pwd
/home/zaira/shell-tutorial

ls: Lists the contents of the current directory.

zaira@Zaira:~/shell-tutorial$ ls
check_plaindrome.sh  count_odd.sh  env  log  temp

echo: Prints a string of text, or value of a variable to the terminal.

zaira@Zaira:~/shell-tutorial$ echo "Hello bash"
Hello bash

You can always refer to a commands manual with the man command.

For example, the manual for ls looks something like this:

You can see options for a command in detail using man

How to Create and Execute Bash scripts

Script naming conventions

By naming convention, bash scripts end with .sh. However, bash scripts can run perfectly fine without the sh extension.

Adding the Shebang

Bash scripts start with a shebang. Shebang is a combination of bash # and bang ! followed by the bash shell path. This is the first line of the script. Shebang tells the shell to execute it via bash shell. Shebang is simply an absolute path to the bash interpreter.

Below is an example of the shebang statement.

#!/bin/bash

You can find your bash shell path (which may vary from the above) using the command:

which bash

Creating our first bash script

Our first script prompts the user to enter a path. In return, its contents will be listed.

Create a file named run_all.sh using the vi command. You can use any editor of your choice.

vi run_all.sh

Add the following commands in your file and save it:

#!/bin/bash
echo "Today is " `date`

echo -e "\nenter the path to directory"
read the_path

echo -e "\n you path has the following files and folders: "
ls $the_path

Script to print contents of a user supplied directory

Let's take a deeper look at the script line by line. I am displaying the same script again, but this time with line numbers.

  1 #!/bin/bash
  2 echo "Today is " `date`
  3
  4 echo -e "\nenter the path to directory"
  5 read the_path
  6
  7 echo -e "\n you path has the following files and folders: "
  8 ls $the_path

Line #1: The shebang (#!/bin/bash) points toward the bash shell path.
Line #2: The echo command is displaying the current date and time on the terminal. Note that the date is in backticks.
Line #4: We want the user to enter a valid path.
Line #5: The read command reads the input and stores it in the variable the_path.
line #8: The ls command takes the variable with the stored path and displays the current files and folders.

Executing the bash script

To make the script executable, assign execution rights to your user using this command:

chmod u+x run_all.sh

Here,

chmod modifies the ownership of a file for the current user :u.
+x adds the execution rights to the current user. This means that the user who is the owner can now run the script.
run_all.sh is the file we wish to run.

You can run the script using any of the mentioned methods:

sh run_all.sh
bash run_all.sh
./run_all.sh

Let's see it running in action 🚀

Bash Scripting Basics

Comments in bash scripting

Comments start with a # in bash scripting. This means that any line that begins with a # is a comment and will be ignored by the interpreter.

Comments are very helpful in documenting the code, and it is a good practice to add them to help others understand the code.

These are examples of comments:

# This is an example comment
# Both of these lines will be ignored by the interpreter

Variables and data types in Bash

Variables let you store data. You can use variables to read, access, and manipulate data throughout your script.

There are no data types in Bash. In Bash, a variable is capable of storing numeric values, individual characters, or strings of characters.

In Bash, you can use and set the variable values in the following ways:

Assign the value directly:

country=Pakistan

Assign the value based on the output obtained from a program or command, using command substitution. Note that $ is required to access an existing variable's value.

same_country=$country

This assigns the value of countryto the new variable same_country

To access the variable value, append $ to the variable name.

zaira@Zaira:~$ country=Pakistan
zaira@Zaira:~$ echo $country
Pakistan
zaira@Zaira:~$ new_country=$country
zaira@Zaira:~$ echo $new_country
Pakistan

Assigning and printing variable values

Variable naming conventions

In Bash scripting, the following are the variable naming conventions:

Variable names should start with a letter or an underscore (_).
Variable names can contain letters, numbers, and underscores (_).
Variable names are case-sensitive.
Variable names should not contain spaces or special characters.
Use descriptive names that reflect the purpose of the variable.
Avoid using reserved keywords, such as if, then, else, fi, and so on as variable names.

Here are some examples of valid variable names in Bash:

name
count
_var
myVar
MY_VAR

And here are some examples of invalid variable names:

2ndvar (variable name starts with a number)
my var (variable name contains a space)
my-var (variable name contains a hyphen)

Following these naming conventions helps make Bash scripts more readable and easier to maintain.

Input and output in Bash scripts

Gathering input

In this section, we'll discuss some methods to provide input to our scripts.

Reading the user input and storing it in a variable

We can read the user input using the read command.

#!/bin/bash
echo "Today is " `date`

echo -e "\nenter the path to directory"
read the_path

echo -e "\nyour path has the following files and folders: "
ls $the_path

Reading from a file

This code reads each line from a file named input.txt and prints it to the terminal. We'll study while loops later in this article.

while read line
do
  echo $line
done < input.txt

Command line arguments

In a bash script or function, $1 denotes the initial argument passed, $2 denotes the second argument passed, and so forth.

This script takes a name as a command-line argument and prints a personalized greeting.

echo "Hello, $1!"

We have supplied Zaira as our argument to the script.

#!/bin/bash
echo "Hello, $1!"

The code for the script: greeting.sh

Output:

Displaying output

Here we'll discuss some methods to receive output from the scripts.

Printing to the terminal:

echo "Hello, World!"

This prints the text "Hello, World!" to the terminal.

Writing to a file:

echo "This is some text." > output.txt

This writes the text "This is some text." to a file named output.txt. Note that the >operator overwrites a file if it already has some content.

Appending to a file:

echo "More text." >> output.txt

This appends the text "More text." to the end of the file output.txt.

Redirecting output:

ls > files.txt

This lists the files in the current directory and writes the output to a file named files.txt. You can redirect output of any command to a file this way.

Basic Bash commands (echo, read, etc.)

Here is a list of some of the most commonly used bash commands:

cd: Change the directory to a different location.
ls: List the contents of the current directory.
mkdir: Create a new directory.
touch: Create a new file.
rm: Remove a file or directory.
cp: Copy a file or directory.
mv: Move or rename a file or directory.
echo: Print text to the terminal.
cat: Concatenate and print the contents of a file.
grep: Search for a pattern in a file.
chmod: Change the permissions of a file or directory.
sudo: Run a command with administrative privileges.
df: Display the amount of disk space available.
history: Show a list of previously executed commands.
ps: Display information about running processes.

Conditional statements (if/else)

Expressions that produce a boolean result, either true or false, are called conditions. There are several ways to evaluate conditions, including if, if-else, if-elif-else, and nested conditionals.

*Syntax*:

if [[ condition ]];
then
    statement
elif [[ condition ]]; then
    statement 
else
    do this by default
fi

Syntax of bash conditional statements

We can use logical operators such as AND -a and OR -o to make comparisons that have more significance.

if [ $a -gt 60 -a $b -lt 100 ]

This statement checks if both conditions are true: a is greater than 60 AND b is less than 100.

Let's see an example of a Bash script that uses if, if-else, and if-elif-else statements to determine if a user-inputted number is positive, negative, or zero:

#!/bin/bash

echo "Please enter a number: "
read num

if [ $num -gt 0 ]; then
  echo "$num is positive"
elif [ $num -lt 0 ]; then
  echo "$num is negative"
else
  echo "$num is zero"
fi

Script to determine if a number is positive, negative, or zero

The script first prompts the user to enter a number. Then, it uses an if statement to check if the number is greater than 0. If it is, the script outputs that the number is positive. If the number is not greater than 0, the script moves on to the next statement, which is an if-elif statement. Here, the script checks if the number is less than 0. If it is, the script outputs that the number is negative. Finally, if the number is neither greater than 0 nor less than 0, the script uses an else statement to output that the number is zero.

Seeing it in action 🚀

Looping and Branching in Bash

While loop

While loops check for a condition and loop until the condition remains true. We need to provide a counter statement that increments the counter to control loop execution.

In the example below, (( i += 1 )) is the counter statement that increments the value of i. The loop will run exactly 10 times.

#!/bin/bash
i=1
while [[ $i -le 10 ]] ; do
   echo "$i"
  (( i += 1 ))
done

While loop that iterates 10 times.

For loop

The for loop, just like the while loop, allows you to execute statements a specific number of times. Each loop differs in its syntax and usage.

In the example below, the loop will iterate 5 times.

#!/bin/bash

for i in {1..5}
do
    echo $i
done

For loop that iterates 5 times.

Case statements

In Bash, case statements are used to compare a given value against a list of patterns and execute a block of code based on the first pattern that matches. The syntax for a case statement in Bash is as follows:

case expression in
    pattern1)
        # code to execute if expression matches pattern1
        ;;
    pattern2)
        # code to execute if expression matches pattern2
        ;;
    pattern3)
        # code to execute if expression matches pattern3
        ;;
    *)
        # code to execute if none of the above patterns match expression
        ;;
esac

Case statements syntax

Here, "expression" is the value that we want to compare, and "pattern1", "pattern2", "pattern3", and so on are the patterns that we want to compare it against.

The double semicolon ";;" separates each block of code to execute for each pattern. The asterisk "*" represents the default case, which executes if none of the specified patterns match the expression.

Let's see an example.

fruit="apple"

case $fruit in
    "apple")
        echo "This is a red fruit."
        ;;
    "banana")
        echo "This is a yellow fruit."
        ;;
    "orange")
        echo "This is an orange fruit."
        ;;
    *)
        echo "Unknown fruit."
        ;;
esac

Example of case statement

In this example, since the value of "fruit" is "apple", the first pattern matches, and the block of code that echoes "This is a red fruit." is executed. If the value of "fruit" were instead "banana", the second pattern would match and the block of code that echoes "This is a yellow fruit." would execute, and so on. If the value of "fruit" does not match any of the specified patterns, the default case is executed, which echoes "Unknown fruit."

How to Schedule Scripts using cron

Cron is a powerful utility for job scheduling that is available in Unix-like operating systems. By configuring cron, you can set up automated jobs to run on a daily, weekly, monthly, or specific time basis. The automation capabilities provided by cron play a crucial role in Linux system administration.

Below is the syntax to schedule crons:

# Cron job example
* * * * * sh /path/to/script.sh

Here, the *s represent minute(s) hour(s) day(s) month(s) weekday(s), respectively.

Below are some examples of scheduling cron jobs.

SCHEDULE

DESCRIPTION

EXAMPLE

0 0 * * *

Run a script at midnight every day

0 0 * * * /path/to/script.sh

*/5 * * * *

Run a script every 5 minutes

*/5 * * * * /path/to/script.sh

0 6 * * 1-5

Run a script at 6 am from Monday to Friday

0 6 * * 1-5 /path/to/script.sh

0 0 1-7 * *

Run a script on the first 7 days of every month

0 0 1-7 * * /path/to/script.sh

0 12 1 * *

Run a script on the first day of every month at noon

0 12 1 * * /path/to/script.sh

Using crontab

The crontab utility is used to add and edit the cron jobs.

crontab -l lists the already scheduled scripts for a particular user.

You can add and edit the cron through crontab -e.

You can read more about corn jobs in my other article here.

How to Debug and Troubleshoot Bash Scripts

Debugging and troubleshooting are essential skills for any Bash scripter. While Bash scripts can be incredibly powerful, they can also be prone to errors and unexpected behavior. In this section, we will discuss some tips and techniques for debugging and troubleshooting Bash scripts.

Set the `set -x` option

One of the most useful techniques for debugging Bash scripts is to set the set -x option at the beginning of the script. This option enables debugging mode, which causes Bash to print each command that it executes to the terminal, preceded by a + sign. This can be incredibly helpful in identifying where errors are occurring in your script.

#!/bin/bash

set -x

# Your script goes here

Check the exit code

When Bash encounters an error, it sets an exit code that indicates the nature of the error. You can check the exit code of the most recent command using the $? variable. A value of 0 indicates success, while any other value indicates an error.

#!/bin/bash

# Your script goes here

if [ $? -ne 0 ]; then
    echo "Error occurred."
fi

Use `echo` statements

Another useful technique for debugging Bash scripts is to insert echo statements throughout your code. This can help you identify where errors are occurring and what values are being passed to variables.

#!/bin/bash

# Your script goes here

echo "Value of variable x is: $x"

# More code goes here

Use the `set -e` option

If you want your script to exit immediately when any command in the script fails, you can use the set -e option. This option will cause Bash to exit with an error if any command in the script fails, making it easier to identify and fix errors in your script.

#!/bin/bash

set -e

# Your script goes here

Troubleshooting crons by verifying logs

We can troubleshoot crons using the log files. Logs are maintained for all the scheduled jobs. You can check and verify in logs if a specific job ran as intended or not.

For Ubuntu/Debian, you can find cronlogs at:

/var/log/syslog

The location varies for other distributions.

A cron job log file can look like this:

2022-03-11 00:00:01 Task started
2022-03-11 00:00:02 Running script /path/to/script.sh
2022-03-11 00:00:03 Script completed successfully
2022-03-11 00:05:01 Task started
2022-03-11 00:05:02 Running script /path/to/script.sh
2022-03-11 00:05:03 Error: unable to connect to database
2022-03-11 00:05:03 Script exited with error code 1
2022-03-11 00:10:01 Task started
2022-03-11 00:10:02 Running script /path/to/script.sh
2022-03-11 00:10:03 Script completed successfully

Cron log

Conclusion

In this article, we started with how to access the terminal and then ran some basic bash commands. We also studied what a bash shell is. We briefly looked at branching the code using loops and conditionals. Finally, we discussed automating the scripts using cron followed by some troubleshooting techniques.

Resources for learning more about Bash scripting

If you want to dig deeper into the world of bash scripting, I would suggest you have a look at this 6-hour course on Linux at freeCodeCamp.

What’s your favorite thing you learned from this tutorial? You can also connect with me on any of these platforms. 📧�

See you in the next tutorial, happy coding 😁

Banner image credits: Image by Freepik

DEV Community: zaira

JavaScript "textContent" vs "innerHTML"

textContent vs innerHTML

Example of textContent

Example of innerHTML

Wrapping up

Create a chessboard using CSS Grid

Step1: Define the grid container.

Step2: Define rows and columns using fr- fractional ratios

Step3: Define classes for alternating boxes.

Wrapping up

How to Use Linux on a Windows Machine – 5 Different Approaches

Option 1: "Dual-boot" Linux + Windows

Option 2: Use Windows Subsystem for Linux (WSL)

Option 3: Use a Virtual Machine (VM)

Option 4: Use a Browser-based Solution

Online code editors

Web-based Linux terminals

Option 5: Use a Cloud-based Solution

How to Choose the Correct Method

My Setup

Wrapping Up

Flex-box layout properties and live demo

Ordering content with order:0... using flexbox

Enabling wrap with flex-wrap using flexbox

Justifying content using flexbox

Aligning content across a container using flexbox

Demo

Wrapping up

Media Queries in CSS

Table of contents

Targeting smaller screens with media queries

Targeting larger screens with media queries

Targeting a screen range using media queries

See media queries in action

Display in CSS

Table of contents

Inline display in CSS

Block display in CSS

Inline-block display in CSS

CSS Positioning

Table of contents

Static positioning in CSS

Relative positioning in CSS

Absolute positioning in CSS

Z-index

Fixed positioning in CSS

Wrapping up

Cascading in CSS

Position

Specificity

Type

Importance- adding the important keyword

Linux `Vimdiff` Command – How to Compare Two Files in the Command Line

What is vimdiff?

Vimdiff syntax

How to show line numbers by default in Vim on Linux

Vimdiff Operations

How to split screens horizontally

How to navigate in diff window

How to apply changes from diff window

How to undo changes

How to open and close folds

How to exit the diff window

Wrapping up

Vim tutorial- learn Vim the easy way

Advantaged of using Vim?

How to start using Vim ?

Moving to Start or End of Line in Vim

Vim modes

Command Mode.

Edit Mode

Visual mode

Extended command mode.

Some common operations using Vim

1. How to copy and paste in Vim?

2. How to search for text in Vim?

3. How to exit Vim?

Using hjkl for navigation

Time for action !! 😁

`textContent` vs `innerHTML`

Example of `textContent`

Example of `innerHTML`

Step2: Define rows and columns using `fr`- fractional ratios

Ordering content with `order:0...` using flexbox

Enabling wrap with `flex-wrap` using flexbox

Importance- adding the `important` keyword

`Vimdiff` syntax

`Vimdiff` Operations

Set the `set -x` option

Use `echo` statements

Use the `set -e` option