Forem: Stanlisberg

Frontend Test: How I Built a Multi-functional Calculator that Fetches API Data

Stanlisberg — Fri, 10 Nov 2023 07:40:33 +0000

As a junior front-end developer aiming for your first job, it's likely you'll have to do coding challenges as part of the hiring process. These tests help employers assess your skill level and choose the best candidates that are suited for the job. I've solved various challenges, like converting Figma designs into picture-perfect code replicas, working with APIs, writing algorithms, and building landing pages. These experiences have improved my skills and taught me better approaches to coding tests in general.

In this guide, I will walk you through how I built a simple calculator app that does basic arithmetics operations and also fetches data from an API with react and vanilla css for a coding challenge. Upon completion, you will have the skills to make similar apps with ease and enhance your API skills in coding tasks.

App Overview
This application performs basic arithmetic operations like addition, subtraction, multiplication, and division. It features a toggle button for switching between a serious and fun mode. In serious mode, it functions as a regular calculator, while in fun mode, it fetches and displays data from different APIs when specific codes are typed. These APIs include a movies API, a jokes API, and a memes API, which are triggered by inputting corresponding codes(753 for movies, 172 for jokes, and 112 for memes) into the calculator.

Let's proceed with the build-up process. Shall we?
Hold on! Since this is a react application, it is imperative to have some basic requirements like:

Understanding of react
A code editor
A web browser
Basic knowledge of working with API

Build-up Process
To set up a React boilerplate, open your VSCode terminal or command prompt and enter the following command:

npm create vite@latest

You'll be prompted to provide the app's name and choose additional dependencies. It's recommended to keep the setup simple since this is a small project.

Now, this app consists of two components: the SeriousPage and FunPage components. The SeriousPage hosts the main calculator for basic arithmetic operations, while the FunPage component handles and interprets data fetched from the API, all within a structure similar to that of the SeriousPage component.

Let's create the SeriousPage component.
SeriousPage

import React, { useState } from "react";

function SeriousPage() {
  const [answer, setAnswer] = useState("");

  const clickButton = (e) => {
    setAnswer(answer.concat(e.target.value));
  };

  const clearButton = () => {
    setAnswer("");
  };

  const backSpace = () => {
    setAnswer(answer.slice(0, -1));
  };

  const evaluate = () => {
    setAnswer(eval(answer).toString());
  };

  return (
    <>
      <div className="div-container">
        <input
          type="text"
          value={answer}
          onChange ={() => {}}
        />
        <div className="button">
          <button
            className="change-color"
            id="clear-button"
            onClick={clearButton}
          >
            Reset
          </button>
          <button className="change-color" id="back-space" onClick={backSpace}>
            Del
          </button>
          <button className="change-color" value="/" onClick={clickButton}>
            &divide;
          </button>
          <button value="7" onClick={clickButton}>
            7
          </button>
          <button value="8" onClick={clickButton}>
            8
          </button>
          <button value="9" onClick={clickButton}>
            9
          </button>
          <button className="change-color" value="*" onClick={clickButton}>
            &times;
          </button>
          <button value="4" onClick={clickButton}>
            4
          </button>
          <button value="5" onClick={clickButton}>
            5
          </button>
          <button value="6" onClick={clickButton}>
            6
          </button>
          <button className="change-color" value="-" onClick={clickButton}>
            -
          </button>
          <button value="1" onClick={clickButton}>
            1
          </button>
          <button value="2" onClick={clickButton}>
            2
          </button>
          <button value="3" onClick={clickButton}>
            3
          </button>
          <button className="change-color" value="+" onClick={clickButton}>
            +
          </button>
          <button value="0" onClick={clickButton}>
            0
          </button>
          <button value="." onClick={clickButton}>
            .
          </button>
          <button className="change-color" id="answer" onClick={evaluate}>
            =
          </button>
        </div>
      </div>
    </>
  );
}

export default SeriousPage;

From the provided code snippet, we have a state named answer and several associated functions, including clickButton, clearButton, backSpace, and evaluate. Here's an explanation of each:

answer: This state stores all button values and the final result of the calculator.
clickButton: This function is responsible for handling the logic when a button is clicked in the calculator interface and stores its value in the answer state.
clearButton: This function sets the state to an empty string; this is what happens when the Reset button is clicked.
backSpace: The function uses the array slice method to remove the last input value entered in the calculator; this is what happens when the Del button is clicked.
evaluate: This function processes the final input and performs the necessary arithmetic calculation to generate the result displayed on the calculator.

Before creating our FunPage component, it's necessary to set up a Context API to manage the states for the API data that will be used within the component.

CalculatorContext

import { createContext, useState } from "react";

const CalculatorContext = createContext();

