DEV Community: Joshua

My first Open Source contribution

Joshua — Wed, 11 Jun 2025 03:33:55 +0000

Finally, I am writing this article after much procrastination. I have had a lot on my desk, which is why I have been procrastinating.

As one of the mentors at the Technical Writing Mentorship Program (TWMP), I volunteered to be part of the migration team as the program wanted to migrate its documentation from Hugo to Docusaurus. I was excited about this project, hence my willingness to volunteer.

When the project lead (Prince Onyeanuna and Wisdom Nwokocha) at the TWMP brought out the Plan for the migration, I was given a position that I never thought of when I joined. I was made the team lead for the HomePage redesign. Now, apart from being my first open-source contribution and documentation migration, it was also the first time I led a documentation migration team.

In my team, I had two fantastic teammates: Edun Rilwan and Peace Sandy, and together, we created this beautiful homepage.

Fig 1: TWMP new home page

How did we do it?

As the team lead, most of the responsibility fell to me, and since it was my first time leading a project like this, it was the perfect opportunity to learn on the job.

When I was appointed team lead for the home page redesign on April 21, 2025, I had to organise my team, and we held a series of meetings to discuss how to accomplish our tasks.

Fig 2: HomePage team members meeting on Google Meet

Here is how we did it.

1.) We created a Canva Design, which served as a blueprint for building our home page.

Here is the URL to view the design: https://twmp.my.canva.site/

2.) We divided the page into two sections, one for each person. Peace handled the first two sections (the hero section), I handled the following two sections (“hands-on courses” and “check our blog”) while Edun handled the last two sections (“Testimonial” and the “footer” sections)

3.) When we're done working, my team members all push their changes to their respective branches. Peace and Edun created their branch where they worked on and pushed their changes to, while I created the team branch, where I worked on and accepted my team member's pull request and merged it to the Homepage branch.

4.) When my team members were done, I made sure to cross-check everything and that they were working as intended, before I sent a PR to Prince Onyeanuna.

The whole process looks simple and easy as I write it, but it wasn’t so simple because we faced many challenges.

1.) Initially, we planned to use TailwindCSS for the project. However, despite following the documentation carefully, we couldn’t get it to initialize successfully. After multiple attempts, we decided to switch to Vanilla CSS to complete the task.

2.) As expected with most collaborative development projects, we also encountered merge conflicts—because there’s rarely open source without them. Our major challenge was a dependency conflict involving the yarn.lock file. Despite several attempts to resolve the issue, nothing worked. Eventually, we deleted the file from the branch and reinstalled all dependencies using NPM. This allowed us to move forward with the project smoothly.

Despite all the struggles and hurdles, we were able to come up with a good work, and the project leads, Prince Onyeanuna and Wisdom Nwokocha commended us for a job well done.

Here is a pic of the old docs home page and the new docs homepage

Fig 3: The old docs home page at Hugo

Fig 4: The new docs home page at Docusaurus

What I learnt as the Team lead

Communication between the team lead and the project lead is as important as communication between the team lead and the team members.
My knowledge about git improves: Been able to manage branches, handle Merge conflicts, and review pull requests made me understand Git more.
Patience and empathy when dealing with your colleague
Deadline management.

What's next for me?

We’re in phase 2 of our documentation, which focuses on restoring removed content, enhancing interactivity, and refining the overall documentation experience.

It has been a learning experience so far, and I am grateful to my team members (Peace and Edun) and the Technical Writing Mentorship Program for this experience.

Thank you for reading this far

Integrating OpenAPI With Mintlify

Joshua — Tue, 04 Mar 2025 09:37:17 +0000

Can a developer successfully work with an API without a standard API documentation? My answer is as good as yours. This means that API documentation is essential to all developers. A good API documentation is developer-friendly and concise.

According to the OpenAPI specification initiative, OpenAPI is the standard for defining your API. This means that you can migrate your API documentation from one platform to another with the help of this file. For example, you can migrate your API docs from Postman to ReadMe or Mintlify or vice versa.

This tutorial will walk you through integrating your OpenAPI spec file into your Mintlify project. By the end of this tutorial, you will have a fully functional API documentation, powered by an OpenAPI spec file.

Prerequisites

1.) Mintlify installed: You need Mintlify installed on your local computer, if you don't have one, we'll cover how to install it.

2.) Node.js installed: Install Node.js (version 19 or higher) before proceeding. You can download it here.

3.) Basic knowledge of OpenAPI

4.) You need to have some endpoints in your openAPI spec file in JSON or YAML format.

For this tutorial, I will use the Movie Database OpenAPI spec file. You can find the complete documentation here, and you can also clone the project from the GitHub repository if you want to work with it on your local computer.

Alright, let’s get started.

STEP 1: Set up your Mintlify Project

1.) Go to the website Mintlify website and sign up using Google

complete your profile by providing additional details, such as the name of your company (The name of your documentation).
Set up your first documentation deployment by following the instructions here

It will look like this when done

2.) Go to any Code Editor of your choice, navigate to the project directory, open the terminal, and run the following command:

npm i -g mintlify

You should use the command to install Mintlify CLI globally.

3.) After installing Mintlify globally, you enable local preview of your Mintlify documentation with the following command:

mintlify dev

STEP 2: Understanding the OpenAPI spec file format

The OpenAPI spec file, which is mostly edited in the Swagger Editor, is stored in JSON or YAML format. You can use any format of your choice, but it is advisable to use the YAML format because it is easier to read and maintain.

STEP 3: Integrate your OpenAPI spec file into Mintlify

When you are done documenting your endpoint in the OpenAPI spec file, ensure that you save and download it either as JSON or YAML format to your local device.

To integrate your OpenAPI spec file with your Mintlify project, follow these steps:

1.) Put your “openapi.yaml or openapi.json” file in the same directory as the "api-reference" folder in your Mintlify project.

2.) Go to your docs.json file and call your OpenAPI using the correct file path.

{
  "tab": "API Reference",
  "groups": [
    {
      "group": "Endpoints",
      "openapi": {
        "source": "/api-reference/openapi3.json",
        "directory": "api-reference"
      }
    }
  ]
}

The openapi contains two properties here, “source” and “directory”

“source”: “/api-reference/openapi3.json”: The source specifies the path to your OpenAPI spec file.
"directory": "api-reference": This specifies the directory where the OpenAPI spec file is located.

When you are done, it is important to validate your OpenAPI spec file before pushing it to your GitHub repository. Use the command “mintlify openapi-check <openapiFilenameOrUrl>” to check for errors and validate your work. If no errors, it gives the response: “✅ Your OpenAPI definition is valid”. If there is an error, it points to the specific endpoint where the error is and the reason for the error.

By doing this, all your documentation in the OpenAPI spec file will be appropriately displayed.

Additional Resouces

To deeply understand Mintlify, here are other great resources that you can use:

Mintlify Documentation: A comprehensive guide for understanding MIntlify.
OpenAPI Specification: Official OpenAPI documentation to understand the standard.
Mintlify YouTube channel to watch tutorial videos.
Swagger editor: Online tools used to write and test your OpenAPI spec file
You can engage with other developers on Dev.to API discussions or explore the Mintlify GitHub repository.

