DEV Community: Ozoemena

How to login to your remote server like Digital Ocean using SSH key on window

Ozoemena — Thu, 22 May 2025 12:16:35 +0000

SSH stands for Secure Shell. It is a cryptographic network protocol used to securely assess and manage remote computers over the Internet.
There are several use cases of SSH which include:
a. Secure data transfer
b. Passwordless login
c. Secure file transfer
d. Remote login
e. Port forwarding
This article is focused on how to log in to your remote server using an SSH key on Windows, so we will not discuss the other use cases of SSH.
To log in to your remote server using Windows, you need to be sure your Windows has openSSH installed. To confirm this,
• Go to the window search bar and type “PowerShell”, this will bring it out, click it to open the PowerShell
• In PowerShell, type ‘ssh’ and click the Enter key on your keyboard

You are expected to see the usage instructions like this

PS C:\Users\USER> ssh usage: ssh [-46AaCfGgKkMNnqsTtVvXxYy] [-B bind_interface] [-b bind_address] [-c cipher_spec] [-D [bind_address:]port] [-E log_file] [-e escape_char] [-F configfile] [-I pkcs11] [-i identity_file] [-J destination] [-L address] [-l login_name] [-m mac_spec] [-O ctl_cmd] [-o option] [-P tag] [-p port] [-Q query_option] [-R address] [-S ctl_path] [-W host:port] [-w local_tun[:remote_tun]] destination [command [argument ...]]

If you did not see this, then you will have to install OpenSSH, which can be found in the settings of your Windows OS.
• The next step is to create the SSH key on the PowerShell by typing the command ‘ssh-keygen’
This will prompt you to input the file name you want to save the key into; if you do not input this, it will save the key into a default file name.
You will also be prompted to type in a password twice, which will act as the passphrase for the key
After this, you will see a message like this:

Your identification has been saved in ozoSSh Your public key has been saved in ozoSSh.pub The key fingerprint is: SHA256:SRxDqca9xn0U64HewqfjHcuKJSw0llIhVDPIa0oj+ms user@DESKTOP-EB25MV0 The key's randomart image is: +--[ED25519 256]--+ | ooo=.+. | | o. =.o . | | o.oo . o | |. o o.+o... + | |.o +..=.S= + . | |. . + o+ = = | | . ..o .=. | | E . +oo o | | ... ..oo+ | +----[SHA256]-----+

This signifies that the keys have been created.
• Type the ‘ls’ command to display the files in that directory. Search for the file you saved the key in, you will see two files with the same file name, just that one of them has ‘.pub’ attached to it as a suffix
• Type “cat the file name with .pub”,
this will display the public SSH key, copy it and paste it in the SSH key column in your Digital Ocean. This is done while creating your droplet/server on Digital Ocean.

• Now that you have created your droplet/server on Digital Ocean, the next thing is to copy the IP address and return to the PowerShell.

• In PowerShell, you can then type;
“ssh –i the file directory of the private key, i.e the file without the .pub suffix root@IP address of the remote server”
This will prompt you to type in your passphrase used to set up the SSH key before you are logged in.
The logic here is that as the SSH key pair is created, the public key is saved in your remote server; you need the corresponding private key, which the server will compare with that of the public key in order to grant you access to the remote server. If for any reason, the private key does not match the public key, you will be denied access to the server.

How i solved a bug😀😀😀

Ozoemena — Mon, 26 Feb 2024 21:08:33 +0000

I was working on a personal project that is very personal to me. I am building an app that will help business people record their transactions and provide security for them against employees stealing from them too. This project is special to me because it is focused on my Igbo people who happen to be mostly traders and uneducated. I wanted to create a delete button that would enable them to delete an entry. I noticed that when I make an entry and delete it before saving it at the backend, it works perfectly but when I want to delete an entry fetched from the backend, it throws an error. At first, I was thrown off as I did not expect it. I remembered the advice from my mentor, he said that whenever I have a bug, I should calm down, and investigate every step before calling for help. His reason is that that is the only way to grow faster. I followed that advice and discovered the problem.
At the button
state.map((item) => {
deleteHandler(item.id)}>... })
Now when I click on this button, it picks the particular item that is mapped and extracts the id for that item. The id is then taken as a parameter for the deleteHandler function which filters the array of objects and looks for the item with an id equal to that filtered out, It then renders the remaining that are not the same with the id.
I discovered that entries made at the frontend have this id and are easily deleted but the entries from the backend, that's where the problem is, it does not have an id key, but _id and so when the id is consoled gives me "undefined". Now the problem becomes, how to distinguish this that with a click, an entry will be deleted whether it's coming from the front or back.
After some thought, I had to come up with an idea, a conditional statement that checks to see if the item has an id or if the id is equal to "undefined". Instead of extracting the idof the entry when clicked, i decided to pick the whole entry so that the delte function will check if it has an id or if the id is equal to undefined.
state.map((item) => {
deleteHandler(item)}>... })
That is how I was able to solve that problem.
Looking back at the whole thing, I feel proud as it gives me that dopamine rush and a sense that am getting towards becoming the kind of programmer that I want to be, one that uses codes to solve problems. I do not want to just write codes, I want to solve problems faced by business people, farmers, hospitals, government and their agencies. I want to add value to human life.

