DEV Community: Manik

One Way Data Tables And Variables

Manik — Fri, 07 Apr 2023 12:19:26 +0000

What Are One-Way Data Tables?

One-way data tables are a statistical tool used to analyse the impact of one variable on another variable. A one-way data table consists of one input cell and one or more result cells. The input cell contains the variable that is being
changed, while the result cells contain the formulas or calculations that use the input cell.

As an example, consider a company that wants to evaluate the impact of different interest rates on their monthly loan payments. The interest rate is the input cell, while the monthly loan payment is the result cell. The company can create a one way data table to see how changes in the interest rate affect the monthly loan payment.

Interest Rate (%)	Monthly Loan Payment ($)
5	499.55
6	506.69
7	513.86
8	521.08
9	528.34

Read Complete Article On My Blog

https://cloudaffle.com/series/statistics-and-probability/one-way-data/

The Difference Between the Shell and the Terminal

Manik — Sat, 19 Nov 2022 06:58:13 +0000

Whenever we give commands to a computer to perform a specific task using text, we refer to it as using the command line interface. When using a command line interface, we use text commands to make our programs work instead of a Graphical User Interface. Using the command line is a different way of interacting with the computer. In the Linux world, when we refer to the command line interface, we refer to a shell and, in most cases, to a bash shell. But often, we use a program to interact with the shell, called a terminal emulator. The shell and the terminal are different from each other but are often used interchangeably.

Understanding The Shell

In one of our previous articles in this series, we discussed what an operating system is and why Linux Operating Systems Are Called Distributions. We know that the kernel is the most crucial component of the operating system. The kernel recognizes all the physical hardware on a computer and enables each component to speak to one another. At the root, the kernel grabs the instructions passed to it and gets them processed by the hardware.

The user does not interface with the kernel directly. There is a program called the shell between the user and the kernel, which is responsible for taking the inputs from the user and passing them on to the kernel. Simply put, the shell is a program that takes commands from the keyboard and gives them to the kernel to perform. It acts as an interface between the user and the kernel.

The Bash Shell

Most of the Linux distributions come with a shell called the bash shell. Bash is originally the GNU Project shell and was inspired by and built to mimic the original Unix shell program, sh, written by Steve Bourne. Since it was highly inspired by the sh, which was written by Steve Bourne, the folks at the GNU project decided to name the new shell bash, which is an acronym for Bourne Again Shell.

Many alternatives to the bash shell can be used with the Linux kernel, such as ZSH (ZShell), Fish, KSH (Korn Shell), etc. Different shell programs offer different features, but the basic commands and how to interact with the shell remain the same.

The Terminal (Emulator)

Different distributions of Linux come with a Desktop Envornioment installed with it, such as Ubuntu. Ubuntu's Desktop Environment is a modified version of GNOME which stands for GNU Network Object Model Environment. GNOME is a graphical user interface (GUI) and set of computer desktop applications for users of the Linux operating system. When using a Graphical User Interface (GUI) such as GNOME, you need software that can interact with the shell and pass commands that the kernel can execute. This program is called an emulator because it emulates the shell environment for you on your desktop interface.

Terminal software is a perfect example of an emulator. Terminal ships by default with the Ubuntu Desktop environment and can be used to access the shell. Many emulators are available, and the terminal is just one of them. What is essential to understand is that the emulator is not the shell. It's just a piece of software that enables you to emulate and communicate with the shell in your desktop environment.

What Can You Do Next 🙏😊

If you liked the article, consider subscribing to Cloudaffle, my YouTube Channel, where I keep posting in-depth tutorials and all edutainment stuff for software developers. You can also follow me on Hashnode; my profile handle - @Cloudaffle. Leave a like if you liked the article; it keeps my motivation high 👍.

Why is Ubuntu a Distribution and Windows an Operating System?

Manik — Fri, 11 Nov 2022 11:25:41 +0000

What is a Linux distribution? Why Linux has so many distributions? Why is Ubuntu called a Linux distribution and not an operating system?

Linux has a lot of distributions to cater to different types of users. We have Ubuntu which has a full-blown graphical user interface making it perfect for desktop users and beginners to Linux, especially the ones coming from Windows and macOS. Then we have distributions like Red Hat Enterprise Linux, abbreviated as RHEL. Red Hat is a Linux distro designed for Enterprise or commercial purposes. Red Hat is usually a top choice for server environments, given its stability and regular security patches, which boost its overall security. We also have a distribution called Kali Linux. Kali Linux is a Debian-based Linux distro designed for penetration testing and conducting digital forensics. It ships with out-of-the-box tools meant for penetration testing. Kali Linux is meant for Cybersecurity experts and students who want to venture into penetration testing.

Unlike other commercial operating systems, you would notice that Linux has different flavors that often cater to specific audiences. On the other hand operating systems like macOS and Windows usually come in one solution fits all package. Windows has a different server solution, but at the end of the day, it's Windows that has been modified and contains some special programs to run on a server. The offerings are not varied and user-specific, like Linux distributions, and are all maintained by one company that is Microsoft in the case of Windows and Apple in the case of macOS.

What is an Operating System

To understand Linux, it's crucial to understand what is an operating system. By definition of it, an operating system (OS) is software that manages a computer's hardware resources. An operating system performs two distinct operations:

1. An Operating System acts as an interface between the user and the applications.

Let's understand these operations. The first operation is about allowing the user to interact with the hardware and the application on the system. Using an operating system, a user can use the input hardware, such as the keyboard and mouse, and see the output using a monitor. The user can also pass instructions to various applications, such as a web browser, and get the required output.

2. An Operating System provides an interface for applications to access hardware resources like the CPU, RAM, printer, and storage.

Secondly, the operating system provides an interface for the applications to interact with the hardware. It takes instructions from applications that need to be processed by a computer's hardware. Then, it converts these instructions to machine-readable format and sends them to the hardware to be processed and sent back to the applications.

Why Linux is a Distribution

If you have noticed, I have been calling different flavors of Linux as distributions, and referred to Windows and macOS as operating systems. Is a distribution like Ubuntu not an operating system? The answer lies in the history of Linux.

Linux is Just A Kernel

The first version of Linux was released by Linus Torvalds in the year 1991. Since its inception and first release, Linux has always been a kernel, not a full-blown operating system. Now we already understand what an operating system does, and the most crucial component of the operating system is the kernel. The kernel is responsible for interacting with bare metal or computer hardware. It converts the instructions received by applications and converts the instructions to a binary format which is understood by the hardware. Linus is a kernel and not the complete operating system. Since all the Linux distros use the Linux kernel under the hood and combine it with other operating system components, such as the shell, desktop environments, etc, they are called Linux Distributions and not the operating systems.

All the Linux distributions use the Linux kernel under the hood. Hence, they are more of a distribution with the same kernel but different implementations to provide the user with a complete operating system.

What Can You Do Next 🙏😊

How Did Linux Become So Popular

Manik — Fri, 04 Nov 2022 14:31:54 +0000