How progressive Web Apps (PWA) are revolutionizing website performance

Joshua — Sun, 27 Oct 2024 15:29:14 +0000

As we develop as a society and technology grows, the need for high-performance websites also grows. There is a need for websites to be fast, reliable, installable and have offline accessibility and that is where progressive web apps or PWA come into play. In this article, we will look at the overview of PWA and how businesses can leverage them for faster app-like web experiences.

What is a progressive Web App
Characteristics of PWA
Architectural enablers of PWA
Impact of PWA on website performance
How PWA Benefits Businesses
Conclusion

What is a progressive Web App?

A progressive web app is a type of web app that can operate as a website and as a mobile application on any device. It is aimed at delivering a high-performance website with an app-like user experience.

At its core, a PWA helps businesses build web applications that have the look and feel of a native application but use technologies like HTML, CSS and JAVASCRIPT which are the three fundamental web stacks of a website with additional features like service worker and web manifest.

Characteristics of PWA

Key characteristics of PWAs include:

Discoverable: PWA and their web pages can be found using a search engine i.e. they are SEO-friendly.
Installable: They can be made available on any device's home screens without needing an app store.
Offline Capability: PWA can work with poor internet connection and can work offline because it caches resources which enables the users to access when offline.
They support push notifications which allows for engagement of any new content.
They are secured. I.e connections between the user, the app and the server are secured against third parties because it uses HTTPS for its communication.

Architectural enablers of PWA

Having known what PWA is, the next question will be, what makes a PWA a PWA? That is, what transforms a traditional website into a PWA.

Service Worker: These are scripts that run in the background or separately from your browser to handle network requests and caching. These help PWA to deal with poor network connectivity, and increase the performance of an application, it also enables users to work offline and handle push notifications.
Manifest File: These Are JSON file that supports how PWA is treated as an installed application or provide metadata about the PWA. It contains the basic behaviour when installed.

While we may not go deeper into building Progressive Web Apps as it is not the scope of this article, understanding what it is, is essential to enable us to understand the impact it has on website performance.

Impact of PWA on website performance

In our day and age, most traditional websites are beginning to convert to PWA because of its high impact on website performance. Such as

Increase in load times due to its caching with service workers and minimized network requests.
Improved resource efficiency: They consumed less data compared to traditional web apps, making them lightweight which makes them more efficient.
They are universally compatible across devices due to their responsive principles.
They improved the SEO ranking of a website due to their high performance.

How PWA Benefits Businesses

The benefit that PWA has on business is enormous, some are;

It increases engagement: Its push notifications, offline access and fast loading time help boost user engagement on your website.
Higher conversion rate: faster load times on your website, leads to higher engagement which leads to more conversion in sales.
Reduced customer acquisition costs (CAC): since PWA are web web-based, businesses benefit from organic search traffic, unlike native apps that rely on app store marketing.
Saved development cost: PWA allows businesses to create a web app that works across multiple platforms (Web, Android, iOS) which saves development costs, compared to building native apps separately for each platform.

Conclusion

Progressive Web Applications (PWAs) are changing the way websites work by integrating mobile apps and website features. PWAs help businesses Improve user engagement and conversion rates and provide a fast, reliable offline experience on any device. As PWAs get better, they will have a greater impact on the digital landscape. Giving businesses a cost-effective and efficient way to meet the growing demand for high-performance web experiences.

The Role of CDN in Enhancing Website Performance and Reliability.

Joshua — Wed, 09 Oct 2024 00:08:55 +0000

In a fast-growing internet society, where we have users all around the world but don’t have enough servers all around the world, the experience that users have due to this dynamic is different for everyone due to which location is nearest to the server and this affects the speed of the website or the website performance, but with the help of CDN, we can have a better website performance.

In this article, we will have an understanding of CDN and the role it plays in enhancing website performance.

What is a CDN
Types of CDN
Choosing the right CDN
The Role of CDN in Improving Website Performance
Conclusion

What is a CDN

CDN, which is known as “Content Delivery Network” which was introduced in the late 90’s, accelerates internet content delivery. For example, you have a website and its server is hosted in Washington, and you have users all around the world who make requests to your website every day, the amount of time it will take for the request and response to occur which is measured in milliseconds will be different for each cities or countries. The closer the city is to the server, the quicker the response and the farther the city is from the server, the longer the response which means the website will be slower for certain persons in farther locations from Washington.

That is where CDN comes into play, by increasing the speed of a website, which is by reducing the distance between the user and the server providing the response or content. These CDN endpoints are placed in as many locations around the world as possible where our users are located. So, when a user outside of Washington tries to access your website, its content is first retrieved by the content delivery network (CDN) and then distributed glocally, resulting in faster delivery which leads to better website performance.

At a fundamental level, CDN brings content to the user and this improves the performance of a website.

Types of CDN

There are two main types of CDN:

CDN Push: This type requires the website owner to push content to a CDN server. For example, a video or image uploaded to a CDN server for quick distribution to users.
CDN Fetch: In this approach, the CDN server fetches the content from the original server when the user requests it. This is useful when content is updated frequently because the CDN server will have the latest version.

Other CDN types include traditional CDN, Cloud-based CDN, peer-to-peer CDN and Hybrid CDN.

Choosing the right CDN

Choosing the right CDN is important for any business owner who wants to improve their Website performance. Factors to consider in choosing the right CDN for your website include:

Knowing Your Needs.

Traffic Size: This is how much traffic your website generates. This is a key aspect to consider because the CDN will help to manage spikes in website traffic.
Geographic Regions: Be aware of where your visitors are. A CDN with worldwide servers can reach more international users at greater speeds.

Security.

DDoS Mitigation: Choose a CDN with strong DDoS (Distributed denial of service) protection that will effectively block cyber attacks.
SSL Support: The CDN should be able to provide secure delivery of content with support for SSL certificates.

Integration and Compatibility.

Platform Compatibility: Ensure the CDN is compatible with your existing CMS (content management system) among other technologies.
Ease of Setup: It would be nice if the CDN was easy to set up, and the processes were documented.

Cost Considerations.

Pricing Model: Ascertain the pricing methodology, which could be pay-as-you-go, or flat rate amongst others, and align it to your budget.
Hidden Costs: Be prepared to incur additional costs that will emerge from bandwidth, storage, and other value-added services.

Support and Reliability.

Customer Support: Evaluate the level of customer support, such as its reachability and response time.
Uptime Guarantee: Look out for a CDN offering a good uptime guarantee (preferably above 99.9%) to rely on the service.

The Role of CDN in Improving Website Performance

CDN helps to improve website performance in the following ways:

Reduced latency: Since CDN hosts content on multiple servers distributed across different geographical locations when a user calls for a web page, the CDN will serve it from the user's geographical location or close to the user's geographical location. This reduces the travel time for data.
Load Balancing: CDN facilitates the distribution of load traffic between different servers. This handles heavy volumes without slowing down the network and keeps it responsive because no server is overwhelmed with incoming requests or traffic.
Improved security: Many of the CDNs provide DDoS protection and securely deliver content. This would prevent any attacks from slowing down or minimizing your website. A CDN manages malicious traffic to maintain performance.
Caching: The CDN stores content that is static (images, stylesheet, scripts) on their servers, which means subsequent requests for the same content can be served more quickly from the cache rather than from the originating server which reduces its load.
Dynamic Content Acceleration: While static content gets frequently cached, several other optimization techniques such as route optimization and dynamic site acceleration have also been enabled in CDNs for performance acceleration of dynamic content. Ensuring that each content loads quicker as well.
Increased Reliability: With multiple servers, when one server goes down, the other can keep sending content. This improves the reliability and uptime of the website.

Conclusion

In a modern world like ours which keeps developing every day, the User experience and speed of a website mean a lot to everyone, and the role CDN played in ensuring a great website experience cannot be downplayed. As your business continues to grow and expands its reach, choosing the right CDN becomes an important component toward ensuring a fast, secure and seamless web experience.

Building Progressive Web Applications with Vanilla JavaScript.

Joshua — Tue, 13 Jun 2023 06:14:14 +0000

A progressive web application (PWA) is a web application that can be installed on a user’s device and used just like a native app. It gives your website great features that traditional websites cannot do. This increases performance and makes it SEO-friendly and usable across all devices.

In this article, we will build a Progressive Web Application using HTML, CSS, and Vanilla JavaScript.

What is a progressive Web application
A brief history of PWA
Benefits of a Progressive Web app
Getting Started with PWA
- What is a Service Worker
- Benefits of Service Worker
- Limitation of Service Worker
What is Web App manifest
Building a JavaScript Calculator
- Index file
- CSS Stylesheet
- Creating the js file
Transforming our JavaScript Calculator into a PWA Calculator
- Create the Service Worker
- Registration
- Installation
- Activation
- Fetch our cache asset
- Creating the Web App manifest file
Conclusion

What is a progressive Web application?

A progressive web app (PWA) is an application that offers native app features through web technologies (HTML, CSS, and JavaScript). The web application can easily be published online by developers, who can ensure that it satisfies the minimal installation requirements and that users can add it to their home screens.

A brief history of PWA

Progressive web apps, first coined by Frances Berriman and Alex Russell in 2015, gained popularity in 2016 when Google announced it would support PWAs in Chrome. Similar announcements from other major browser organization, such as Mozilla and Microsoft, followed this announcement.

In 2017, Google launched the Progressive Web App Experimentation Platform, which allowed developers to test PWAs in a broader range of devices and browsers. This platform helped to accelerate the adoption of PWAs by making it easier for developers to build and test PWAs.

In 2018, Google announced it would add support for PWAs to Android. This announcement allowed developers to build PWAs that could be installed on Android devices and used like native apps.

Benefits of a Progressive Web app

There are many benefits of building a PWA;

Installable: PWAs can be installed on the user's device like a native app. This allows users to access the app even when they are offline.
Offline-capable: PWAs can work offline, even without an internet connection. This is because PWAs cache resources, such as images and JavaScript files. Thus, they can be accessed even when the user is offline.
App-like: PWAs can look and feel like native apps. PWAs can use the device's native UI elements, such as the notification bar and home screen.
Fast: PWAs are typically faster than traditional web applications. This is primarily because of their cache resources and the fact that they use the device's native APIs.
Reliable: PWAs are more reliable than traditional web applications. This is because PWAs can work offline and are not affected by network outages.
Engaging: PWAs can be more engaging than traditional web applications. This is because PWAs can use push notifications to keep users updated with new content.

Getting Started with PWA

PWA is made possible through the help of service worker and manifest.json. Service worker and manifest.json convert our traditional web app to a progressive one.

What is a Service Worker

A service worker is a script that runs in the background of your browser and manages network requests for your web application.
They can be used to:

Cache resources so that they can be accessed even when the user is offline.
Control offline behavior. One of such situation is determining what happens when the user tries to access a page that is not cached.
Provide push notifications, which can be used to keep users updated with new content.

Benefits of Service Worker

Service worker provides multiple benefits in addition to being a powerful tool for enhancing your online application's functionality, dependability, and user experience.

Improved performance: They can cache resources like images and JavaScript files. This allows these files to be accessed quickly, even when the user is offline. Thus improving the performance of your web application, especially on mobile devices and regions with slow internet connections.
Improved reliability: Service worker are capable of handling network errors, such as outages. Thus, your web application can continue to function even when the user is offline. This can improve the reliability of your web application, especially for users with unreliable internet connections.
Improved engagement: Can be used to provide push notifications, which can be used to keep users updated with new content. This can help improve your users' engagement, especially for users who are interested in your content.

Limitation of Service Worker

Service worker are a powerful tool, but they have some limitations. It is important to understand these limitations before you start using service workers.
Here are some of the things that service workers cannot do:

Service workers cannot access the DOM (). This means that they cannot directly interact with the user interface of your web application.
Service workers cannot access the user's data; This means that they cannot access the user's cookies, local storage, or IndexedDB.

What is Web App manifest

Web App manifest which is the manifest.json is a configuration file used in PWAs to provide metadata and settings about the web application. It is a JSON (JavaScript Object Notation) file that contains key-value pairs defining various properties, such as the app's name, icons, colours, and other characteristics.
The manifest.json file contains the following information:

Name: The name of your PWA.
Description: A short description of your PWA. What does it do?
Start_url: The page URL should be opened when the PWA is launched.
Icons: A list of graphical symbols used to represent your PWA.
Theme_colour: The colour that should be used for the UI of your PWA.
Background_color: The background colour that should be used for the UI of your PWA.
Display: The display mode that should be used for your PWA.
Scope: The scope of a Progressive Web App (PWA) is the set of resources that are accessible to the PWA when it is running offline.

Building a JavaScript Calculator

For this article, I will transform our calculator application into a PWA. To do this, I need to start with my Index.html, which containers all the code I will use.

Index file

This folder will contain all of our index.html code that will be used in building this project. in our project, we will be building a calculator and making it a progressive web app which means it will have all the benefits of a PWA.

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="building a progressive web app" />
    <meta name="author" content="Onwumene Joshua" />
    <title>Progressive Web App CALCULATOR</title>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js" defer></script>
    <link rel="manifest" href="manifest.json" />
  </head>
  <body>
    <div class="container">
      <table>
        <tr>
          <th colspan="4">
            <input
              type="text"
              class="display"
              value=""
              readonly
              placeholder="0"
            />
          </th>
        </tr>
        <tr>
          <td><button class="open-par">(</button></td>
          <td><button class="close-par">)</button></td>
          <td><button class="delete">Del</button></td>
          <td><button class="add">+</button></td>
        </tr>

        <tr>
          <td><button class="seven">7</button></td>
          <td><button class="eight">8</button></td>
          <td><button class="nine">9</button></td>
          <td><button class="minus">-</button></td>
        </tr>
        <tr>
          <td><button class="four">4</button></td>
          <td><button class="five">5</button></td>
          <td><button class="six">6</button></td>
          <td><button class="multiply">x</button></td>
        </tr>
        <tr>
          <td><button class="one">1</button></td>
          <td><button class="two">2</button></td>
          <td><button class="three">3</button></td>
          <td><button class="divide">÷</button></td>
        </tr>
        <tr>
          <td><button class="dot">.</button></td>
          <td><button class="zero">0</button></td>
          <td colspan="2"><button class="equalTo">=</button></td>
        </tr>
      </table>
    </div>
  </body>