export const CalculatorProvider = ({ children }) => {
  const [movieData, setMovieData] = useState();
  const [jokeData, setJokeData] = useState(); 
  const [memeData, setMemeData] = useState();
  const getRandom = Math.floor(Math.random() * 10);

  const fetchResponse = async (value) => {
    if (value === 753) {
      const options = {
        method: "GET",
        headers: {
          accept: "application/json",
          Authorization:
            "Bearer XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        },
      };
      //-------Fetch Movies-----------
      const response = await fetch(
        "https://api.themoviedb.org/3/discover/movie?page=${page}",
        options
      );
      const data = await response.json();
      const { results } = data;

      setMovieData(results[getRandom].original_title);

    } else if (value === 172) {
      //-------Fetch Jokes------------
      const response = await fetch(
        "https://v2.jokeapi.dev/joke/Programming?type=single&amount=10"
      );
      const data = await response.json();
      const { jokes } = data;

      setJokeData(jokes[getRandom].joke);

    } else if (value === 112) {
      //-------Fetch Memes------------
      const response = await fetch("https://api.imgflip.com/get_memes");
      const item = await response.json();
      const { data } = item;

      setMemeData(data.memes[getRandom].name);
    }
  };

  return (
    <CalculatorContext.Provider
      value={{
        fetchResponse,
        movieData,
        jokeData,
        memeData
      }}
    >
      {children}
    </CalculatorContext.Provider>
  );
};

export default CalculatorContext;

Within this context, we declared a function named fetchResponse, which takes an argument named value. This argument is utilized in our conditional statement to facilitate our API requests based on their corresponding codes:

753: Fetch movie data
172: Fetch jokes data
112: Fetch meme data

In order to manage and store the data fetched from the APIs, we will make use of the states; movieData, jokeData, and memeData. Since each API call returns 100 data, we created a variable getRandom to ensure that the fetched data is within a random integer range between 0 and 9 using the Math.random() method. This allows each API call to return a random data point between 0 and 9.

Note: For the movie API, you will require an API key to access the API. Kindle visit this link to register and obtain your API key

In the FunPage component, we will put the pieces together and leverage the Context API. This Context API allows us to seamlessly access the API data within the component and also enables us to manipulate and interpret the data effectively within the user interface (UI).

FunPage

import React, { useState, useEffect, useContext } from "react";
import CalculatorContext from "./CalculatorContext";

function FunPage() {
  const [answer, setAnswer] = useState("");
  const { displayResponse, movieData, jokeData, memeData } = useContext(CalculatorContext);

  useEffect(() => {
    displayResponse(753);
    displayResponse(172);
    displayResponse(112);
  }, []);

  const clickButton = (e) => {
    setAnswer(answer.concat(e.target.value));
  };

  const backSpace = () => {
    setAnswer(answer?.slice(0, -1));
  };

  const evaluate = () => {
    if (answer?.includes("753")) {
      setAnswer(movieData);
    } else if (answer?.includes("172")) {
      setAnswer(jokeData);
    } else if (answer?.includes("112")) {
      setAnswer(memeData);
    }
  };

  return (
    <>
      <div className="div-container">
        <input type="text" value={answer} onChange={() => {}} />
        <div className="button">
          <button
            className="change-color"
            id="clear-button"
            onClick={() => {
              setAnswer("");
              displayResponse(753);
              displayResponse(172);
              displayResponse(112);
            }}
          >
            Reset
          </button>
          <button className="change-color" id="back-space" onClick={backSpace}>
            Del
          </button>
          <button
            className="change-color"
            value="/"
            disabled={true}
            onClick={clickButton}
          >
            &divide;
          </button>
          <button value="7" onClick={clickButton}>
            7
          </button>
          <button value="8" onClick={clickButton}>
            8
          </button>
          <button value="9" onClick={clickButton}>
            9
          </button>
          <button
            className="change-color"
            value="*"
            onClick={clickButton}
            disabled={true}
          >
            &times;
          </button>
          <button value="4" onClick={clickButton}>
            4
          </button>
          <button value="5" onClick={clickButton}>
            5
          </button>
          <button value="6" onClick={clickButton}>
            6
          </button>
          <button
            disabled={true}
            className="change-color"
            value="-"
            onClick={clickButton}
          >
            -
          </button>
          <button value="1" onClick={clickButton}>
            1
          </button>
          <button value="2" onClick={clickButton}>
            2
          </button>
          <button value="3" onClick={clickButton}>
            3
          </button>
          <button
            disabled={true}
            className="change-color"
            value="+"
            onClick={clickButton}
          >
            +
          </button>
          <button value="0" onClick={clickButton}>
            0
          </button>
          <button value="." onClick={clickButton}>
            .
          </button>
          <button className="change-color" id="answer" onClick={evaluate}>
            Send
          </button>
        </div>
      </div>
    </>
  );
}

export default FunPage;

If you noticed from the code above, the component is set up with an almost similar structure to that of the SeriousPage component because we are basically switching from one component to the other while maintaining the same user interface. This component features:

The useContext hook that allows us to access all the states and functions managed within the Context API.
The evaluate Function that comprises code blocks that store the API data in our answer state when certain conditions are satisfied.
The useEffect hook that wraps all function calls while utilizing an empty dependency array [] to ensure it runs once and manages any side effects. It's important to note that we passed three parameters, 753, 172, and 112, to the dailyResponse function call, representing the value argument used as a condition in the dailyResponse function declaration within our Context API.

As you can observe, our application is gradually coming together. Let's render the components inside our app component and visualize the final output in the user interface.

App Component

import { useState } from "react";
import SeriousPage from "./components/SeriousPage";
import FunPage from "./components/FunPage";
import { CalculatorProvider } from "./components/CalculatorContext";
import { Switch } from "antd";

function App() {
  const [switchState, setSwitchState] = useState("Serious");
  const [changeComponent, setChangeComponent] = useState(true);

  //---- For switch-----
  const onChange = (checked) => {
  console.log(`switch to ${checked}`);

    // ---Disable button when switched to fun
    if (checked === true) {
      setSwitchState("Fun");
      setChangeComponent(false);
    } else if (checked == false) {
      setSwitchState("Serious");
      setChangeComponent(true);
    }
  };
  return (
    <>
      <div className="app">
        <div className="switch">
          <p className="cac-name">My Calc</p>
          <Switch
            size="default"
            onChange={onChange}
            className="switch-button"
          />
        </div>
        <div className="switch-state">{switchState}</div>
        <CalculatorProvider>
          {changeComponent === false ? <FunPage /> : <SeriousPage />}
        </CalculatorProvider>
      </div>
    </>
  );
}

export default App;

A visual representation of the app component.

In this component, we performed the following task:

Imported the following components and packages: CalculatorProvider, SeriousPage component, FunPage component, and a toggle package from Ant Design.
Declared a function named onChange and two states named switchState and changeComponent

Within the onChange function, we implemented a conditional statement to display the "Serious" or "Fun" word at the top right of the calculator based on the toggle's status. Additionally, we wrapped our components within the CalculatorProvider, ensuring that the provided context values are accessible to the components in the component tree.

Furthermore, inside the CalculatorProvider, we declared a ternary operator to conditionally render each component(FunPage or SeriousPage), depending on whether the changeComponent state is true or false.

Note: For the third-party Ant Design toggle package, you can use the following command to install it:
npm install ant-d

For the styling
CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  background: whitesmoke;
  color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "poppins", sans-serif;
  font-size: 18px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.div-container {
  margin-top: 10px;
}

.switch {
  display: flex;
  justify-content: space-between;
  text-align: end;
  margin-top: 70px;
}

.container {
  top: 50%;
  left: 50%;
  border-radius: 6px;
  position: absolute;
  margin: 0 auto;
  width: 256px;
  text-align: center;
  border: 10px solid #101116;
  background: #101116;
  transform: translate(-50%, -50%);
}

.button {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-auto-rows: minmax(60px, auto); */
}

button {
  height: 50px;
}
input[type="text"] {
  height: 150px;
  width: 350px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  background-color: #101116;
  border: 1px solid grey;
  border-radius: 5px;
  color: #fff;
  text-align: right;
  margin: 5px auto;
  padding: 0 20px 0 20px;
}

.switch-state,
.cac-name {
  text-align: end;
  font-weight: bold;
}

#clear-button {
  grid-column: 1/3;
  grid-row: 1;
  color: #262834;
}