How Linux, which started as a hobby 🌈 project, became a beast that no one in the tech industry could ignore. Not even Bill Gates 🚀.

Linus Torvalds started developing Linux so that he could use a similar environment for his personal computer that he was used to using at Helsinki University. He tried to find an operating system similar to the university computers but could not find one, so he decided to build his own kernel. The story of the idea of open-source software started taking shape in the 1980s is fascinating but what is more intriguing is how this hobby project started by Linus Torvalds became a mammoth that we witness today. Compelled by my curiosity, I decided to do some research and funneled down to four major events that propelled the growth of Linux to transform it into one of the most significant community-driven projects in the history of mankind.

Linus Torvalds made the first version of the Linux kernel available in 1991. Once it was released, it was picked up by the community and got notable traction from the developers working on the GNU Operating system who already had all the components of building an operating system ready but did not have a kernel. From 1991 to 1993, Linux was still in its beta phase where it was not ready to go out as a complete operating system. During its initial years, Linux was still an operating system used mainly by enthusiasts, but something was about to change.

The Apache Web Server

For Linux to grow out of the world of enthusiasts and to be adopted by businesses, it needed a real-world use that would make it a must-have technology. That threshold was crossed in 1995 with the development of the Apache Webserver. Since internet adoption was increasing, this because a significant turning point in the history of Linux. Apache was the first application that gave businesses some tangible benefits from using Linux. Now with Linux when you went out to build a server farm using Linux with Apache, it was much more cost effective than building one using Windows NT and the expensive hardware it came with. This meant you had to train your staff for server administration using Linux. Still, the cost of training was much less than the money data centers saved on purchasing Windows licenses and overpriced hardware. But the good news was that hiring new people and training the staff wasn't very expensive since students and enthusiasts were already familiar with Linux as it was used widely at the universities.

This fuelled the adoption of Linux because of the internet boom. It made sense for the large corporations, internet service providers, and budding e-commerce companies back then to run their applications using Linux to save costs. Since the community of developers contributing to Apache and Linux was usually the same, the performance you got from running Apache on Linux was far better than running it on other operating systems.

The Cathedral and The Bazaar

"The Cathedral and The Bazaar" was a white paper written by Eric Steven Raymond, and it was his anthropological analysis of what made the free software movement work. Being a software developer and a GNU Contributor, he was amused by how Linux could survive and thrive with so many software developers contributing to it. Eric was amused that all the rules he had learned about the software development process, which included controlling complexity, keeping the project groups small, and having closely managed objectives, were all falling apart. If he evaluated Linux based on his experience in software development, then Linux should have been a disaster, but it wasn't; it was something incredible. He was determined to figure out how this worked, so he wrote his white paper. The Cathedral and The Bazaar highlighted two contrasting software development styles.

The Cathedral Model - The Cathedral model was the conventional and closed software development model. In the cathedral model, you have tight specifications of objectives within small project groups which are run in a relatively hierarchical and authoritarian manner.
The Bazaar - He termed what was happening in the Linux world as the Bazaar Model. The word "bazaar" means an open market. This was a very open and peer-to-peer kind of software development model, where you had very short release cycles and constant contribution and feedback from people who were developing and using the software simultaneously.

This whitepaper was vital because it was the final push for Netscape Communications Corporation to release the source code for Netscape Communicator and start the Mozilla project.

Netscape Communicator and The Mozilla Project

The next significant event was the day Netscape Communicator decided to open-source its code and create the Mozilla project. This event was important because Netscape was the first big organization to open-source the source code of its products. Netscape went open-source to fight Microsoft, which was giving away internet explorer for free with its operating system but never releasing the source code for Internet Explorer. Netscape feared that no one would buy Netscape Communicator because Internet Explorer came free with Windows and eventually would have created a monopoly lock over the internet. This would have created a survival crisis for Netscape and driven it out of the server market, where it made most of its profits back then. This decision made by Netscape to go open source gave Linux the credibility and the confidence it needed amongst venture capitalists, who then started taking open-source software seriously.

Release Of MySQL

Another parallel event that led to cementing Linux as the go-to operating system for the datacenters was the release of an open-source Relation Database Management System A.K.A (RDBMS) called MySQL. MySQL was the first open-source RDBMS based on Structured Query Language(SQL), which was a direct competition to Oracle and MSSql. Web application developers now had a database that they could use in their applications without worrying about licenses, which also brought down the development costs. This started a chain reaction where other database vendors, such as Oracle and Sybase, started porting their databases to run on Linux.

What Can You Do Next 🙏😊

How to Assign Types To Nested Objects In TypeScript

Manik — Wed, 02 Nov 2022 10:26:21 +0000

Objects are what you are dealing with working as a JavaScript developer, and needless to say, that holds true for TypeScript as well. TypeScript provides you with multiple ways to define type definitions for object properties. We'll look at a couple of them throughout this post, starting with simple examples and moving on to some advanced type definitions.

Using the `type` Keyword

Object properties can be assigned type definitions using the type keyword in TypeScript. This is the easiest and preferred method to assign type definitions when dealing with simple objects. Here is an example of an Airplane type and an airplane object.

// Defining Airplane Type
type Airplane = {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
};

// Creating airplane Object
const airplane: Airplane = {
  model: "Airbus A380",
  flightNumber: "A2201",
  timeOfDeparture: new Date(),
  timeOfArrival: new Date(),
};

Nested Objects

If your object has a nested object, you can nest the type definitions using the type keyword itself. Here is an example of a nested object called caterer inside the Airplane type definition.

type Airplane = {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
  caterer: {
    name: string;
    address: string;
    phone: number;
  };
};

const airplane: Airplane = {
  model: "Airbus A380",
  flightNumber: "A2201",
  timeOfDeparture: new Date(),
  timeOfArrival: new Date(),
  caterer: {
    name: "Special Food Ltd",
    address: "484, Some Street, New York",
    phone: 1452125,
  },
};

Abstracting Nested Objects Into Separate Types

If you have large objects defining nested type definitions can become cumbersome. In such a case, you can define a separate Caterer type for the nested object. This will also abstract away the Caterer type from the Airplane type, allowing you to use the Caterer type in the other parts of your code.

type Airplane = {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
  caterer: Caterer;
};

const airplane: Airplane = {
  model: "Airbus A380",
  flightNumber: "A2201",
  timeOfDeparture: new Date(),
  timeOfArrival: new Date(),
  caterer: {
    name: "Special Food Ltd",
    address: "484, Some Street, New York",
    phone: 1452125,
  },
};

Using Index Signatures With Nested Objects

Index signatures can be used when you are unsure of how many properties an object will have but you are sure of the type of properties of an object. We can define another type called Seat, which can be the details of the passenger traveling on each seat of the Airplane type. We can use index signature to assign string type to all seat properties.

type Caterer = {
  name: string;
  address: string;
  phone: number;
};

type Seat = {
  [key: string]: string;
};

type Airplane = {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
  caterer: {
    name: string;
    address: string;
    phone: number;
  };
  seats: Seat[];
};