</html>

In the code above, the calculator was created using html table property for easy arrangement styling, where each table row contains four table data, except the last table row, which contains three table data

CSS Stylesheet

The CSS stylesheet attributes the design features to our calculator.

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

body {
  background-color: rgb(38, 37, 37);
  height: 100vh;
}

table {
  margin: 100px auto;
  border-radius: 10px;
  padding: 25px;
  font-family: "Montserrat", sans-serif;
  background-color: gray;
}

td {
  /* This is about the table data, the space between each data */
  padding: 5px;
  width: 100px;
  height: 100px;
}

.display {
  border: none;
  background-color: #5e666f;
  border-radius: 10px;
  padding: 25px;
  text-align: right;
  font-size: 30px;
  font-family: "Roboto Mono", monospace;
  color: #800f0f;
  margin-bottom: 20px;
}

input {
  border: none;
  outline: none;
}

button {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  font-size: 30px;
  font-weight: bold;
  padding: 10px 8px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}

button:hover {
  transition: 1s;
  transform: scale(1.1);
}

.multiply,
.divide,
.minus,
.add,
.equalTo {
  background-color: #7e90a5;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.delete {
  background-color: #4e2121;
}

.open-par,
.close-par {
  background-color: #65707d;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.dot,
.zero,
.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight,
.nine {
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

We gave our table; margin: 100px auto; this set our top and bottom margin at 100 pixels and horizontally centers the element within its container by evenly distributing the available space on the left and right sides.

All the button was given the same styling for proper arrangement.

Creating the js file

The JavaScript file will help give functionality to the calculator. To do this, we select all our buttons using querySelector and give it the “click” event listener so that when the user clicks on it, it will be able to display something, in our case, we are displaying the value being clicked.

main.js

const open = document.querySelector(".open-par");
const close = document.querySelector(".close-par");
const display = document.querySelector(".display");
const del = document.querySelector(".delete");
const divide = document.querySelector(".divide");
const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
const multiply = document.querySelector(".multiply");
const four = document.querySelector(".four");
const five = document.querySelector(".five");
const six = document.querySelector(".six");
const add = document.querySelector(".add");
const seven = document.querySelector(".seven");
const eight = document.querySelector(".eight");
const nine = document.querySelector(".nine");
const minus = document.querySelector(".minus");
const dot = document.querySelector(".dot");
const zero = document.querySelector(".zero");
const equalTo = document.querySelector(".equalTo");
 //display.value tells the web browser to display whatever the value holds while the += means "append". i.e append what we click to our previous value.
open.addEventListener("click", function () {
  display.value += "(";
});
close.addEventListener("click", function () {
  display.value += ")";
});
one.addEventListener("click", function () {
  display.value += "1";
});
two.addEventListener("click", function () {
  display.value += "2";
});
three.addEventListener("click", function () {
  display.value += "3";
});

four.addEventListener("click", function () {
  display.value += "4";
});
five.addEventListener("click", function () {
  display.value += "5";
});
six.addEventListener("click", function () {
  display.value += "6";
});
seven.addEventListener("click", function () {
  display.value += "7";
});
 eight.addEventListener("click", function () {
  display.value += "8";
});
 nine.addEventListener("click", function () {
  display.value += "9";
});
 zero.addEventListener("click", function () {
  display.value += "0";
});
dot.addEventListener("click", function () {
  display.value += ".";
});
 del.addEventListener("click", function () {
   display.value = "";
});
equalTo.addEventListener("click", function () {
 //this means, try(run) this code for us, but if you catch(see) any error in the input, then display this error message "WRONG INPUT"
  try {
    display.value = eval(display.value);
  } catch (err) {
    display.value = "WRONG INPUT";
  }
});
add.addEventListener("click", function () {
  display.value += "+";
});
minus.addEventListener("click", function () {
  display.value += "-";
});
multiply.addEventListener("click", function () {
  display.value += "*";
});
divide.addEventListener("click", function () {
  display.value += "/";
});

Transforming our JavaScript Calculator into a PWA Calculator

We’ve successfully built a traditional web app, but not a progressive one. So to convert our traditional web app into a progressive one, we need to add a service worker and manifest.json to our project.

Create the Service Worker

Knowing what service worker is and their benefits, we will use it to create this progressive app. For this project, we will create a service worker from scratch, not using a framework like workbox. Workbox will, however, make the work a lot easier and better.

The service worker has three life cycles or phases

Registration
Installation
Activation

Registration

In this phase, the service worker script is registered with the browser. This is done by calling the navigator.serviceWorker.register() method. The .register() method takes a service worker registration options object as its argument. The service worker registration options object specifies the scope of the service worker, the name of the service worker, and the list of events that the service worker should listen for.

To register the service worker, you go to your main.js file and register it there;

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("./sw.js")
      .then((reg) => console.log("service Worker: registered"))
      .catch((err) => console.log(`service worker; Error:${err}`));
  });
}

The code above checks to see if the serviceWorker property is present in the navigator object, (that is the browser) If it is, the code registers a service worker with the ./sw.js file. The register() method returns a promise, the .then() means if the registration is successful, console.log(service worker: registered). If the registration fails, the .catch() block is executed, and the error message is printed out.

Installation

Here the browser downloads and installs the service worker script. This is done asynchronously. Once the service worker script has been installed, the browser will call the install event handler of the service worker. The install event handler is responsible for initializing the service worker and caching any resources that the service worker will need to access when it is activated. This will be done in our sw.js file

const cacheName = "calculator v1"; //the name of our cache
const cacheAsset = ["index.html", "style.css", "main.js"]; //this is the asset that we want to cache

self.addEventListener("install", (e) => {
  console.log("service worker installed");

  e.waitUntil(
    caches
      .open(cacheName)
      .then((cache) => {
        console.log("service worker: caching files");
        cache.addAll(cacheAsset);
      })
      .then(() => self.skipWaiting())
  );
});

Self refers to the service worker itself.

The code above defines a cache name and a list of assets that should be cached (index.html, CSS stylesheet, and main.js). The code then registers a service worker and uses the install event handler to cache the assets. The install event handler is called when the service worker is installed.

The caches object provides methods for opening and closing caches. The open() method takes a cache name as its argument and returns a promise that resolves with a cache object. The cache object provides methods for adding and removing resources from the cache. The addAll() method takes an array of resource URLs as its argument(our cacheAssets in our example) and adds all of the resources to the cache. The skipWaiting() method tells the browser that the service worker is ready to handle network requests.

The code in the install event handler first opens a cache with the name calculator v1. The code then adds the assets in the cacheAsset array to the cache. Finally, the code calls the skipWaiting() method to tell the browser that the service worker is ready to handle network requests.

Activation

