DEV Community: Dharmelolar Ezekiel

What is Virtualization: How to set up a Linux Virtual Machine with Virtual Box

Dharmelolar Ezekiel — Wed, 31 May 2023 22:23:13 +0000

Virtualization is the process of creating virtual instances of computing resources such as operating systems, CPU, storage, servers, etc. It involves abstracting the physical infrastructure and separating the software from the underlying hardware, allowing multiple virtual instances to run on a single physical machine or infrastructure.

What is a Virtual Machine?

A virtual machine is the software emulation of a physical computer that acts as a separate computer with its operating system (OS ), CPU, and storage. It gives the ability to isolate and compartmentalize different computing environments.

So you have a Windows machine running on a Windows operating system and you want to run or test an application that only works on another OS for example Linux. This means you need to get another computer and install the Linux OS to test that application. Instead of doing this, you can install a virtual machine that allows you to run Linux OS simultaneously with the Windows OS on your Windows machine. The virtual machine helps to isolate the Linux and Windows OS running on your computer without any interference.

What is a Hypervisor?

A Hypervisor is a software that creates and manages virtual machines(VM). It allows the hosting of multiple virtual computers on a physical computer. It allocates resources such as CPU, memory, and storage to the virtual machine without interfering with the operation of the physical computer.
There are two types of hypervisor:

Type 1: This is also known as Bare Metal hypervisor and it runs directly on the computer hardware instead of the operating system giving it direct access to the computer resources. It is mostly used by large organizations for their infrastructure common examples include VMware ESXi and Microsoft Hyper-v.
Type 2: The hypervisor is hosted on an existing operating system and it depends on the host computer for virtualization. It is mainly used for personal computers and end-to-end computing. This hypervisor is also known as Hosted hypervisor and common examples include VirtualBox and VMware workstation.

Setting up a Linux (Ubuntu) Virtual Machine with VirtualBox

Now that you’ve seen virtualization and virtual machines, I’ll show you how to install Linux (Ubuntu) Virtual Machine with VirtualBox.

VirtualBox is an open-source virtual machine created by Oracle that allows you to create and host multiple operating systems on a physical computer. It is compatible and can run on any operating system including MacOS, Windows, Linux, etc.

Step 1: Install VirtualBox

From the VirtualBox download page, select and download the package compatible with your computer’s operating system. Follow the installation process to have VirtualBox running on your machine.

Step 2: Download the ISO file.

From the Ubuntu website, download the ISO file for the Ubuntu operating system. An ISO file also known as ISO image is commonly used in virtual machines because it allows you to easily install an operating system or other software without needing a physical CD or DVD.

Step 3: Setting up the Virtual machine environment

Now that your VirtualBox is running, you can go ahead and create a virtual machine.

Click on New to create an operating system and this will open up an interface to configure your operating system.

Next, you’ll see a prompt that allows you to enter the name of your virtual machine and VirtualBox will fill the type and version field based on what you entered. This can be changed afterward. You will also select the ISO file for the virtual machine.

Next, you enter the username and password for your virtual machine.

Assign Ram storage and processor.

Add virtual hard disk to the virtual machine.

Finally, you should see the summary of the configurations for your virtual machine.

Click on finish and allow the virtual machine to load the operating system selected. The operating system will require setup and when this is done, your machine should be up and running.

That's it!!! You now have a Linux operating system running on your virtual machine.

Debugging And Handling Errors In JavaScript

Dharmelolar Ezekiel — Thu, 17 Jun 2021 16:56:09 +0000

Introduction

As a developer or programmer, Errors are essentially part of our daily lives, and getting errors in our code does not really mean that we're not proficient. An error in your code most times, simply means you’re trying to do something that might be a little complicated (or very complicated), and it doesn’t quite work yet or you made some important ommissions in your code. Learning from our mistakes is actually a good thing because it helps to strengthen our knowledge and also gives us the ability to help others out when they run into similar issues. In this article, we'll be discussing errors in Javascript and how to handle them.

Types of Errors in Javascript

There are seven types of built-in errors in javascript, but we will be looking at the three common types in this article. You can check out javascript documentation for more insights.