Understanding the “this” keyword and Execution Context

Ozoemena — Tue, 09 Jan 2024 22:48:02 +0000

Introduction

If you had read my previous article, you would have understood that scope is simply a set of rules that controls how reference to a variable is resolved.
In this article, you will learn

The meaning of Execution context
How it differs from the scope
“this” keyword
Type of Execution context
Phases of Execution Context creation

Execution Context

Aside from scope, another characteristic that determines what a function can assess and cannot assess is the execution context. Execution context is simply an environment created by the JavaScript engine that contains all the codes to be executed and all that is needed for that execution to take place.
A function is exposed to an execution context via its “this” keyword. The "this" keyword is like a link that connects a function to its execution context and as such determines the variable it can and cannot assess. “this” is a dynamic characteristic of a function which is determined any time a function is called.
Both scope and execution context are objects, the difference is that while execution context is like a tangible object whose properties are available to a function anytime it is called, a scope is an object hidden in the JavaScript engine and does not change and its property takes the form of identifier variable which is available inside the function.

Type of Execution Context

Global Execution Context (GEC)
Functional Execution Context (FEC)

Global Execution Context, GEC

This is the default execution context in that it is the first environment created when a JS code is first received, as such there can be only one Global Execution Context (GEC) within a JavaScript file. It is the environment where all codes that are not inside a function are executed.

Function Execution Context, (FEC)

This is the environment created to execute the code within the GEC whenever a function is called. In other words, GEC includes both the codes that are inside and outside a function while FEC contains only the code inside a function. Since there can be more than one function in a JS file, there can be more than one FEC in a GEC.

Phases of Execution Context creation

Creation phase
Execution phase

Creation Phase

During the creation phase, the EC is associated with the Execution Context Object, ECO. The ECO is where all the data needed for the execution of the code is stored. The creation phase is in 3 stages
a. Creation of the variable object (VO)
b. Creation of the scope chain
c. Setting the value of the "this" keyword

a. Creation of Variable Object, VO

The VO is like a container that stores all the variables and function declarations defined within the execution context. When we use the var keyword to declare a variable, a property is added to the VO which points to the variable and is set to undefined. This property is stored in the memory. This means that once a function is declared, it is stored in memory and made accessible in the variable object even before the code starts running. This is called hoisting.
Hoisting implies the process in which variable and function declarations are stored even before the code is run.
FEC does not create a VO, rather it generates an array which holds all the arguments needed by that function.
Both function and variable declaration are hoisted, this means that they are both stored in memory of the EC’s variable object and made available within the EC even before the code runs. This is the reason why a developer can choose to declare a function before calling it or call a function before declaring it. Both will still work as the browser will declare a function first due to hoisting before being called.
In variable hoisting, when a variable is declared with the var keyword, it is stored in the Execution Context’s memory and a property is assigned to it with its initial value set to undefined. This is the reason why trying to assess a variable before it is defined will give you undefine.

console.log(greetings)
var greetings = “Hello world”  // undefined.

It is important to also note that hoisting only works for function declaration and not function expression for this same reason.

