DEV Community: Anwar Sadat Ayub

Day 2 - Get Registered Users/ Logged-in User

Anwar Sadat Ayub — Sat, 10 May 2025 21:40:51 +0000

LoopaApp

Day 2 of building Loopa, my messaging + project management app.

What I added today:

Fetched and displayed all registered users on the dashboard.
Highlighted the current logged-in user.

It’s pretty basic UI for now, but it’s functional. Feels great to see the pieces coming together.

Next up:

Build the chat interface.
Connect real-time messaging (still deciding between AJAX polling and WebSockets).

Sticking to the May 30 MVP deadline.

Let’s see how far I can take this.

Day 1 - Challenge for myself

Anwar Sadat Ayub — Fri, 09 May 2025 22:24:57 +0000

LoopaApp

This is a new challenge am setting for myself. I plan to build 3 solid apps this year and am starting with Loopa, a lightweight chatapp that I plan to evolve into a simple project management and team collaboration tool.

I built the login and signup page. I have also created the dashboard but nothing on it so far.

Nothing much for today. I just want to have a basic UI and backend.

Mastering PHP File Paths: Simplifying Your Project's Structure

Anwar Sadat Ayub — Sun, 16 Jun 2024 06:28:10 +0000

Have you ever tried including a file in your project and needed clarification about how to go about it? You usually start with a simple folder structure that can quickly escalate to a complex folder structure. This article will discuss the absolute and relative paths, directory separators, file functions, including files in PHP, and how to use file paths in PHP.

All paths will be in Windows OS format. An example will be like this;

$file = 'C:/xampp/htdocs/project/includes/config.php';

In this article, we take a more practical approach to explain the file paths in PHP. Let’s assume that we have a project structure as below.

tutorials/ 
|-- database/ 
|-- |-- connection.php
|-- report/
|-- |-- admin/approvals.php
|-- |-- tracker.php
|-- signin.php

Absolute vs. Relative File Paths

To add a file to your project, you need to know the location or path of the file. Knowing the file location, you can decide to add the file in two ways; absolute or relative file path.

Absolute Path

An absolute file path specifies the complete and precise location of a file or directory in the filesystem. It starts from the root directory and includes directories up to the target file or directory. It does depend on the current working directory (CWD) and it points to the same directory regardless of the script is run.

Using the absolute path, we can include the connection.php file in the project1 directory like this;

// tutorials/signin.php
$path = "c:/xampp/htdocs/tutorials/database/connection.php"; // absolute path to database/connection.php

// tutorials/report/tracker.php
$path = "c:/xampp/htdocs/tutorials/database/connection.php"; // absolute path to database/connection.php

// tutorials/report/admin/approvals.php
$path = "c:/xampp/htdocs/tutorials/database/connection.php"; // absolute path to database/connection.php

This path assumes that the parent directory, ‘tutorials’, is at c:\xampp\htdocs.

Relative Path

The relative path does not start from the root directory. It depends on or relative to the current working directory or any other directory.

When the file is inside the current working directory, use one dot sign ‘.’, and two dots ‘..’ when the file is relative to the parent directory or other directories relative to the file.

Let’s get the ‘tutorials/database/connection.php’ file path relative to the other directories;

// tutorials/signin.php
$path = "./database/connection.php"; // (./) relative to the current tutorials directory

// tutorials/report/tracker.php
$path = "../database/connection.php"; // (../) moves one level up to the tutorials directory

// tutorials/report/admin/approvals.php
$path = "../../database/connection.php"; // (../../) moves two levels up to the tutorials directory

Directory Separators in PHP

When you look closely at our paths, you realize we use forward slashes, (‘/’). The forward (‘/’) and the backslash (‘\’) slashes, called directory separators are used to separate directories in a file system.

The forward slash simplifies path handling and enhances cross-platform compatibility on Unix-like systems and is supported on Windows.

The backslash is used mostly on Windows systems. The double backslash functions as an escape character string.

PHP File Path Functions

PHP has many built-in functions that can be used to manipulate file paths. These functions help in constructing, analyzing, and managing paths in a platform-independent manner. Some key functions include;

basename(): This returns the filename component of a path. It takes two parameters, a path that specifies the path of the file, and a suffix that is used to specify the suffix to remove from the end of the returned file.

$filename = basename($path); // connection.php
$filenameWithoutExtension = basename($path, '.php'); // connection

-
dirname(): This returns the directory name component of a path. It takes the $path parameter and optional $levels which specifies the directory levels.

$path = "htdocs/tutorials/database/connection.php";

$directory = dirname($path); // htdocs/tutorials/database
$directorySecondLevel = dirname($path, 2); // htdocs/tutorials

-
realpath(): It is used to convert relative path to absolute path.

$relativePath = "../database/connection.php";
$absolutePath = realpath($path); // C:\xampp\htdocs\tutorials\database\connection.php

-
glob(): This method finds pathnames matching a pattern. It returns an array of PHP files in the specified directory.

$path = "tutorials/report/*.php";
$files = glob($path); // $files will contain an array of PHP files in the specified directory

-
file_exists(): This method checks whether a file or directory exists. It returns a boolean value.

$path = "../database/connection.php";
$files = file_exists($path); // $files will contain an array of PHP files in the specified directory

Including Files in PHP

For code organization, reusability, and maintaining modularity in PHP applications, you can use the include() and require() functions to add and evaluate files while executing a script.