#answer {
  grid-column: 3/5;
  grid-row: 5;
  color: #262834;
}

#back-space {
  color: #262834;
}

button {
  margin: 7px;
  border: none;
  border-radius: 5px;
  background: #262834;
  cursor: pointer;
  color: #ffff;
}

button:focus,
button:active,
input:focus,
input:active {
  outline: none;
}

.change-color {
  background-color: #afaba5;
}

Now, it's time to see the final result of our creation.
Final Result

The demo snippet provides an overview of all functionalities of our application after completion. In the demonstration, when the toggle is switched to the funPage, it handles arithmetic operations, while the seriousPage retrieves data from the API and showcases it on the calculator's screen.

Conclusion
Building this application has demonstrated the seamless integration of basic arithmetic functionalities of a calculator and API data fetching, enhancing the user experience and introducing an aura of fun. By implementing the toggle feature, users can swiftly switch between serious and fun modes, allowing efficient and easy engagement.

The implementation of various APIs, such as the movies, jokes, and memes APIs, has not only enhanced the application's structure but has also showcased the versatility of modern web development. Following the comprehensive steps outlined in this guide, developers can easily build similar applications that combine functionality with fun hence, acing technical tasks and catering to specific needs.

Check out the live version: calculator-test-sooty.vercel.app
The source code: Link

If you find this article interesting, please consider liking and sharing it. Additionally, I welcome your thoughts and feedback in the comment section below. Thank you for your engagement!

Open to work🙂
Did you enjoy this article or need an experienced Technical Writer / React Developer for a remote, full-time, or contract-based role? Feel free to contact me.
Github || Linkedin || Twitter

Key Linux Commands for Disk Space Analysis

Stanlisberg — Thu, 26 Oct 2023 08:57:21 +0000

Disk storage is an integral component of the Linux operating system. Knowing the status of your Linux disk space is essential for monitoring its performance, analyzing disk usage management, and ensuring productivity.
In this article, we'll explore some commands that are used to check available disk space on Linux. These commands provide a range of options, also known as flags to enhance the operation of the command. We'll cover three commonly used commands: df, du, and ls.

2. The df Command
The df command, also known as disk free, provides a comprehensive outline of disk space information on the Linux system.

$ df                                                                                
Filesystem  1k-blocks      used   available use%    Mounted on                              
udev          3865423         0     3562764   0%    /dev                                    
tmpfs          758372      2054      798435   1%    /run                                    
/dev/sda2/  276387653  43499328   165690087  23%    /                                       
tmpfs         3954382     57353     3728663   2%    /dev/shm

This is a detailed overview of the disk space usage information showing the filesystem, available space in kilobytes, disk usage, available free space, usage in percentage, and mount point path. The command is mainly used to track the storage space in the system.

2.1. df -h
The -h flag, when used with the df command basically displays the information in human-readable format, presenting sizes in megabytes and gigabytes which is easier to read. Compared to the df command as a stand-alone, the information is displayed in kilobytes, which is a bit difficult to understand.

$ df -h                                         
filesystem    size    Used   Avail     Use%    Mounted on       
udev          3.8G       0    3.8G       0%    /dev             
tmpfs         774M    2.1M    772M       1%    /run             
/dev/sda2     219G     47G    162G      23%    /                
tmpfs         3.8G     55M    3.8G       2%    /dev/shm

Here, the data are now displayed in megabytes and gigabytes, hence making it easier for users to comprehend.

2.2. df -t
The -t flag displays the disk space information for all mounted filesystems when used with the df command. It also introduces a new column that showcases the filesystem types and their disk usage.

$ df -t                                                                           
Filesystem   Type 1k-blocks     Used  Available Use%  Mounted on      
udev     devtmpfs   3986539        0   34552676   0%  /dev            
tmpfs       tmpfs    806773     3588  677442662   1%  /run            
/dev/sda2    ext4 248756852 55226653   66354422  26%  /               
tmpfs       tmpfs  40943674        4  273732441  14%  /dev/shm

