DEV Community: Boateng Dickson

Getting Started with REST APIs

Boateng Dickson — Tue, 04 Jul 2023 03:15:41 +0000

Imagine you're ordering a pizza online. You click on the "Order Pizza" button, and a few seconds later, your pizza is on its way. How does that happen?

It happens thanks to REST APIs.

REST APIs are the invisible glue that holds the modern web together. They allow different applications to communicate with each other, and make it possible to build interconnected and efficient applications.

By the end of this article, you will have a basic understanding of what REST APIs are, how they work, and why they are so important.

Understanding APIs

Before we dive into REST APIs, it's essential to have a solid understanding of APIs in general and how they work.

API stands for Application Programming Interface. It is a set of rules that allow two pieces of software to talk to each other.

A simple way to think about an API is as a set of instructions that tells one piece of software how to communicate with another piece of software.

Let's say you're using the weather app on your phone to check the temperature of your current location. The weather app doesn't generate the weather data itself. Instead, it sends a request to an API designed for retrieving weather information.

The API then communicates with a weather service, which is like a big database of weather data. It retrieves the temperature data and sends it back to the weather app, which then shows it to you on your screen.

In this scenario, the weather app used API as a middleman to access the temperature data. The API understands how to talk to the weather service and fetch the data that the app needs.

The app doesn't have to worry about the technical details of where the data comes from or how it's obtained. It only knows how to ask the API for what it wants.

What is a REST API?

To understand REST API, let's first take a look at some key terms:

Client: An application that makes requests to an API to access information or perform actions. It can be a web browser, a mobile app, etc.
Server: A system that hosts and manages APIs. It responds to clients' requests by providing requested data or performing required actions.
Resource: Any data that can be accessed or manipulated through an API. Resources are identified by URIs (Uniform Resource Identifiers), which are unique addresses that can be used to access them. For example, the URI "/products" could be used to access all products in a REST API.

In simpler terms, REST API refers to an API that conforms to the design principles of the REST architectural style.

REST, which stands for Representational State Transfer, is a set of guidelines that different software applications can use to communicate over the Internet. It establishes a set of principles and constraints to ensure consistent and organized communication.

The core principles of REST include:

Client-Server Separation: The client and server operate with clear boundaries. The client is not concerned with the server's internal workings, and the server does not rely on specific details about the client.
Stateless: Each request from the client to the server contains all the necessary information. The server doesn't retain any context about the client's previous requests. This enhances scalability and simplifies server implementation.
Uniform Interface: This emphasizes the use of standard protocols such as HTTP, to allow platforms written in different programming languages to interact with one another. For example, an application written in C# can interact with an API written in Java.
Layered System: REST APIs are built using a layered architecture, where an API is divided into different layers, each with a specific purpose. This can help to improve the scalability and security of the API.
Cacheable: REST APIs support caching, where clients can store responses and reuse them for subsequent requests. Caching minimizes network traffic and reduces server load, leading to improved performance.

When an API adheres to these principles, it is classified as a REST API (sometimes called RESTful API). This designation signifies a well-designed API that embodies simplicity, scalability, and interoperability.

How does a REST API work?

When it comes to REST APIs, there are two primary actors involved: the client and the server.

The client initiates communication by sending a request to the server. These requests typically include specific instructions, such as retrieving data or performing an action.

Upon receiving a request, the server processes it and sends back an appropriate response. The response contains the requested data or an acknowledgment of the action performed.

HTTP Methods

REST APIs leverage HTTP as the foundation for communication between clients and servers.

HTTP stands for Hypertext Transfer Protocol. It is the language that computers use to communicate over the internet.

HTTP provides a set of methods that clients use to communicate the type of operation they want to perform on a resource.

Some commonly used HTTP methods in REST APIs include:

GET: This method is used to retrieve data from a server.
POST: Used to create a new resource on the server. For example, when you submit a form on a website, you are essentially making a POST request to the website's server.
PUT: Updates an existing resource on the server. It's like replacing the entire content of a file with new content.
DELETE: Removes a specified resource from the server. It's like deleting a file or removing data permanently.

HTTP Status Code

The server responds to each request from a client with an appropriate HTTP status code. They inform the client about the result of the operation.

Some commonly encountered HTTP status codes include:

200 (OK): This means a request was successful, and the server returned requested data.
201 (Created): The server has successfully created a new resource as a result of a request.
400 (Bad Request): The server cannot process the request due to invalid syntax or missing information.
404 (Not Found): The requested resource could not be found on the server.

HTTP status codes play a crucial role in REST APIs. They provide valuable information to clients about the outcome of their requests. By interpreting these status codes, developers can respond appropriately to ensure smooth communication between clients and servers.

Why Use a REST API?

Most of the popular companies today use REST APIs for their applications, including Facebook, YouTube, Twitter, Google, and others.

But why REST?

Here are some of the main reasons why you should consider using REST API in your projects as well:

Simplicity and Ease of Use: REST APIs use standard ways of doing things that many developers are already familiar with, like using HTTP protocol for communication.
Wide Industry Adoption: Many existing systems and services make use of REST APIs. This wide adoption ensures a vast ecosystem of tools, libraries, and documentation, making it easier for developers to work with REST APIs.
Flexibility: The client-server separation feature of REST APIs makes it easy to migrate data to different servers without much hassle. Additionally, when updates need to be made, they can be rolled out swiftly without disrupting the client-side experience.
Efficiency: REST APIs are based on the HTTP protocol, which allows them to support various data formats like XML, JSON, and HTML. These formats are lightweight and easy to parse, which makes REST APIs fast and efficient.

Overall, these benefits make REST APIs the preferred choice for developers who want to build flexible and efficient applications.

Examples of REST

Here are a few examples of some well-known REST APIs:

Twitter API

Twitter provides a RESTful API that allows developers to interact with various Twitter functionalities, such as posting tweets, retrieving user information, searching tweets, and more.

GitHub API

GitHub offers a RESTful API that enables developers to integrate their applications with GitHub's repository and version control features. This API allows developers to programmatically manage repositories, create issues and perform other actions related to various GitHub projects.