The include() function will generate a warning if the file cannot be found, but the script will continue to execute.

The require() function will generate a fatal error if the file cannot be found, and the script will stop running.

To use these functions, you need to specify the file path correctly. You can either use absolute paths or relative paths depending on your needs. The file must be in the correct location and must have the correct name (case-sensitive).

Conclusion

As a software developer using PHP, it is very important to understand file paths. You must also know when to include files using either the include() or require() functions to help with code organization, reusability, and modularity.

Use absolute paths when possible but can be inflexible if the scripts need to be moved to a different server or directory.

Use the dirname() function to get the directory of the current file which can help to build relative paths. Relative paths can be ambiguous if the script is used in different contexts.

Check the existence of a file using file_exists() functions before including it because an incorrect path can lead to errors and security vulnerabilities.

Thank you for reading. See you on the next one.

XML, YAML, JSON; Differences and Similarities

Anwar Sadat Ayub — Tue, 14 May 2024 20:36:45 +0000

Data is moved around a lot in today’s digital space; sensors, IoT devices, social media platforms, user interactions on websites and applications, transactions in financial systems, and more. Governments, corporations, businesses, and individuals all make decisions based on available data. Data serialization helps different computer systems understand each other by translating information into a common language. It's like translating a message so that everyone can communicate effectively, making things run smoothly in the digital world. This is essential for developers to build efficient, and interoperable software applications that can effectively exchange, store, and process data in various contexts.

In this article, we will explore the 3 popular text-based data serialization formats, i.e. XML, YAML, and JSON, and their similarities and differences. You should be able to choose the right data format for your next project. This article requires that you have a basic understanding of HTML and data structures i.e. primitive data types.

XML (eXtensive Markup Language)

XML is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. It is defined by the W3C's XML 1.0 Specification and by several other related specifications, all of which are free open standards.

It is a markup language, meaning that it uses tags to identify and structure data, making it easy to understand and parse. It is a simple, flexible, and adaptable language that is used for data exchange, storage, and transmitting data across different applications. Additionally, XML is self-descriptive, platform-independent, vendor-independent, and extensible, and requires documents to be well-formed and valid according to specific rules and guidelines.

In programming, XML can be used to create configuration files, internet messaging, object persistence, data auditing, and visualization.

An XML tree structure is a hierarchical representation of an XML document, where each element is a node in the tree. This structure consists of the root node, the topmost element that represents the entire document. We can have the parent node, which is the element that contains other elements, the child node, an element that is contained in another element, and the sibling node which are elements that have the same parent node.

Here is the basic structure of an XML document;

<parent>
  |-- <child1>
  |    |-- <grandchild1>
  |    |-- <grandchild2>
  |-- <child2>
  |    |-- <grandchild3>
  |-- <child3>

XML syntax is much like HTML; it contains one or more elements that have both the start tags and end tags. Each element has a type, identified by name, and may have a set of attributes that has a name and a value. Every start tag must have a corresponding end tag. Empty elements must not include white spaces between the tags. Elements have a type that is determined by the name value. XML tags and structure are not predefined, unlike HTML. The author must define the structure and tags.

Let’s consider the example below;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <database>
    <username>admin</username>
    <password>password</password>
    <host>localhost</host>
  </database>
  <server>
    <port>8080</port>
    <timeout>300</timeout>
  </server>
</configuration>

In this example, the XML file defines configuration settings for a database and a server. At the top of the document is the XML declaration which specifies the version of XML being used.
XML is used for exchanging data across different platforms. In some cases, it is used as a configuration file as it provides a human-readable and easy-to-parse format for storing settings and preferences. Other areas in document management such as storing and retrieving data, web services with SOAP (Simple Object Access Protocol) and REST (Representational State of Resource) web services, localization and internationalization for translating text and formatting data for different languages and regions, etc.

YAML (YAML Ain't Markup Language)

YAML, which rhymes with “Camel”, is a human-friendly, data serialization language designed to work well in modern programming languages. YAML is a user-friendly choice for data handling and processing because it uses few structural characters to provide information.

YAML supports primitive data types such as strings, numbers, boolean, maps, and arrays, allowing for the representation of diverse data structures. Programming languages that are built around these primitive data structures work well with YAML including Javascript, Perl, Python, PHP, and Ruby.
The syntax and structure of YAML documents are designed to be human-readable and intuitive, portable between programming languages, match the native data structures of dynamic languages, have a consistent model to support generic tools, support one-pass processing, (i.e. to parsed document sequentially from start to finish without needing to revisit previously parsed parts), be expressive and extensible, and lastly be easy to implement and use. It relies on consistent indentation using spaces (not tabs) to indicate nesting levels within the document.

For example;

fruits:
  - apple
  - banana
  - orange

In this snippet, the list of fruits is indented with two spaces under the key "fruits," indicating that it is a child element of the "fruits" key. Each item in the list is further indented under the list indicator "-" with two additional spaces, showing their association with the list.
The indentation determines the hierarchy and relationships between data elements, such as key-value pairs and lists;

# Configuration settings for a web server
server:
  # Server settings
  port: 8080        # Port number for the webserver
  host: localhost   # Hostname for the webserver
  ssl_enabled: true # Whether SSL is enabled

database:
  # Database connection settings
  type: mysql            # Type of database (e.g., MySQL, PostgreSQL)
  host: db.example.com   # Hostname for the database server
  port: 3306             # Port number for the database connection
  username: admin        # Username for database authentication
  password: secure_password # Password for database authentication
  database_name: web_db  # Name of the database to connect to

The example above shows how YAML's indentation-based hierarchy is used to represent the relationships between different configuration settings in a clear and structured manner. The ‘#’ provides explanations and context for each section and key-value pair.

YAML's benefits include readability and expressiveness, but it also poses challenges. Its whitespace rules and flexibility can cause confusion and mistakes, and there are security risks with poorly crafted YAML data. YAML’s lack of standardization and learning curve, along with possible performance issues and schema validation complexities, require careful handling by developers using YAML in various applications.

JSON (JavaScript Object Notation)

JSON (JavaScript Object Notation) is a lightweight data interchange format. It is known for its simplicity and minimalism. It uses a lightweight, text-based format to represent data structures consisting of key-value pairs and arrays, making it highly efficient for transmitting and parsing data over the internet. It stands tall as one of the most favored methods for structuring data, offering simplicity, flexibility, and compatibility across various platforms and programming languages.
It is a lightweight data-interchange format that is easy for humans to read and write and straightforward for machines to parse and generate. Its syntax is derived from JavaScript object notation, but JSON is language-independent, making it versatile for use across different programming languages.
JSON data is organized into key-value pairs, where each key is a string and each value can be either an object enclosed in curly braces {} made up of key-value pairs separated by colons: arrays enclosed in square brackets [] containing comma-separated values, strings enclosed in double quotes, numbers representing numeric values, booleans representing true or false values, and null representing an empty value.

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "country": "USA"
  },
  "languages": ["JavaScript", "Python", "Java"]
}