The datasets above are a representation of filesystem information. A new column is integrated into the data that lists all the file types for the filesystem.

3. The du Command
The du command also referred to as disk usage displays the amount of disk space used by a specific directory and its subdirectories. These sizes are displayed in blocks(bytes), which is not user-friendly.

$ du                                                             
7       ./.config/gtk-3.0                                              
24     ./.config/xfce4/desktop                                        
8       ./.config/xfce4/panel/launcher-7                               
9       ./.config/xfce4/panel/launcher-6                               
73     ./.config/xfce4/xfconf/xfce-perchannel-xml

The dataset is an overview of the disk space consumption of files and directories.

3.1. du -sh
The du -sh command provides the total disk usage size for a specified directory. The -s flag will display the data in a block-size format, while the inclusion of the -h flag converts the data into a human-readable format.

$ du -sh /home                                    
37612M    home                                      
37612M    total

From the output above, the total disk usage of the home directory is 37612MB.

3.2. du -a
The du -a command is used to print the disk usage for files including the directories and sub-directories. It allows us to check for the most sizeable files within a designated path and also remove unused files to free up significant space on the server.

$ du -a                                                                            
2  ./abc1                                                                                   
4  ./.config/gtk-3.0                                                                    
4  ./.config/xfce4/desktop/icons.screen0-813x823.rc                                    
4  ./.config/xfce4/desktop/icons.screen0-1904x910.rc                                   
4  ./.config/xfce4/desktop/icons.screen0-1904x1033.rc

This output lists the disk usage for all files including the directories.

4. The ls Command
The ls command simply lists all the files of a working directory. it's also a practical way to determine the terminal's current directory.

$ ls                                                                                 
camera         pc        downloads git                      insta         
picture        desktop   workspace g0l.13.3.linux-amd64.gz  local         
vs-code        dev       emacs.d   index.php                .m2           
Bash-history   documents en-GB     info-page-conte          host

Here, the datasets show the files in the current working directory.

4.1. ls -a
The -a flag when used with the ls command displays a comprehensive list of both hidden files and directories within the current directory. This flag is mostly used with the ls command when trying to access files that are hidden from view.

$ ls -a                                                                            
.       .brave   downloads gol.13.3.linux-amd64.gz    music           
..      .bse     .eclipse  .gphoto                    .mysql_comp  
camera  .bsedata .eclipse  .gradle                    .node-gyp       
picture .bundle  workspace index.php                  .npm            
vs.code .cache   emacs.d   info-page-content          .nvm

The output shows all hidden files and directories within the directory. The hidden files are those files that begin with the dot “.” format.

4.2. ls -lh
Using the -lh flag with the ls command accurately displays the entire information about the file or directory name in human-readable format.

$ ls -lh                                                                                                                
drwxrwxr-x  4 ubuntu ubuntu  4.0k  sep  6   12:17   phone_images      
drwxrwxr-x  2 ubuntu ubuntu  16k   jan  9   10:22   assessment        
drwxrwxr-x  1 ubuntu ubuntu  3.0k  jan  2   02:55   bin               
drwxrwxr-x  6 ubuntu ubuntu  4.3k  may  7   08:32   bse

As you can see from the output, it shows the entire information of directory names. Additionally, the sizes of files are displayed in kilobytes hence, making it easier for users to read.

5. Summary
In this article, we looked at several commands that give insights into effective disk space management. The df, du, and ls commands are the most commonly used within the Linux environment to analyze disk storage information such as checking for available disk space and monitoring the disk usage of a directory. With these commands, users can easily examine their system disk usage and optimize storage efficiency.

However, it's important to monitor disk space usage often. Doing so prevents common performance issues, enhances smooth operation, and efficient storage management.

If you find this article interesting, like, share, and comment your thoughts in the comment section below.

Resolving the Vercel 404 "Page Not Found" Error After Page Refresh.

Stanlisberg — Mon, 18 Sep 2023 06:55:30 +0000

I recently completed a project(cinemaxtv.vercel.app), which is a movie application. After deploying the application on Vercel, I noticed an unusual issue. Whenever I navigate to a different page and refresh that specific route, I encounter a 404 Not Found Error, indicating that the specified route cannot be found. However, I achieve the desired result when I perform the same action on my local host. Consequently, I deduced that the error is likely due to a deployment glitch on Vercel.

A pictorial display of the 404 not found error above

After conducting some research, I discovered a solution for resolving this issue. To rectify the 404 Not Found Error, it is necessary to establish redirect and rewrite rules for your React Router application. These rules will assist your application in circumventing the "Page Not Found" error.

To begin, generate a vercel.json file in the root directory of your project. This file will enable Vercel to configure the routing accurately, and you should insert the following code snippet in the image below.

This image represents the structure of the vercel.json file and the code snippet.



{
    "rewrites": [
        {"source": "/(.*)", "destination": "/"}
    ]
}

The provided code snippet instructs Vercel to rewrite any incoming URL path to the root path. This configuration ensures that when we initiate a redirect with a child path, Vercel will redirect it to the root path, effectively preventing the occurrence of the 404 Not Found Error.

If your project has already been deployed, push the changes to your GitHub repository and refresh the page, you will obtain your desired result seamlessly, without encountering any issues.

voila! It now works.

Conclusion
If you find this article interesting, please consider liking and sharing it. Additionally, I welcome your thoughts and feedback in the comment section below. Thank you for your engagement.

Open to work🙂
Did you enjoy this article or need an experienced Technical Writer / React Developer for a remote, full-time, or contract-based role? Feel free to contact me.
Github || Linkedin || Twitter

7 Common Errors And Possible Fix Every Typescript Developers Should Know.