The service worker is activated by the browser. This is done when the browser determines that the service worker can provide a better user experience than the original web page. Once the service worker has been activated, the browser will call the activate event handler of the service worker. The activate event handler is responsible for starting the service worker and beginning to intercept network requests.

self.addEventListener("activate", (e) => {
  console.log("service worker activated");

//removing unwanted caches
  e.waitUntil(
    caches.keys().then((cacheName) => {
      return Promise.all(
        cacheName.map((cache) => {
          if (cache !== cacheName) {
            console.log("Service worker: clear old caches");
            return caches.delete(cache);
          }
        })
      );
    })
  );
});

The code above is a service worker that clears old caches when it is activated. The code first gets a list of all of the caches that are associated with the service worker. The code then iterates through the list of caches and deletes any caches that are not the current cache. The code uses the waitUntil method to ensure that all of the caches are deleted before the service worker is activated.

The caches object provides methods for opening and closing caches. The keys() method returns a promise that resolves with an array of all of the cache names. The map() method iterates through an array and calls a function for each element in the array. The Promise.all() method waits for all of the promises in an array to resolve before it resolves (that is, the promise.all method is used to wait for all of the caches that is not in our cacheName to be deleted before the service worker is activated). The waitUntil method tells the browser that the service worker will not be activated until the promise resolves.

Fetch our cache asset

To cache our page, making it available to work offline; we use the fetch event

self.addEventListener("fetch", (e) => {
  console.log("service worker: fetching");
  //checking if the live site is avaialble and if not, responsd with the cache site
  e.respondWith(fetch(e.request).catch(() => caches.match(e.request)));
});

The code in the fetch event handler first makes a network request to the live site. If the network request is successful, the code responds with the response from the network request. If the network request is not successful, the code responds with the cached site.

Now our calculator project can be cached, and available offline, and we can now have a push notification, basically, it now has all the benefits of service worker. Next, we create the manifest.json file to provide our web application information when the user wants to install its application.

Creating the Web App manifest file

The manifest.json file is just like the regular JSON (JavaScript Object Notation) file used for storing data in web applications. When building a Progressive Web Application, the manifest.json stores necessary data and information about the PWA.

{
  "name": "calculator",
  "short_name": "calculator",
  "theme_color": "#fff",
  "background_color": "#fff",
  "display": "standalone",
  "orientation": "any",
  "scope": "/",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

It contains some mandatory properties or optional properties like the name, icon, and scope.

With these, we have transformed our regular calculator web app into a progressive web app (PWA). To confirm if your web app has been transformed into a progressive web app, the Google lighthouse tool in the developer tool will show you the PWA icons. This shows that your application has been transformed.

Conclusion

We’ve now seen how to transform our regular calculator app into a progressive web app with just Service worker and manifest.json. Making your web app a PWA will significantly affect it positively because it contains all the benefits of a traditional app and of a native app.

Also, using a framework like Workbox can help you create a service worker and free you from the stress of writing it from scratch. However, knowing how to create a Service worker using Vanilla JavaScript will help you better understand PWA and appreciate it.

Google Chrome User Guide For Mobile

Joshua — Fri, 31 Mar 2023 23:05:48 +0000

Introduction

Google Chrome is a free web browser, developed by Google and released in 2008.

It was tagged A fresh take on the browser because of its innumerable qualities; improved speed and responsiveness across the board, protection from an untrusted site and so on. What makes Chrome special is that it is part of an open-source project named Chromium browser and this sets it apart from other browsers. According to the browser market share Chrome has 67 worldwide usages and this has made them trustworthy by users.

Table Of Content

Introduction
Table Of Content
What Is Google Chrome
Why Google Chrome
Installation
How to use Google Chrome
Address bar
Search bar
Tabbed browsing
Bookmarks
Incognito Mode
Syncing across all device

What Is Google Chrome

Google Chrome is a cross-platform that can run on Windows, macOS, Linux, Android, and IOS. Google Chrome is known for its clean and user-friendly interface, as well as its fast browsing speeds and advanced features such as tabbed browsing, bookmarks, and incognito mode. It is designed to be simple to use, while also being highly customizable and adaptable to a wide range of users and devices.

Why Google Chrome

Google Chrome set the pace with these features:

Speed: Its fast browsing speed and multi-process architecture allows you to run multiple browser tabs at the same time without crashing.
Great user interface
Security: Google Chrome has several built-in security features, including automatic updates, phishing, malware protection and sandboxing of individual tabs
Integration: Google Chrome easily integrates(syncing) with other Google services, such as Gmail, Google Drive, and Google Calendar. This makes accessing these services easy and syncing data across different devices.
Developer tools: Google Chrome offers a range of powerful developer tools that allow web developers to debug and optimize their web applications.

Installation

Open the Google play store on your android device
In the search bar at the top, type "Google Chrome" and hit the search button.
Select Google Chrome in the search result
Click on the install button to start the installation process.
Once the installation is complete, you can open the Google Chrome app
You can now successfully enjoy all the wonderful features of Google Chrome.

How to use Google Chrome

On the home screen, you can either use the Address bar or the search bar to access the internet

Address bar

The address bar at the top of the Chrome screen is where you can enter a URL or search term to navigate to a website. Simply type in the URL or search term and press enter to be taken to the desired site.

For example, if you want to access the appwrite website, just type in appwrite.io on the address bar and click on enter and you will be taken to its website.

Search bar

If you want to use the search bar, simply tap on the search bar on the home screen, to search for anything of your choice and Chrome will display a list of search results that match the search term.

Tabbed browsing

Google Chrome allows you to have multiple web pages at once and this feature is called tabbed browsing. To create a new tab;

click on the tab icon at the top of the screen
click on the new tab.
A new tab will be created.
You can also click on the 3 dots at the top of the screen, and click on the new tab.
To close the tab, tap on the “x” icon and the tab you created will be closed

Bookmarks

This feature in Chrome allows you to save your favourite website or your most visited website for easy access. To access this feature;

click on the 3 dots in the top right corner when you open your favourite site.
click on the star

This will bookmark your favourite site. To access the Bookmarks, click on the 3 dots and you will be able to access the bookmarks.

Incognito Mode

incognito tab refers to a private browsing mode that allows you to browse the internet without leaving any trace of your activity on the device you are using.

IMPORTANT: Google Chrome will not save your browsing history, cookies, site data, or any information you enter into forms whenever; you browse in incognito mode.

To access the new incognito tab;

Click on the 3 dots
click on the new incognito tab
new tab.

Syncing across all device

This feature allows you to synchronize your bookmarks, browsing history, and other data across all your devices.

tap on the three dots in the top right corner of the screen and select "Settings".
tap on "Sync and Google services" and sign in with your Google account.

UNDERSTANDING GRID TEMPLATE COLUMN IN CSS USING SIMPLIFIED EXAMPLE

Joshua — Mon, 16 Jan 2023 14:05:02 +0000

The CSS grid property is part of the CSS layout property used to arrange boxes about its viewport. We have several CSS layout properties: flexbox, CSS grid, positioning, float etc. But in this article, we will be talking about CSS grid property.
CSS grid layout is a two-dimensional system that allows us to position items into rows and columns simultaneously.

Fig 1: A typical grid example
But Flexbox which is a very popular CSS layout outside the CSS grid is a one-dimensional layout system that allows us to position items either on rows and columns, but not both.

Fig 2: A typical flex column example (one-dimensional)

Fig 3: A typical flex row example (one-dimensional)

From the image above flex image, you can see that it can’t be arranged into both rows and columns like the CSS grid.

Now, that we have an idea of what a CSS grid is, let’s go deeper. To work with CSS grid, you can either use grid template columns or you can use grid-template-areas.

In this article, we will be dealing with grid-template-columns.
Grid-template-columns is a CSS grid property that specifies the number of columns in a grid layout as well as the width of the columns.
A demo of how you will see CSS grid-template columns.

Grid-template-columns: auto auto auto
grid-template-columns: repeat (5, 1fr)
grid-template-columns: 20% 80%

The first example allows us to adjust the width or size of a grid container according to the width of the content and it has 3 columns

The second example stands for a fractional unit which represents a fraction of the available space in the grid container and repeat() notation which helps us to repeat the 1fr 5 times instead of calling it out into 5 places (1fr 1fr 1fr 1fr 1fr). So since we have the 1fr into 5 places. i.e a total fractional unit of 5, each one is going to split 1/5 of the remaining spaces.

The third example is creating two columns with the first column occupying 20% of the grid container, and the second column occupying 80% of the grid container.

Before we look at our first real example, let’s know what grid line mean; grid lines refer to the lines that define the grid columns and rows; In our image below we have 4 columns and 5 rows, but 5 vertical grid lines which determine our columns and 6 horizontal grid lines which determine our rows.

Fig 4: A breakdown of grid.

We will get a better view of what grid lines means in our example below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid template columns</title>
    <link rel="stylesheet" href="grid.css" />
  </head>
  <body>
    <div id="content">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
      <div class="four">4</div>
      <div class="five">5</div>
      <div class="six">6</div>
    </div>
  </body>
</html>

Output

Fig 5: output without grid

The above is the output without the styling, so we can want to arrange this numbers into the horizontal and vertical form like the way a proper website will look like

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

#content {
  color: white; //to make the text color white
  margin: 10px; //a margin of 10px around the body
  text-align: center; //to position the text at the center of each background
  display: grid; //to display it in a grid format
  grid-template-columns: repeat(5, 1fr); // to create 5 columns of 1fr and this automatically has 6 grid lines
  grid-auto-rows: minmax(100px, auto); // these specifies the size of an implicit created grid row track or pattern of 100px. But if the size of the row is greater than 100px then use auto

  grid-gap: 10px; //these specifies the gap between each column and row
}