The above example represents information about a person named John Doe (string), aged 30 (numeric), not currently a student(boolean value), address (object), and language (array).

JSON's versatility and simplicity make it suitable for a wide range of use cases across various industries and domains. It is a lightweight and easy-to-read data interchange format. It is widely used for data exchange between web servers, web applications, and mobile apps. Its simplicity and flexibility make it a popular choice for many applications and services. JSON is also used for data storage and serialization and is supported by many programming languages. Its versatility and ease of use have made it a standard format for data exchange and storage.

Though JSON is very popular, it has its downside. Lack of comments which makes it challenging for developers to add explanatory notes, explicit support of data types resulting in issues with data validation, limited error handling leading to potential runtime errors or data corruption, and schema evolution making it difficult to manage data structures over time are areas that could be addressed to solidify JSON’s position as a versatile reliable data-interchange format.

Choosing the Right Format

The table below summarizes the use cases for XML, YAML, and JSON.

The table above focuses only on the use cases, making it easier to compare the suitability of XML, YAML, and JSON for each scenario.

Conclusion

In conclusion, the evolution of data serialization continues to be driven by the need for simplicity, readability, flexibility, and performance. While JSON and YAML have gained significant adoption, there is ongoing innovation and exploration of new serialization formats to meet the evolving needs of modern software development.

Understand JavaScript 'this' keyword in 5 easy steps

Anwar Sadat Ayub — Mon, 06 May 2024 15:58:32 +0000

Javascript is a very popular programming language. It is a go-to programming language for most beginners. But going deeper, you realize that it has some weird concepts which can be frustrating for most beginners. I have had my share and that’s why I have put this article together. In this article, we will break down ‘this’ keyword in Javascript in 5 easy steps. At the end of this article, you should be conversant with ‘this’ object and conveniently use it in your code.

Before we proceed, I would make this clear first. I would assume that you are familiar with Javascript Functions and at least basic knowledge of OOP in Javascript. You can read JavaScript Functions Made Easy: Streamlining Code for Beginners! on functions and Classes in Javascript on Javascript Classes.
Also, you will need to follow along with the coding part. Just reading through the article will not help you much.

Introduction to ‘this’ keyword

‘this’ is used for a person, object, or thing to show which one is referred to by way of emphasis. For example, you could say “This is my laptop, yours is over there”. In this sentence, you referred to your laptop using ‘this’ to emphasize which of the two laptop is yours. Similarly, you use the ‘this’ keyword to refer to a specific, or even better, the current object in Javascript. The object that is referred to will depend on the context or ‘environment’ where your code runs. Whatever the context, you would use ‘this’ to refer to that context.

Take note that the value of ‘this’ object depends on how a function is invoked and not how a function is defined. Understanding the code execution context is very crucial to knowing what to expect when you use the ‘this’ keyword.

Javascript Execution Context

Simply put, the execution context is the environment in which code is executed. Each context comes with its settings such as the variable scope, the ‘this’ keyword, and the rules that determine how the code behaves. We will not discuss the execution context in detail. Just think of it as the wrapper that manages your code. However, I will explain some concepts in which the ‘this’ keyword can be invoked i.e. the regular function context, arrow function context, and class context.

Before I go into explaining these 3 contexts, let's take a look at the Global Context. The global context is represented by the ‘window’ object. This ‘window’ object is automatically created by the browser when a web page is loaded. It represents the browser window or the global environment in which the code runs within the page. Imagine the ‘window’ object as your external .js file or the inline code between the <script></script> except code that is in blocks or functions.

Let’s consider this line of code in the global context of a browser as illustrated below;

//Global execution context
console.log(window === window); //true in a web browser

We compare the ‘window’ object to itself which obviously will be true.

Now let's check if ‘this’ is the same as the ‘window’ object’;