Google Maps API

Google Maps provides a RESTful API that allows developers to incorporate maps, geolocation, and routing functionalities into their applications. With this API, developers can embed maps, retrieve location data, calculate distances, and obtain directions.

Stripe API

Stripe offers a RESTful API for processing online payments. Developers can utilize this API to integrate secure payment processing into their applications.

Beyond REST APIs

It's important to note that REST APIs are not the only type of API available. There are several other alternatives, each with their strengths and weaknesses.

Some popular alternatives include:

SOAP APIs (Simple Object Access Protocol) are a more traditional type of API that uses XML to transmit data. SOAP APIs are often used for enterprise applications, but they can be more complex to use than REST APIs.
GraphQL APIs are a newer type of API that is gaining popularity. GraphQL APIs are designed to be more flexible and efficient than REST APIs. They allow developers to request exactly the data they need, which can save time and bandwidth.
RPC APIs (Remote Procedure Calls) are a type of API that allows developers to call methods on a remote server. RPC APIs are often used for complex applications that require two-way communication between the client and the server.

The following table summarizes the strengths and weaknesses of each of the API types:

API Type	Strengths	Weaknesses
REST APIs	Simple, easy to use, widely supported	Not as flexible as some other types of APIs
SOAP APIs	Well-established, secure, reliable	Can be complex to use, and not as efficient as other types of APIs
GraphQL APIs	Flexible, efficient, easy to use	Not as widely supported as REST APIs
RPC APIs	Two-way communication, reliable	Can be complex to use, and not as efficient as other types of APIs

The best type of API for a particular project will depend on the specific requirements of the project. However, REST APIs are a good general-purpose API that is easy to use and widely supported.

Wrapping Up

Thank you for reading!

If you are interested in learning more about REST APIs, I highly recommend checking out the REST API learn lab by RapidAPI. It offers valuable resources to enhance your understanding.

Kindly follow me on Twitter (@alege_dev) and check out my GitHub profile (@dboatengg) for more updates on future posts.

JavaScript Local Storage Explained!

Boateng Dickson — Sat, 24 Sep 2022 09:50:58 +0000

In the early days of the internet, you needed a server to store data. But nowadays, through LocalStorage, you can store data on browsers and applications without communicating with a back-end server.

In this article, you will learn about the theoretical and practical applications of LocalStorage in JavaScript.

Let's talk about web storage

Before we hop into the real deal, let's look at the definition of web storage. Web storage is one of the great features of HTML5 that allows web applications to store data locally within a user's browser.

The two most common forms of web storage are LocalStorage and Session Storage. The key difference between these two forms of web storage is that data saved in LocalStorage never leaves the browser and remains there until you explicitly remove it. In contrast, data stored in Session Storage is removed once a browser tab/window is closed.

What is Local Storage?

As mentioned earlier, LocalStorage is a form of web storage provided by the browser that allows web applications to store data locally within a user's browser with no expiration date. Here, stored data will remain available even when you close a browser tab/window.

Note that the data stored in LocalStorage is only preserved on a user's browser on the device they used to access a site. Hence, users cannot access the stored data if they revisit the same site later with a different browser or on another device.

LocalStorage Use Cases

The following presents some everyday use cases of LocalStorage.

1. Store Partially Submitted Form Data

If a user fills out a long form online, LocalStorage can be a helpful resource for storing user inputs. In that case, even if the internet gets disconnected between filling out the form and submitting it, users won't lose their inputs and can continue from where they left off.

2. Caching

Caching refers to storing data such as login details on a user's device so that future requests for that data can be served faster. You can use LocalStorage to cache a whole website so that users can still have access to the site even when they are offline.

3. Database for basic applications

As mentioned earlier, data storage was initially only possible by communicating with a database through the backend. But now, with LocalStorage, you can store data on the frontend without needing a database. Hence LocalStorage can sometimes serve as a "little" database for basic applications.

How to Access LocalStorage

Accessing LocalStorage is pretty simple and takes only a few steps:

Go to any website or web application and open the browser console by pressing F12 on the keyboard.
Next, click on the Application tab, and in the menu on the left, you will see LocalStorage under the Storage tab as shown below.

Click on the LocalStorage dropdown and further click on a/the dropdown item.

As can be seen, there are two columns, key, and value. This is where LocalStorage stores every data you save to it.

How to Use Local Storage

You can use following methods to manage data in LocalStorage.

Method	Description
`setItem()`	To store data in LocalStorage.
`getItem()`	To get or retrieve the data from LocalStorage
`removeItem()`	To delete data from LocalStorage using a key
`key()`	To retrieve data from LocalStorage at a specified index

setItem( )

This method is used to store data in LocalStorage. It accepts a key as its first argument and then a value as the second argument.

Let's add data to LocalStorage using the following.



localStorage.setItem("name", "Mandy");
// Here, `name` is the key and `Mandy` is the value

As mentioned earlier, LocalStorage stores data as strings, so if you want to save data such as objects and arrays, you need to convert them to strings using the JSON.stringify() method.

Let's see how this works!



//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

getItem()

Use the getItem() method to retrieve data from LocalStorage. This method accepts a single parameter, which is the key used when saving data.

For example, to retrieve data such as the above user object, you will use the following statement:



localStorage.getItem("user-info");

The above code will return a JSON string as shown below:



"{name:"Mandy", age:"23"}"

You should then convert it to an object using the JSON.parse() method.



JSON.parse(localStorage.getItem('user-info'));

removeItem()

Use the removeItem() method to remove data from LocalStorage. This method accepts a key as a parameter.

For example, you will use the following statement to delete the user object from LocalStorage.



localStorage.removeItem("user-info");

key()

Use key(index) method to retrieve data from LocalStorage, where index represents the nth data you want to retrieve.



localStorage.key(2);

clear()

Use the clear() method to clear out or remove all data from LocalStorage at a particular instance.



localStorage.clear()

Project

Now that you've learnt about the main methods used to manage data in LocalStorage, let’s get our hands dirty by creating a web application where users can:

Save data to LocalStorage
Retrieve the data
Remove/Delete the data using a key
And also clear out all data from LocalStorage.

Let's start by creating a new folder and open it in a code editor. Next, create three files, index.html , style.css and main.js.

Let’s Code!

The index.html file will contain the HTML markup for the web application. The HTML code comprises a form having various input fields with buttons.



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Local Storage</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="form">
      <form id="userForm">
        <h1>LocalStorage Application</h1>
        <label for="userName">User</label>
        <input
          type="text"
          id="userName"
          placeholder="Enter user name"
          required
          autofocus
        /><br />
        <label for="age">Age</label>
        <input
          type="number"
          id="age"
          placeholder="Enter user age"
          required
        /><br />
        <label for="key">Key</label>
        <input type="text" id="key" placeholder="Enter key" required /><br />
        <button type="submit">Save user</button>
      </form>
      <br />
      <label for="key">Enter Key to retrieve user</label>
      <input
        type="text"
        id="retrieveKey"
        placeholder="Enter key to access user"
        required
      /><br />
      <button id="retrieveButton">Retrieve user</button>
      <br />
      <div id="userData"></div>
      <br />
      <label for="removeKey">Enter Key to delete user</label>
      <input
        type="text"
        id="removeKey"
        placeholder="removeKey"
        required
      /><br />
      <button id="removeButton">Delete user</button>
      <br />
      <button id="clearButton">Delete all users</button>
    </div>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

Here's the CSS code.



/* base styles  */
html {
  font-size: 67.5%;
}
body {
  font-size: 1.6rem;
  padding: 0;
  margin: 0;
}

/* form   */
#form {
  margin-left: 2rem;
}

Here’s the main.js file containing all the functions to store, retrieve, and delete data from LocalStorage.



//store user data in the localStorage

function store() {

  var userName = document.getElementById("userName").value;

  var age = document.getElementById("age").value;

  var key = document.getElementById("key").value;

const user = {

    userName,

    age,

  };

//convert user object to string and save it

  localStorage.setItem(key, JSON.stringify(user));

}

//retrieve user data from localStorage

function retrieveUserData() {

  let key = document.getElementById("retrieveKey").value;

  console.log("retrive records");

  let userData = localStorage.getItem(key); //searches for the key in localStorage

  let paragraph = document.createElement("p");

  let info = document.createTextNode(userData);

  paragraph.appendChild(info);

  let element = document.getElementById("userData");

  element.appendChild(paragraph);

  retrieveKey.value = "";

}

//delete user data from localStorage

function removeUserData() {

  var removeKey = document.getElementById("removeKey").value;

  localStorage.removeItem(removeKey);

  removeKey.value = "";

}

//delete all user data from localStorage

function deleteAllUserData() {

  localStorage.clear();

}

//ensures the page is fully loaded before functions can be executed.

window.onload = function () {

  document.getElementById("userForm").onsubmit = store;

  document.getElementById("clearButton").onclick = deleteAllUserData;

  document.getElementById("removeButton").onclick = removeUserData;

  document.getElementById("retrieveButton").onclick = retrieveUserData;

};

Results

The following video shows how the final result of the project works:

Some Essential Points About LocalStorage

Local storage has no data protection and it is therefore not secure to store sensitive data as they can be accessed by anyone.
Local storage can only store a maximum of 5MB of data on the browser.

Conclusion

I encourage you to practice and experiment with LocalStorage by using it in your applications. Get used to saving, retrieving, and removing data from it.

Thanks for reading!

I hope this has been a worthwhile read. Kindly share this article and follow me on Twitter @dboatengx for updates on future posts.

Cheers!

Understanding Constructor Functions in JavaScript

Boateng Dickson — Sun, 14 Aug 2022 11:13:00 +0000

Constructor functions are one of the most valuable pieces of JavaScript, and understanding them is crucial to understanding the JavaScript language.

With the help of examples, this article explores JavaScript constructor functions in detail.

Let’s get right into it!

What is a constructor function?

A constructor function is like a regular JavaScript function that acts as a blueprint for creating objects.

Let's say you're a home builder and want to build a new neighbourhood. You create a blueprint for a house and hire a construction team to build the house. You give them the blueprint and say, "Make twenty houses like this." So they build each house (object) based on the blueprint (constructor function) you've given them. In the end, twenty houses will be built based on the blueprint.

The significant advantage here is that once you create a blueprint, you can make 20, 500, 1000, or more similar houses with different characteristics.

Like a blueprint for building houses, a constructor function allows you to define an object's structure once and use it as a template to create multiple similar objects.

Constructor functions act as initializers of objects. They are templates with which you can create multiple objects having the same properties and methods but different values.

Example: A Social Media Website

Assume you want to develop a social media website; the time has come to decide what data you will collect from your users. You will need a way to receive user data in your code by creating a new object for every user that registers on the site.

To gain a better understanding of how the social media website would receive user data, let's consider the following presumptions:

All users will be required to provide the same information when registering on the site; hence, objects created to receive various user data will have similar properties.
Let's say we look forward to receiving thousands of users data on the site. Hence, we must create multiple objects to be able to receive the data for every user.

How to Create Constructor Functions

We create constructor functions similar to how we create regular JavaScript functions.

The following is an example of a constructor function created to receive user data on our social media site. The function accepts three arguments.

FirstName
Lastname
Age

You can pass as many arguments or no arguments, depending on the amount of data that you want to receive.

function User(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}

In the above code,User is the constructor function, and its purpose is to create multiple new objects to represent different users who register on the social media site.

Again, considering the User constructor function, a couple of things may stick out right away:

The name of the constructor function starts with a capital letter. This is not necessarily required for the constructor function to work properly, but it is a widely accepted convention and should always be followed. It sometimes aids in distinguishing constructor functions from regular JavaScript functions.
Also, the this keyword is quite common.

What is "this" keyword?

In JavaScript, this keyword refers to an object. But to which object the this keyword will refer to depends on where it's being used.

For example:

Inside an object this keyword will refer to that object.
In the global context, this keyword will refer to the global (window) object.
In a constructor function or class, this keyword will represent an object instance of the constructor function.