const airplane: Airplane = {
  model: "Airbus A380",
  flightNumber: "A2201",
  timeOfDeparture: new Date(),
  timeOfArrival: new Date(),
  caterer: {
    name: "Special Food Ltd",
    address: "484, Some Street, New York",
    phone: 1452125,
  },
  seats: [
    {
      name: "Mark Allen",
      number: "A3",
    },
    {
      name: "John Doe",
      number: "B5",
    },
  ],
};

Interfaces to Assign Types to Object Properties

If you need to create classes to generate objects, using interfaces instead of the type keyword would be a better option. Here is an example of an airplane object created using the Airplane class, which extends the IAirplane interface.

interface IAirplane {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
}

class Airplane implements IAirplane {
  public model = "Airbus A380";
  public flightNumber = "A2201";
  public timeOfArrival = new Date();
  public timeOfDeparture = new Date();
}

const airplane: Airplane = new Airplane();

Nested Objects Using Interfaces

Just like we used the type keyword, interfaces can also be used to strictly type nested objects with classes.

interface ICaterer {
  name: string;
  address: string;
  phone: number;
}

interface ISeat {
  name: string;
  number: string;
}

interface IAirplane {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
}

class Caterer implements ICaterer {
  public name = "Special Food Ltd";
  public address = "484, Some Street, New York";
  public phone = 1452125;
}

class Seat implements ISeat {
  public name = "John Doe";
  public number = "A3";
}

class Airplane implements IAirplane {
  public model = "Airbus A380";
  public flightNumber = "A2201";
  public timeOfArrival = new Date();
  public timeOfDeparture = new Date();
  public caterer = new Caterer();
  public seats = [new Seat()];
}

const airplane: Airplane = new Airplane();

What Can You Do Next 🙏😊

GNU Project and Linux- The Reasons For A Thriving Community

Manik — Tue, 01 Nov 2022 13:20:24 +0000

A tribute to the GNU project, the free software movement, and Richard Matthew Stallman (RMS)

For us developers today, open source is an ingrained instinct. We have a thriving community of developers, with hundreds of thousands of developers contributing to open-source code daily. The community that is a part of our development process never actually existed and might not have existed had it not been for the philosophies of Richard Matthew Stallman (RMS). To give you the perspective of what this gentleman preached, think about a situation, where you have to program without using millions of open source troubleshooting threads available to you on the internet, including the ones on Stackoverflow.

Linus Torvalds famously said, "Think of Richard Stallman as the great philosopher and think of me as the engineer."

The GNU Project

The moment we talk about open-source, the first thing that comes to mind is Linux and Linus Torvalds. Though Linus Torvalds created Linux and engineered the kernel on which most of the servers work today, Richard Stallman promoted the concept of free software and started the moment in 1985. Back then, Richard Stallman created the legal, technological and philosophical foundation for the free software movement through the GNU Operating System. Without these contributions, it's unlikely that Linux and Open-Source would have evolved into the current forms that we see today.

The Story Behind GNU

Richard Stallman joined the MIT Artificial Intelligence Lab in 1971, a thriving community of hackers (people who loved programming) back then. In the late 1970s and early 1980s, Richard Stallman did some artificial intelligence research and programming at the MIT Artificial Intelligence Lab. During this time, Richard had some negative experiences with the proprietor software and Unix operating system. Some code he wanted to work on and fix was locked up, and he could not make the required changes. Even though the company which owned the software would have benefitted from the changes Richard proposed, he was denied access to the source code. The situation soured him about the whole idea of proprietary software. Because of experiences like this, he developed a profound hostility toward the concept of intellectual property and software. In retaliation, he founded the Free Software Foundation.

Stallman was an operating system developer and thought of developing another operating system that would be available for everyone in the community to use freely and tweak the source code as they wished.

He thought of creating a community that could use the new operating system without the moral dilemma of not being able to share it with other people within the community.

Richard Stallman quit his job at MIT University in January 1984 and started working on the GNU Operating System. The work GNU itself is a hack, a recursive acronym, and it stands for GNU - Gnu's Not Unix. This was a hit at the At&t labs, which owned the Unix operating system and was proprietary.

The name meant that Stallman was designing an operating system that was like Unix but was not Unix because GNU was not proprietary, unlike Unix.

What Was The Plan

So what was the plan? How did Stallman intend to build an operating system like Unix himself? Unix consisted of multiple programs bound together into an operating system. Stallman started by writing a replacement for each program and invited the other software developer from within the community to join him. As others saw the progress, many software developers started joining him, and by 1991, as Stallman states, they had rewritten entirely almost all of Unix's components. This included the C-Compiler, a debugger, a text editor, mailers, and many other programs. The crucial thing about the GNU Operating system is that it's free software. Free software means the users have the freedom to run, copy, distribute, study, change and improve the software. Free software is a matter of liberty, not price.

To understand the concept, you should think of "free" as in "free speech," not as in "free beer." - Richard Stallman

Protection From Thieves - GNU General Public License

Since free software does not mean "free beer," the software does have an owner, and it does have a license as well. Free software is not public domain. As Stallman says, the problem with putting the software in the public domain is that someone else will pick it up, modify it, and then sell it as proprietary software. If free software is eventually converted to proprietary software by someone, it would have defeated the whole idea of the free software movement. To prevent this, Stallman decided to use a technique called "Copyleft," which is a kind of the opposite of "Copyright." For this purpose, Stallman decided to make it mandatory for anyone redistributing the software to include a copy of GNU General Public License along with the software. This way, it ensured that whoever received a copy of the software also got the right to use it freely, as initially stated in the license with the original copy.

The Missing Kernel

The GNU project started by developing an essential toolkit for creating an operating system. Tools included a text editor, a C-compiler, a debugger, and other necessary apparatus. The intention was to ultimately build a kernel that would sit below all these programs developed by the developers involved in the GNU project and convert it into a complete operating system. The entire toolkit was completed by the 1990s and was being used widely, but the problem was that it was still using the Unix kernel. This is the point where Linus Torvalds jumped into the story.

Monolithic VS Microkernel

While the GNU project had the essential toolkit for kernel development ready, Linus Torvalds was the one who developed the kernel before the people involved in the GNU project. Torvalds points out that the initial idea behind building Linux was to use a similar environment for his personal computer that he was used to using at the Helsinki University. He tried to find software similar to the university computers but could not find one, so he decided to write his kernel. Since computers at Helsinki University used SunOS, most of the inspiration for Linux initially came from it. SunOS used to be a Unix-based proprietary operating system owned by Sun Microsystems.

Linus Torvalds developed a monolithic kernel, meaning the entire kernel was one extensive program, while the members of the GNU project were trying to build a Micro Kernel. This is why Linus Torvalds developed the kernel faster than his counterparts working on the microkernel. The microkernel consists of many small services that interact asynchronously, making the development difficult and time-consuming. Richard Stallman stated that Linus Torvalds developed the kernel much faster than he could, so eventually, the community decided to use the Linux kernel as a part of the GNU Operating System.

The Relationship Between GNU and Linux