/* what this mean is, make all the even number background blue */
#content div:nth-child(even) {
  background: blue;
}

/*and the ones who are not even number background, give them this color*/
#content div {
  background: rgb(255, 0, 242);
  width: auto;
  padding: 40px;
}

.one {
  grid-column: 1/4;
  grid-row: 1/3;
}
.two {
  grid-column: 4/6;
  grid-row: 1/3;
}
.three {
  grid-column: 1/6;
}
.four {
  grid-column: 1/3;
}
.five {
  grid-column: 3/6;
}
.six {
  grid-column: 1/6;
  grid-row: 5/7;
}

Fig 6: output in desktop view

Fig 7: output in mobile view

A breakdown of each line of code from .one to .six

.one {
  grid-column: 1/4; //this means to take a vertical grid line of 1-4 which is columns 1 to 3
  grid-row: 1/3; //this will take a horizontal grid line of 1-3 which is 2 row
}

.two {
  grid-column: 4/6; //it means from grid line 4 to grid line 6. Which is the 2-column
  grid-row: 1/3; this will be occupying horizontal grid lines 1 to 3, which is 2 row
}

.three {
  grid-column: 1/6; //occupying from grid line 1 to grid line 6, which will be occupying 5 column
}

.four {
  grid-column: 1/3; //occupying grid line 1-3, which is 2 column
}

.five {
  grid-column: 3/6; //occupying grid line 3 to 6 which is 3 column
}

.six {
  grid-column: 1/6; //occupying from grid line 1 to grid line 6 which is the 5 column
  grid-row: 5/7; //occupying from grid line 5 to grid line 7 which is 2 rows
}

In a situation where the grid line is not stated like .three, .four, and .five, it takes one row

Conclusion

We talked about what a grid is, and how it is different from flex, we talked about grid-template-columns, and we also talked about grid lines and how They relate to grid columns and rows. Your grid line is one more than the number of columns and rows. i.e if your column is 5, your grid line is 6, the same if your row is 4, your grid line is 5.

Please feel free to follow me for more content, post your comment and questions, and follow me on Twitter and Linkedln

SCOPE IN JAVASCRIPT

Joshua — Wed, 04 Jan 2023 12:45:08 +0000

When you visit a government building and you want to use the restroom; there are restrooms that are available (accessible) to everyone (both staff and non-staff), there are some accessible to the staff working in the building, and there are some to senior government officials ONLY. The hierarchy of these officials determines the restroom they have access to.
This basic example, explains how scope works in JavaScript. Basically, Scope is all about visibility and accessibility. It is the idea that where you defined a variable, determine if other pieces of your code, may have or may not have access to that variable.
In JavaScript, we have two types of scope

Global scope
Local scope

GLOBAL SCOPE
In JavaScript, variables that are declared outside of a function or block are global scope. These are variables that are accessible everywhere in our program. Using our restroom example to analyze this; the global scope can be alike to the public restroom that is accessible to everyone in the building.

let a = "Global scope";
let b = "JavaScript";
function globalScope() {
  console.log(a);
  console.log(b);
}

globalScope();
//Global scope: accessible everywhere in the program
//JavaScript: accessible everywhere in the program

LOCAL SCOPE
Every scope outside of the global scope is a local scope and in local scope we have;

Block scope
Function scope
Lexical scope

BLOCK SCOPE
In JavaScript, any code that is inside two curly braces {} is called a block of code. E.g conditional statement and loop. Any variables that are defined here are visible and accessible to that block of code ONLY. They are not accessible everywhere as the global scope are;


let a = "Global scope";
let b = "JavaScript";
if (true) {
  let c = "Block scope";
  console.log(a); //Global scope: accessible because of Global scope
  console.log(b); //JavaScript: accessible because of Global scope
  console.log(c); // Block scope: accesible because it is inside the block
}

console.log(a); //Global scope: accessible because of Global scope
console.log(b); //JavaScript: accessible because of Global scope
console.log(c); // Uncaught ReferenceError: c is not defined.

// c is not defined because we are assessing it outside of the block.

Using the previous example, let’s declare a variable with let, const and var (the 3 methods for declaring a variable) to check if any difference between them

if (true) {
  let a = 1;
  const b = 2;
  var c = 3;
  console.log(a); //1
  console.log(b); //2
  console.log(c); //3
}

console.log(a); //Uncaught ReferenceError: a is not defined
console.log(b); // Uncaught ReferenceError: b is not defined
console.log(c); //3