When creating constructor functions, we don't want to assign a permanent variable name for objects that will be created. So we use the this keyword to dynamically refer to whichever object is being created at any particular instance.

In other words, the this keyword allows you to add properties and methods to any object that gets instantiated with a constructor function.

Calling Constructor Functions

To use a constructor function you need to invoke it with the new keyword, and then pass in the actual data you want to receive.

Kindly consider the following code:

let user1 = new User("John", "Doe", 23);

Here, we are creating a specific instance (object) of the User constructor with the following data:

Firstname as 'John'
Lastname as 'Doe'
Age as 23.

Notice that there is a new keyword before the User constructor function call? It is actually an operator and it is responsible for all the magic that happens when creating new objects from constructor functions.

When you invoke a constructor function with the new keyword, it does the following things:

It creates a new empty object.
It sets the prototype of the newly created object and links it to the constructor function's prototype property.
It sets the this keyword of the constructor function to point to the newly created object.
It makes the constructor function return the newly created object if it does not return anything.

In the following example, the newClone function shows what the new operator does behind the scenes.


//This function mimics the new operator
function newClone(ConstFunction, ...theArgs) {

    //1. Creates a new empty object
  let obj = {};

  //2. Sets prototype of newly created object and links to it to prototype  property of constructor function.
  Object.setPrototypeOf(obj, ConstFunction.prototype)

  //3. calls the ConstFunction using `call` and sets the new object (obj) as its 'this' keyword.
  let ret = ConstFunction.call(obj, ...theArgs)

  //4. if it returns Object then returns it as it is
  if (ret == Object) return ret

  //else return obj
  return obj;
}

//Person created using the NewClone
const userClone  = newClone(User, 'John', 'Doe', 23)
console.log(userClone );

//Person created using the new operator
const user1 = new User('John', 'Doe', 23)
console.log(user1);

If you compare the results of both objects (user1 and userClone), you will find that they produce the same output as shown below:

{
"firstName": "John",
"lastName": "Doe"
 age: 23
}

Adding Methods to Constructors

When working with constructor functions, you are not limited to adding just properties to objects; you can also add methods.

There are two ways of adding methods to constructor functions.

Declaring method inside constructor function
Adding method to constructor via prototypes

The following code adds a method to the User constructor by declaring it inside the constructor function.

function User(firstName, lastName, age){

    // defined properties

    //Adding method
    this.speak = function() {
        console.log("Hello! My name is " + this.firstName + " " + this.lastName + " and I'm " + this.age)+" years old.";
    }
}

The other approach to adding methods is through prototypes. A prototype is a type of inheritance in JavaScript. We use it when we want to add a method or property to a constructor after it has been defined. Once added, the properties or methods become available to all object instances of that constructor.

Let's extend the User constructor with another method to print out a user's full name.

function User(firstName, lastName, age){

    // defined properties  
}

User.prototype.getFullName = function() {
    console.log(this.firstName + " " + this.lastName);
}

user1 = new User("John", "Doe", 23);
user1.getFullName() // John Doe

As seen from the above code, we just used the prototype keyword immediately after the name of the constructor to utilize the prototype functionality. The custom method getFullName() is now availabe to all object instances of the User constructor.

Types of Constructor Functions in JavaScript

There are mainly two types of constructor functions in JavaScript.

1. User-defined Constructor Functions

The constructor function discussed so far in this article is considered as a user-defined constructor. User-defined constructors are constructor functions declared and defined by developers to be used throughout an application.

2. Built-in Constructor Functions

JavaScript has built-in constructor functions for every primitive data type, like String, Number, Boolean, Object, etc.

Kindly consider some of the built-in constructor functions in JavaScript below:

const str = new String("string") //A new string object.
const num = new Number(56) //A a number object.
const bool = new Boolean(true) //A new boolean object.
const arr = new Array([23,32]) //A new JavaScript array.
const obj = new Object({"name":"Joe"}) //A new JavaScript object.

//Display types
console.log(typeof str) //object
console.log(typeof num) //object
console.log(typeof bool) //object
console.log(typeof arr) //object
console.log(typeof obj) //object

After running the codes above, we can see that each one returns an object because all constructors in JavaScript return an object.

This confirms that JavaScript has object versions of its primitive data types. However, using these objects in your code is not recommended because primitive data type values are much faster.

JavaScript Object Protoype

As shown below, JavaScript is a dynamic language, and you can attach new properties to an object at any instance.

function Person() {
    this.name = 'John Doe';
    this.occupation = 'Developer';
}

const person1 = new Person();
person1.age = 34;
console.log(person1.age); // 34

const person2 = new Person();
console.log(person2.age); // undefined

As you can see in the above example code, the age property is only available on person1 object and not person2. This is because age was defined only on person1.

So what do we do if we want to add new properties to a constructor function after it has been defined and have them available to all object instances?

The answer is Prototype.

In JavaScript, every function has a property called the prototype. This property exists as an empty object in the function and remains dormant throughout the life of that function. It only becomes active and quite helpful if that function is used as a constructor.

The prototype property of a constructor function acts as the prototype for all object instances created from that function.

Kindly run the following code and consider its result:

function Person() {
    this.name = 'John';
    this.occupation = 'Developer';
}

// Add property to prototype property of Person constructor
Person.prototype.age = 34;

const person1 = new Person();
console.log(person1.age); // 34

const person2 = new Student()
console.log(person2.age); // 34

From the results above, you can see that all the two object instances created from the Person constructor now have access to the age property, which sits in the prototype property of the Person constructor.

Constructors Vs. Object literal

You can create objects in JavaScript using the following.

Object literal notation
Constructor notation

Let's look at some examples of creating objects with the object literal notation to see how the constructor notation can help speed up the process of creating objects.

Example: Storing student information

Let's say a school wants to keep track of all students. We'll create an object for each student using the object literal notation:

const student1 = {
    firstName: "Jermaine",
    lastName: "Cole",
    age: 32
}

Now we’ll create another:

const student2 = {
    firstName: "Kendrick",
    lastName: "Lamar",
    age: 24
}

And another:

const student3 = {
    firstName: "Jake",
    lastName: "Williams",
    age: 36
}

As seen from the above code, creating multiple "student" objects with the object literal notation involves repeatedly typing firstName, lastName, and age properties in every object declaration, which is very ineffective.

However, there is a much faster way to create "student" objects. Instead of using the object literal notation to create each student object manually, you can use the constructor notation to define a function as a template to create any number of "student" objects you want.

function Student(firstName,lastName,age) = {
    this.firstName = firstName
    this.lastName = lastName
    this.age = age
}

const student1 = new Student("Jermaine", "Cole", 23);
const student2 = new Student("Kendrick", "Lamar", 32);
const student3 = new Student("Jake", "Williams", 36);

As you can see, with the constructor notation, you can define a function once and then use it to create multiple student objects.

Deciding whether to use the object literal or constructor notation essentially boils down to whether you need multiple instances of an object. An object defined with the constructor notation lets you have multiple instances of that object. In contrast, an object defined with the object literal notation exists as a single object with properties and methods.

Constructor Vs. Classes

Compared to other object-oriented programming languages, JavaScript is unique. It operates based on constructors and prototypes rather than classes, and for a long time, classes did not even exist in JavaScript.

JavaScript classes were introduced in ECMAScript 2015. However, they did not introduce any extra functionality to the JavaScript language. They simply work as syntactic sugar (making code easier to read and write) over the already existing constructor functions.

Classes in JavaScript and constructor functions are closely related. A class is used to create objects just like a constructor function but uses a different syntax.

When creating a JavaScript class, you use the class keyword.

class Person {
  constructor(name) {
    this.name = name;
  }
}
// creating an object
const person1 = new Person('John');
const person2 = new Person('Jack');

Inside a class declaration, you can add a method called constructor() that will work exactly as a constructor function. All the properties in a class are assigned in this constructor function.

The declaration of the constructor method, constructor(), inside a class proves that classes in JavaScript operates based on constructor functions behind the scenes.

Wrapping Up

This article provided a comprehensive explanation of JavaScript constructor functions. There is more to learn about constructors, but for now, you should know enough to start using them in your code.

I do hope you followed through to this point. If you did, you are appreciated. It has been a long discussion, and I hope you learned something new.

Kindly follow me on Twitter @dboatengx for updates on future posts.

Happy Coding!

A Complete Guide to Debugging JavaScript in Chrome

Boateng Dickson — Sun, 07 Aug 2022 15:10:00 +0000

As a developer, finding and fixing errors in your code can be extremely difficult at times. The tool that makes resolving errors so much easier is the Chrome Developer Tools (also referred to as Chrome DevTools).

Chrome DevTools is a comprehensive developer toolkit with various web authoring and debugging tools. It is built directly into the Chrome browser and gives developers a deeper understanding of their applications.

This article teaches you how to debug JavaScript code using the Chrome DevTools. You will learn how to debug one specific issue, but the general workflow can help resolve all types of errors in your code.

What Does Debugging Mean?

Debugging is the process of finding and resolving bugs within software programs. In programming and software development, the word "bug" is synonymous with "error." A bug refers to the defects or errors that cause computer software (or programs) to produce incorrect or unexpected results.

Let us look at some errors you are likely encounter in your program.

Syntax error: There are specific guidelines for writing code in each programming language. Syntax errors are produced when you violate one or more of these guidelines. For instance, in JavaScript, consol.log('your result') would cause a syntax error because console is misspelled.
Semantic (logical) error: This causes a program to compile and run correctly. However, it will not produce the desired or expected output.
Runtime error: Here, a program is syntactically sound but has an error that can only be discovered during its execution.

The debugging process is vital in software development and often takes just as much time as writing code.

What is Chrome Developer Tools

Chrome Developer Tools is a set of web developer tools built directly into the Google Chrome browser. It helps developers edit web pages and identify and resolve errors, enabling them to build sites and applications much faster and efficiently.

The interface of Chrome DevTools has about nine panels.

Here is a summary of what each panel does:

Elements: Modify DOM elements in real-time and observe the effects of your changes on the page.
Console: Provides information about the interactive elements on a web page.
Sources: View and edit program files, debug JavaScript code and set up workspaces ( so that changes you make in DevTools get saved to the code on your file system).
Network: Displays all the resources or files loaded on a site.
Performance: Analyses the speed and optimization of web applications.
Memory: Provides information about how a page uses memory.
Application: Displays content from your browser's storage. e.g. localStorage, sessionStorage, cookies, IndexDB, etc.
Security: Provides basic security-related information, allowing you to view a site's HTTPS certificate and TLS status.
Lighthouse: Audit applications' quality, performance, accessibility, and SEO.

This article will primarily cover the Sources panel, where we debug JavaScript code.

The Sources Panel

To get started with the Sources panel and all its components, let's first look at how to open Chrome DevTools in your browser.

Opening Chrome DevTools

Here are some ways you can open the Chrome DevTools in your browser.

Using keyboard shortcuts:
- Command + Opt + I (macOs)
- Control + Shift + I (Windows or Linux)
Right-click anywhere on the browser page and click the "Inspect" option.
Using the Chrome main menu:
1. Click the Chrome menu button
2. Select More Tools
3. Select Developer Tools

Here’s what you’ll see when you open Chrome Developer Tools:

By default, the Chrome DevTools opens to the Elements panel.

Exploring the Sources panel

Open the Sources panel for the sample demo page we'll be using for this tutorial by following the intstructions below.

Open the example page in Chrome.
Open Chrome developer tools.
Select the Sources tab.

Here's what you would see if you opened the Sources panel for the first time:

Click the toggler button and select the main.js file in the tree view. Here’s what would show up:

As can be seen, the Sources panel has three parts:

File Navigator Page [1]: Displays all the files that a page loads, such as HTML, JavaScript, CSS, and other files.
Code Editor [2]: Click on a file in the file navigator pane to view or edit its contents in the code editor.
JavaScript Debugging Pane [3]: Contains all the necessary tools for debugging JavaScript code.