Ironically, Linus Torvalds started developing Linux independently while the GNU project needed a kernel. Linus Torvalds believed in the same philosophy laid down by Richard Stallman under the GNU project of free and open software. That's the reason they rely heavily on each other. The GNU operating system would not have been possible without a Linux kernel, and Linus would not have been able to develop Linux without the free and open-source C-Compiler the developers involved in the GNU project created.

They set a perfect example of how a community can thrive through small contributions made by each member. This concept of open source community is a part of the DNA software development today, and the credit goes to the philosophies and contributions of Richard Stallman.

Speaking Of Community 🙏😊

If you liked the article, consider subscribing to Cloudaffle, my YouTube Channel, where I keep posting in-depth tutorials and all stuff that is edutainment for software developers. You can also follow me on Hashnode; here is my profile handle @cloudaffle Leave a like if you liked the article; it keeps my motivation high 👍.

How to Install MySQL 8 on macOS Using Homebrew

Manik — Mon, 31 Oct 2022 13:52:02 +0000

A step-by-step guide 📙 on how to install, configure and run MySQL 8 server on macOS using Homebrew 🍺

I use Homebrew on macOS to manage all the packages I need for development. Once you understand how Homebrew works and how it helps you manage various packages on macOS, installing any dependency on your Mac becomes easy. We will install Homebrew and learn a few essential commands on how we can use Homebrew. Once through with installing Homebrew, we would then move on to install MySQL server using Homebrew and configure it.

What is Homebrew?

Homebrew is a package manager for macOS and Linux (I know you would instead use apt-get or yum based on which Linux distro you are using), but just putting it on record that it works with Linux as well 😊. Why would you use a package manager like Homebrew when all the packages come with their independent .pkg files, and these files can be used to install each package independently? We use a package manager because of a couple of advantages package managers have to offer over independently installing each page.

The main difference between Homebrew and the installer package is the fact that Homebrew takes care of the build time dependencies. If the package you are trying to install requires ruby and some of its dependencies, Homebrew does not require you to build/install ruby and libraries from scratch. Homebrew makes the process of installing packages easy.
Every installed package is cleanly sandboxed into its cellar (directory), so you don't have stray files all over your system, just symlinks from bin, man, etc. In the case of macOS with Apple Silicon, all the packages are installed in /opt/homebrew/cellar directory. Hence you know where all packages are installed.
Homebrew lets you install all the packages with root access and Homebrew installs without root access as well into /usr/local (Intel) or /opt/homebrew (Apple Silicon)
Uninstalling is hardly an issue anymore. Homebrew will manage the uninstall process and trim the run time dependencies if needed.
Homebrew provides you with many tools to manage all the packages installed on your machine, which includes various commands to list the packages installed, uninstall them, upgrade packages, search for packages, and so on.

Step One: Installing the Xcode Command Line Tools

Before we install any package or Homebrew itself, we first need to install the Xcode Command Line Tools. To do so open the Terminal app on your Mac and run the following command.

xcode-select --install

Step Two: Install Homebrew

If you do not have Homebrew installed on your machine, you can follow along, but if you have Homebrew installed and already working with it, you can move on to the next step. You can check if Homebrew is installed on your machine by running the following command in your Terminal.

brew --version

If Homebrew is installed on your Mac, you should get a response containing the version of the Homebrew installed on your machine, which should look like this.

Homebrew >=3.x.x

// Where 3.x.x is the version of the Homebrew installed on your machine. 
// Anything above 3 is good

If Homebrew is already installed, you can move to the next step. If not, hang on while we install Homebrew. To install Homebrew, run the following command in your Terminal.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

The above command should install Homebrew for you and add it to the Path. If you are curious about Homebrew's steps while installing your machine, you can read them here. Once Homebrew is installed restart the Terminal app and rerun the following command to check if Homebrew was installed successfully on your machine.

brew --version

If Homebrew is installed on your Mac, you should get a response that will contain the homebrew version installed on your machine and should look like this.

Homebrew >=3.x.x

// Where 3.x.x is the version of the Homebrew installed on your machine. 
// Anything above 3 is good

Step Three: Install MySQL 8

Once Homebrew is installed, we will use it to install MySQL 8 on our machine. We would use the MySQL formula to install MySQL on our Mac. Still, run the following command in your Terminal to start the MySQL installation.

brew install mysql

Step Four: Configure MySQL

The above command will install the latest version of MySQL on your Mac. Once MySQL is installed, we need to run the secure installation to assign a password to the root user and create and connect to databases using the root user. You might decide to create another user and not use the root user. But, for this tutorial and assuming that you are installing MySQL on macOS for development workloads, I will stick to using the root user. To secure your MySQL installation, run the following command.

mysql_secure_installation

Once you run this above command, you will be requested to assign a password to the root user, and you will see the following prompt in your terminal window. You can enter your preferred password for the root user. This will be the password you will use to connect to your database and perform all operations with MySQL.

Next, MySQL asks you if you want to enable the Validate Password Component. The validate password component helps you ensure that users of MySQL use passwords with minimum strength and characters. This is super helpful for production loads where many users are using MySQL, and you want to force strong passwords for all the users. Feel free to use it for production environments, but I will skip it for this tutorial because I am assuming you are configuring MySQL for development and not production.

So as a response to this question, I will type No and press return. At this point, MySQL will ask you whether you want to keep the password you just entered for the root user or you want to set a new password. Since we want to keep the password we already assigned to the root user, type in No in your Terminal and press enter.

By default, MySQL creates anonymous users, and now it will ask you whether you want to remove the anonymous users. We can remove the anonymous users as we don't need them and reply to this prompt with a Yes and press the return key.

Then you get a prompt asking whether you want to disable the remote login for the root user. We will go ahead and disable the remote access for the root user, reply to this prompt with a Yes, and press the return key.

As the next step, you are asked if you want to remove the test database MySQL created. Reply to this with a Yes as well, which should remove the test database.

Finally, you are prompted to reload the privileges table for all the changes to take effect. Reply to this with a Yes and press the return key.

With this, we have successfully installed MySQL 8 using Homebrew. Now let's go ahead and create a new database.

Step Five: Create a New Database

To create a new database with MySQL, we need to sign in as a root user to MySQL in our Terminal. To sign in as a root user, use the following command:

mysql -u root -p

Once you use this command, you will be prompted to enter your password. Enter the root password you created during the installation process. Once you enter the password, you should be logged into MySQL, and your terminal prompt should now show mysql like so:

Once you see the above prompt, you can create a new database using the following command.

CREATE DATABASE db_name;
// db_name is the name of your database; name it whatever you want to

You should get the following response from MySQL:

Query OK, 1 row affected (0.01 sec)

That's it; you have a new database that you can use with the root as the username and password assigned to the root user.

Subscribe 🙏😊

If I could help you, consider subscribing to Cloudaffle, my YouTube Channel, where I keep posting in-depth tutorials, and all stuff is edutainment for software developers. You can also follow me on Hashnode; here is my profile handle @Cloudaffle Leave a like if you liked the article; it keeps my motivation high 👍.