our c was accessible outside of the block scope, why? Because there is an exception when using var. if we use var to declare a variable inside of a block, you can be able to access it outside the block.
Var is not scope to block because you can be able to access it outside the block which is not what you will want in your program.

FUNCTION SCOPE
When you declare a variable inside of a function. It is called function scope. Let’s check some examples below;

let a = "Global scope";
let b = "JavaScript";

function globalScope() {
  let a = "Function scope";
  let b = "local scope";
  var c = 3;
  console.log(a); //Function Scope: this is a function scope, so it will print our value for **a** inside of our funciton
  console.log(b); //local scope: function scope also
  console.log(c); //3 function scope also
}

console.log(a); //Global scope: this is a global scope, accessible, everywhere in our program
console.log(b); //JavaScript: This is also accessible everywhere in our program
console.log(c); //Uncaught ReferenceError: c is not defined

console.log(c) will throw an error, because var is scope to function, but not scope to block ie we can't access our value of var declaration outside of our function.

Summary of the three variable declaration

Var: scoped to function but not scope to block
Let and const: scoped to both function and block scope.

LEXICAL SCOPE
Lexical scope refers to the fact that nested functions are bound to the scope of their parent function. This means that we can access a parent variable from the child variable i.e a variable declare in one function is visible to the nested functions within it.

function outer() {
  let sport = "football";
  function inner() {
    console.log(sport.toUpperCase());
  }
  inner();
}
outer();

//FOOTBALL

From the above example, we defined a parent function called outer and declare a variable, still inside the function we declared another function and console.log the value of the variable, making it upper case. It is possible because the inner function is lexically bound to the outer function, which means in a nested function, we can access the outer function from the inner function.
Let’s look at a different example;

function outer() {
  let sport = "football";
  function inner() {
    let sport = "tennis";
    console.log(sport.toUpperCase());
  }
  inner();
}
outer();
//TENNIS

Its output is TENNIS, how is that possible? Because when looking out at the inner function, It checks if there is a sport defined in the inner function, if YES? It prints it out and if NO, it looks out for the sport defined in the outer function. This is what we mean by lexically bound (nested functions are lexically bound to their outer function)

CONCLUSION
Scope is the idea that where you defined a variable, determine if other pieces of your code, may have or may not have access to that variable. We related it to the restroom in a government building.

Please feel free to follow me for more content, post your comment, and questions and also follow me on Twitter and Linkedln.

UNDERSTANDING HOISTING IN JAVASCRIPT

Joshua — Fri, 30 Dec 2022 00:11:20 +0000

It is not common for developers to call a function or console.log something before it is declared, but JavaScript Hoisting gives us the opportunity to do that, in JavaScript you can use or call a function or variable before its declared and that is called HOISTING

Console.log(myName)
var myName = “Joshua”

When you call a function or variable before it is declared, it is called Hoisting. This is a term in JavaScript where the JavaScript interpreter knows that the variable myName exists but does not know its value. So its outputs become undefined, which is it exists but has no value.
In JavaScript, when you declare a variable without initializing them, the variable is set to undefined
e.g

var x
x //undefined

Using this knowledge to analyze the example above, what is going on is that the JavaScript interpreter hoists the variable declaration to the top and assigned the value to its variable name i.e it separates the variable name and its assignment

e.g

Console.log(myName)
var myName = “Joshua”

after the separation, it becomes:

var myName; //undefined

Console.log(myName) //undefined

myName = “Joshua”

console.log(myName) // Joshua.

For a better understanding, let’s look at hoisting into variable and function hoisting

Variable Hoisting

In JavaScript we declare a variable using var, let or const
e.g

var sport = “Football”
let film = “who am I”
const pi = 3.14

Hoisting using var declaration

When the JavaScript interpreter hoists a variable declared with var it initialized the value to undefined, meaning it knows the variable exists but has no value yet, so it set it to undefined
e.g

console.log(sport) //undefined. i.e value not known, but the variable name exists because of var.
var sport = “football” //value assigned

As earlier said the JavaScript interpreter splits the variable declaration and the assignment. Let’s look at what the JavaScript interpreter does behind the scenes.😇

It moves the variable declaration to the top.

var sport //undefined

Console.log the variable sport i.e

console.log(sport) //undefined

Assigned the variable name to the value

sport = “football”

Finally, console.log the variable name “sport”

Console.log(sport)

Hoisting using let and const declaration

We’ve seen that variables declared with var are hoisted, what about let and const?

Console.log(sport)
let sport = “football”
 // Uncaught ReferenceError: Cannot access 'sport' before initialization

what about const?

console.log(sport)
const sport = “football”
// Uncaught ReferenceError: Cannot access 'sport' before initialization

This means that in JavaScript, let and const are not hoisted. This is a good thing because it prevents unwanted errors which may arise from hoisting because as a developer working on a project you will want to declare and assign a value before you use it.

Function Hoisting

Function declarations are hoisted in JavaScript, this allows us to call a function before it is defined
Example;

sport();
function sport(){
    console.log(“football”)
}

When it comes to function hoisting, only function declaration is hoisted. Function expression and arrow functions are not hoisted e.g

sport();
let sport = function(){
    console.log(“football”)
}
// Uncaught ReferenceError: Cannot access 'sport' before initialization

The same error also come up when you use const. But what happens when you use var for a function expression?

Sport()
var sport = function(){
    console.log(“football”)
}
// Uncaught TypeError: sport is not a function.

We get a different error.

Remember, let and const are not hoisted so even though we use them in a function expression we still get the Uncaught ReferenceError. But var declaration is hoisted, so if we console.log(sport) it is undefined; which means JavaScript knows the variable exists, but if we console.log(sport()), it shows not a function because the value which is a function expression is not hoisted in JavaScript and it is trying to console.log undefined, which it can’t do. So, the variable is hoisted, but the value is not.

CONCLUSION
Hoisting is something you might not need or you might now want to use because variable hoisting comes with a lot of issues underneath, so it's better to always declare and assigned your value to a variable when using var before you make use of it and declare your function before calling it.

You can connect with me on LinkedIn and Twitter.

Understanding the keyword “this” in JavaScript

Joshua — Tue, 06 Dec 2022 04:44:39 +0000

If you have ever coded on JavaScript, you must have encountered the keyword “this”. this is a point of confusion for most JavaScript developers.

It has no fixed rule, but that does not mean that it cannot be understood right? 😁😁

Now, let’s go straight to the point, shall we??

In this article, we shall dive into the keyword “this” in JavaScript simplifying it in a dummy way.

What is “this”
In the English language “this” means indicating something or someone nearby. this refers to the immediate environment (something nearby)
Example: When am in my house and I say “this book belongs to me” you can see that am referring to a book close by (my house) i.e either on the table or on the shelf - Something on my immediate environment. But if I go to the library and make the same statement “this book belongs to me” this also refers to something close by (the library, not my house)

From the above example, you can see that “this” depends on the invocation context.

The same rules apply in JavaScript.

In JavaScript “this" refers to a reference in an object and that object represents the current execution scope. By current execution scope; the value of “this” depends on the invocation in which you have used it. i.e it depends on where you write it.