SyntaxError:This error occurs when the syntax of a particular language is not met. This error is usually thrown when there are typos, mismatched brackets or curly braces, or missing semi-colons in our code.

function test{
    console.log('this code will throw a syntaxError')
}
test()

/Users/dharmelolarezekiel/Desktop/test.js:1
function test{
             ^

SyntaxError: Unexpected token '{'

This code is throwing an error because a bracket 
is supposed to be after the test function.

for(let i = 1, i<10; i++){
    console.log(i)
}

/Users/dharmelolarezekiel/Desktop/test.js:1
for(let i = 1, i<10; i++){
               ^

SyntaxError: Identifier 'i' has already been declared

An error is being thrown because we used a comma 
instead of a semi-colon after declaring the variable **i**

ReferenceError : This type of error occurs when you're trying to reference an invalid value. e.g calling a variable that was not defined. In some cases, the variable could be defined and you'll still get a reference error and this is usually the effect of scoping because when you declare a variable with let/const, such variable can not be accessed outside the function where it is declared.

let ageRange= 25
if(ageRange>= 25){
    console.log('you are old enough')
}
console.log(AgeRange)

/Users/dharmelolarezekiel/Desktop/test.js:5
console.log(AgeRange)
            ^

ReferenceError: AgeRange is not defined

This code is throwing an error because the variable 
that was defined and the one that was called are different 
from each other even though they are spelled the same way.

function ageRange(){
    let age1= 25;
    let age2= 20
    return age1 * age2
    }

  console.log(age2)

/Users/dharmelolarezekiel/Desktop/test.js:7
  console.log(age2)
              ^

ReferenceError: age2 is not defined

In this case, although age2 is defined we still got an error 
that says it is not defined. This is because age2 was defined
in a function and it cannot be accessed outside the function

TypeError:This error is thrown when the value passed to an expression is not the expected type. e.g using a string method on a number.

let variable = 25
console.log(variable.toUpperCase())

/Users/dharmelolarezekiel/Desktop/test.js:2
console.log(variable.toUpperCase())
                     ^

TypeError: variable.toUpperCase is not a function

Debugging errors in Javascript

In order to debug errors in javascript, there are few things you should do first. Luckily, the console always comes to the rescue here.

In what line did the error occur: This is usually the first thing to look out for when trying to debug. The console always points out the particular line where the error is.

/Users/dharmelolarezekiel/Desktop/test.js:2

In this case, our error is line 2 of our test.js file

What type of error was thrown: After finding out the line where the error occurred, the next thing to do is check what type of error was logged to the console.

ReferenceError: age is not defined

What is the error message logged: This will enable you to debug with ease since you already know the type of error you're dealing with.

Handling Errors In Javascript

Error handling is the anticipation of errors and addressing them accordingly.
"Codecademy"

Error handling is mostly used when working with data from other sources or user inputs as the source code can be unreliable. When a code is being executed and it throws an error, that error is referred to as runtime error. I'll be highlighting the different ways of handling errors and these are:

try... catch statement

try{
    // piece of code
}catch(err){
   //error handling
}

What this block of code does is that it first runs our code in the try block and if it goes smoothly, the catch block will be ignored. But if an error occurs, the try block stops executing and the handling process begins from the catch block and the err(any name can be used) will log an error object that details what went wrong with the code. The try...catch statement does not stop our code from running because we have handled the error with the catch(err) block.

Throw statement: The throw keyword can be used to throw an error and halts the program from working. It can also be used to throw an error with a user-defined message. If you use throw together with try and catch, you can control program flow and generate custom error messages.

Deploying React applications to Netlify

Dharmelolar Ezekiel — Tue, 04 May 2021 00:14:09 +0000

Introduction

In this brief tutorial, I’ll be walking you through the process of deploying your React app on Netlify. There are 3 ways on how to deploy React applications to Netlify but in this tutorial, we will be focusing on just two.

Prerequisites

At the end of this tutorial, you should be able to successfully deploy your React applications to Netlify but before that, there are a few things you should do or know. These are:

Have basic knowledge of version control system (GitHub, GitLab, Bitbucket )
Have a Netlify account
Know how to create React applications.

Creating a React Application

React is a JavaScript library that is used for building fast and interactive user interfaces. In order to create a react application, we'd be using the create-react-app library and the name of our app can be anything but I'd be using "my-react-app" (just for the purpose of this tutorial). From our terminal we will the command below:

npx create-react-app my-react-app
cd my-react-app
npm start

After running this command, we should get the out below.

This command installs all the necessary packages for creating our React application. We will not be making any changes to this app as it is assumed that we already know how to create react apps.

After doing this you need to run this command on your terminal.

npm run build

What this command does is that helps to optimize our site. It creates a script that can be used to run our application.

Deploying React app.

1.Using Netlify Drag and Drop Feature.

Using the drag and drop feature for deployment is really easy but first, you need to create an account on Netlify. If you already have one that’s fine and if you don’t just visit netlify and sign up using any of the available options.

After signing up, you should see a replica of the image above. All you have to do after this is just drag and drop your folder. Since you already ran the "npm run build" command everything should work just fine.

As you can see from the image, our site has been deployed. You can now customize the site.

2.Using GitHub from Netlify's UI

In order to use this method, we'd need to push to Github first. Again I won't be talking about how to push code to GitHub since it is assumed that we already know our way around it.

First, we would need to sign in to Netlify with our already created GitHub account. Our dashboard should look like the image below.

We can go ahead and click the "new site from git" button and this will take you to another page where you have to select the version control you would be using. Since we're using GitHub in this tutorial, you'll click on GitHub and then Netlify will do some authorizations. After doing this, Netlify will display the repositories available on your GitHub and ask you to confirm the one you want to deploy.

After selecting the repository to deploy, we need to specify some basic build settings. Although our React app already comes with the necessary build steps since we already ran the npm-run-build command. But if we did not do this before we need to specify the build settings. the image below can serve as a guide. When all this is done, you can hit the deploy site button and that's it!!! Our React app has been deployed.

How To Use Live Share Extension For Collaboration

Dharmelolar Ezekiel — Mon, 03 May 2021 18:41:15 +0000

Introduction

Live Share is a vs code extension that enables developers to collaborate with others in real-time. It enables users to share sessions, edit codes, and also debug each other's code. This extension has a lot of cool features that we will be looking at in this article. Throughout the course of this article, I will be focusing on the person sending out the invite(initiating the collaboration) and screenshots will be shared at intervals in order to understand how this works.

Getting Started

Installing live share extension

Prior to now, you should already have visual studio code installed on your computer. The next step is to install the live share extension. It is advisable to install the live share extension pack as this would give you access to the whole features that I would be talking about in this article. After doing this, the live share icon will appear at the bottom of the code editor. You can click on it to sign in either by using a Microsoft or Github account.

The sign-in procedure will happen in the sequence of the images shown above. The last page will display a modal, which after clicking will redirect you back to vs code.

Collaborating with other users.

In order to start collaborating with other users, you need to share a session and other participants will join from their own end. Clicking on the live share icon will begin a session and a URL will be displayed. you can now copy the link and share it with a trusted collaborator.

After clicking on the URL from the other end, the URL redirects the user to VSccode and the user will also be prompted to sign in. When this is done the collaboration session can begin. A cursor will also appear with the name of the user that is currently editing.

Enabling Audio calls

Personally, this is one of the features I really love about this extension because it allows you to communicate with other users without having to use any other external applications or software. In order to enable audio call, you have to click on the Audio Call Participant from the side panel, after that, a modal will be displayed so you can grant access to the use of the microphone. When this is done, the user from the other end should click on join call from the side panel and that's all! The communication can begin.

Enabling session chat

This is another cool feature of the extension. It allows you to send messages to other users during your session. You can enable this feature by clicking on chat sessions then session chat from the side panel and the chatbox will be opened on one part of your code editor.

###Share a terminal

While using the live share extension, the terminal can be used in two modes which are the read/write for everyone (this enables other participants to gain access to running commands in your terminal ) or the read-only mode(this means the other participants can only watch your terminal and they cannot make changes to it). To allow other users to gain access, simply click on share terminal from the side panel, and a popup will be displayed asking you for confirmation.

Live share extension still has other features that I did not cover in this article. You can go over the documentation for more reference. In this article, I've shared the most basic and common things that you can do with this extension.

Thanks for Reading!!!😁