The New Satisfies Operator Will Satisfy You (Cheesy)

Manik — Mon, 31 Oct 2022 05:14:38 +0000

I know the title of the post is cheesy 😛 but let me assure you once you know what the satisfies operator does, you will get the context.

TypeScript beta 4.9 came with the new satisfies operator. The satisfies operator aims to give the ability to the developers to assign the most specific types of expressions for inference. Let's see it in action.

TL;DR
If you prefer watching a video to reading the article, you can watch the video on YouTube.

Let's Start With a Simple Object

Let's assume that we have a color object. The color object represents a color value in RGB that is red, green, and blue. The value of red, green, and blue can either be a string, a hex code representing a color like #00ff00, or an array of three numbers representing an array of RGB values. The three numbers in the array are again red, green, and blue values. The structure of the color object is a standard way of defining color values.

// Color Object
const color = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [225, 255, 0],
};

We want to have the ability to call array methods on each of the properties of the color object. So if I need to get the value of red at the index of 0, I should be able to get it using the bracket notion.

const redComponent = color.red[0]; // 255

// Here, the constant `redComponent` should be equal to  `255`.

Also, since the value of any of these properties can be a string, we would want the ability to use string methods on property values if it's a string. We can declare another constant, greenValue, and convert the value of the green color to upper case.

const greenValue = palette.green.toUpperCase(); // '#00FF00'

//  The constant `greenValue` should be converted to upperCase like so '#00FF00'

Making Our Object Type Safe

While trying to type the color object strictly, we must keep the above use cases in mind and ensure that the object's properties are not misspelled, which means red, green, and blue should always be spelled correctly. Typescript must throw an error if these properties are not spelled correctly.

To do this, we can declare a type called properties, which will be a union of red, green, and blue.

type Properties = 'red' | 'green' | 'blue';

For the values of each of these properties, we can declare a type called RGB, which is a tuple. A tuple is an array that takes only has three properties that are red, green, and blue. The values of each tuple property will be of the type number.

type RGB = [red: number, green: number, blue: number];

We can now use a Record type, a built-in utility type in TypeScript that constructs an object with Keys and values for those keys.

const color: Record<Properties, RGB | string> = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [225, 255, 0],
};

The record type here ensures that all the properties of the color object are of the type Properties and the values of the properties are a union of type RGB or string. So we cannot have a property that is not either red, green, or blue. So if I try to misspell blue, TypeScript will throw an error. Also, all the values assigned to these properties now either have to be a string or of the RGB.

The Problem With This Approach

We have only won half of the battle till now. But there is a problem here. Looking at the greenValue constant, we will see that TypeScript will throw an error. We get an error because TypeScript is unsure about the value of green as a string or a tuple, and we are trying to use a string method to convert a string to uppercase. If the value is not a string, it will result in an error. To use a string method, we would have to manually validate the property before we can use a string method like so:

if (typeof color.green === 'string') {
  const greenValue = color.green.toUpperCase();
}

Introducing The `satisfies` operator

For such situations, the new satisfies operator is super helpful. The satisfies operator pre-validates the object's properties for us. We can remove the type definition from the color object and use the satisfies operator.

// Color Object
const color = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [225, 255, 0],
} satisfies Record<Properties, RGB | string>;

Now the satisfies operator will validate the red, green, and blue values for us and check whether each of those properties contains a string or an array of RGB. So now, even if I remove the condition from the greenValue constant, TypeScript will not throw an error because it now knows that the property green contains a string and not an array. Since we used the satisfies operator, TypeScript pre-validates the values of the properties of the colors object.

const greenValue = color.green.toUpperCase();

Similarly, if I will now try to use a string method on the value of blue, Typescript will throw an error because it knows in advance that blue is an array of numbers and a string method cannot be applied to an array of numbers.

const blueValue = color.blue.toUpperCase();
// TypeScript Will throw an error

The satisfies operator does the heavy lifting for you and checks all the values so that you do not have to manually check each of the values of an object to be of a particular type before using a specific method on that value. If you want to learn TypeScript, you might be interested in taking my TypeScript Crash Course on YouTube or subscribing for more such updates and tutorials.

Consider Blogging As a Privilege

Manik — Sat, 29 Oct 2022 17:07:42 +0000

Do we have the 'right' to 'write' what we want, even if it is technically incorrect?

In my humble opinion, just because the publishing platforms are so easily accessible, we developers should not consider publishing technical writings as an inferred right instead, it should be considered a privilege.

What motivates me to write this post is my encounter with a garbage post recently pushed to my inbox by Medium. The email said that something was trending about JavaScript that I must read.

The Medium Story

The story starts with a fine morning when I sat down at my workstation and started my day by checking my emails. I got an email in my Inbox from Medium saying that this article was trending in JavaScript and suggesting that it was handpicked for me and I must read it (pun intended). The article had a very catchy title which made me click on the link and made me super excited about the fact that I would get to learn something new. The next thing I see on my screen is a lot of comments on the article, which re-assured my expectations of learning something cool.

But here is the thing, as I started going through the article and looking at the code examples, I started getting a bad smell about the code. Then a few more lines of garbage, and I thought, either there was something I didn't know about JavaScript or the author had no idea about what was published.

The only reason a sense of self-doubt came about was that the article had attracted many comments, making me think I might be missing something.

And then, I decided to read the comments. Reading through the comments, I started understanding why the article had attracted so much attention. So many seasoned JavaScript developers were cribbing about the post and its contents. The most exciting part of the article was the comments section because the article made no sense. The article came from a noob who had no practical experience whatsoever. I wasn't happy that so many people were speaking against what was posted but saddened by the fact that the author took no action. For a moment, I also thought that the article was published purposely to get traffic and traction.

Without being judgemental, I decided to post my opinion in the comments and was blunt about the fact that the article was spreading misinformation. To my surprise, my comment on the article got the fastest first ten claps on Medium I have ever got 🤯.

Why The Rant?

So what's the big deal about it? Why this rant? I am ranting because I am empathetic toward someone just starting her career as a software developer. The empathy comes from my journey as a software developer. I have been working as one for the last 14 years. I have learned a ton from contributions made by my fellow developers on early years authoritative blogs like Smashing Magazine, CSS Tricks, etc. They still have a quality control policy in place. (Just to make it clear, this article is not sponsored by them). Publications are a source of learning, and as someone starting my career as a software developer, I had full confidence in what these blogs posted.

Now think about someone new to JavaScript who gets an email from Medium about a new trending topic and lands on this garbage article. Instead of learning anything new, he's misinformed about how he should be writing "clean" code. The claps and the comments on the article (if not read) make it seem to be an authoritative post. The problem is not just specific to Medium as a platform. I have seen some YouTubers teaching nonsense with complete confidence and people thanking them in the comments without validating the facts stated in the video and accepting things.

The Fight for the Keywords