Stanlisberg — Wed, 17 May 2023 07:47:34 +0000

Table of content

Introduction
What is typescript
Type Error
Syntax Error
Configuration Error
Null Error
Missing Property Error
Type Assertion Error
Naming Convention Error

Introduction

A few months back, I completed a project and I had to utilize Typescript because it's one of the project requirements, and I must admit, TypeScript proved to be one of the most frustrating tools that I have encountered in my programming journey. “Are all these errors necessary?” This is a question I often ask myself each time I see that infamous red line highlighting my codes with error.

Coming from a JavaScript background, a dynamically typed programming language that affords us the liberty to declare variables and assign them any data type, I would say it was more of a herculean task working with typescript. I depended on many online resources like Google search, blog posts, StackOverflow, and thorough examination of the official documentation to scale through this hurdle which sometimes aggravates my confusion as everything seems overwhelming. Yes, TypeScript can be that daunting. I wouldn't say I am a typescript expert now, but I have actually improved significantly in my typescript knowledge since my previous engagement on that project.

In this article, I have curated a collection of some common errors I encountered during my early explorations of TypeScript and their corresponding solutions aiming to assist those who encounter similar challenges in their own code. Before we delve further, let's familiarize ourselves with the fundamentals of TypeScript. Shall we?

What is Typescript?

TypeScript is an open-source high-level programming language developed by Microsoft that adds strict typing with optional type annotation to JavaScript. It is a superset of JavaScript that transforms its code into raw JavaScript code, making it run smoothly in any JavaScript runtime environment.

Below are a few of the errors I encountered. They are:

Type Error

The Type error occurs when there is a variable type mismatch leading to some type-related inconsistencies in your code.

Error Code

let firstName: string = "Felix";
firstName = true; // Type error: Type 'boolean' is not assignable to type ‘string’

In the code above, we declared a variable firstName with the type of string but got an error when we tried to assign the boolean value true to firstName.

Fixed Code

let firstName: string = "Felix";
firstName = 'Joshua';   // No error detected

Analyzing the code snippet above, we have assigned a valid string value of Joshua to firstName which has satisfied the expected type, thus leading to a type-safe code and resolved error.

Note: It is essential to carefully review our codes for possible misinterpretation of assigned value to a wrong type declaration to prevent type-related errors and help enhance code quality.

Syntax Error

The Syntax Error is identified when the TypeScript compiler responsible for compiling codes detects a syntactically invalid representation of the code while interpreting it.

Error Code