//Global execution context
console.log(this === window); //true in a web browser

We get true as well. Therefore we can refer to the ‘window’ object with ‘this’ and get all the properties and methods that the ‘window’ object holds.

Let's take another example. Do you know the alert() function? It’s a method of the window object. Run the following code;

window.alert('hello');

which is equivalent to

this.alert('hello');

You can also create your methods and properties in the ‘window’ object. Create variables or functions without using the variable declaration keyword to make global variables and methods.

However, when you are in the ‘strict mode’, ‘this’ will result in ‘undefined’ if not bound explicitly. This is used to detect potential bugs and encourage developers to be more explicit about their code’s behavior.

Understanding ‘this’ in regular function

A regular function is a function that is defined using the function keyword followed by the function name, list of parameters separated by commas and enclosed in parenthesis with the code that defines the function enclosed inside curly braces as shown below;

function name(parameter){
  //Your function's code goes here
}

Each function creates its own scope and context. This means it encapsulates variables within its scope and defines its own context through the ‘this’ keyword. The value of the ‘this’ keyword depends on how the function is invoked.

When a regular function is invoked in the global context, ‘this’ refers to the global object which is the window object.

function greet(){
    console.log(this);
}

greet(); // window {...}

If the function is invoked using the new constructor keyword, a new empty object is created and ‘this’ will refer to that empty object;

function Greet(){
    console.log(this);
}

let Hello = new Greet();

Hello //greet{}

Now let's modify our code;

function Greet(){
    let message = 'Hello there';

    console.log(this);
}

let Hello = new Greet();

Hello // Greet{}

We are not getting the message variable as a property to the newly created Greet{} object because the message variable was not declared as a property of ‘this’ object.

Let’s add the message variable to the ‘this’ object;

function Greet(){
    this.message = 'Hello there';

    console.log(this);
}

let Hello = new Greet();

Hello // Greet {message: 'Hello there'}

We can also use the bind() method to set the context for our

function;
//create the function
function person(){
    console.log(this.name);
}

// use bind to set context
var obj = {
    name: 'John Smith',
}
var newPerson = person.bind(obj)

// bind() method returns a new function with the context set to obj

newPerson(); // John Smith

Hence with regular functions, you can either use the new constructor keyword or the bind method to set the context of the function.

Arrow function and ‘this’ object

Arrow functions in JavaScript do not have their own ‘this’ context. Instead, they inherit the 'this’ value from the enclosing lexical or outer context. This behavior can sometimes be an advantage, especially in scenarios where you want to maintain the context of ‘this’ within nested functions.

Consider the code below;
const obj = {
    name: "John Smith",
    greet: function() {
      console.log(`Hello, my name is ${this.name}`);
    },
    greetArrow: () => {
      console.log(`Hello, my name is ${this.name}`); // 'this' here refers to the outer context
    }
  };

  obj.greet(); // Output: Hello, my name is John
  obj.greetArrow(); // Output: Hello, my name is undefined

The name value is undefined because there is no name property for the global context. To correct this, we add the name to the outer scope;

this.name = 'John Doe' //name property in the outer context

const obj = {
    name: "John Smith",
    greet: function() {
      console.log(`Hello, my name is ${this.name}`);
    },
    greetArrow: () => {
      console.log(`Hello, my name is ${this.name}`); // 'this' here refers to the outer context
    }
  };

  obj.greet(); // Output: Hello, my name is John
  obj.greetArrow(); // Output: Hello, my name is John Doe

However, using ‘this’ in the arrow function can be a pitfall if you rely on dynamic ‘this’ binding, especially in event handlers or prototype methods.

‘this’ in Class context

Classes are blueprints or templates for creating objects. you specify the properties (data) and methods (behavior) that each object created from the class will have. If you need a new object, you just create it using the new constructor keyword.

The ‘this’ keyword behaves differently in class contexts such as;

When used inside the constructor method, ‘this’ refers to the newly created instance of the class. It allows you to set properties on the object during initialization.

class Person{

    constructor(name){
        this.name = name;
    }

}

let sarah = new Person('Sarah');

console.log(sarah.name) // Sarah

Functions in a class are called methods. When methods are invoked, the ‘this’ references the new instance of the class on which the method is called. It allows methods to access and manipulate the properties of the object.

class Person{

    constructor(name){
        this.name = name;
    }

    greet(){
        return `Hi, they call me ${this.name}`;
    }

}

let sarah = new Person('Sarah');

console.log(sarah.greet()) // Hi, they call me Sarah

When a static method is called, it is invoked directly on the class itself, rather than on an instance of the class. Therefore, ‘this’ within a static method does not refer to an instance of the class; instead, it refers to the class itself.

class Person{

    static introduce(){
        return `Welcome to Person class`;
    }

}

console.log(Person.introduce());

Conclusion

In summary, ‘this’ allows you to dynamically refer to different objects depending on how functions are called or where they are defined, providing flexibility and context-aware behaviour in your code.

JavaScript Functions Made Easy: Streamlining Code for Beginners!

Anwar Sadat Ayub — Sat, 03 Feb 2024 21:19:40 +0000

In the web development world, JavaScript functions are like handy tools that help you simplify and organize your code.

Let's say you're building a website and need to calculate the total price of items in a shopping cart. With JavaScript functions, you can create a set of instructions for this task, like a recipe.

To make a function, you use the function keyword, give it a name like calculateTotalPrice, and describe the task inside curly braces.