Suppose you consider the above case a classic example of getting social attraction by the author and nothing else. In that circumstance, you are with me in considering the other side of the coin where people write for keywords and not to solve a problem. Now and then, I hear people talking about content generation as a promising way to attract traffic, which it is, but the content needs to have the correct context. But most of the time, it is written to rank for specific keywords, which only creates more articles that add no value.

Don't get me wrong; I am not against researching keywords to identify what people are searching for and then generating content to answer their queries. The problem is when you write for the heck of getting traffic and want to rank for the keywords.

I can't stress more that whenever someone clicks a publish button, it should be from the point of view of adding value to the reader's life.

What Can we do as Software Developers?

One thing I love about being a software developer is that I am probably a part of the most thriving and contributing communities the world has ever seen. Platforms like Stack Overflow are examples of how people help each other grow in our community. I know things aren't perfect, but our community thrives because of the good people who are a part of it. With the intent to help others, I think there are a few things we can do before we click the publish button.

Test the Content - Like any piece of good software, the published content needs testing as well. Before you hit the publish button, check and re-check whether the information you are about to share is correct. If the information that you are about to share in your article is not correct, it will do more harm than good to people who will read it. Testing involves keeping the ego aside and being humble about our skillset. I understand that the ability to write code makes us developers special compared to the rest of the population 😉. But being humble about it and understanding that you are not the only developer in this world and confirming your statements before you publish is the way to go.
Don't Write for Adrenaline Rush - Another change we can bring is to not write for the Adrenaline Rush. The content we post should not be driven by selfish motives but should have the intention of educating someone about something we have been able to grasp. This way, we can contribute to each other's knowledge, and everyone can grow in the community.

Share Your Thoughts

What do you think? Has a similar incident happened to you as well? I would love to hear your thoughts and ideas on how we, as a community, can improve the quality of our content contributions.

P.S: If you like what I write and share a common point of view, follow me @Cloudaffle on Hashnode.

In-depth Look Into The JavaScript Script Tag Attributes

Manik — Thu, 08 Apr 2021 14:34:58 +0000

The script tag is the primary method to insert JavaScript into the HTML page. The script tag has six attributes that are often underutilized and misunderstood by most JavaScript developers. We will look at all the ways to use the script tag and the importance and use of each of the attributes. If you are an experienced JavaScript developer and just interested in knowing about the script tag's attributes, please feel free to jump to the relevant section.

Using the Script Tag in HTML

The script tag is the primary method to insert JavaScript into HTML. The script tag was created by Netscape and was first implemented in Netscape Navigator 2, as far as the history of JavaScript is concerned. There are two ways you can use the script tag to insert JavaScript in HTML.

Inline JavaScript

You can insert JavaScript directly into an HTML file. Here is an example of how you would do that using the script tag.

<script>
    function helloWorld() {
        console.log('Hello World');
    };
    helloWord();
</script>

I will go ahead and start with the script tag. Between the script tag, I will create a helloWorld function that prints the text “Hello World” to the console. On the next line, I will go ahead and invoke the function. This is the simplest way to include JavaScript in your HTML page but not the optimal way of doing it. This approach is good for short scripts or scripts which are page-specific. One more thing you need to remember about inline JavaScript is that it cannot be loaded asynchronously or deferred. Inline JavaScript is hence render-blocking; this means that the browser will parse and execute inline JavaScript from top to bottom before moving to the next line of code. Hence, it’s always better to include the inline JavaScripts (if any) in the page's footer once your HTML and CSS have loaded.

External JavaScript File

Another way to insert JavaScript into your HTML files is by using an external file. This is the most commonly used method to insert JavaScript files into HTML. Let’s have a look at an example. Assuming this is how files are organized in my project, where I have the index.html file and the main.js file, all in the same project folder.

./
├── main.js
├── index.html

This is how we can insert the main.js file into the index.html file. First, I will declare the script tag, and then in the script tag, we will include an attribute called src . The src attribute points to the JavaScript file that we want to include. It’s as simple as that; the main.js file is now included in our HTML.

<script src = "main.js"></script>

Script Tag Attributes

There is often much confusion between the attributes of the script tag. The confusion is especially centered around two attributes, defer and async. But let’s look at all the script tag attributes one by one and understand how they impact how the browser treats the external JavaScript file.

type (optional)

The type attribute indicates the content type, also known as the MIME type, of the scripting language used in the external file you include in your HTML. This is how you would include a type attribute in your script tag.

<script src = "main.js" type = "text/javascript" ></script>

<script src = "main.js" type = "application/javascript" ></script>

<script src = "main.js" type = "application/ecmascript" ></script>

Traditionally, the default type has always been "text/javascript" although this has been deprecated now but is still used by many developers. the current default is "application/javascript" or "application/ecmascript" . The safest option is to use these default options; else, using a different MIME type that is not supported by the browser ends up in the script being completely ignored by the browser.

crossorigin (optional)

Web pages often make requests to load resources on other servers. Here is where Cross-Origin Resource Sharing, often abbreviated as CORS, comes in. A cross-origin request is requested for a resource (e.g., style sheets, iframes, images, fonts, or scripts) from another domain. CORS is used to manage cross-origin requests. It defines a way of how a browser and server can interact to determine whether it is safe to allow the cross-origin request. CORS allows servers to specify who can access the assets on the server, among many other things. Here is an example of how you can use the crossorigin attribute.

<script src = "main.js" crossorigin = "anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" ></script>

<script src = "main.js" crossorigin = "use-credentials" ></script>

So there are two possible options for the crossorigin attribute. The first one being the "anonymous" option. In this case, a cross-origin request is performed, and no credentials are sent. This is often used with the integrity attribute, which sends a hash, and the receiving server verifies the request. We will look into this in detail as the next attribute.

The next possible value for the crossorigin attribute is "use-credentials". In this case, a cross-origin request is performed, and credentials can be sent along with the request. The credentials can be a cookie, a certificate, an HTTP Basic authentication, etc. Most of the time, you would be using the "anonymous" option, but it’s always good to know that an option to send the credentials exists as well.

integrity (optional)

The integrity attribute allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated. I’ll pull an example of the Bootstrap CDN code we often use to insert into our HTML.

<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
crossorigin="anonymous"></script>

If you look at this code closely, it uses a crossorigin of "anonymous" and then there is this integrity attribute, which has something known as the SRI hash, where SRI stands for Subresource Integrity. Subresource Integrity (SRI) is a W3C specification that allows web developers to ensure that resources hosted on third-party servers have not been altered. So this means that the Bootstrap JavaScript being served on your page is as it was uploaded by the Bootstrap team and has not been altered. Use of SRI is highly recommended whenever you are using CORS.

async (optional)

To use the async attribute, all you need to do is include the attribute in the script tag. Please note that the async attribute works only for external JavaScript files and not for inline JavaScript.

<script src = "main.js" async></script>

The async attribute indicates the browser that the script should start downloading immediately and should not block the rest of the page's rendering. The JavaScript, however, is executed asynchronously with the rest of the page. The async method does not wait for the rest of the DOM to complete loading before it is executed. This is a non-render blocking way of loading your JavaScript.