myName()  
Function myName(){
  Console.log(“Emeka Ojukwu”
}
//Emeka Ojukwu

myName()
var myName = function(){
 console.log(“Emeka Ojukwu”
}
//undefined

In the first example here we called the function first before declaring it and it worked, the reason is because of hoisting, the browser declares the function before calling it. In the second example, it did not work because the function is stored in a variable and its property is initially set to undefined, calling it before declaration will give us the initial set value of undefined. That is why function declaration will work when called before declaration while function expression will not work if we call it first before declaring it.
So one difference between a function declaration and a variable declaration is the fact that the property of the variable is set to undefined while that of a function declaration is not. Hoisting does not work for const and let so trying to assess it before defining it will give you a ref error.

b. Creation of Scope

So far we have seen that scope simply means a mechanism that tells us how a piece of code can be assessed from the code base, from where and by what.
FEC creates its scope, this is an environment where the functions and all the variables it defined can be assess
In the case of a nested function in which a function is inside another function, the daughter function has access to the variable declared in its parent function and that of the global scope. This is called lexical scoping. Let us look at the following example

From the above example, we can see that the second function is nested inside the first function. When the first function is called, the browser tries to execute it only to find another function call inside, second(), it enters it to execute it, and it realises that there are three variables here, a, b and c. The browser first checks the VO2 scope for the variables, it finds only c, it then moves to the VO1 scope to search for the other variable, it finds b, then it will move to the next which in this case is the global scope, there it will find the variable. So the browser travels from the point of invocation to the global scope up the scope of an execution context, this is called the scope chain. So scope chain is actually from the point of invocation to the global scope and not the other way around.

c. Set the value of the “this” keyword

The "this" keyword refers to the scope to which an execution context belongs. In the global execution context, this refers to the global object which is the window object. Let us take a look at this example

var   Car  =  “Innoson”
  function addOne(x){
       console.log(x + 1)
   }

This is the same as

 window.Car  = “Innoson”
  window.addOne(x){
       console.log(x + 1)
   }

It is important to note that the FEC does not create its own “this” keyword, rather it gets access to that of the environment in which it is defined in

 var msg  = “My name is Igwebuike”
 function printMsg(){
     console.log(this.msg)
}
printMsg() // My name is igwebuike

The "this" invoked in the printMsg function can access the msg variable because it points to the GEC of which the printMsg function has access.
In the object, unlike the function the “this” keyword does not point to the GEC but to the object itself

 var  msg  = “My name is igwebuike”
  const Car  = {
  msg  = “Am the man”
  printMsg(){console.log(this.msg)}
}
Car.printMsg()//Am the man

This is because the printMsg function has access to the object and not the GEC

Execution Phase

After the creation phase comes the execution. It is at this point that the JavaScript engine runs through the code in the EC, and changes the value of the variable object from undefined to its actual value. The code is passed by a parser which transpiles the code to executable bytes and then gets executed.

Conclusion

Am sure you have learnt something in this article. Remember

Scope is a set of rules that determines how a variable is assessed
Execution Context, EC is the environment that contains the codes to be executed and all that is needed for the code to be executed
There are two types of EC, global execution context, GEC and function execution context, FEC
GEC creates its own this keyword while FEC do not
Hoisting is the reason why we can call a function declared using the var keyword as the property of the variable object is not set to undefined unlike that of a variable whose property is set to undefined. This is the same reason why we cannot call a function expression before it is defined because it is stored in a variable so the browser sees it as a variable
The "this" keyword is simply a link that connects a function to its execution context.
Scope and execution context are two factors that determine what a function can assess and what it cannot.
Scope chain refers to the movement of the browser from the point where the function is invoked to the global scope. It cannot move in the opposite direction.

Closure, Scope and lexical scope simplified

Ozoemena — Mon, 01 Jan 2024 13:30:08 +0000

Introduction

Kunle is a thief, he stole from Iya Basira jewellery store in Lagos and managed to escape through the Seme border to Togo. The Nigerian police have been on his trail for some days now, and have gotten an intelligence report of his whereabouts, they traced him to Togo. The Nigerian police cannot enter Togo to arrest because that is outside their area of operation and so they contacted Interpol to help them make the arrest. With the help of Interpol, Nigerian police were able to arrest Kunle and bring him back to Nigeria to face the law. Now that is closure, the ability of a function to assess a variable outside its scope even when the function is executed in a different scope.
In this article, you will be learning
• what closure is

• what a scope is
• local and global variable
• Precedence between global and local variable
• Scope chain
• Lexical scoping

Scope

Scope is simply a set of rules that controls how reference to a variable is resolved. Let’s look at scope as simply an environment, a space where a function or variable can be assessed.
Local and Global Variable
Let's begin by looking at what a variable is, a variable is like a cup that you can put some water in and cover it, you can assume it to be a bowl, bucket, or box that you can store your money in and keep it. A variable can be local or global. When a variable is local, it can only be assessed by the function in which it is declared and when a variable is global, it can be assessed by all the functions within the page because it belongs to the scripting page. Let us take a look at these two examples:

function myFunction(){
      let a = 4
      return  a*a
}

You can see that the variable a, was declared inside the myFunction and as such can only be assessed by myFunction. This makes it local as it can only be used inside the myFunction function and is hidden from other scripting code outside
Now look at this example:

let a = 4
function myFunction() {
return a*a
}

Here you can see that the variable was declared outside the myFunction function and as such belongs to the scripting page. This makes it accessible to other functions within the page because the variable is a property of the page. It is important to note that local and global variables are not the same even if they have the same name. In a case where the local and global variables have the same name, the local variable takes precedence when the function is called, after the function execution, the local variable goes out of scope and the global variable takes precedence. This is called variable shadowing.

function myFunc() {
    let myVar = 'test';
    if (true) {
        let myVar = 'old test';
        console.log(myVar); // old test
    }
    console.log(myVar); // test
}
myFunc();

In this code block, we can see that there are two variables with the same name, myVar. One is local, the other is global. We can see that when the variable is first consoled inside the if statement, it returns the “old test” instead of “test”, the reason is that the local variable shadowed the global variable within the if block scope. When the came variable was consoled outside the if statement, the global variable was given precedence.
We can create a variable without the declaration keyword (var, let and const). This kind of variable is always global even if they are created inside a function. While the global variable lives until the window is closed or you move to another page, a local variable is created when the function is invoked and dies when the function call finishes.
Scope Chain
From the example above we saw what global and local scope mean. Let's look at the scope chain and what it means.
Consider this code block:

let firstName = "kings"
function myName(){
   let lastName = "Badmus"
    function myLastName(){
       let address = 3
       function myProfile(){
           return console.log(`my name is ${firstName} ${lastName} and I live at ${address} blv road`)
       }
       return myProfile()
    }
    return myLastName()
}
myName()

when this function is invoked, for the browser to give an output, it needs to look for the variables where they were defined (its lexical scope), it first looks at the myProfile function which is its local scope, if it does not find the variable, it will then look at the parent scope which is myLastName function where it finds address variable. It then looks at a higher scope to see if it can find another variable. It then looks at the next scope which is the myName function to find another variable. Finally, it looks at the global scope to see if it can find the remaining variable.
The browser can only travel from the child to the parent and not the other way around. This is called the scope chain. That is, all the scope the browser needs to travel from the innermost scope to the global scope. In this case, from myProfile() scope to myLastName() scope to myName() scope to global scope.

Lexical scope

This is simply the scope in which a variable is created or defined. The scope where a variable is defined can be different from where it is invoked or called. An item definition space its lexical scope.
Let us look at these two examples:

let car = “Innoson” 
function myCar(){
   return car
}

In this example, the car variable is defined at the global scope so its lexical scope is its global scope and as such the myCar function can assess it since it is at the global scope.

function myCar(){
Let car = “innoson”
Return car
}

In this case, the scope of the car variable is local and as such that is its lexical scope and can still be assessed by the myCar function since it is within its reach.
In writing code, the lexical scope needs to be put into consideration as that will determine how our program will run. This is because only code within a variable lexical scope can assess it. Let’s look at this

function showName(){
  const lastName = “Offor”
return lastName
}
function disPlayName(){
  const fullName =  “Emeka” + lastName
  return fullName
}
console.log(displayName())

We will get an error: Uncaught ReferenceError: lastName is not defined
This is because the displayName() is trying to assess a variable outside its lexical scope. lastName has a local scope and is defined inside the showName function and as such its lexical scope is within the showName function. It cannot be assessed outside the showName function, that is the reason for the error. Let us look at it differently

function showName(){
  const lastName
return lastName
}
function disPlayName(){
  const fullName =  “Emeka” + showName()
  return fullName
}
console.log(displayName()) //Emeka Offor

This code worked because both the showName() and displayName() are in the same lexical scope, the showName() returned the variable which can then be assessed by the displayName()

Pros and Cons of local and Global variable

It is considered best practice to declare a variable with a limited scope. This is to reduce the impact of other functions on it and its visibility within the program. However, there are cases in which a global variable has more advantage than a local variable, examples are in cases in which multiple functions are to manipulate a particular variable. Another case in which a global variable has an advantage is in a case in which we need to preserve the value of the variable, an example is a case in which we need to preserve and keep track of user login details, we store it in a global variable so that it can be made available for multiple functions. It is important to declare a global variable using const as that will keep it from being changed.
Global variables have their drawbacks in that they make our codes complex and difficult to understand and maintain and can be a source of bugs as it is being impacted by several functions. Aside from these advantages highlighted, it is advised to store our data in local variables as it makes our code easier to understand, reduces bugs and limits its scope.

Conclusion

In this article, we have been able to learn about variable scope, scope chain, lexical scope, and closure. I hope you enjoyed the article, please leave a comment for me

Map data structure

Ozoemena — Sun, 31 Dec 2023 13:53:22 +0000

Introduction

Map data structure is also known as a dictionary, associative array or hash map.
It’s a data structure that stores a collection of key-value pairs where each key is associated with a single value. Map remembers the original insertion order of the key, this helps to provide an efficient way of storing and retrieving data based on a unique identifier (the key). It is efficient as it allows for fast lookup, insert and delete.
• In this article, you will be learning
• map methods
• Use of the different map methods
• Types of map

Hash Map
Tree Map
Linked Hash Map
Tries Map
Bloom Filter Map

Map Method

Different methods can be used to manipulate a Map such as

- Map() constructor

This is used to create a map object. We can create a map using the new keyword. Without the new keyword, the browser will throw a TypeError
Syntax: new Map(iterable)
In this case, the iterable can be a two-element array or any other iterable object with a key-value pair element.
For example

Const cars  = new Map([
      [“Toyota”, 20],
      [“Innoson”, 54],
      [“Honda”, 64],
      [“Accura”, 14]
  ])

- set()

Having created a Map, we can decide to add an element to a map or even change an existing map value.

Const cities  = new Map()
 cities.set(“Enugu”, 1996)
 cities.set(“London”, 1902)
 cities.set(“Bangui”, 1956)

In the above examples, we are adding name of cities and their value to the cities map. To change the value of one of the cities, this is how to do it
cities.set(“Enugu”, 1994)

- get()

We can actually get the value of a key in a map using the get method. This takes in the key as a parameter. For example

Const cars = new Map()
Cars.set(“car”, “Innoson”)
Cars.get(“car”) // Innoson

- forEach()

This is a map method that executes a callback function for every member of the map object. This function have value and key as argument. It is actually an iteration method.
cars.forEach((value, key) => {…})
For example

 Cities.forEach((value, key) => {
      return console.log(`This is my city, ${key} established in the year ${value}`)
    })

- The delete(“key”)

This deletes a particular element using the specified key in the map

- The clear()

method, clears the whole element in the map object

Types of Map

1. Hash Map

This uses a hash function to map a key to an indices in an array. It takes a key as an input and produces an index to which a value can be stored. Its time complexity is 1(O) for operations like insertion and retrievals

2. Tree Map.

This is the type of map that is employed in binary search tree. In this type of map, the key is stored in a sorted order. This allows for an efficient searching, insertion and deletion operation. The time complexity is O(Logn)

3. Linked Hashed Map.

Linked hash map is just link the hash map only that it keeps track and order of insertion. It provides where the elements can be assessed in their insertion order.
It is just an extension of the hash map and implements the map interface. It uses hash to replace the key, this makes search and insertion faster. Since it is an extension of hash map, data are stored in a key-value pair. That is, for every value, there is a key associated with it. Since linked hash map stores the insertion order, the node parameter contains address of the next node in the linked hash map. While previous contains address of the previous node.

Feature of linked hash map

• It contains value based on the key
• They contain unique element
• They can have multiple null value but one null key
• They are non-synchronized
• It is the same as hash map but only differ in that it keeps the order of insertion.

4. Tries Map:

This is used to find string with a given prefix. It stores a set of string where each node in the tree represent a prefix of one or more string.

5. Bloom Filter Map

This uses a bloom filter to determine if a key is present or not
Map data structure uses object as key and associate a value (of any type) to that object.
In map data structure, iteration is done over the entries and not the value. An entry is actually a key-value pair, that is a tuple.

Conclusion

In this article we have being able to learn what map data structure is, map methods, their uses, types of map such as hash map, linked hash map, tree map, tries map, bloom filter map and their uses.

Class, Instance and Reference

Ozoemena — Wed, 06 Dec 2023 10:42:10 +0000

Introduction

Let us imagine that I decided to open a shop where I sell cars and I invited you to come to my shop and see what I have. On coming to my shop, you see a notice at the front door
OZOR CARs

Colour: Blacks only
Make: Innoson Motors
Year of manufacture: 2020 and above
Features: mileage update, display fuel consumption, accident history

If I tell you there are 5 cars in my shop, what are you expecting each of them to have? Blacks, only Innoson motors, 2020 model and above. This means that you will never find a red car, nor a Toyota brand of car in my shop. Why? Because there is a template that determines what is sold in my shop.

In this article, you will learn

What a class is
How to create a class
Class declaration and expression
Reference and instance

What is a class

A Class is like that template at the door of my shop telling you what to expect from each of the cars you will find in my shop. Each of the cars in my shop are object and are example (instance) of the class template at the door of my shop. Each object can vary in one way or the other but they must have the features in the template (that is they must inherit this feature from the template, class).

How to create a class

To create a class in JavaScript we use the keyword “class”. Let us define the class car

 class  Cars {
        ….    
      }

This is called class declaration. Another way we can declare a class is

Const Cars = class{
   …..
  }

In this second example, we store the class inside a variable.
We can also decide to export this class either as default or as named export

 export default class Cars{ 
                              …….
                            }

Export class Cars {
                   ………..
               }

An object is an example (or copy or instance) of a class. A class is not an object in itself but a template from which we can produce many objects. So we use the “new” keyword to instantiate(produce) an object from the template which is a class. A class usually contains a constructor function which helps us to set the initial value for the field. For example

  Class Cars{
           Constructor(name){
                   this.name = name
                      }
               }

The “this” keyword points to the newly created instance(copy which is an object)
The newly created instance now will be

               Const car = new Car{
                               “Innoson Ikenga”
                             }

Classes are special functions, just as we have function expression and function declaration, we can have class expression and class declaration.
An example of a class declaration is

Class Rectangle{
                Constructor(height, width){
                 this.height = height;
                 this.width = width;
                }
           }

An example of a class expression is

Const Rectangle   = class {
                     Constructor(height, width){
                                 this,height  = height;
                                 this.width  = width;
                           }
                       }

The latter example is an anonymous class expression. We can have a named class expression as given below

Const Rectangle  = class Rectangle2 {
                     Constructor(height, width){
                                 this.height = height;
                                this.width = width;
                                     }
                                 }

Unlike function declaration, class declaration cannot be called or used before its declaration and initialization. This is because it has a temporal dead zone just like let and const. The body of a class is inside the curly bracket and it is in this bracket that we can define the members of this class such as its method and constructor. A class uses the strict mode even when the “use strict” is not indicated. The constructor is a method used to create and initialize an object created within a class. There can only be one constructor in a class.
We can characterize the elements of a class in 3 ways

a. It's kind: is it a getter, setter, method or field
b. Its location: is it static or instance
c. Its visibility: is it publicly visible or privately visible?

Reference

Let us take a look at this
var obj = new Car()
What can we derive from this expression?
The keyword “new” is used to create a copy of a class called Car (Car is the name of the template here) and is stored in memory. So the new copy newCar() is an instance (more like an example of the original template Car) of an object in memory. It too is stored in memory.
When we declare a variable like obj and point it to the newly created object, newCar(), what we are doing is that we are attaching an address (a reference) to the variable. This can be likened to assigning an address to a house.
The reference( or address) allows us to access the instance (copy of the class which is an object). As such, we can have many references to the same instance. For example

var x = “Hello World”
                var y = x

both x and y are two different references to the same instance
In Conclusion, we can say that
a.

Babel, The transpiler and polyfiller

Ozoemena — Mon, 20 Nov 2023 18:29:44 +0000

Introduction

When I was in high school, there was a clothing trend called “Fela” after a popular musician. It is a tight fitted pants which spread out from the kneel down. It was the reigning thing then. Now, no one wears that again, if you do, you will be called OLD school.
In this article, you will be learning about transpilation, polyfilling, and how Babel functions to help bridge the gap as a transpiler and polyfiller.

Transpilation

Whenever a new syntax is created in JavaScript, it usually creates a gap as it cannot run on older engines. JavaScript is not a forward-compatible language and as such newer syntax needs to be converted in such a way that older engines can understand it so as not to create a gap problem.
For example, creating an ES2019 feature will not run in the 2016 engine. This gap is a problem that has to be resolved and that is where Babel comes in.
Just like you take your “fela” pants to the tailor to mend them so that they fit into the acceptable style, Babel helps to “transpile” your codes to the acceptable format so that they can be understood by the older engines. Babel is a transpiler that helps to convert newer syntax to an older syntax so that old engines can understand them
For example, the code:

If(true) {
   Let v = 3;
  Console.log(v)
 } else {
    Let v = 4;
   Console.log(v)
   }

In the case above, the let is used to create a block scoped v which does not interfere with another variable v created in another block scope. This cannot run in older JavaScript engines but with Babel, it is converted to

 Var $ 0, var $ 1 ;
  If(true){
  V$0 = 3
  Console.log(v$0)
  } else {
 V$1 = 4
Cosole.log(v$1)
}

Babel decides to produce two different variables v$0 and v$1 with unique names to achieve the same noninterference.
The reason for transpilation is that developers are expected to write clean codes with the newest syntax so as to be able to communicate their ideas most effectively.

Polyfiller

If the forward compatibility issue is that of an API, the API method which is not recognized by the older version is polyfilled or shimed.
Polyfilling is a piece of code used to provide modern functionality on older browsers which do not support them. Polyfills are mostly not used today because native APIs are faster in browsers and most browsers implement a broad set of APIs according to standard semantics.
An example of polyfill is the session storage API which is available in IE8 browser upward but not in IE7 and below.
The word polyfill was invented by Remy Sharp while thinking of a suitable name in a coffee shop.
What Babel does is quietly look for which polyfill our codes need and provide it automatically.

Conclusion

Transpilation and polyfill are two techniques used to fill in the gaps between codes with the latest stable feature and an outdated application or environment that needs to use the code. Since JavaScript is always improving, the gap will never go away.

Unit testing: The Beginner's guide

Ozoemena — Mon, 09 Oct 2023 15:20:53 +0000

Unit Testing: Beginners guide

Introduction

Think about it, how is it that builders are able to erect a tall, straight wall? By checking each block laid with a plumb line to make sure they are on a straight line. That is what every developer does to each function, method and code to make sure they give the expected output.
JavaScript unit testing is a JavaScript testing framework built by Facebook primarily to test React-based apps. It can actually be used to test any JavaScript codebase.
In this tutorial, you will be learning
• What unit testing is all about
• Steps to unit testing
• Properties of a good unit testing
• Advantages and Disadvantages of unit testing
• Installation of jest
• How to write a Simple unit testing
• Matchers
• How to test for numbers, String, object, array and truthy

What is unit testing

Unit testing is one of the early precautions taken during the software development process. It is a process in which the smallest, testable part of an application is scrutinized to see if it works as intended. It involves the isolation of code such as function or method into small independent units and testing them individually. The idea is to pick these functions and methods and isolate them by replacing the external dependencies like the network connection and database with dummy objects.

Steps to unit testing

As a developer, you might not be able to test every line of code as this will waste a lot of your time, it is important to focus on codes that are critical to the performance of your application.
Unit testing is a component of test-driven development (TDD). TDD is a methodology that involves three critical activities that are interwoven. They include unit testing, coding and design (in the form of refactoring of code). TDD is all about Red/Green testing. This means that we would write the test, fail the test, and then finally write the code to pass the test.

Properties of a good unit test

Small and focused: testing a single unit of code makes it easier to debug and locate the source of the problem
Write the test before the code. This makes it easier for developers to think about the functionality and clarity of code. It makes it easy to write testable code.
Use of descriptive test names. This is important as it helps developers to understand what the test code is meant to do.
Use assertion (expressions containing testable codes) to ensure that the code output matches the desired behaviour.
Test edge cases such as boundary condition, null, empty input and other less common scenarios that could still occur.
Run tests regularly
Refactor the codes and make sure they test the intended functionality

Advantages of unit testing

a. It helps in the early detection of bugs
b. It makes it easier for a developer to change the code base
c. It makes fixing errors cheaper
d. Improves code quality
e. Faster development cycle as it reduces the time for debugging

Disadvantages of unit testing

It won’t uncover every bug
It won’t catch errors in integration with other data sets
Multiple lines of test codes need to be written to test one line of code
It has a steep learning curve

Installation of Jest

We will look at how to write a simple unit test in JavaScript using Jest.
To do this you need to make sure you already have node and vscode installed in your computer.
Open your Vscode terminal and type the following command
a. npm init –y this helps you to install the node module dependencies and the package.json file
b. npm i –D jest this installs the jest
c. In your package.json file add the following section

{
    “script”: {
               “test”: “jest”
         }
}

d. Your package.json file should look like this

{
  "name": "jest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^29.7.0"
  },
}

How to write a simple Jest Testing

Create a file named function.js. This is where you write the function you want to test. In this case, the name of the function is “add”. You will notice that it is isolated and packaged inside an object called functions. This function object is then exported to the file where it is going to be tested

const functions = {
    add: (num1, num2) => num1 + num2,
}
module.exports = functions

Import the function into the test function, function.test.js

 const functions = require('./function')

test('Adds 2 + 2 to equal 4', () => {
  expect(functions.add(2,2)).toBe(4);
});

In line 1, the code is imported from the function file.
In the next line of code, the test method is used to test the function imported from the function file.
The test method takes two parameters, the first parameter is a string and gives us a description of what is being tested. The second parameter is a function that uses the expect method to test the add function. In this case, the add function accepts the required parameters, 2 and 2. This is then compared to the output which is 4 using the toBe method.

At the terminal, type "npm test" to test the code if it passed or failed.

We might want to just include the function in the test function rather than importing it from an outside file. For Example

test('Should be under 1600', () => {
    const load1 = 800;
    const load2 = 700;
    expect(load1 + load2).toBeLessThan(1600)
})

Matchers

In jest, matchers are used to test values in different ways. There are different types of matchers depending on the kind of value you want to test.

Equality Matcher

In the previous examples when the code expect(function add(2 + 2) returns an expectation, you will need to add a matcher .toBe(4) to them in order to ascertain if the outcome matches. toBe matcher test for an exact equality of values using the Object.is

test('Adds 2 + 2 to equal 4', () => {
  expect(functions.add(2,2)).toBe(4);
});

We can also test the opposite of a matcher using the not. Take a look at the following test code.

test('addition of positive numbers not equal to zero', () => {
    for(let i = 1; i < 10; i++){
        for(let j = 1; j < 10; j++){
            expect(i + j).not.toBe(0)
        }
    }
})

In this test code, we are testing a set of two numbers sum together using nested for loop. We want to find out the chances that the sum of any two numbers is not equal to zero

Floating Number Matcher

When testing for floating numbers, we don’t use .toBe matcher as it will fail because of rounding error. We rather use .toBeCloseTo matcher. For example

test('adding floating point number', () => {
    const value = 0.53 + 0.23;
    expect(value).toBeCloseTo(0.76)
})

Array and Object Matcher

While the .toBe matcher is for primitive number values, we can decide to test for arrays and objects using the .toEqual matcher. This compares object and array recursively (repetitively) by checking every field in the object and array.

test('comparing object', () => {
    const detail = {
       name: "Franklin",
       age: 14
    }
    detail["gender"] = "male"
    expect(detail).toEqual({name: "Franklin", age: 14, gender: "male"})
})

We can check if an iterable such as an array contains an item using the toContain matcher. toContain matcher actually uses the (===) strict equality to check if an array contains an item. It can also be used to check if a string is a substring of another string.

test("check if 'Mazda' is in the list of cars", () => {
    const carList = [
        "Toyota",
        "Volvo",
        "Mazda",
        "Honda",
        "Kia"
    ]
    expect(carList).toContain("Mazda")
})

Number Matcher

We can also test for numbers using the equivalent matcher. For example

test('testing for numbers using equivalent matcher', () => {
    const value = 2 + 2
    expect(value).toBe(4)
    expect(value).toEqual(4)
    expect(value).toBeGreaterThan(3)
    expect(value).toBeGreaterThanOrEqual(3.5)
    expect(value).toBeLessThan(5)
    expect(value).toBeLessThanOrEqual(4.5)
})

From the above test code, we can see that it is possible to use more than one expect code to test for numbers in a test code.

String Matcher

We can test for a string using a .toMatch matcher and a regular expression

test("there is no V in psychology", () => {
    expect("psychology").not.toMatch(/V/)
})
test("check for 'urc' in Church", () => {
    expect('Church').toMatch(/urc/)
})

Truthy Matcher

We can test for truthy and falsy values using:
toBeNull which matches only Null
toBeUndefined which matches only undefined
toBeDefined which is the opposite of toBeUndefined
toBeTruthy which matches anything an if statement treats as true
toBeFalsy which matches anything an if statement treats as false

Information at the Terminal: When the test passed

When we run the test and it passes, we are expecting to see the following information in our terminal. From the information provided at the terminal, we can see that there are 12 tests carried out and they all passed. At the end of each of them, you can also see the amount of time taken for the test to be executed. As a programmer, it is important we try to write codes that get executed in the shortest possible time as it will mean that our application will run fast.

From the image above you can see that the statements underlined in yellow are the string in the test function which describes what we are testing, while the time taken to execute is circled in red. The part circled with a blue marker gives us a summary of the whole test carried out. The total number of tests was 12 and the total time spent on all the tests was 0.838 sec. If you look closely you will notice that one of the tests has the highest time of execution, 17 ms. This is because it is a test for a nested for loop and had the highest time of execution.

When the test failed

If we take a look at the summary of the test, we will see that there are 12 tests carried out in total but only 11 passed the test. The one that did not pass is also shown in red mark. The description of the failed test is also shown in red. It goes further to indicate what is expected as against what it received from the input. This information helps us to input the right information so as to pass the test.

Conclusion

In this tutorial, we have been able to examine what unit testing is all about, how to install jest, how to write, the different matchers and finally a brief interpretation of the information at the terminal.

Map()

Ozoemena — Fri, 29 Sep 2023 09:56:32 +0000

INTRODUCTION

Have you ever eaten bean cake before (it is called akara in Nigeria)? do you know how it's prepared? let me teach you how!
you get your beans, soak it in water to remove the outer layer then take it to a grinding machine, grind it to paste and deep fry in vegetable oil. finish, food is ready!
But I do not intend to teach you how to cook, though I just did😂😂, but to draw a similarity with what map is all about. map() is an array method or function that creates a new array, it doesn't alter the original array.
Now, imagine that your beans are the original array, more like your raw material, you take it to the grinder which in this case is the map() function. for every grain of beans that passes through the grinder, it is changed to a paste form and released to you.

MAP()

The map method is an iterative method (meaning it goes through each member of an array one after the other) which creates a new array. A map function takes a call-back function which holds the instruction of what is to be done to the raw materials coming in.

Syntax

Array.map(callback function)
Array.map(callback function, Arg)

Mapping Array of Numbers

Const arr = [1, 2, 3, 4, 5]
Arr.map((x) => x + 2)

From the above code snippet, we see that the map method has a call back function which usually carries an instruction on what is to be done on each of the elements of the original array, arr to produce a modified element that makes up the new array. In this case, the map method is supposed to add 2 to each member of the original array. This modified element makes up the new member of the new array which is produced. If you look at the map method, you will see that the callback function first defined an argument, x which stands as a placeholder or represents each element of the array that is to be processed, in this case, arr array, returned the modified x with 2 added to it.

Mapping Array of Objects

We can map an array that contains several objects in it to get the individual objects and display them on the browser. For example, when handling data from a database, they usually come in the form of an array with an object of individual information in it. We can use map method to distil it and display the information. For example.

Const arr = [
              {id: 1, firstName: “Kenneth”, lastName: “Surrel”, age: 15, Nationality: “British”},
              {id: 2, firstName: “John”, lastName: “Gomez”, age: 54, Nationality: “Mexico”},
             {id: 3, firstName: “Ali”, lastName: “Mohammed”, age: 33, Nationality: “Morroco”},
             {id: 4, firstName: “Yu”, lastName: “Gong”, age: 44, Nationality: “China”} ]

This is the data we got from our database and we want to display it on the browser. We need to first map through it to grant us access to each of the objects before we can begin to work on the element of each object. This is what we will do

 Arr.map((item, index) => 
         return (  <div key=”index”>
                  <div>{item.firstName} {item.lastName}</div>
                  <div> {item.age}</div>
                 <div>{item.Nationality}</div>
         </div>))

We can see that the map method iterates through the array in order to have access to each object in the array before we can inject them into an HTML tag. For each iteration, it is expected that we put in a key using an index generated by the map method itself or we use the id of each of the objects as the value for the key. You will also notice that the map method returned an object and as such it becomes important that the returned item be wrapped in a parenthesis

Conclusion

We have been able to look at map method of an array, its behaviour, syntax, examples and most importantly the fact that a map method produces a new array which is different from the original array, that is, it does not mutate the original array.

useEffect Hook

Ozoemena — Fri, 29 Sep 2023 09:52:36 +0000

useEffect
Before we begin to talk about useEffect, we need to first talk about the fact that component function just like Js functions are pure functions. Pure in that their out puts are predictable. Js functions take arguments as input, component functions take props as input and brings out a JSX.
On the other hand, side effects such as getting data from the DB using an API, interesting with the browser and timing function are unpredictable.
Performing a side effect in our component function from the "outside world" affects the performance of our component. It interferes with the rendering of our component function. Irrespective of this, we still need to carry out side effects in our components and get it to render after our component has rendered. How do we do that? useEffect
useEffect is a tool that helps us to interact with the "outside world" without affecting the performance(rendering) of our component it is in. It does this by making sure the effect is rendered after the component has rendered.
To use useEffect, the following procedures is followed

import it from react
call it above the return JSX in the component
pass in two arguments: a function and an array. The function which s a callback function contains the side effect to be done. The array which is also called a dependency array contains the values which control the execution of the side effect. We can omit this, that will mean that the side effect will be rendered any time the component renders. we can choose to just put an empty array, that will mean that the side effect will be rendered only the first time the component renders. If we decide to put in a value in the array, the side effect will render only when the value in the side effect changes. For example: function user({name}) { useEffect(() => { document.title.name; }, [ ] );

return

{name}

Thank you for reading. Please I want to read your comment to know what you think.

Import and Export

Ozoemena — Fri, 29 Sep 2023 09:37:58 +0000

Import and Export
Am sure you must have seen this:

export const text = () => {
                  .....
                 }

and

export default const text = () => {
                      ....
                }

What is the difference and how should they be handled?
The first one is called, named export while the second is called default export. They are not the same and as such can not be handled the same.
In a Js/React file, you can have multiple named exports but cannot have more than one default export.
The way they are imported in another react component or file is not the same.
For named export, like the name, you must make sure that its name in the origin file is the same as you have in the file you are importing it to. if the origin file has:

export const text = () => {
                 ...
              }

then you must import it as import { text } from './originFile.js'
Notice that while importing the text function, it is wrapped in a curly bracket, if you don't do this, it will give you an error, undefined.
For the default export, you are more at liberty while importing it, you don't need to wrap in a curly bracket and you don't even need to have the same name. You are advised to give it the same name for easy debugging.

export default const text = () => {
                   ....
               }

import Banana from './originFile.js'
Like I said earlier, the name can be changed and you don't have to wrap it in a curly bracket.