Example Page Project

We will use the sample demo page you opened in the previous section to demonstrate how to debug JavaScript with Chrome DevTools. The program for the demo performs a basic arithmetic operation of adding two numbers and printing out their sum.

However, there are some bugs on this page that you will fix if you follow this tutorial.

The Console.log Method

The simplest way to resolve the bug on the sample demo page is to insert the console.log() function in your code to inspect variable values simultaneously.

This method is one of the most common among developers. Often, it’s enough, but sometimes you don’t get enough insights or the expected results needed to debug an error.

Although theconsole.log() function can be a good option for resolving bugs, Chrome DevTools does a more effective job.

Therefore, rather than using the console.log() function to determine where your code is going wrong, you should consider using the Chrome DevTools instead.

How to Debug JavaScript with DevTools

Now that we have had a quick overview of Chrome DevTools, let's discuss some useful debugging strategies to help debug the code for the example demo page.

The general idea here is to set a breakpoint, an intentional stopping place in your code, and then step through your code's execution, one line at a time.

Step 1: Reproduce the bug

Reproducing the bug is the first step to debugging. "Reproduce the bug" means finding a series of actions that consistently cause the bug to appear.

Follow along with the instructions below to reproduce the bug that you’re going to fix:

Open sample demo page in a new tab.
One the page, enter 23 for the first input field.
Enter 4 for the other input field.
Click "Add Numbers" button.

Whoops! Looking at the results printed below the button. It says 23 + 4 = 234, which is wrong. The result should rather be 27. This is the bug that you're going to fix.

Step 2: Add Breakpoint

A breakpoint is an intentional stopping point in your code's execution. It is the point in a program's execution where the developer wishes to pause the program and inspect the contents of variables and other properties.

On the demo page, it is evident that the sum of the two numbers becomes incorrect after clicking the “Add numbers” button. Therefore, you need to check to see if the program is adding the correct values.

To do this, you must set a breakpoint just before the program adds the two numbers. Doing this will help to analyze the values of all defined variables up to the breakpoint.

There are many types of breakpoints you can set in your code. Let's take a look at some of them:

Type of Breakpoint	Use This When You Want to Pause...
Line-of-code	on an exact point in your code.
Conditional	on an exact point in your code but only when a defined condition evaluates to true.
DOM	at point in a code block that modifies a specific DOM node.
Event Listener	at a piont in a code block that runs after an event is fired.
Function	Whenever a function is called.

How to Add Breakpoints

Here, we are going to set a line-of-code breakpoint. To do this:

Open Chrome DevTools and go to the Sources panel
Navigate to the file navigator pane and select main.js to open its content in the code editor.
Within the code editor, click at line number 21, right on the number digit, not on the code.

It should look like this:

After setting the breakpoint, the easiest way to activate the debugger is to fill in the input fields on the demo page and click the "Add numbers" button. DevTools will pause the execution and highlight the 21st line (where the breakpoint was set).

Congratulations! You've set a breakpoint.

Step 4: Step through the code

Executing scripts in the wrong order is a common source of bugs. Stepping through your code allows you to walk through the code one line at a time to find out where the bug occurred.

To help illustrate the concept of stepping through your code, we will use the buttons at the top of the JavaScript debugging pane.
Let's get started:

Resume: With this button, DevTools executes your script until the next breakpoint. And if there are no more breakpoints, the debugger loses control of the program.
“Step”: This is used to run the next javaScript statement.
Step over next function call: Allows debugger to execute the next code block. However, if the code block involves a function call, the debugger "steps over" (skips) it.
Step into next function call: Causes debugger to execute the next function to further analyse it. If there is a function call, it goes into it and you can see how the function is executes line by line till it returns.
Step out of current function: If you step into a function but don't want to see how the rest of the function executes, you can skip it with this button.

That’s the basic idea behind stepping through your code. If you look at the code in main.js, it is evident that the bug is probably somewhere in the onClick() function (where the two numbers are added).

💡 IMPORTANT
When debugging a large codebase, a lot of code may not be related to the problem you're debugging.

You could "step" through all the lines, but that can be tedious. You could also set a line-of-code breakpoint on the line you're interested in and then press "Resume Script Execution," but there's a faster way.

Right-click the line of code you're interested in, and then select "Continue to here." DevTools will run all the code up to that point and then pause on that line.

Step 5: Check variable values

Chrome DevTool provides tools that help you analyze the state of your code and variable values on any line as you step through it.

Watch: Using the Watch window, you can specify a variable (or expression) you want to monitor. You can add the expression or variable by clicking the plus sign +.
Call Stack: The Call Stack window displays a set of functions and methods invoked during your code's execution.
Scope: Use the scope window to view and edit values of properties and variables in the clossure, local and global scope.

By "watching" the variablesfirstNumber and secondNumber, we can see that their values look suspicious. They're wrapped in quotes, which means that they're string values. To confirm this, let's watch the data type of these variables by adding the following expressions to the watch list:

typeof firstNumber
typeof secondNumber

It is now confirmed that the values of the variables are strings, which is probably the cause of the bug.

Step 5: Applying a fix

After finding the cause of the bug, all that's left is to try to fix it. You can do this by editing your code and re-running the demo.
You don't even need to leave DevTools to apply the fix. Following the instructions below, you can edit your JavaScript code directly within the DevTools interface.

If you are in debugging mode, click the Resume script execution button to exit.
Now, in the Code Editor, replace the code on line 21 with let sum = parseInt(firstNumber) + parseInt(secondNumber).
Press Command+S (Mac) or Control +S (Windows, Linux) to save your change.
Click Deactivate breakpoints to ignore any breakpoints you've set.

Now, try out the demo with different values.

The demo now works as expected.

Wrapping Up

Congrats! You've successfully debugged the code for the sample demo page using Chrome DevTools. There's so much you can do with Chrome DevTools. It is a powerful tool, and taking the time to master it will make you a more efficient debugger.

I encourage you to experiment with DevTools using your own applications. Get used to stepping through your code and analyzing the state of variables and properties at each point.