defer (optional)

Using the defer attribute is as simple as using the async attribute. All you need to do is include the defer attribute in your script tag.

<script src = "main.js" defer></script>

When using the defer attribute, the script execution is deferred until after all the document contents have been loaded completely. However, the script starts downloading immediately but is not executed until all the contents have been loaded and are ready.

What Happens If You Neither Include async Nor defer

In case you neither include the async or the defer attribute in your script, your script becomes render-blocking. This means the browser will first parse and execute the script before it moves to the next lines of code in your HTML. This impacts the loading speed of your web page.

Get Access To More Such Stories on Cloudaffle
Thanks for reading, and hopefully, this was helpful!
I have created an extensive JavaScript cheatsheet. It has been in a manner where it becomes easy for you to refer to each property and method for various JavaScript objects. It’s absolutely free to download from the above link ☺.

Mutability Vs Immutability In JavaScript

Manik — Sun, 21 Mar 2021 12:19:54 +0000

You would often hear the most seasoned react developers suggest using the spread operator to copy an array instead of simply assigning it to a new variable. This has to do with specific data types being a reference type in JavaScript, hence being mutable. The concept of mutability and immutability in JavaScript is essential to understand to avoid errors. Let’s dive deeper into the idea of mutability vs. immutability in JavaScript.

Primitive Types vs. Reference Types in JavaScript

The data assigned to a JavaScript variable can be of two types, the primitive type and the reference type. There is a difference in how JavaScript treats these two data types. To know how they are treated differently, let’s first understand the difference between primitive and reference types.

Primitive Types

Primitive types are simple atomic pieces of data in JavaScript. Primitive types are always saved and accessed by the variable's value and not as a reference to another object. There are six primitive types in JavaScript:

undefined
null
boolean
number
string
symbol

Reference Types

Reference types are not simple atomic values but are objects that are made up of multiple properties assigned to them. They are stored as a reference in memory and not as independent values assigned to variables. There are three reference types in JavaScript:

objects
arrays
functions

How Primitive Types and Reference Types are Stored in Memory

How primitive types and reference types are stored in the memory is the basis of how they are different from each other. Let’s look at a few examples and try to understand how they utilize memory differently.

Memory Utilization by Primitive Types

As highlighted earlier, primitive types are stored as a single atomic value assigned to a variable in the memory. Let’s see this example:

let name = 'john';
let name2 = name;

Looking at the above example, I created a variable name and assigned it a value john. Now JavaScript will save this as a single atomic value in the memory. Now, if i create a new variable name2 and assign it a value of the variable name JavaScript will go ahead and create a new space in the memory and allocate the same value of the variable name and assign it to the variable name2. The new value assigned to the variable name2, is entirely separate from the variable name and does not have any reference to it whatsoever.

Memory Utilization by Reference Types

Reference values are objects stored in memory and references to objects instead of dedicated places in memory, unlike primitive types. Let’s look at the following example to understand better how the reference types are saved in memory by JavaScript.

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

Let’s just declared a variable called person which will contain an object containing the name and the age of the person object. Now I will go ahead and create another variable named person2 and assign it the same person object. This is where things start getting different as compared to the primitive types. In this case, JavaScript will save the person2 object simply as a reference to the person object.

If you look at this image, you will realize that JavaScript here is actually pointing to the same object in the memory. Though it has created a new variable, as a value, that variable just is referring to the same person object that we created previously.

Understanding Immutability and Mutability of Primitive and Reference Types in JavaScript

Since we are now clear with the primitive and reference types in JavaScript, we can easily understand the concept of mutability and immutability in JavaScript. Mutable can be changed or added to where immutable means something that cannot be changed or added. Primitive values in JavaScript cannot have anything added upon to them, they can only be re-assigned, and hence all primitive values in JavaScript are immutable. Let see this with an example.

let name = 'john';
let name2 = name;

console.log(name);
console.log(name2);

/*
 * john
 * john 
 */

let name2 = 'doe';

console.log(name);
console.log(name2);

/*
 * john
 * doe 
 */

Extending our previous example of primitive types, let’s print the values of both our variables, i.e. name and name2 to the console and see what we get. As expected, both the variable return the value john. Now let’s reassign name2 to doe and then again print the values of both the variables to the console. Now you see that the value of only name2 was re-assigned by JavaScript to doe, but the variable name did not change. This show’s that JavaScript treats these 2 variables separately, although name2 was originally copied from the variable name. This proves that the primitive values in JavaScript, in this case, strings, are immutable.

Let’s try to replicate the same example for reference types as well. Picking up from our previous example, let’s print the values of both person and person2 objects to the console and see what we get.

let person = {
    name: 'john',
    age: 22,
};

let person2 = person; 

console.log(person);
console.log(person2);

/*
* {
* name: 'john',
* age: 22,
* }
*
* {
* name: 'john',
* age: 22,
* }
*/

We see two objects printed on the console with the same properties. Now I will change one of the properties of the person2 object and print them to the console again.

let person2.name = 'doe'; 

console.log(person);
console.log(person2);

/*
* {
* name: 'doe',
* age: 22,
* }
*
* {
* name: 'doe',
* age: 22,
* }
*/

You see that JavaScript has changed person as well as person2. This is because the person2 object was created by referencing the person object. With reference types, JavaScript creates a reference to the same object, and the object remains mutable. Since the object is mutable, it can be changed, or a new property can be added.

The Spread Operator

The spread operator was introduced in ES6 (more information on ES6) and lets you copy your objects safely and create a new instance of the object instead of merely referencing the previous object. Let’s look at the same example and see how we can copy an object and save a new instance of the variable's object.

let person = {
    name: 'john',
    age: 22,
};

let person2 = {...person};
let person2.name = 'doe';

console.log(person);
console.log(person2);

/*
* {
* name: 'john',
* age: 22,
* }
*
* {
* name: 'doe',
* age: 22,
* }
*/

Let’s take the same person object, and instead of assigning it directly to a variable this time, let’s use the spread operator to copy it. The spread operator can be used by prefixing three dots … in front of the object that you want to copy and encapsulate it using the literal object syntax. This way, JavaScript creates a new object and stores it in the variable person2. Let’s try to change one of the properties of person2. I will change the name to doe. Now let’s print both the object to the console and see what we get. You see, this time, we only changed the name property of the person2 object and not the person object. This is because the person2 was created and saved as a new object using the spread operator and not as a reference to the person object.

PS: I have created an extensive JavaScript cheatsheet. It has been in a manner where it becomes easy for you to refer to each property and method for various JavaScript objects.

Escape Sequence in JavaScript - A Few Unused Ones as Well

Manik — Tue, 08 Dec 2020 13:06:10 +0000

Character literals help you format your strings in JavaScript.

We will look at simple escape characters that help you achieve small formatting tasks, such as adding a new line in JavaScript to a complete guide on all the available escape
characters. Apart from the new line character, we will also look at various other escape characters in JavaScript and how they can help you format your strings in various ways. Till the end, I promise that you will know a lot more escape
characters than just the new line symbol in JavaScript.