Once your function is ready, you can use it anytime by calling it with a simple command, like this: calculateTotalPrice().

Functions can also take inputs, called parameters. For our shopping cart, you might pass in item prices: calculateTotalPrice(item1Price, item2Price).

The real magic happens when the function processes these inputs and gives you a result, known as the return value. In our case, it could be the total price of the items:

function calculateTotalPrice(item1Price, item2Price){
  return totalPrice = item1Price + item2Price;
}

To make your functions even more useful, you can store their results in variables. For example, let totalPrice = calculateTotalPrice(item1Price, item2Price).

JavaScript functions keep your code clean and save you from repeating the same steps. Imagine updating tax calculations – with functions, you only need to do it in one place!

As you explore JavaScript, you'll find built-in functions like alert() or console.log() that make common tasks easier. You can also create quick functions using arrow notation.

In short, JavaScript functions are like coding helpers. They make complex tasks simple, keep your code neat, and work wonders for your web projects. Whether you're new to coding or a pro, understanding functions is a game-changer in JavaScript!

Advantages and Disadvantages of Cloud ERP.

Anwar Sadat Ayub — Thu, 24 Aug 2023 22:45:56 +0000

Cloud Computing Enterprise Resource Planning (ERP), is a business management software system used by organizations to manage their core business operations including human resources, finance, accounting, supply chain, sales, etc., hosted on a cloud computing platform. It is powered by high-speed internet hosted by the providers of the system. With access to the internet, clients can access their data from any location with a digital device and a browser to log in to the system.

Cloud ERP also integrates artificial intelligence and other technological tools to generate predictive insights from real-time data. Most organizations have turned to using Cloud ERP because of its advantages which include;

Accessibility and Availability: With an internet connection, the software can be accessed from any location. Teams that are not physically located in close proximity can collaborate seamlessly using the Cloud ERP.
Scalability: As organizations grow, so will their demand for resources increase. Cloud ERP is designed to effortlessly scale up or down to accommodate the business size, requirements, and demands, ensuring optimum resource utilization.
Cost Efficient: Organizations do not have to spend huge sums of money to set up their own infrastructure. The initial cost of Cloud ERP is a fraction of how much a company will need to build its own servers.
Automatic updates: Vendors of Cloud ERP regularly update their systems. This includes updating a feature in the software or uploading a patch to enhance security.

With all the above benefits and more, Cloud ERP has its own disadvantages:

Data Security: As organizations are using Cloud ERP, their data is stored on the vendors’ storage. Data stored can include the client’s credit card details or health records. This raises concerns regarding who has access to the data and who owns the data.
Reliance on Internet Connectivity: To log in to the Cloud ERP, organizations need a stable internet connection. An unstable internet connection will hinder business operations, productivity, and access to data.
Customization Constraint: Businesses might have their predefined workflows. This might not be incorporated in the Cloud ERP because the system is built to serve a more general purpose for many organizations.

In conclusion, cloud ERP can help organizations efficiently manage their operations online, be available remotely, and scale seamlessly to business needs with initial cost efficiencies. However, potential downsides include internet dependency, data security, and customization limitations. Organizations must consider these factors against their needs before adopting Cloud ERP.

10 Steps to Master JavaScript Array For Beginners

Anwar Sadat Ayub — Wed, 12 Jul 2023 17:51:42 +0000

Table of content

Introduction
What is an array?
How to create an array
Array index
Array properties
Unshift element to array
Shift an element to an array
Push an element to an array
Pop an element out of an array
Element inclusion in an array
Find an element by index
Conclusion

Introduction

As a programmer, you will always work with data. With small projects such as hello word and adding two numbers, you can use primitive variables. But to store the details of an object, like a student, with the first name, last name, address, age, gender, etc, you will need a data structure, and that is where array comes in.

To follow along, you must have basic knowledge of variable and function. Read my previous post on variable and function

1. What is an array ?

As defined by mdn;

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name and has members for performing common array operations.

Ok, let's break this down.

When collecting related data, you do not need to create multiple variables but rather you need an array to store those data as shown below;

// Using variables to store a student's info
let studentFirstName = "John";
let studentSecondName = "Smith";
let studentAddress="123 Central Park Square, NY";
let studentAge = 18;
let studentGender = "Male";

// Using an array to store a student's info
const studentProfile = ["John","Smith","123 New Address",18,"Male"];

From the above code, we used 5 variables for each data about the student while with the array, we only used the studentProfile array.

2. How to create an array

It is a common practice to use the const keyword to create an array followed by the name of the array, equal sign, and open and close square brackets as below;

//create an array of 3 books
const books = ['Eloquent Javascript','Head First Javascript Programming','Who Moved My Cheese'];

The elements in an array are separated by a comma. When an element of an array is a string, it is either in single quotes or double quotes.

const variable does not allow changes to the variable but with const array, there are methods that you can use to edit the array.

3. Array index

Before we discuss array methods, let's take a look at the array index.

Elements in arrays are stored in a contiguous and sequential order and the elements do not have to be of the same type. Let's take for example the books array as illustrated below;

The first element is the Eloquent Javascript, the second element is Head First Javascript and the third element Who Moved My Cheese.

Array index is a non-negative integer that is used to access elements in an array. Generally, array index starts at zero (0). Yes, you read it right, zero (0). It means the position of the first element in an array is at index 0 hence referred to as zero-indexed as illustrated below;