Thanks for reading. I hope this has been a worthwhile read. Kindly share this article and follow me on Twitter @dboatengx for updates on future posts.

Cheers!

💡 Want to learn more?
Check out Google's documentation on debugging JavaScript with Chrome DevTools.

A Brief History of JavaScript

Boateng Dickson — Fri, 20 May 2022 22:43:30 +0000

JavaScript is a programming language that represents one of the three core languages used to develop websites, alongside HTML and CSS. Whereas HTML and CSS give a website structure and style, JavaScript lets you add functionality and behaviors to your website. This allows visitors to interact with your website in various creative ways.

Mosaic was the first web browser with a graphical user interface. It was first released in 1993 and played a key role in the rapid development of the web as we know it today. The lead developers of Mosaic founded Netscape (now Mozilla) and released a more elegant browser called Netscape Navigator in 1994.

During the early years of the web, web pages were only static, with no capability for dynamic behavior and interactivity. As a result, there was an urge in the web development community at the time to eliminate this limitation. This led Netscape to the decision to add a scripting language to the Navigator browser.

In September 1995, a Netscape programmer named Brendan Eich developed a new scripting language in just 10 days. It was originally called Mocha, but quickly became known as LiveScript and, later, JavaScript.

The language derived its syntax from Java, its first-class functions from Scheme, and its prototype-based inheritance from Self.
Since then, JavaScript has been adopted by all major graphical web browsers.

JavaScript vs. Java

The choice of using the name “JavaScript” has always caused some confusion that the language is directly related to Java. However, except for syntactic resemblance, JavaScript has almost nothing to do with the Java programming language. They are both completely different languages.

When JavaScript was initially introduced, Java was being heavily marketed and was the most talked-about language at the time. So Netscape thought it would be a good idea to capitalize on this success by creating the name "JavaScript." Basically, the name similarity between the two languages was a simple marketing ploy for JavaScript to easily gain acceptance.

What Is ECMAScript?

When JavaScript was first introduced by Netscape, there was a war going on between all the browser vendors on the market at the time. Microsoft and several other browser vendors implemented their own versions of JavaScript (with different names and syntax) in their respective browsers. This created a huge headache for developers, as code that worked fine on one browser was a total waste on another. This went on for a while till they all agreed to use the same language (JavaScript) in their browsers.

As a result, Netscape submitted JavaScript to the European Computer Manufacturers Association (ECMA) for standardization in order to ensure proper maintenance and support of the language. Since JavaScript was standardized by ECMA, it was officially named ECMAScript.

Originally, the name ECMAScript was just the formalization of JavaScript, but now languages like JScript and ActionScript are also based on the ECMAScript standard. They can be thought of like 3 different cars using the same engine.

Though they are closely linked to each other, the terms “JavaScript” and “ECMAScript” do not mean the same thing.

JavaScript has two major host environments: browsers and Node.js. These environments add some APIs to the language. If you strip all the external APIs from these environments, you get ECMAScript. In simple words, you can think of ECMAScript as JavaScript without a host environment.

JavaScript Today

According to GitHub’s 2021 Octoverse report, there are more JavaScript code repositories than any other language, and that number is steadily on the rise.

JavaScript can be found virtually everywhere on the Internet. It has been named the most widely used programming language several times with over 64.9 percent of developers using it in 2021.

A series of JavaScript frameworks and libraries such as Ember, Angular, React, and Vue have also been created to develop powerful and complicated web applications. Also, alongside client and server software, it is now even possible to write native mobile apps using JavaScript.

From its rocky start, JavaScript is now used to build more than 90% of websites on the web, including some of the world’s largest web applications like Twitter, Facebook, and YouTube.

It has now outgrown its scripting-language roots to become a robust and efficient general-purpose language. This makes it clear that JavaScript is going to be with us for many years to come.

Wrapping Up

Hopefully, this article has given you a good understanding of the history of the most popular programming language on the internet today.

How to Build a Modal Popup Box Using HTML, CSS, and JavaScript

Boateng Dickson — Sun, 27 Feb 2022 13:47:39 +0000

Modal popups are very popular on the web. Some common usages may include newsletter sign-ups, alerts, login forms, and others.

In this short article, we would discuss how to build a basic modal popup box.

What is a Modal Popup box?

A modal popup box is a popup window that appears while a user is browsing a web page and it is usually meant to display a piece of critical information or to prompt visitors to take certain actions.

One unique feature of a modal box is that it disables the main content of a web page while keeping it visible.

Build a Modal Popup Box using HTML, CSS and JavaScript

The folder structure for our modal popup box is pretty simple. We would start by creating a folder called modal-box. We would create three files inside this folder: index.html, styles.css, and app.js. We would then link all other files into our index.html as illustrated below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Modal Box</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <script src="app.js" type="text/javascript"></script>
</body>
</html>

HTML Markup for Modal Popup Box

Let's now establish the HTML markup for our modal. You can copy the following code into your index.html file, or get all the code for this project from codepen.

<div class="modal" id="modal">
    <div class='modal__container'>
        <img class="modal__img" src="https://drive.google.com/uc?export=view&id=1hsqRgrdpr5T673KZLyUmHVoLWcv159MC">
        <div class="modal__content">
            <h1 class="modal__title">SPONSOR MY EDUCATION <span>START-UP CONTEST</span>
                <h1>
                    <p class="modal__paragraph">This contest is geared towards discovering and funding innovative ideas.</p>
                    <button class="modal__button">Click here to participate</button>
        </div>
        <i id="close" class="fas fa-times"></i>
    </div>
</div>
<h1 class="main__title">This is a heading</h1>
<p class="main__paragraph">This is a paragraph</p>

Because we're utilizing a Font Awesome icon in our code, you'll need to provide a link to it when copying the code above.

Without CSS, our page will look all bare, like this:

Styling Modal Popup Box with CSS

We want our modal box to look very nice so let's now bring in some CSS code.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: montserrat;
    background-color: #0a9396;
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}

.main__title {
    font-size: 4rem
}