Since we would be looking at some string character literals, let's declare two variables holding string values to understand how the character literals are working.

/* Declare variables holding some strings */
let intro = "My name is John Doe";
let fathersName = "My father's name is Mark Doe";

Escaping double quotes in JavaScript

Let's assume that I want to quote the name of John Doe into double-quotes for some reason. Before we do that, let me add prettier ignore so that prettier does not auto-format my code. Let's try adding double quotes now. You see, the moment
I add double quotes to John Doe, my IDE starts shouting at me because this is a syntax error. If you look closely, you will understand why so. Now the first double quote starts before My and ends after is. The second pair of double
quotes for JavaScript start after Doe and ends there as well. Now John Doe becomes an expression that is not recognized by JavaScript and hence this error. This is where we can use our first character literal. In Javascript, character
literals use an escape character '\', which is a backslash like so followed by the character you want to be treated as a string value by JavaScript, so a double quote in our case. Let's end this with the second double quote here as well.
Let me print the result to the console to see what we get. We have indeed added double quotes the way we wanted to.

/* Declare variables holding some strings */
let intro = "My name is \"John Doe\"";
console.log ( intro )

// Output -> My name is "John Doe"

Escaping single quotes in JavaScript

Let's have a look at another one now. In our second string here, I will convert it to single quotes for the sake of our example, and it's a perfectly valid syntax to have strings in single quotes. JavaScript makes no differentiation between
them. The moment I do that, you see, I start getting a syntax error. Let's have a closer look to see what is happening. According to JavaScript, now my first string value starts with My and ending before s over here, and then another
one starts after the word Doe which never ends. Javascript cannot recognize this entire expression here, and hence my IDE throws a syntax error. In the same way, we did it with double-quotes. We can add an escape character before the
single quote we have before S. This is our second character literal where we can escape single quotes by adding a backslash or an escape character. I will output the value to the console to see if JavaScript understands it correctly now.
Certainly, it does work.

// prettier-ignore
let fathersName = 'My father\'s name is Mark Doe';
console.log ( fathersName );

// Output -> My father's name is Mark Doe

Adding a new line to strings in JavaScript

Okay, let's have a look at another one here. For this, let me copy our intro variable, create another variable, and name it intro2 and remove these double-quotes. Cool! Now, let us assume that I want to add a backslash at the end of John
Doe's name for some reason. Let's add a backslash and print it to the console to see what we get.

let intro2 = 'My name is John Doe \ ';
console.log ( intro2 )

We get here the string without a backslash, and JavaScript ignored the one we had added. This is because an escape character on its own is of no value and is ignored by JavaScript. JavaScript doesn't understand our intent of printing a
backslash. So we would need to add another backslash after the first one. Now you see we get the desired result.

let intro2 = 'My name is John Doe \\ ';
console.log ( intro2 )

Concatenation and new line character in JavaScript

Let's assume that we wanted to print these two sentences together but in two different lines. I will create another variable so that you have the previous one available for your records. I will try to concatenate them and see what we get.
You see, we did join the two sentences, but we don't get them in two separate lines. For that, we can use a new line character literal. Let's add the escape character followed by \n. This creates a new line. A syntax of declaring string
in JavaScript known as the Template Literals makes creating multiline strings even easier.

let intro3 = 'My name is John Doe \n';
console.log ( intro3 + fathersName );

// \n -  for adding a new line

Unused character literals in JavaScript

There are a few more character literals which are available in JavaScript. Let me add them here in the comments. It is worth noting that I am not covering these in this tutorial because they are not supported by a few browsers and not
relevant for the web. These were created for electronic typewriters, fax machines, etc. But you can refer to them and see what they do; it's always good to know what all you can do with JavaScript.

/*
 * \b   Backspace
 * \f   Form Feed
 * \n   New Line
 * \r   Carriage Return
 * \t   Horizontal Tabulator
 * \v   Vertical Tabulator
 * */

I hope this article was helpful.

P.S:
I will be covering all the good and the bad parts of JavaScript in the JavaScript Masterclass series. Please follow Cloudaffle and enable notifications to get alerts to the new videos that I keep posting. If you have any questions or
suggestions, please feel free to

DEV Community: Manik

One Way Data Tables And Variables

What Are One-Way Data Tables?

Read Complete Article On My Blog

The Difference Between the Shell and the Terminal

Understanding The Shell

The Bash Shell

The Terminal (Emulator)

What Can You Do Next 🙏😊

Why is Ubuntu a Distribution and Windows an Operating System?

What is an Operating System

1. An Operating System acts as an interface between the user and the applications.

2. An Operating System provides an interface for applications to access hardware resources like the CPU, RAM, printer, and storage.

Why Linux is a Distribution

Linux is Just A Kernel

What Can You Do Next 🙏😊

How Did Linux Become So Popular

The Apache Web Server

The Cathedral and The Bazaar

Netscape Communicator and The Mozilla Project

Release Of MySQL

What Can You Do Next 🙏😊

How to Assign Types To Nested Objects In TypeScript

Using the type Keyword

Nested Objects

Abstracting Nested Objects Into Separate Types

Using Index Signatures With Nested Objects

Interfaces to Assign Types to Object Properties

Nested Objects Using Interfaces

What Can You Do Next 🙏😊

GNU Project and Linux- The Reasons For A Thriving Community

The GNU Project

The Story Behind GNU

What Was The Plan

Protection From Thieves - GNU General Public License

The Missing Kernel

Monolithic VS Microkernel

The Relationship Between GNU and Linux

Speaking Of Community 🙏😊

How to Install MySQL 8 on macOS Using Homebrew

What is Homebrew?

Step One: Installing the Xcode Command Line Tools

Step Two: Install Homebrew

Step Three: Install MySQL 8

Step Four: Configure MySQL

Step Five: Create a New Database

Subscribe 🙏😊

The New Satisfies Operator Will Satisfy You (Cheesy)

Let's Start With a Simple Object

Making Our Object Type Safe

The Problem With This Approach

Introducing The satisfies operator

Consider Blogging As a Privilege

The Medium Story

Why The Rant?

The Fight for the Keywords

What Can we do as Software Developers?

Share Your Thoughts

In-depth Look Into The JavaScript Script Tag Attributes

Using the Script Tag in HTML

Inline JavaScript

External JavaScript File

Script Tag Attributes

type (optional)

crossorigin (optional)

integrity (optional)

async (optional)

defer (optional)

What Happens If You Neither Include async Nor defer

Mutability Vs Immutability In JavaScript

Primitive Types vs. Reference Types in JavaScript

Primitive Types

Reference Types

How Primitive Types and Reference Types are Stored in Memory

Memory Utilization by Primitive Types

Memory Utilization by Reference Types

Understanding Immutability and Mutability of Primitive and Reference Types in JavaScript

The Spread Operator

Escape Sequence in JavaScript - A Few Unused Ones as Well

Escaping double quotes in JavaScript

Using the `type` Keyword

Introducing The `satisfies` operator