The first element, Eloquent Javascript is at index 0, the second element, Head First Javascript is at index 1 and the third element is at index 2.

The index of an element in array = position - 1. e.g. our third _element has an index of 2. The highest index in an array = array length minus 1. Our books array has length of 3 and the last element i.e. _Who Moved My Cheese has an index of 2.

Just for this article, we will use the index to access the elements of our arrays as shown below;

array[index];

//to display the first element in the books array
console.log(books[0]) //output: 'Head First Javascript'

4. Array properties

Every variable type comes with it's own properties in Javascript. A string variable has toLowerCase(), toUpperCase(), length, etc. properties while a number variable has the toString(), toFixed(), toPrecision, etc. properties.

Javascript arrays have the ;

length property which returns the number of elements in an array.
constructor property returns the constructor function that created the array object.
prototype property allows for adding user-defined properties and methods.
Note that for the purpose of this article, we will discuss the length property.

Using our books array, we can get the size of the elements of the array by the following code;

console.log(books.length) //output: 3

Assuming we want to check if a user has read 3 books, we write our code as;

//check if books read is less than 3
if(books.length < 3){
  console.log('You need to read 3 books')
}else{
  console.log('Congratulations')
} 

//output: 'Congratulations'

The output will be congratulations since the number of elements in the array is 3.

5. Unshift element to an array

To add an element to the existing elements in our books array, we use the Array.prototype.unshift(). The unshift() method takes a value an insert it at the beginning of the array and returns the new array.

The books array currently looks like this;

Let's add a new book to the books array;

//add a new book to the front of books array
books.unshift('Responsive Javascript')

//display all books

console.log(books) //output: Array(4) [ 'Responsive Javascript', 'Eloquent Javascript','Head First Javascript Programming','Who Moved My Cheese' ];

The books array will now looks like this;

When you prepend an element, the positions/indices of all the existing elements will increase by 1.

6. Shift an element to an array

To remove the first element which is at index 0 in an array, we use the Array.prototype.shift() method. The shift() method will remove the first element and return the removed element.

The books array looks like this;

Let's write the code to remove the last book in the books array;

//remove the 'Responsive Javascript' book
books.shift()

The books array will now look like this;

7. Push an element to an array

Just as we added an element at the beginning, we can also add an element at the end of the array. The Array.prototype.push() method adds an element to the tail of an array and returns the length of the array.

Let's push() a new book, Out Of The Maze , to our books array;

//add element to the end of an array
books.push('Out Of The Maze')

console.log(books) //output: Array(4) ['Eloquent Javascript','Head First Javascript Programming','Who Moved My Cheese','Out Of The Maze'];

8. Pop an element out of array

The Array.prototype.pop() removes an element at the end of an array and returns the element. This operation does not affect the index of the existing elements.

Let's remove the book we previously added to the books array;

//show all books 
console.log(books) // output: Array(4) ['Eloquent Javascript','Head First Javascript Programming','Who Moved My Cheese','Out Of The Maze'];

//remove 'Out Of The Maze' from books
books.pop();

//show all books after the pop() method
console.log(books) //output: Array(4) ['Eloquent Javascript','Head First Javascript Programming','Who Moved My Cheese'];

9. Element inclusion in an array

Imagine having a dictionary app that you can search for a word without flipping through pages like the "paper" dictionary. Having the search feature makes life easy for your users.

Array.prototype.includes() feature offers the opportunity to implement a "search" feature in your app by passing the search keyword as a parameter to the includes(). The method returns true if the keyword, which uses strict equality (===), exists in the array.

Let's write code to experiment with the "search feature";

//
let searchKeyword = 'Who Moved My Cheese';

//check if keyword includes in books array
let result = books.includes(searchKeyword);

if(result){
  console.log(`${searchKeyword} exists in book collection`)
}else{
   console.warn('Book does not exists');
}

10. Find an element by index

Elements in an array can be located by their indices by using the Array.prototype.at() method which takes an integer value and returns the element at that index. It allows for both positive and negative integers. When using negative integers, counting start from the last element in the array.

// get the book at index 2

console.log(books.at(2)); //output: "Head First Javascript Programming"

Conclusion

There are dozens of array methods in Javascript you can use to manipulate elements in an array, Arrays are used in a lot of areas in software development especially fetching data from an API or database. Go ahead and read more on Arrays at mdn.

Thank you for your time. See you on the next one.

Mozilla Open Source Project: 10 Things I Learnt.

Anwar Sadat Ayub — Tue, 25 Apr 2023 20:54:21 +0000

About a month ago, I signed up for Outreachy Internship Program where I got the chance to contribute to one of the Mozilla projects called Firefox Desktop Nightly and I learned a lot of things but here are just 10 of them:

Introduce yourself in the introduction room. Let other members and mentors know you're new to contributing to the Mozilla project. Mentors will guide you on how to get the setup on your local machine and get to work.
As a beginner, look for good-first-bug to start working on. Most of these issues come with instructions on how to solve them. Also, pay attention to any previous comments/discussions to get an understanding of what others have done. If you are still stuck, post your question on the introduction platform.
Always post your questions to the platform. Do not DM questions to mentors unless agreed by the mentor. Posting questions on the platform may help others to learn from it and mentors do not have to repeat themselves when newcomers join.
If you have started a thread with one mentor, make sure you stick with that mentor. Do not go asking other mentors about the same issue unless they offer to help. Mentors may refer others to also help.
You can DM mentors but make sure to ask if they are comfortable. Mentors do not have much time on their hands considering the number of mentees.
If you need help, look for the appropriate platform and post your question. Remember, there are many of these projects that are been worked on so taking your issues about setup to where they are discussing the new features, you might not get much help. You will probably be redirected to the appropriate platform.
Do not be rude. You are not only learning to better at coding but also communication skills. If you feel intimated or hurt by someone else's comment/reply, step away from your computer and take some fresh air. Possibly another mentor/colleague will step in to guide you better.
If new members ask a question and you have an idea, you should offer to help them because doing so will help to recap what you have learned and build your confidence too.
It is very much OK if at a point you feel lost. Do not hold back from seeking help. I recommend that first, you do a little research and if it does not help, you can ask for assistance. But be polite when asking your questions.
Lastly, have an open mind. Do not go into any project thinking you know it all and want to show off. If you know something, help others who do not know. And be ready to learn new things and you will be fine.

Lastly and most importantly, always read the contribution guidelines.

Functions are DRY

Anwar Sadat Ayub — Fri, 31 Mar 2023 22:29:55 +0000

When I started learning to code, one of the concepts that really kept me in the dark was Function. I struggled to understand what function is, its uses or applications, and why you'll even need one in the first place. I was comfortable using variables and loops to build my TO-DO apps. But of course, I was using functions in my code UNKNOWINGLY (I mean most of us did right ☺?).

NB// In this tutorial, I used JavaScript to reference concepts and code samples.

What is a function?

According to MDN,

Function is a set of statements that performs a task or calculates a value.

Let's examine the problem

Programming is about writing instructions for the computer to execute. Consider the code below which prints the first, middle, and last names to the console;

let firstName="Anwar", 
    middleName="Sadat", 
    lastName = "Ayub"; 

console.log(firstName, '', middleName, '', lastName)

Our code will be executed from top to bottom so all 3 variables will be created before printing their values to the console. Writing this code is much simpler and straightforward without errors.
But what if we want to print 3 people's details i.e. their first, middle, and last names? It means we have to repeat our code 3 times as;

// First person's details
let firstName1 = 'Anwar',
  middleName1 = 'S.',
  lastName1 = 'Ayub'

console.log(firstName1, '', middleName1, '', lastName1)

//Second person's details
let firstName2 = 'John',
  middleName2 = 'C.',
  lastName2 = 'Smith'

console.log(firstName2, '', middleName2, '', lastName2)

//Third person's details
let firstName3 = 'Lara',
  middleName3 = 'W.',
  lastName3 = 'Croft'

console.log(firstName3, '', middleName1, '', lastName3)

For such a task, it is common to just copy and paste the previous code, change the variable names, and assign new values to them as we did above which is fine for a beginner but the associated problem is that;

First, our code is prone to errors. If you had noticed (or maybe not), you'd see that we forgot to change the middleName for the third console so the output will be

Lara Sadat Croft

instead of

Lara W. Croft

Now we are just starting out and already there is a bug in our code.

Second, copying/pasting our code 2 times will not be much work but imagine if you are tasked to print 20 people's details. That means copying and pasting our code 19 times and renaming the three variables 19 times. That's could be a lot of work which we can hardly keep up.

Third, your code base will be difficult to maintain. Let's assume you managed to copy/paste 19 times and moments later, you're tasked to print only the firstNames and lastNames or print out everyone's Address and Telephone. That's a lot of work.

Our DRY Solution

By using a function, we can easily manage our code base relatively easier. Remember we said that a function is a set of statements that performs a task . So in short, we put all our code together as unit i.e. the 3 variables and the console.log(), and make them run as one statement.

Parts of function

A function basically has;

name,
parameter,
statements that define the function, which I called body

We can also talk about the function scope, return values, etc. but that would be for another article.

For us to use a function in our code, we first declare the function, a similar concept to declaring a variable.

function functionName (parameter){
    //statements of the function
}

The functionName is the name of the function when it was created. The name should be descriptive enough to identify what the function does. It is also case-sensitive.
Aside named function, there is also an anonymous function that does not have a name but that will be discussed in a separate article.

The parameter represents the named variables you use to pass values to the function i.e. the firstName , middleName , and lastName .

Let's create a function called printPersonalDetails to display details of a person in the console;

function printPersonalDetails(firstName, middleName, lastName){

      console.log(firstName, '', middleName, '', lastName)

}

Next thing to do is to_invoke_ or call the function. Each time we create a function, we have to call the function for it to be executed. So to call our function printPersonalDetails;

printPersonalDetails();

But don't forget that our function takes in 3 parameters i.e. firstName , middleName and lastName.
Let's update our function call;

printPersonalDetails('Anwar','Sadat','Ayub')

What we did was assign values to the named variable we created in our function definition. Argument is the real value passed to the function. In calling our function, we passed arguments in place of parameters.

So if we want to print 3, we just;

printPersonalDetails('Anwar','Sadat','Ayub')

printPersonalDetails('John','C.','Smith')

printPersonalDetails('Lara','W.','Croft')