Examples.

When used alone or inside a regular function (without an object) by default this refers to the window (i.e the global object)

Code

Output

What is the window? the window contains all sorts of different properties we use in JavaScript and when we defined a function. It is added as a property in the window object.

In a method **“this” refers to the object the method lives in.** i.e “this” references the objects. Before we go further, what is a method? Simply put, “when we add a function to an object, it is called a method”. There are built-in methods in JavaScript like "toUpperCase()", "toLowerCase()" etc. but the method am talking about here, are the method we create by ourselves by adding a function to an object.

Code

Output

From the code above and Output, we could see that “this” in a method refers to the object the method lives in i.e myInfo object. So when we called the method myInfo.fullName(), the fullName print out “Joshua Onwuemene”, which is a property inside the myInfo object.

So, here Is a little hack over it.

If there is something to the left i.e objectName.functionName(this is a method) and you are executing the function “this”, “this” will be set to what is on the left, which is the objectName. (myInfo.fullName(), here “this” was set to myInfo ) But if there is nothing to the left, this will be set to the global execution scope (i.e the window).

More example

Output

From the above code we console.log “this” in line 8, to see the output it will give us and we could see that it showed us the myInfo object. This was to prove that “this” is representing the object, and when we called myInfo.fullName() it gave us “Joshua Onwuemene”, look at our next method there; myInfo.myBio(). We could see that “this” is referencing the myInfo object. Check the output at myInfo.myBio() to see what we have.

const myName = this.fullName() means “this” is making reference to the fullName() function which is inside the myInfo object which means We have access to the data in my fullName() function which is “Joshua Onwuemene” in the myBio() function. and when we (console.log(${myName} is a ${whatIDo}, a technical-writer, a WordPress developer and a lover of a great books) we got the desired output which is "Joshua Onwuemene is a front-end developer, a technical-writer, a wordpress developer and a lover of great books".

When using Arrow function, “this” won’t work as a method on an object, because it does not refer to the object, it refers to the window.

Code

Output

When we console.log(this) in the college() arrow function, we see that it refers to the window. This is because arrow function does not have its own “this”, it references the window which is why we can’t access the data in myName.

In some situations, it is better to use. i.e is an advantage when dealing with nested functions and callbacks but not good in defining methods.

Code

Output

From the result, it is undefined right? Let’s console the value of “this” to see the output. When we console the value of “this” before the callback function it refers to the result object. Let’s console the value of “this” in the callback function

Output

From the output, the value of “this” refers to the global scope (window) but why? Because it is taking the callback function as a standalone function which refers to the window by default, not as a method. We resolve this by adding an arrow function. The arrow function will take the value of its parent “this”, which in our case is the “this” before the callback function.

Code

Output

By using an arrow function it has inherited the “this” of the parent container which is showResult(). By doing this we can then access nameOfStudent and assign the scores to Joshua.
Let’s console the value of “this” in the callback function to get a better understanding of what “this” is referencing to now.

Code

Output

From the output, we can see that it is referencing the object.

In conclusion, “this” is not set in stone. “this” references the object that is executing the current function. i.e it depends on its invocation context.

BUILDING CONFIDENCE AS AN INSPIRING DEVELOPER

Joshua — Sun, 20 Nov 2022 23:17:44 +0000

Confidence is exceptionally imperative and an unquestionable requirement for everybody living in today’s society. Your capacity to manage hardships, tackle issues, and approach people requires confidence.

Fortunately, confidence is a skill, such as driving a vehicle or playing tennis or basketball, that can be learned and developed with practice.

First, what is confidence?

Confidence can mean different things to people, but in this article, I will define confidence in 4 ways.

Confidence is hopeful about the future and the path you are on.
Confidence is knowing that you have control over that path.
Confidence is being calm with that information and the feeling of command over your current circumstances.
Confidence is the fact that knowing your insight, your capacity can endure any task that is at hand.

We have two types of confidence

The confidence in yourself i.e the energy you project out to the world. i.e your body language.
The confidence in performing a task.

We will focus on the second type of confidence; “The confidence in performing a task”

The question now is, how do we build this confidence?

Confidence comes from practice; As a newbie entering into software development; you might feel inferior and overwhelmed because the field Is too broad, and you might also begin to have low self-esteem when you hear senior developers’ numbers of years of experience; all these feelings are normal and it happens to everyone. But the interesting part is; you can be like Them. BUT HOW?

Niche down: software engineering is broad, so you have to niche down and focus on one at a time. we have different niches in the field e.g front-end engineering, back-end engineering, full stack development, DevOps engineering, security engineering e.t.c
Start from the basics: In secondary school, you can’t jump your regular 1,2,3…. Or indices to calculus. What does that tell you? You must start from stage 1; the same applies to software engineering. For the front-end learn your basic HTML, CSS, and JS before you move to any framework, for the back-end learn your vanilla (without framework) python or JS for DevOps your basic knowledge of scripting, cloud e.t.c. learning the fundamentals and being grounded in it gives you confidence for any new framework that is to come or an existing framework.
Practice every day; According to Woody Allen, he said:

Showing up is already half the battle.

Spend at least 30 mins coding every day. Make a habit of daily coding, this will help build your brain memory.

Make coding a consistent habit. The world has no use for a temperamental genius. It’s not about intelligence, it is about consistency and consistency builds up experience and competence.

The more you code, the more confidence you build, and the more confidence you build, the more successful you become at programming.

REGAINING CONFIDENCE AS A PROGRAMMER.

Joshua — Tue, 20 Sep 2022 19:45:20 +0000

Recently, I was working on a project that requires knowledge of HTML, CSS, AND JAVASCRIPT. It was an easy project from the beginning, but when I started coding it, it was not as easy as I plan out, especially in the Js part

I tried all I can to rectify the problem, but it was not as easy as I thought and after hours of trying and no good result, my confidence began to go down. So, I decided to relearn some concepts in Js even though I knew them before. After going through some videos on my laptop, I decided to go over it the next day and was able to solve it.

Am sure it must have happened to you as a programmer.

The question is, what do you do when it happens to you? How do I cope? You sleep, wake up and try again right, what about after that and no progress, what next??

The answer is PULL BACK AND REGROUP

Don’t try to maintain failure at a high-level, is going to hurt your confidence badly. Continuing at a level where you are failing is going to hurt you.

Let’s say you are working on a project and you could not move past level 7, after hours of trying to resolve level 7 and no progress you pullback and come to level 4 (where you are confident in, or any level you are confident in) and regroup from there, learn some concept again, then from their move on to level 5, 6 and suddenly you will surpass level 7 and move upward. It isn’t a weakness to pull back and regroup, especially when your confidence is involved. As you build again the confidence you will acquire will be much more grounded. The experience of your failure will guide you and help you avoid the pitfall. It will make you wiser. CONFIDENCE IS DIFFICULT TO GET, SO DON’T LOSE IT THOUGHTLESSLY.

Confidence - that information that you can pull off and follow through on something difficult, that information in most cases will be your only friend when everything else is gone and if you treat him right, make him, your best friend.