.main__paragraph {
    font-size: 1.8rem
}

.modal__img {
    max-width: 60%;
    height: auto;
    display: block;
}

.modal {
    max-width: 700px;
    width: 85%;
    position: fixed;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: #EE9B00;
}


/****show modal class****/

.modal.show {
    display: block
}

#close {
    cursor: pointer;
    color: white;
    position: absolute;
    top: 0;
    font-size: 25px;
    right: 0;
    padding: 1rem;
    margin-right: 10px;
}

.modal__title {
    font-size: 2.5rem;
}

.modal__title span {
    display: block;
    font-weight: 400;
}

.modal__paragraph {
    font-size: 16px;
    font-weight: 400;
}

.modal__button {
    background-color: #0a9396;
    border: none;
    color: white;
    padding: 1rem 2rem;
    border-radius: 5px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
    transition: 0.3s background-color ease-in-out;
}

.modal__button:hover {
    background-color: #0a9372;
}

main {
    text-align: center;
}

.modal__container {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}


/****styling modal on smaller screen******/

@media only screen and (min-width: 768px) {
    .modal__container {
        flex-direction: row;
        padding: 2rem;
        text-align: left;
    }
    .modal__img {
        max-width: 50%
    }
}

@media only screen and (max-width: 500px) {
    .modal__title {
        font-size: 2rem;
    }
    .modal__img {
        max-width: 80%
    }
}

With all of these above styles applied, here is what our modal box will look like now:

We'll now hide the modal pop window and display it a few seconds after visitors arrive at our site. We would implement this functionality by adding some JavaScript code in the app.js file.

Before adding the JavaScript code, let's hide the modal box by setting display property to none. This should be added to the styles already defined for the .modal class in our CSS code.

.modal {
  display: none;
}

Now, this is what our website page looks like without the modal box:

Adding JavaScript

Let's now add our JavaScript code:

const closeBtn = document.getElementById('close');
const modalMenu = document.getElementById('modal');
const modalBtn = document.querySelector('.modal__button');

setTimeout(() => {
    modalMenu.classList.add('show');
}, 3000);

closeBtn.addEventListener('click', () => { modalMenu.classList.remove('show') })
modalBtn.addEventListener('click', () => { modalMenu.classList.remove('show') })

Using JavaScript

We accessed the modal box, close button and the button on the modal.
Next, we used the setTimeout() method to display the modal box 3 seconds after visitors land on the site.
Lastly, we added an event listener to hide the modal box from view when visitors click on the close button or the modal button.

Now, this is how our project looks and behaves in the end:

Wrapping Up

In this tutorial, we learned how to build a modal popup box using HTML, CSS, and JavaScript.

Thanks for following along. I hope you learned something useful from this short tutorial. Please leave a comment and feel free to follow me on Twitter if you enjoyed this article.

Build A Real-time Changing Digital Clock Using HTML, CSS & JavaScript

Boateng Dickson — Sat, 26 Feb 2022 09:47:05 +0000

HTML, CSS and JavaScript are used for building stylish, dynamic web elements and one useful element we can build is a digital clock.

In this tutorial, we would discuss how to build a simple real-time changing digital clock that displays the current time and date.

How to Build a Digital Clock using HTML, CSS and JS

We would start by establishing the HTML markup for our project.

We would create a folder called clock. Inside this folder, we would create three files: index.html, styles.css, and main.js. We would then link the two other files into our index.html file, as seen below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <script src="app.js" type="text/javascript"></script>
</body>
</html>

Alternatively, you can copy the code above into your index.html file, or get the code for this project from Codepen

HTML Markup for our Clock

The HTML markup for our digital clock is pretty simple. It consists of an h1 element with an id of date-time wrapped around by a div element also with an id of clock.

<div id="clock">
  <h1 id="date-time"></h1>
</div>

Nothing would display for our digital clock unless we bring in some JavaScript.

Adding JavaScript to our Clock

We're going to write some JavaScript at this point to bring our digital clock to life.

Let's go to our main.js file and paste the following code in there.

Please read the comments in the code for further clarification.

window.addEventListener("load", () => {
  clock();
  function clock() {
    const today = new Date();

    // get time components
    const hours = today.getHours();
    const minutes = today.getMinutes();
    const seconds = today.getSeconds();

    //add '0' to hour, minute & second when they are less 10
    const hour = hours < 10 ? "0" + hours : hours;
    const minute = minutes < 10 ? "0" + minutes : minutes;
    const second = seconds < 10 ? "0" + seconds : seconds;

    //make clock a 12-hour time clock
    const hourTime = hour > 12 ? hour - 12 : hour;

    // if (hour === 0) {
    //   hour = 12;
    // }
    //assigning 'am' or 'pm' to indicate time of the day
    const ampm = hour < 12 ? "AM" : "PM";

    // get date components
    const month = today.getMonth();
    const year = today.getFullYear();
    const day = today.getDate();

    //declaring a list of all months in  a year
    const monthList = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ];

    //get current date and time
    const date = monthList[month] + " " + day + ", " + year;
    const time = hourTime + ":" + minute + ":" + second + ampm;

    //combine current date and time
    const dateTime = date + " - " + time;

    //print current date and time to the DOM
    document.getElementById("date-time").innerHTML = dateTime;
    setTimeout(clock, 1000);
  }
});

Styling Our Clock with CSS

Let's add some CSS styles to our app to make it more attractive.

/*font family from google fonts*/
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&display=swap");

html {
  font-size: 62.5%; /*62.5% = 10px; to make it easier to calculate REM units.*/
}
body {
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #faedcd;
  height: 100vh;
}
#clock {max-width: 600px;}

/* for smaller screens below 700px */
@media only screen and (max-width: 700px) {
  body {font-size: 1.8rem;}
}

/*for smaller screens below 300px*/
@media only screen and (max-width: 300px) {
  body {font-size: 1.6rem;}
}

This is how our digital clock app looks and behaves in the end:

CONCLUSION

I hope you found this tutorial useful. Please leave a comment and feel free to follow me on Twitter if you enjoyed this article.