Now our code is cleaner and we can make changes relatively easier. Remember how we had to repeatedly copy/paste our four lines of code, and edit them before printing to the console? With function, we do not have to repeat our codes.
We used the DRY (Don't Repeat Yourself) principle, where we do not have to recreate variables, change their names and assign them with new values but rather use function to make your code cleaner and maintainable.

I know it's been a long article but thank you for taking the time to read through it. I would love to hear your thoughts.

See you on the next one.

Animate Loading Indicator on Button With Vanilla Javascript

Anwar Sadat Ayub — Thu, 25 Aug 2022 22:19:58 +0000

Hi there 🙋🏾‍♂️,

In today's post, we are making a loading indicator on a submit button. This is a common feature nowadays to display/hide spinner on a button while application is in a busy state. I did this at a very basic level i.e. without any complicated code. There are several ways to do this. Please do not hesitate to share them with us 😊.

Basic skills in HTML, CSS and Javascript will be just fine to follow this post.

To the coding part, we will only need 3 files;

index.html
style.css
main.js

Start by creating an html boiler plate:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Loading Indicator</title>
</head>
<body>

</body>
</html>

Next we bring in our css and javascript files into the index.html;

index.html

    <link rel="stylesheet" href="style.css" />
    <script src="main.js" defer></script>

To get a feel of submitting a data, we will create a dummy form and add two input elements and a submit button even though we will not submit any data.

index.html

    <form class="sampleForm">
      <h1>Login form</h1>
      <div>
        <input type="text" placeholder="Enter email" />
      </div>
      <div>
        <input type="password" placeholder="Enter password" />
      </div>
      <button id="btnSubmit">
        <span id="btnSubmitText">Submit</span>
      </button>
    </form>

From the code we just added, we have a;

form with an id of sampleForm
2 input elements ( a text and a password type both with placeholders)
a submit button with a child span element with an id of btnSubmitText

At this point we will use fontawesome's spinner icon. We include the cdn but you can also download the kit and set it up manually if you are familiar with the process.

index.html

<!-- Fontawesome cdn -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
   integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

We will now add two child elements in the buttom: the fontawesome's spinner icon and span element as below;

index.html

<button id="btnSubmit">
  <span id="btnSubmitText">Submit</span>
  <i class="fa-solid fa-spinner fa-spin"></i>
</button>

The fa-spinner class adds the spinner icon and to animate the icon, we add fa-spin class. There are other animations like beat, fade, bounce, shake, etc, all at fontawesome animation.

Next we add some styles to our form.

style.css

.sampleForm {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
input {
  padding: 10px;
  margin: 5px;
  width: 250px;
}
button {
  background-color: orange;
  color: white;
  border: none;
  font-size: 20px;
  padding: 10px;
  width: 150px;
  height: 50px;
  cursor: pointer;
}
.fa-spinner {
  display: none;
}

The button has a fixed width and height. This is to maintain the same button size when we toggle the icon and text. Initially we are hiding the icon and showing the text on the button. When we click on the button, the text will be set to display:none and the icon will be set display:block. Let's do that right now.

In the main.js file, add the following code

main.js

const btnSubmit = document.getElementById('btnSubmit')

btnSubmit.addEventListener('click', (event) => {
  event.preventDefault()

})

So we grab the submit button and assign it to btnSubmit then listen to the click event on the submit button. By default, a submit form button causes a web page to refresh each time it is clicked. To prevent that, we pass the event argument to the callback function and called the preventDefault() function of the event object.

Now when the button is clicked, we want to hide the text (which is currently displayed) and display the spin icon (which is currently hidden). Let's write that code

main.js

  //Hide the text
  document.getElementById('btnSubmitText').style.display = 'none'

  //Display the spin icon
  document.querySelector('.fa-spinner').style.display = 'block'

Our code targets the span element that contains the text by id and assign the display property of it's style object to none which causes it to hide. On the hand, the icon is now displayed by setting it display property to block.

At this point, when we click the submit button, the submit text will hide and the spin icon will display.

Phewwwww...now that was a lot and you deserve the applause 🎉🙌🏽🍾🥳🥳🎉🎉🙌🏽

But we are not quite done yet. Our spin icon keeps spinning until we refresh the page and obviously we don't want that.
Normally when we send a form request, we expect a response and after the response, our button text should display and spin icon hidden.

To do that, we just do reverse of our code as below;

main.js

  document.getElementById('btnSubmitText').style.display = 'block'
  document.querySelector('.fa-spinner').style.display = 'none'

Now after adding this code, it happens so fast that we don't see the spin icon right? We can fake a request/response by adding a delay of 2 seconds using the setTimeout function.

Our main.js file will now look like this;

main.js

const btnSubmit = document.getElementById('btnSubmit')

btnSubmit.addEventListener('click', (event) => {
  event.preventDefault()

  //Hide the text
  document.getElementById('btnSubmitText').style.display = 'none'

  //Display the spin icon
  document.querySelector('.fa-spinner').style.display = 'block'

  //2 seconds delay
  setTimeout(() => {
    //Show the text after 2 seconds
    document.getElementById('btnSubmitText').style.display = 'block'

    //Hide the spin icon after 2 seconds
    document.querySelector('.fa-spinner').style.display = 'none'
  }, 2000)
})

As I mentioned earlier, this is just for basic level coding but you can definitely make this code better. Think of how you can make it reusable by introducing functions in the code.

You can download the files from my github repo. Please don't forget to leave a like 👍🏼.

Thanks for spending time to read and see you on the next one.

nextjs dev server

Anwar Sadat Ayub — Tue, 26 Jul 2022 22:30:04 +0000

Why does npm rum dev works?
The emphasis is on the m in

rum

I tried it multiple times and there's no error