const userName = (name: string) => {
  console.log (`Hey! ${name}`)
}
userName("Frank); // Syntax Error: Unterminated string literal

We declared an arrow function that accepts a parameter of name with type of string and at the bottom we called the function and passed an argument of a string Frank but forgot to add the second double quote, hence prompting the error.

Fixed Code

const userName = (name: string) => {
  console.log (`Hey! ${name}`)
}
userName("Frank"); // No error detected

From the fixed code above, we have included the closing double quotes and gotten rid of the error message.

Note: We should develop a practice to consistently review our codes for potential syntax mistakes like wrong placement of semicolons, quotes, parenthesis, or other punctuation marks to avoid syntactically invalid code and help reduce compile errors.

Configuration Error

The Configuration Error arises when there are inconsistencies in the way our typescript config file has been set up to meet the requirements of our typescript project. This error affects the behavior of the compiler and can cause problems during compilation.

While there are several types of configuration errors, we will concentrate on a single one,

Error Code

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,


      /* bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true, //Error: 'resolveJsonModule' cannot be specified without 'node' module resolution strategy.
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",


    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

From the code snippet above, we got an error indicating that: resolveJsonmodule cannot be specified without the node module resolution strategy."
Given that TypeScript does not provide inherent support for resolving JSON files, the resolveJsonModule is a compile option that allows us to import JSON files as modules in our typescript project. We can't set up our resolveJsonModule without setting our moduleResolution to node, which in this case is set to bundler in our config file.

Fixed Code

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,


      /* bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",


    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

From the fixed code above, we have set resolveJsonModule to true. We have instructed Typescript to resolve JSON files as modules during the compilation process.

Note: Although the resolveJsonModule option is optional due to the requirement of our project, enabling it in our TypeScript config file provides a more suitable approach for the integration of JSON data in our project to improve development productivity, type safety, and code organization.

Null Error

The Null Error happens whenever you try to access the properties of a variable that is declared with a value of null. Recall, null is one of the primitive data types that signifies the intentional absence of any object value. It is used to indicate that a variable or expression currently has no value.

Error Code

Import {React, useState, useEffect} from ‘react;

function userDetails () {

   Interface User {
     name: string;
     age: number;
   }
   userInfo = { name: 'Philip', age: 22 }

   const [user, setUser] = useState<User | null>(null);

   const getUser = () => {

     setTimeout((() => {
       const fetchUser = userInfo;
       setUser(fetchUser);
     }, 1000);
   }

    useEffect(() => {
     getUser();
    }, []);


  return (
      <>
       <div>
        <p>Name: {user.name}</p>
        <p>Age: {user.age}</p>
       </div>
      </>
  )

}

// Cannot  read properties of null (reading 'name') at userDetails

We created a userDetails component that fetches user data asynchronously and displays its content. The user state is set to null because we don’t have any data initially. After fetching the data, we updated the state but we got an error when we tried to render the data in our UI. What could be the issue? Well, the error is a result of our compiler informing us that the data fetched might not be present in our state because it was initialized as null. So in this case, we have to run a nullcheck to ascertain if the data is present in our state or not.

Fixed Code

return (
  <>
    { user ? (
       <div>
        <p>Name: {user?.name}</p>
        <p>Age: {user?.age}</p>  // No error detected
      </div>
      ) :  ""
    }
  </>
)

We have rectified this error by running a null check using the conditional operator ( ? ). The code expression in our JSX syntax signifies that; If a userexists, then access the data but if the user is null, display an empty string(' '). By employing this approach, we ensure that accessing properties from a nullvalue and the occurrence of null error is effectively prevented.

Note: Null checks are very crucial in development, they give us control over our application by preventing unwanted null reference errors and providing code readability.

Missing Property Error

The Missing Property Error in TypeScript happens when we try to assign a variable to an object or pass it as an argument to a function but the object or function doesn't contain all the properties that are present in that variable.
We will check for errors in both objects and functions.

Error Code in Object

type  CarInfer {
  model: string;
  color: string;
  width: number;
 }

const car: CarInfer = { 
 model: 'Bmw'
 color: 'Black'          
}

// Property 'width' is missing in type '{ model: 'BMW'; color: 'Black' }' but required in type 'CarInfer'.

The error indicates that a property width is included in our CarInfer type, but missing in our car object scope.

Fixed Code in Object

type  CarInfer= {
  model : string;
  color: string;
  width: number;
 }

const car: CarInfer= { 
  model: 'BMW'
  color: 'Black'       
  width: 205    
}

By incorporating the width property in our car object and assigning it a value of 205 as demonstrated in the preceding code, we have successfully resolved the property error within the car object.

Note: When making references to an object, always make sure to include all properties defined in your type object to avoid errors that lead to missing properties in your code base.

Error code in function

function club ( person: {name: string; position: string} ) {

   console.log(`Welcome back, ${person.name}`)
}

const user = {name: 'Francis'};
club(user);

// Property 'position' is missing in type '{ name: string; }' but required in type '{ name: string; position: number; }'

The error code indicates that the position property is present in the function parameter(inside the person object) but missing in the club argument which takes in a user object of only the name property.

Fixed code in Function

function club ( person: {name: string; position: string} ) {

   console.log(`Welcome back, ${person.name}`)
}

const user = {name: 'Francis' position: 'Striker'};
club(user);

Here, we have included the position property in the userobject. Now, the user has been passed as an argument in the club function and we don't get any error.

Note: We should always review our function call to check for possible misplacement of arguments or in this case, whether it tallies with the properties of our parameter.

Type Assertion error

In TypeScript, a Type Assertion error is detected when we assign a type to a value that is not compatible with the actual type of that value. Due to the TypeScript built-in type inference feature, it is expected that the compiler automatically detects the type of a variable from the assigned value.

Error Code

interface UserInter {
 name: string;
 age: number;
};

Const userInfo = {
  name : ‘mark’,
  age: ‘25’
};

Const user: UserInter = userInfo as userInter; // type 'string' is not comparable to type 'number'
console.log(user.age);

If you observed closely from the code snippet above, we created an interface UserInter that specifies the shape of an object with a name property of type string and an age property of type number. We also declared a userInfo object with a name property of type string and an age property of type string. When we tried to reference the userInfo object to the UserInter object using typescript’s type assertion(as userInter), we got an error because the age property of userInfo is a string while that of the UserInter is a number.

Fixed Code

interface UserInter {
 name: string;
 age: number;
};

Const userInfo = {
  name : 'Mark',
  age: 25
};

Const user: UserInter = userInfo as userInter; 
console.log(user.age);

Here, we have changed the age property of the userInfo object to a number type and we can now reference it to the UserInter object since both of them possess the same shape and properties.

Note: In order to avoid assertion errors like this, it is a good practice to refrain from overusing type assertion in your codes and depend on typescript’s type checking and its type inference feature.

Naming Convention Error

The Naming Convention Error is triggered when there is non-compliance with the suggested conventions of the typescript’s recommended practices that have been put in place for naming variables, functions, and other identifiers in Typescript.

Error Code

interface House {
 name: string;
 color: string;
}

Const peterAvenue = {
 Name: ‘bungalow’,
 Color: ‘brown’
}

Const getHouse = (house: House) => {
  console.log( `Name: ${house.name), Color: ${house.color}`);
}

getHouse(peterAvenue); // Type '{ Name: string; Color: string; }' is missing the following properties from type 'House': name, color.

From the code snippet above, we encountered a contrast where the interface House is defined with lowercase properties while variable peterAvenue is declared with uppercase properties. To correct this, we must ensure both properties match their right cases.

Fixed Code

interface House {
 name: string;
 color: string;
}

const peterAvenue = {
Name: 'bungalow',
Color: 'brown'
}

Const getHouse = (house: House) => {
  console.log( `Name: ${house.name), Species: ${house.color}`);
}

getHouse(peterAvenue);  // No Error

Looking at the code above, the error has been resolved by following Typescript’s convention of making both peterAvenue and House properties lowercase.

Note: Naming errors are one of the prevalent errors in typescript, we should adhere to consistent naming conventions in our codes so that we can reduce the likelihood of naming errors and increase the efficiency of our application.

Conclusion

Pheeeew! it's a wrap, guys. When developers understand the concept of these errors and implement methods to address them efficiently, they tend to improve code quality, maintainability, and overall development efficiency of their typescript applications.

It is also noteworthy to understand that developers can unleash maximum capabilities and attain favorable results in their projects by taking proactive measures to steer clear of these pitfalls and utilizing typescript’s best practices.

if you find this article interesting; like, share, and comment your thoughts on the comment section below. Gracias Amigo!

CSS Position Property Simplified.

Stanlisberg — Tue, 02 May 2023 18:13:34 +0000

Positioning in CSS can be very tricky. I remember when I first started learning CSS, this particular concept of CSS was so daunting that I was confused for a whole week. Thankfully, due to some research and constant practice, I scaled through that hurdle.

In this article, we will learn about the CSS position property and the different position types. We will also be reviewing how we can position elements to create an engaging webpage.

Prerequisites

Basic understanding of HTML.
Basic understanding of CSS.
Code editor.

What is CSS Position Property?
CSS Position Property is a concept in CSS that specifies how an element is positioned in an HTML document. This Property is used with the top, right, bottom, and left CSS properties to determine how an element is displayed in a web page.

The Position Property works with five values. They are:

Static
Relative
Absolute
Fixed
Sticky

Let's discuss about them briefly, shall we?

Static

Position: static is the default positioning of all HTML documents in the webpage. Essentially, what position: static does is that, it follows the other element accordingly in the document flow. That is, the first element will be above the second element, the second will be above the third and so on.

Let's use an example to further buttress our point.

Note : We will be using this HTML code snippet below for the entire article to demonstrate how these position values work.


 <html>
   <body>
       <section class="parent">
          <div class="first-child">
              I'm the first child element.
          </div>

          <div class="second-child">
              Second Child(Main Element)
          </div>

          <div class="third-child">
              I'm the third child
          </div>
       </section>
   </body>
 </html>

Our basic HTML structure with a parent element and three child elements.

For the CSS.

.parent {
    color: black;
    border: 1px solid black;
    padding: 10px 0;
    margin-top: 5rem;
}

.second-child {
    background-color:  #FF5C35;
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
  }

The Output

If you noticed, in our CSS code we haven't apply a position property to any of the elements but check the blue arrow in our output and you can tell that all the elements are static at default. This is possible because the position: static maintains a default document flow of elements.

Now, let's apply a position property and see what happens.

.parent {
    color: black;
    border: 1px solid black;
    padding: 10px 0;
    margin-top: 5rem;
}

.second-child {
    background-color:  #FF5C35;
    position: static;
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
  }

The Output.

Nothing changed. It didn't change because that is the default behavior for position: static elements.

Relative

Position: relative acts exactly like the position: static but it allows you to do four specific things that position: static doesn't do. That is, you can offset the position of the element relative to itself by using the top, right, bottom, and left properties.

Let's apply position: relative and offset values to our second child element.

.parent {
    color: black;
    border: 1px solid black;
    padding: 10px 0;
    margin-top: 5rem;
}

.second-child {
    background-color:  #FF5C35;
    position: relative;
    top: 40px;
    left: 40px;

}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
  }

Here, we have applied our position: relative and added an offset value of 40px for both top and left property.

The Output.

From the image above, you can see that the element still maintains that default document flow but the position has be altered because we have offset it by 40 pixels down (with the top property) and 40 pixels to the right (using the left property).

Fun Tip : You can try out the bottom and right properties respectively and see the outcome.

Absolute

Position: relative completely removes the element from the document flow and everything else renders as if the absolute element doesn't exist at all. It's essentially useful when you want to stick an element in a specific position and you don't want any other thing to move around it.

One thing you should know about position: absolute elements is that, they are absolutely positioned to a parent element they can make reference to.

Let's try out an example.

.parent {
    color: black;
    border: 1px solid black;
    padding: 10px 0;
    margin-top: 5rem;
}

.second-child {
    background-color:  #FF5C35;
    position: absolute;
    width: 210px;
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
}

The Output.

Here the element is removed from the document flow and it sits on top of the third child.

Lets apply a position property to our parent element and see how they both work together.

.parent {
    padding: 30px 0;
    position: relative;
}

.second-child {
    position: absolute;
    top: 10px;
    left: 30px;
}

The Output.

We applied position: relative to our parent element and offset the second child position with a top of 10 pixels and left of 30 pixels. From the image above, you would notice that the second child is absolutely positioned relatively to its parent element.

Note : The parent element can be assigned with a position of either relative, fixed, absolute or relative but not static.

Fixed

Elements that are position: fixed stays in a particular position in your webpage as you scroll, they are not affected by scrolling. They are also removed from the default document flow and are positioned relatively to the viewpoint of the HTML document unlike the position: absolute that are positioned in reference to their parent element.

Check the code below.

.parent {
    color: black;
    border: 1px solid black;
    padding: 30px 0;
    margin-top: 5rem;
    position: relative;
    height: 100vh;
    max-width: 500px;
    margin: 50px auto 50px auto;
    background-color: cornflowerblue;
}

.second-child {
    background-color:  #FF5C35;
    position: fixed;
    bottom: 20px;
    left: 30px; 
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
}

Here we have extended the height of our parent element and position it in the center of the page with a background color to aid a more appealing visual representation.

The Output.

From the screen record above, we can see that the position: fixed element still maintains its initial position regardless of the scrolling and it is positioned outside the parent container but relative to the viewpoint.

The viewport is the area of a web page that's visible to the user.

Sticky

The position: sticky is a combination of both position: relative and position: fixed. Elements that have a sticky position are relatively positioned at default until a certain viewpoint is attained, then they behave like the fixed position.

You will understand it better from our code and output below.

.parent {
    color: black;
    padding: 80px 0;
    margin-top: 5rem;
    position: relative;
    height: 200vh;
    max-width: 500px;
    margin: 50px auto 50px auto;
    background-color: cornflowerblue;
}

.second-child {
    background-color:  #FF5C35;
    position: sticky;
    top: 10px;
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
}

The Output

From the screen record above, you can see how the second child was positioned relatively at default until we started scrolling and when the element gets to the top of the view point, it was fixed at a particular position ten pixels away from the top viewpoint.

Conclusion

And it's a wrap guys! We have covered quite a lot on the CSS position property. I hope I have been able to dissect this CSS concept in a comprehensive manner for you to build great webpages with this cool feature. Remember, for you to be good and confident at CSS, you need to practice constantly and build projects. Goodluck!

React Router: A Beginners guide to useParams hook.

Stanlisberg — Thu, 20 Apr 2023 20:53:32 +0000

In this guide, we will be unravelling the complexity in one of React Router's hook called: useParams. We will learn about its implementation and functionality. Ride along with me.

Prerequisite
You should have the following to follow along with this guide:

A very basic knowledge of react.
A code editor.
A browser.

You might be wondering; why is it necessary to use useParams? I will gladly explain the reason to you. When it involves Routing, there are some Routes that have dynamic parameters attached to their path string and the useParams hooks provides an avenue for us to access those dynamic parameters in the Route.

What is useParams?

useParams is a hook that allows you to have access to dynamic parameters in the URL(Uniform Resource Locator).

Setting up React Router
Using npm
npm install react-router-dom

Because useParams hook is based off React Router, we need to import BrowserRouter, Routes and Route from react-router-dom.

From the image above, we have set up React Router.

We are going to demonstrate the implementation of useParams with a mini project. In this project, we will be working with two (2) components namely: CardComponent and CardInfo.
Firstly, we will structure our App component by declaring an array of objects that holds our card data and also configure our Routes.

App Component

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import CardComponent from "./components/CardComponent";

function App() {
  const cardData = [
    {
      name: "HTML",
      title: "Markup Language",
      description:
        "HTML is a markup language that describe the structure of web pages"
    },
    {
      name: "CSS",
      title: "Styling Language",
      description:
        "CSS is a Style sheet language which is used to describe the look and formatting of a document written in markup language."
    },
    {
      name: "JAVASCRIPT",
      title: "Programming Language",
      Description:
        "Javascript is a programming language that adds interactivity to web pages"
    },
    {
      name: "REACT",
      title: "Javascript Library",
      description:
        "React is a JavaScript-based UI development library for building user interfaces based on components."
    }
  ];

  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element= <CardComponent data= {cardData} /> />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

From the code snippet above, we declared an array of objects that hold some datas, passed it as a prop to CardComponent and also configured our Routes by specifying a path to our CardComponent.

<Route path="/" element=<CardComponent data={cardData} />

The path="/" is targeted to display CardComponent's content on the index(home) page.

CardComponent

import { Link } from "react-router-dom";

function CardComponent({ data }) {
  return (
    <>
      <section className="wrapper">
        <div className="container">
          {data.map((item, index) => (
            <div className="card" key={index}>
              <h3>{item.name}</h3>
              <p>{item.title}</p>
              <Link to={`/info/${item.name}/`}>View Discription</Link>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}
export default CardComponent;

From the code snippet above, we imported Link from react-router-dom. Link is an element that lets the user navigate to another page by clicking on it.
Recall that we passed our cardData as a prop in the App component child's component which in this case is CardComponent. Now we are Destructuring that data to have access to it and mapping its content in a div element with a class of card.

See the output below.

Implementing useParams (i)
Let's go back to our App component and add some few things.

The image above shows that we imported the CardInfo component and rendered it as a child component in App component while passing the cardData array as prop. I know what you are thinking; "Where did CardInfo component appeared from?" Don't worry, we are on the right track, I purposely did that so as to explain how we can set up our Route for useParams.

<Route path="/info/:name" element=<CardInfo data={cardData} /> />

If we take a good look at the code above, the path string is directed to /info/:name. What this means is that, the colon : before name is an indicator that informs React that this is a dynamic Route and that name is now a property of useParams. This name can be anything but it must match which that of the useParams object.

Also, from our card component:

<Link to={/info/${item.name}/}>View Discription</Link>

The code specifies that Link will navigate to CardInfo component.

Note: In our App component, you must understand that the parameter after the : which is name, is now a reference to item.name from our Link path. ie, the Link will navigate to /info/:name.

Lets introduce our CardInfo component and put all the pieces together. Shall we?

Implementing useParams (ii)
CardInfo

import { useParams } from "react-router-dom";

function CardInfo({ data }) {
  const { name } = useParams();

  return (
    <>
      <section className="card-wrapper">
        <div className="card-container">
          {data
            .filter((item) => item.name === name)
            .map((item, index) => (
              <div className="card-info" key={index}>
                <h2>{item.name}</h2>
                <p>{item.description}</p>
              </div>
            ))}
        </div>
      </section>
    </>
  );
}

export default CardInfo;

We have imported the useParams hook from react-router-dom and accessed its property by using the Destructuring concept.

const { name } = useParams();

Recall that the path string to navigate to CardInfo component is /info/:name in our App component and we have gained access to the :name parameter by using destructuring. Now, name is an object of useParams in this case.

Note: nameas an object of useParams must match with that of the parameter name specified in the path string of the route definition which in this case is :name else you will encounter an error. Basically, you can name the parameter anything you want, but it is ideal to match it with one of the key in your data object so there’s no confusion. Also, from our Link, ${item.name} is a reference to the name object of useParams.

We have filtered our data to return the name value that will be clicked from our Link and also mapped the output from the filtered data to return the name and description value of our desired card. Check the output below.

Functionality

Click the view description button and see the magic.

if you take a look at that arrow from the image, you will see that we have successfully navigated to/info/HTML because we clicked the view description button of the HTML card. We have achieved this with the help of the useParams hook.

Conclusion

In this guide, we have discussed how to use the useParams hook in React. We have also streamlined the implementation and functionality of the hook by using a mini project to explain how
you can use this hook to navigate to dynamic URL in our web applications. I hope you learnt something new from this article. Goodluck in our career!