DEV Community: Opeyemi Odunayo

Tech interview

Opeyemi Odunayo — Sun, 10 Nov 2024 23:23:12 +0000

Can you tell me about yourself?"/ "Tell me something about yourself.

Start with a Brief Introduction: For example, "My name is [Your Name]. I grew up in [Your City/Town] and recently graduated with a degree in [Your Field]."
Highlight Relevant Experience: Focus on skills and achievements that showcase your ability to excel in the role. For instance, "During my internship at [Company Name], I gained hands-on experience in [relevant skill], which I believe would be valuable in this role."
Emphasize Skills and Strengths: Discuss any technical skills, soft skills, or certifications that make you a strong candidate. Provide examples of how you've used these skills to solve problems or achieve success in the past. For example, "I'm proficient in [relevant software/tools] and have strong problem-solving skills, which I demonstrated when I [specific example]."
Express Passion and Motivation: Share why you're interested in the role and how it fits into your career goals. Convey enthusiasm and eagerness to contribute to the company's success. For instance, "I'm incredibly passionate about [industry/field], and I'm excited about the opportunity to [specific aspect of the job]. I'm eager to learn and grow in this role."
Wrap Up with a Positive Note: For example, "Thank you for allowing me to share a bit about myself. I'm looking forward to discussing how my experiences and skills can contribute to the team's success."

Static Website: A website with fixed content that doesn't change unless manually updated. Dynamic Website: A website where content is generated or updated in real time, often using a database.

HTML Elements: Building blocks like div, p, h1, img, a, ul, ol, form, etc.

<head> Tag: Contains metadata (title, styles, scripts, etc.) for the webpage, not displayed in the body.

<body> Element: Contains all visible content on the webpage, such as text, images, and links.

Types of Listings in HTML:
ul (unordered list) ol (ordered list)dl (description list)

Difference Between ul and ol: ul: Unordered list, items are marked with bullets. ol: Ordered list, items are numbered.

Types of Headings: Ranges from h1 (largest) to h6 (smallest).

Semantic Elements: HTML tags like header, footer, article, and section that provide meaning to the web page's structure.

Why Use Semantic Elements: They improve accessibility, SEO, and make the code more readable.

justify-content in CSS: Aligns flex items along the main axis (e.g., left, center, right, space-between, space-around).

3 Ways of Writing CSS:
Inline styles, Internal styles within style, tag External styles linked CSS file.

Grid: A CSS layout system for creating flexible, grid-based layouts with rows and columns.

Universal Selector *: Selects all elements on the webpage.
Pseudo-Classes: Keywords added to selectors to style an element in a particular state, like :hover or :focus.

Pseudo-Elements: Used to style parts of an element, like ::before or ::after.

Box Element: In CSS, every element is treated as a box with properties like padding, margin, and border.

Fill Area: Expanding an element to fill available space, often using flex-grow or CSS Grid.

Types of Selectors: Universal *, Type p, Class .class, ID #id, Attribute attr, Descendant div p,

Types of Layout: Block, Inline, Flexbox, Grid

JavaScript: A programming language used to make web pages interactive.

Single or Multi-Threaded: JavaScript is a single-threaded language, but it uses asynchronous features for non-blocking tasks.

Data Types in JS:
Primitive: string, number, boolean, null, undefined, symbol, bigint
Non-Primitive: object, array, function

Two Main Data Types: Primitive, Non-Primitive.
String: A sequence of characters enclosed in quotes "text", 'text'.

The reduce function in JavaScript is an array method used to reduce an array to a single value by applying a callback function to each element of the array, one at a time, from left to right.

// An array of numbers
const data = [1, 2, 3, 4, 5];

// Using the reduce method to sum up the array elements
const sum = data.reduce((acc, num) => {
  // acc: accumulator, starts at 0 (the initial value)
  // num: the current number being processed
  return acc + num; // add the current number to the accumulator
}, 0); // initial value of acc is set to 0

console.log(sum); // Output: 15

const result = false || 0 || null; // ans = null

The || (logical OR) operator returns the first truthy value or the last falsy value if none are truth.

const result = false || 1 || null; // ans = 1

const result = ["mango", "grape", "apple", "banana"];
delete result[2];
console.log(result); // ['mango', 'grape', empty, 'banana']

The output ['mango', 'grape', empty, 'banana'] occurs because when you use the delete operator on an array element, it creates a "hole" in the array, resulting in an empty slot. This is why the console shows empty instead of undefined or another value.

Hoisting: is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This means that you can use functions and variables before you actually declare them in the code

console.log(add(4, 6)); // ans = 10
function add(a, b) {
  return a + b;
}

You can call add before its definition, and it will work fine.
Result: The call console.log(add(4, 6)); works correctly because add is hoisted

console.log(sub(4, 6)); // main.js:14 Uncaught ReferenceError: Cannot // access 'sub' before initialization
    at
let sub = (a, b) => {
  return a - b;
};

Error: The call console.log(sub(4, 6)); throws an error (ReferenceError or TypeError) because sub is not initialized at the time it's called. Variables declared with let (or const) are hoisted but not initialized.

console.log(sub(4, 6));
// Uncaught TypeError: sub is not a function
var sub = (a, b) => {
  return a - b;
};

Variable Hoisting: When using var, the declaration of the variable (sub) is hoisted to the top of its scope, but the initialization (the assignment of the arrow function) is not. This means that sub will exist in the scope but will be undefined until the line where the function is assigned is executed.

if (!data) sendBread();
var data = true;
function sendBread() {
  console.log("i am ready to send bread"); // I am ready to send bread
}

The declaration of data is hoisted, but its initialization happens later in the code. Therefore, at the time of the if check, data is undefined.
Because of this, the if (!data) condition evaluates to true, leading to the call to sendBread(), which prints the message to the console.

console.log(1 - "2"); // ans -1
console.log(1 + "2");  // ans 12

The - operator forces numeric conversion, resulting in subtraction.
The + operator with a string leads to string concatenation, producing a combined string result.


console.log(false == 0); // type coercion ans = true
console.log(false === 0); // no type coercion ans = false

Use == when you want to compare values for equality with type coercion, but be cautious as it can lead to unexpected results due to implicit conversions.
Use === when you want to compare both the value and type without any coercion, ensuring a stricter comparison. This is generally recommended to avoid unintended type conversion issues.

console.log(typeof null); // null is an object

const numbers = [4, 1, 2, 7];
numbers.sort();
console.log(numbers[2]); // ans = 4

When you call numbers.sort(), the sorting process converts each number to a string:

4 becomes "4", 1 becomes "1", 2 becomes "2", 7 becomes "7"
The Unicode order sorts them as follows:
"1", "2", "4", "7"
In the sorted array, numbers[2] refer to the third element (since arrays are zero-indexed).

difference between var and let in javascript
var is function-scoped, meaning that when a variable is declared with var inside a function, it is accessible throughout the entire function, regardless of where it is declared within the function.
If var is declared inside a function, the variable will not be accessible outside the function.

function example() {
  var x = 10;   // Declared inside the function
  if (true) {
    var y = 20; // y is still function-scoped, even though it's inside an if-block
  }
  console.log(x); // 10 (x is accessible anywhere inside the function)
  console.log(y); // 20 (y is accessible too, even though it was declared in the block)
}

example();

console.log(x); // ReferenceError: x is not defined (x is not accessible outside the function)
console.log(y); // ReferenceError: y is not defined (y is not accessible outside the function)

let is block-scoped, meaning that variables declared with let are confined to the block in which they are defined. A block is typically enclosed by curly braces {} in structures like if, for, or function bodies.

function example() {
  let x = 10;   // Declared in the function, accessible within the function

  if (true) {
    let y = 20; // y is block-scoped, only accessible within this block
    console.log(y); // 20 (y is accessible inside the block)
  }

  console.log(x); // 10 (x is accessible inside the function)
  console.log(y); // ReferenceError: y is not defined (y is not accessible outside the block)
}

example();

CSS flex and grid
Flexbox is primarily designed for one-dimensional layouts,
either in a row or a column
when to use: Simple Row/Column Layouts:
If your layout requires arranging items in a single row or
column.

CSS Grid Layout is a two-dimensional system designed for
creating complex grid-based layouts. It allows us to define
both rows and columns and place items at precise locations
within this grid
When to Use CSS Grid:

Complex Layouts: If your layout requires a multi-dimensional grid structure, such as magazine layouts or intricate card designs.
Multi-Column and Multi-Row Forms: When designing forms with multiple columns or rows

JSX is like a more powerful version
of HTML that plays really well with JavaScript, especially
in React apps. It helps make your web pages interactive and
dynamic.

Callbacks are functions that are passed as arguments to other functions and are executed after a certain event occurs or a specific condition is met

// Define a function named greet that takes a name and a callback function as parameters
function greet(name, callback) {
  console.log(`Hello, ${name}!`);  // Logs a greeting message using the provided name
  callback(); // Calls the callback function
}

// Define a function named sayGoodbye that logs a goodbye message
function sayGoodbye() {
  console.log("Goodbye!");
}

// Pass the sayGoodbye function as a callback to the greet function
greet("Alice", sayGoodbye); // Expected output: "Hello, Alice!" followed by "Goodbye!"

Event delegation is a programming pattern in JavaScript
where a single event listener is used to manage all
occurrences of a particular event type for multiple elements,
usually within a common parent container.
How it works:
Instead of attaching an event listener to each individual child
element, you attach a single event listener to a common
ancestor (typically a parent element) that contains all the
child elements.

Problem: Write a function that checks if two strings are anagrams (contain the same characters in a different order).
Anagrams are words or phrases that are formed by rearranging the letters of another word or phrase, using all the original letters exactly once. For example:
The word "listen" can be rearranged to form "silent.

function areAnagrams(str1, str2) {
    const normalize = str => str.replace(/[^a-z]/gi, '').toLowerCase().split('').sort().join('');
    return normalize(str1) === normalize(str2);
}
// Example Usage:
console.log(areAnagrams("listen", "silent")); // Output: true

Problem: Write a function to reverse a given string.

function reverseString(str) {
    return str.split('').reverse().join('');
}
// Example Usage:
console.log(reverseString("hello")); // Output: "olleh"

Problem: Write a function that checks if a given string is a palindrome (reads the same backward as forward).

function isPalindrome(str) {
    const cleanedStr = str.replace(/[^a-z0-9]/gi, '').toLowerCase();
    return cleanedStr === cleanedStr.split('').reverse().join('');
}

// Example Usage:
console.log(isPalindrome("A man, a plan, a canal, Panama")); // Output: true

Problem: Write a function that returns the largest number in a given array of numbers.

function findLargestNumber(arr) {
    return Math.max(...arr);
}
// Example Usage:
console.log(findLargestNumber([3, 5, 1, 8, 2])); // Output: 8

write a function to Count Consonants in a String

function countConsonants(str) {
  // Define a set of vowels for quick reference
  const vowels = new Set(['a', 'e', 'i', 'o', 'u']);

  // Initialize a counter to keep track of consonants
  let consonantCount = 0;

  // Convert the string to lowercase to make the function case-insensitive
  for (let char of str.toLowerCase()) {
    // Check if the character is a letter and not a vowel
    if (/[a-z]/.test(char) && !vowels.has(char)) {
      consonantCount++; // Increment the consonant count
    }
  }
  // Return the total count of consonants found in the string
  return consonantCount;
}
// Example usage
console.log(countConsonants("Hello World!")); // Expected output: 7

Write a function to Remove Duplicates from an Array

function removeDuplicates(arr) {
  // Use filter to keep only unique items
  return arr.filter((item, index) => 
    // Check if the current item's index is the first occurrence of the item
    arr.indexOf(item) === index
  );
}
// Example usage
console.log(removeDuplicates([1, 2, 2, 3, 4, 4, 5]));
 // Output: [1, 2, 3, 4, 5]

A Promise is an object representing a future value or completion/failure of an asynchronous operation. It has three states: pending, fulfilled, and rejected. The .then() and .catch() methods handle the result.
async/await is syntactic sugar over Promises, making asynchronous code look more like synchronous code. It uses async functions, where await pauses code execution until the Promise resolves or rejects.

Extracting Year, Month, and Hour from an ISO Date String
This code snippet demonstrates how to split an ISO 8601 date string into its components and extract the year, month, and hour

const dateParts = new Date().toISOString().split(/[-T:]/);
const [year, month, hour] = dateParts;
console.log(year, month, hour);

const numbers = [7, 3, 26];
numbers.sort();
console.log(numbers);

The .sort() method, when used without a compare function, sorts the array elements as strings. Therefore:
26 as a string ("26") comes before "3" because the first character ("2") has a lower code point than "3".
"3" comes before "7" in Unicode order.

all words that tie for the longest length

function findLongestWords(str) {
    // Split the input string into an array of words using spaces as delimiters.
    // The regular expression \s+ matches one or more whitespace characters.
    const words = str.split(/\s+/);

    // Find the length of the longest word in the array.
    // Map each word to its length and then use Math.max to get the maximum length.
    const maxLength = Math.max(...words.map(word => word.length));

    // Filter the array to include only words that have the maximum length.
    return words.filter(word => word.length === maxLength);
}

// Example usage
const input = "The quick brown fox jumps over the lazy dog"; // Define the input string.
const longestWords = findLongestWords(input); // Call the function to find the longest words.
console.log(`The longest words are: ${longestWords.join(", ")}`); // Join the longest words with ", " and log the result.

function to check if a number is prime

function isPrime(num) {
    // Check if num is less than 2, as numbers less than 2 are not prime
    if (num < 2) {
        return false; // Return false for numbers less than 2
    }

    // Loop from 2 to the square root of num, as factors larger than the square root will have corresponding smaller factors
    for (let i = 2; i <= Math.sqrt(num); i++) {
        // If num is divisible by i (num % i === 0), it's not prime
        if (num % i === 0) {
            return false; // Return false if a divisor is found
        }
    }

    // If no divisors are found, the number is prime
    return true; // Return true if num is prime
}

// Example usage
const number = 29; // Define a number to check
console.log(`${number} is prime: ${isPrime(number)}`); // Output the result of checking if the number is prime

REACT
What is React?
React is a JavaScript library developed by Facebook for building user interfaces, specifically single-page applications. It allows developers to build reusable components, manage application state, and update the UI efficiently with a virtual DOM.

What are components in React? Components are the building blocks of a React application. They are reusable, self-contained pieces of UI that can be nested, managed, and handled independently.
What is the difference between a functional component and a class component?
Class components use ES6 classes, have lifecycle methods, and manage their own state via this.state.
Functional components are simpler JavaScript functions that can use useState and other hooks to manage state and lifecycle without needing classes.
What is JSX?
JSX stands for JavaScript XML. It allows writing HTML-like syntax directly in JavaScript, which React then transforms into JavaScript calls to create UI elements.
Explain the concept of state and props in React.
State is a component's local data that can change over time, while props are inputs to a component passed from its parent, used for rendering dynamic content.
What are React Hooks?
Hooks are functions introduced in React 16.8 that let you use state and other React features in functional components. Common hooks include useState, useEffect, and useContext.
What is the virtual DOM?
The virtual DOM is an in-memory representation of the actual DOM. React uses it to optimize DOM manipulation by re-rendering only the components that changed, instead of updating the whole DOM.
What is useState and how does it work?
useState is a hook that allows functional components to have state variables. It returns an array with the current state and a function to update it.
Explain useEffect and its dependencies.
useEffect is a hook for performing side effects (like fetching data or updating the DOM). Its dependency array controls when the effect runs; it runs whenever a dependency value changes.
What are controlled and uncontrolled components?
Controlled components are inputs whose values are managed by React state.
Uncontrolled components store their own state in the DOM, which is accessed via ref in React.
What is Context API in React, and how do you use it?
The Context API allows you to pass data through the component tree without manually passing props. It’s ideal for global state or theme management.
syntax explanation
Context Setup with GlobalContextProvider

import { createContext, useState } from "react";
// Creating GlobalContext for sharing theme and toggle function across the app
export const GlobalContext = createContext();
// GlobalContextProvider component provides theme and thoggleMode to its children
export const GlobalContextProvider = ({ children }) => {
  // State to manage theme, initially set to 'dark'
  const [theme, setTheme] = useState("dark");

  // Toggle function to switch between 'light' and 'dark' themes
  const thoggleMode = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };
  return (
    // Using GlobalContext.Provider to pass down theme and thoggleMode
    <GlobalContext.Provider value={{ theme, thoggleMode }}>
      {children} {/* Render children components with access to the context */}
    </GlobalContext.Provider>
  );
};

main.jsx - Setting up the Application with GlobalContextProvider

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { GlobalContextProvider } from "./context.jsx";

// Root rendering where GlobalContextProvider wraps App
// This ensures that all components in App have access to GlobalContext
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <GlobalContextProvider>
      <App />
    </GlobalContextProvider>
  </StrictMode>
);

App.jsx - Consuming Context in the App Component

import { useContext } from "react";
import { GlobalContext } from "./context";
const App = () => {
  // Destructuring theme and thoggleMode from GlobalContext
  const { theme, thoggleMode } = useContext(GlobalContext);
  return (
    <div className="flex items-center justify-center gap-3 flex-col mt- 
    20">
      {/* Heading with conditional classes based on theme state */}
      <h1
        className={`${
          theme === "light" ? "bg-black text-white" : "bg-red-700 text- 
     white"
        }`}
      >
        this text background will change from white to black same as 
       the text
        whenever the button is click
      </h1>

      {/* Button to toggle theme */}
      <button onClick={thoggleMode} className="bg-blue-600 p-3 rounded- 
       md">
        change theme
      </button>
    </div>
  );
};
export default App;

Accessing Context Data: By using useContext(GlobalContext), we destructure theme and thoggleMode, making the state and function available directly in App.
Conditional Styling: The h1 element uses the value of theme to apply different classes based on whether the theme is light or dark. This changes the background and text color accordingly.
Button Click Handler: The button has an onClick event handler that calls thoggleMode, toggling the theme each time it’s clicked. This re-renders the component with the updated theme state.
This setup efficiently uses the Context API to manage the global theme state and toggle function without prop drilling, making it more scalable and easy to maintain.

What is memo in React, and when should you use it? memo is a higher-order component that prevents re-renders if the props of a component don’t change, optimizing performance in certain cases.
What is Redux, and how does it work with React? Redux is a state management library that allows you to manage and centralize application state. It uses a global store and dispatch actions to update the state.
What is the significance of keys in React lists? Keys are unique identifiers for elements in lists to help React efficiently re-render lists by tracking each item.
What is propTypes and how is it used? propTypes is a way to specify and validate the expected types of props passed to a component, enhancing error-checking and readability.
What are higher-order components (HOCs)? HOCs are functions that take a component and return a new component, adding extra functionality to the wrapped component.
What are the lifecycle methods in a React class component? Common lifecycle methods include: Mounting: constructor, componentDidMount Updating: shouldComponentUpdate, componentDidUpdate Unmounting: componentWillUnmount
What is lazy loading in React? Lazy loading delays the loading of components or resources until they are needed, improving performance and load time.
What is React Router, and how does it work? React Router is a library for routing in React applications. It enables navigation between different views or components and supports dynamic URL parameters.
What is React.StrictMode? React.StrictMode is a wrapper component that activates additional checks and warnings for its children, helping developers find potential issues early.
What is code splitting, and how does it work in React? Code splitting allows you to split your code into smaller bundles, loading only the necessary code when required. In React, this is commonly done with React.lazy and Suspense.
What is reconciliation in React? Reconciliation is the process by which React updates the DOM by comparing the virtual DOM with a previous version and efficiently updating only the changed parts.
What are fragments in React, and why are they useful? Fragments (... or <>...</>) allow you to group multiple elements without adding extra nodes to the DOM.
What is useRef, and how is it used? In React, useRef is a hook (a special function) that helps you store values or references to DOM elements across different renders of your component. syntax explanation

const Hooks = () => {
  // Initialize a reference to store a reference to the input element.
  const inputRef = useRef(null);

  // Function to focus the input element when called.
  // `inputRef.current` will hold a reference to the DOM element if it exists.
  const focusInput = () => {
    if (inputRef.current) { // Check if `inputRef.current` is not null
      inputRef.current.focus(); // Focus on the input element using the ref
    }
  };
  return (
    <div>
      {/* Attach the ref to the input element.
          Now `inputRef.current` will hold a reference to this input element after the initial render. */}
      <input ref={inputRef} type="text" />

      {/* Button to trigger the focusInput function when clicked.*/}
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

What are portals in React? Portals provide a way to render components outside the main DOM hierarchy, useful for modals and tooltips that need to visually “break out” of their container.
How does React handle forms? Forms can be controlled or uncontrolled. Controlled forms use React state to manage form data, while uncontrolled forms rely on the native DOM to handle form values.
What is server-side rendering (SSR) in React? Server-side rendering is a rendering process where the HTML content of a webpage is generated on the server, and the fully rendered HTML is sent to the browser. The browser then displays the content, and JavaScript takes over to make the page interactive after it's loaded. What is client-side rendering (CSR) in React? Client-side rendering is a rendering process where the browser downloads a minimal HTML page, and then JavaScript (usually React or another frontend framework) dynamically generates the content on the client side or the user's browser
What is hydration in React? Hydration is the process of adding interactivity to static HTML generated by server-side rendering. The client-side JavaScript binds event listeners and updates the virtual DOM.
What is React's Profiler, and how can it be used? The Profiler API measures rendering performance for components, helping identify bottlenecks in rendering.
What is the purpose of React Fiber? React Fiber is the underlying algorithm used by React to manage reconciliation. It allows React to prioritize updates and split rendering work into segments, enhancing performance.

useReducer is useful for managing more complex or structured state changes in a React component. It's especially handy when you have a lot of "if-else" or "switch-case" logic to update the state based on different actions.

What's the difference between HTTP and HTTPS?
The primary difference between HTTP (Hypertext Transfer Protocol) and HTTPS (Hypertext Transfer Protocol Secure) is that HTTPS is secure while HTTP is not.
Key Differences Between HTTP and HTTPS:
HTTP: Transmits data in plain text, meaning information sent between the client (e.g., a browser) and server can be intercepted and read by attackers.
HTTPS: Encrypts data using SSL (Secure Sockets Layer) or TLS (Transport Layer Security), which makes it much harder for attackers to intercept and read sensitive information, like passwords or credit card details.
HTTP: Vulnerable to various attacks, such as man-in-the-middle (MITM) attacks, where an attacker could modify or intercept data.
HTTPS: Provides data integrity, authentication, and confidentiality, helping to protect users' sensitive information from being stolen or tampered with.

Problem: Create a component that filters a list of items based on search input.

const items = ["banana", "mango", "grape", "cashew", "cherries"];
  const [search, setSearch] = useState("");
  const filteredSearch = items.filter((item) => {
    return item.toLowerCase().includes(search.toLowerCase());
  });
  return (
    <>
      <div>
        <h1>FilterSearch</h1>
        <input
          className="bg-gray-600 rounded-md p-3 text-white outline:focus-none"
          type="text"
          onChange={(e) => setSearch(e.target.value)}
          value={search}
        />
        {filteredSearch.length > 0 ? (
          filteredSearch.map((item, index) => {
            return (
              <div key={index}>
                <h1>{item}</h1>
              </div>
            );
          })
        ) : (
          <h1>no item found</h1>
        )}
      </div>
    </>
  );

axios vs fetch
axios has a simpler syntax, automatically stringifies JSON data when sending requests, and parses JSON data in responses. For example:

axios.post('/api/data', { key: 'value' })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

axios: Automatically rejects on HTTP errors (e.g., 4xx or 5xx status codes), making error handling straightforward.
fetch: Requires explicit JSON handling, meaning you often need to use JSON.stringify() for request payloads and response.json() for parsing JSON responses:

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

fetch: Does not reject HTTP errors by default; you need to check response.ok or the status code manually
When to Use Each?
Use axios when you need ease of use, robust error handling, built-in support for interceptors, and are working in a variety of JavaScript environments.

Use fetch if you prefer a lightweight native API, need fine-grained control, or want to minimize library dependencies.

How can you optimize web images in terms of file size and loading speed?
Choosing the Right Image Format:
Use modern image formats like WebP, JPEG 2000, or AVIF when possible.
These formats offer better compression and quality.
Resize Images:
Use tools like Photoshop, GIMP, or online services to resize images to the exact dimensions needed.
Avoid using larger images than necessary.
Enable Browser Caching:
Implement browser caching for images.
This reduces the need to download images on subsequent visits, enhancing loading speed.

A custom hook in React is a JavaScript function that allows you to reuse logic across multiple components. It’s a way to encapsulate and share stateful logic using React's built-in hooks (like useState, useEffect, etc.), without duplicating code. Custom hooks help you keep components clean and focused on rendering, while the custom hook manages the shared logic
How to Create a Custom Hook
To create a custom hook:
Define it as a JavaScript function — a custom hook is just a function that starts with use, for example, useFetchData.
Use built-in hooks inside it — like useState, useEffect, etc.
Return data or functions that the consuming component might need.
below is a syntax explanation
Here’s an example of a simple custom hook that fetches data from an API.

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const res = await fetch(url);
        if (!res.ok) {
          throw new Error("Network response was not ok");
        }
        const result = await res.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, loading, error };
};
export default useFetchData;

Now, you can use the useFetchData custom hook in any component that needs to fetch data from a given URL.

import React from 'react';
import useFetchData from './useFetchData';
function DataDisplay() {
  const { data, loading, error } = useFetchData('https://api.example.com/data');
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      {data && data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}
export default DataDisplay;

General Question
What is a Software Framework and why should we use one?
In software dev., a framework gives devs a pre-built structure with tools, libraries, and best practices, so they don’t have to start from scratch,
Using a framework saves time and effort. Instead of reinventing the wheel, devs can leverage the framework’s built-in features to handle common tasks like user authentication, and routing.
This allows them to focus on what makes their application unique.

"What is the difference between null and undefined?"
undefined: When a variable is declared but not initialized, it automatically gets assigned the value undefined. If you try to access an object property that doesn't exist, you get undefined.
null: It is a value that represents the intentional absence of any object value. You can explicitly assign a variable or object property the value null to indicate no value or no object. It is often used to indicate that a variable or object property should have no value or that the value is unknown or irrelevant.

Mention five ways to decrease page load time.
Optimize Images:Images are often the largest assets on a web page, and unoptimized images can significantly slow down load times.
Minify and Combine Files:
HTML, CSS, and JavaScript files can contain unnecessary whitespace, comments, and redundant code which increase their size.

What is the difference between multitasking and multiprocessing OS?
Multitasking: This refers to an operating system's ability to handle multiple tasks (or processes) simultaneously. In a multitasking OS, a single CPU switches rapidly between different tasks, giving the illusion that they are running at the same time.

Multiprocessing: This involves an operating system that can use more than one CPU (or core) at the same time. In a multiprocessing OS, different tasks can truly run concurrently on different processors.

What ways can we test our frontend APP?
Unit Testing
Purpose: Test individual components in isolation.
Tools:
Jest: A popular testing framework for JavaScript and TypeScript.
React Testing Library: Focuses on testing React components.
Example: Testing a button component to ensure it triggers the correct function

how does the web work
The web is powered by web servers, which are powerful computers connected to the internet 24/7. These servers store and serve web pages, files, and data. When you access a website, you're essentially requesting data from these servers.
It is a software and hardware that uses HTTP (Hypertext Transfer Protocol) and other protocols to respond to client requests made over the World Wide Web.

Each web server has a unique IP (Internet Protocol) address, which is a series of numbers like 192.158.1.38. However, since IP addresses are not user-friendly, we use domain names. Domain names are human-readable addresses mapped to IP addresses, making it easier for people to access websites.

Example of an IP Address: 192.158.1.38
Example of a Domain Name: example. com

A URL is the complete address used to access a specific resource on the internet. It includes the protocol, domain name, path, query, and fragment, specifying the exact location of a resource on a server.

How i Built a Dictionary Using JavaScript

Opeyemi Odunayo — Mon, 25 Mar 2024 23:43:52 +0000

Features:

1 Dictionary Lookup: Users can search for the definitions of words using the built-in dictionary feature.
2 Text-to-Speech: One of the standout features of Voice Dictionary is its text-to-speech functionality.
3 Theme Switching: Users can switch between light and dark themes to suit their preferences.

In this comprehensive article, you’ll learn how to build a dictionary that converts definitions to speech. here is a link to the github preview dictionary, also a link to the github source code, so sit back, relax and enjoy the content
To get started I'd love you to have a basic knowledge of HTML, CSS, and JAVASCRIPT since that's the technology we will be using
most importantly how to get data using the Fetch API in javascript, and if you're not familiar with the word Fetch API in javascript here is a link to a comprehensive article on javascript fetch API understanding fetch API in javascript.

Introduction:

In the digital age, access to information is at our fingertips. One such area where this is particularly beneficial is language learning and exploration. Voice Dictionary – a simple yet powerful web application that I designed to help users effortlessly explore and expand their vocabulary.

Getting started

Fetching data
The first thing we need to do is illustrate the process of fetching dictionary data based on the user's search query, updating the UI to display a "Loading..." message during the fetch operation, and clearing previous content in the dictionary container to prepare for displaying the new search results.

 let text = searchText.value.trim();
  if (text !== "") {
    dictionaryDiv.innerHTML = "Loading...";

    fetch(  `https://dictionaryapi.com/api/v3/references/learners/json/${text}?key=05a6f186-4232-4fd5-be99-0e12575a6a6d`
    )
      .then((response) => response.json())
      .then((data) => {
        dictionaryDiv.innerHTML = ""; // Clear previous content

Next step checks if the fetched data (Data) Is an array and if it has at least one element (i.e., its length is greater than 0).

if (Array.isArray(data) && data.length > 0) {
          const wordData = data[0];

Updating the UI
In this part, we dynamically generate and update the UI to display the definition of the searched word, along with its part of speech, if available. It ensures a user-friendly experience by providing relevant information or feedback based on the outcome of the dictionary lookup.

     if (wordData.shortdef) {
            // Display the first definition (you can loop through 
     'wordData.shortdef' for multiple definitions)
            const partOfSpeech = wordData.fl; // Part of speech
            const definition = wordData.shortdef[0]; // First 
       definition

            dictionaryDiv.innerHTML = `
            <div class="word-content">
            <div class="text">
              <h1>${text}</h1>
            </div>
            <div class="play-logo">
              <i class="fa fa-play" aria-hidden="true"></i>
            </div>
          </div>
          <div class="speech">
            <p>${partOfSpeech}</p>
            <hr />
          </div>
          <div class="meaning">Meaning</div>

          <div class="meaning-text">
            <li>${definition}</li>
              `;
          } else {
            dictionaryDiv.innerHTML = "No definition found for the 
           word.";
          }

Text-to-Speech logic
Below we create a function that conveniently enables text-to-speech functionality within the application, allowing users to listen to the pronunciation and definition of words by simply invoking this function with the relevant text. It gracefully handles cases where the browser lacks support for the Speech Synthesis API, providing feedback to the user or developer about the limitations of the environment.

function speakDefinition(definitionText) {
  if ("speechSynthesis" in window) {
    const utterance = new SpeechSynthesisUtterance(definitionText);
    speechSynthesis.speak(utterance);
  } else {
    console.log("Text-to-speech not supported in this browser.");
  }
}

Theme switching

if (savedTheme) {
  mainContainer.classList.add(savedTheme);
  if (savedTheme === "dark-theme") {
    faMoon.classList.replace("fa-moon", "fa-sun");
  }
}

faMoon.addEventListener("click", () => {
  mainContainer.classList.toggle("dark-theme");

  if (faMoon.classList.contains("fa-moon")) {
    faMoon.classList.replace("fa-moon", "fa-sun");
    // Save the theme setting to local storage
    localStorage.setItem("theme", "dark-theme");
  } else {
    faMoon.classList.replace("fa-sun", "fa-moon");
    // Save the theme setting to local storage
    localStorage.setItem("theme", "");
  }
});

the above code provides functionality for toggling between light and dark themes using a moon/sun icon and saving the user's theme preference to local storage for persistence across page visits.
Conclusion
yooo!!!! this is how I built the dictionary; By studying the provided code, learners can gain a practical understanding of building modern dictionary applications, integrating with APIs, handling data, managing user preferences, and enhancing accessibility features. hopefully, you find this article helpful, if so please consider leaving a comment and liking what you have just read.

Understanding useState Hook, Props and Prop Drilling, In React

Opeyemi Odunayo — Thu, 21 Mar 2024 21:43:22 +0000

In this article, you will get to understand props, prop drilling, and the useState hook in react, just sit back, relax and enjoy the reading

Usestate Hook

Every React component can have its own state.
What do we mean by state? The state is the set of data that is managed by the component.
Think about a form, for example. Each individual input element of the form is responsible for managing its state: what is written inside it.
A link is responsible for knowing if the mouse is hovering over it.
In React, or in any other components-based framework/library, all our applications are based and make heavy use of components state.
We manage state using the useState utility provided by React. It's
technically a hook (you don't need to know the details of hooks right now, but that's what it is).
You import useState from React in this way:

import React, { useState } from 'react'

Calling useState(), you will get back a new state variable, an a function that we can call to alter its value. useState accepts the initial value of the state item and returns an array containing the state variable, and the function you call to alter the state.
Example:

const [count, setCount] = useState(0)

This is important. We can't just alter the value of a state variable directly. We must call its modifier function. Otherwise, the React component will not update its UI to reflect the changes in the data. Calling the modifier is the way we can tell React that the component state has changed. The syntax is a bit weird, right? Since useState() returns an array we use
array destructuring to access each individual item, like this:
const [count,setCount] = useState(0)
Let's assuming we're building a simple react counter app, we can just start by setting the initial state to 0
Here's a practical example:

import { useState } from 'react'
const Counter = () => {
 const [count, setCount] = useState(0)
 return (
 <div>
 <p>You clicked {count} times</p>
 <button onClick={() => setCount(count + 1)}>Click me</button>
 </div>
 )
}
ReactDOM.render(<Counter />, document.getElementById('app'))

In the above React counter app, the counter's initial state is set to 0 using the count variable let [count] = useState(0), to update the count state we can achieve that by pressing the click me button which will triggered the setCount variable and update the count state in respect to the logic in the onclick function
You can add as many useState calls you want, to create as many state variables as you want

const [count, setCount] = useState(0)
const [anotherCounter, setAnotherCounter] = useState(0)

Props

Prop is short for Property in React it actually refers to a piece of data that is passed from a parent component to a child component
here is a code snippet example

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [myName, setMyName] = React.useState("john");

  return (
    <div>
      <h2>Parent Component</h2>
      <ChildComponent message={message} />
    </div>
  );
}

In the above code the ParentComponent renders a div containing an h2 heading and a ChildComponent. The ParentComponent maintains a state variable message, which is passed to the ChildComponent as a prop named message. This allows data to be passed from the parent component to its child component.

Prop drilling
Prop drilling is a straightforward concept. Suppose you have a hierarchy of components, with a parent component at the top and multiple levels of child components beneath it. If the parent component has some data that needs to be accessed by one of its distant descendant components, it can pass that data down through its child components as props, each intermediate child component in the hierarchy receives the data as a prop and passes it down further until it reaches the component that needs it. This process of passing props down the component tree is known as prop drilling

Example of Prop Drilling

Consider a simple React application with three components: ParentComponent, ChildComponent, and GrandchildComponent. The ParentComponent has some data that needs to be accessed by the GrandchildComponent.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = React.useState("Hello from Parent");

  return (
    <div>
      <h2>Parent Component</h2>
      <ChildComponent message={message} />
    </div>
  );
}

Above, ParentComponent holds the data in its state and passes it down to the ChildComponent as a prop.

// ChildComponent.js
import React from 'react';
import GrandchildComponent from './GrandchildComponent';

function ChildComponent({ message }) {
  return (
    <div>
      <h3>Child Component</h3>
      <GrandchildComponent message={message} />
    </div>
  );
}

The ChildComponent then passes the data down further to the GrandchildComponent

in a real world scenario to make it more comprehensive we built a small app ( filtering app ) that uses the filtering method in Array where we use a particular function removePerson().

let data = [
  { id: 1, name: "opeyemi" },
  { id: 2, name: "odunayo" },
  { id: 3, name: "emmanuel" },
  { id: 4, name: "john" }
]


function PropDrilling() {
  let [people, setPeople] = useState(data)


  let removePerson = (id) => {
    let newPeople = people.filter((person) => person.id !== id)
    setPeople(newPeople)
  }
  return (
    <section>
      <h3>Prop Drilling</h3>
      <List people={people} removePerson={removePerson} />
    </section>
  )

In the above code we created a state of an array and passed it as a prop to a List component and a function newPeople() which we also pass as a prop it the component

Prop drilling occurs when you have multiple components and you have a big component tree and then you need to start passing some state from the top component all the way to the bottom component. The code below illustrates it better

function PropDrilling() {
  let [people, setPeople] = useState(data)
  let removePerson = (id) => {
    let newPeople = people.filter((person) => person.id !== id)
    setPeople(newPeople)
  }
  return (
    <section>
      <h3>Prop Drilling</h3>
      <List people={people} removePerson={removePerson} />
    </section>
 )
}

In the code above we have our parent component PropDrilling, we have a people’s state in the component which we pass into our
list component as a prop, and the removePerson function is defined to remove a person from the people state array which we also pass into the List component as a prop

let List = ({ people, removePerson }) => {
  return (
    <>
      {people.map((person) => {
        return <SinglePerson key={person.id} {...person}
          removePerson={removePerson} />
      })}
    </>
  )
}

In the above code we destructure the people’s array then map and spread the people’s object in a SinglePerson component, we also destructure the removePerson() function and pass it as a prop into the component

let SinglePerson = ({ id, name, removePerson }) => {
  return (
    <div style={{
      padding: "0 4px", margin: "20px auto", maxWidth: "500px",
      display: "flex", alignItems: 'center', justifyContent:         
     'space-between',
      background: "#333", color: 'white'
    }}>
      <h3>{name}</h3>
      <button style={{
        border: "none", color: "#fff", background: "none",
        height: "50px"
      }} onClick={() => removePerson(id)}> remove</button>
    </div>
  )
}

Lastly, we destructure the object and removePeople() then finally make use of it in the SinglePerson component. Inside the JSX, it renders each person's name along with a button to remove that person When the button is clicked, it calls the removePerson() with the person's id. so the overview of this prop drilling is that we have a state and a function which we pass down from the parent tree to the last component where we actually needed them.

Conclusion

Prop drilling is a simple yet effective way to pass data between components in React. While it works well for small to medium-sized applications, it can become cumbersome in larger applications with deeply nested component trees. In such cases, other state management solutions like Context API or Redux may be more suitable. However, understanding prop drilling is fundamental to grasping how data flows in React applications. By mastering prop drilling, developers can build more efficient and maintainable React applications. ok its not baad

so far so good you've made it to the end of this article on state, props, and prop drilling in React by now you should have a solid understanding of what state, props, and prop drilling are and how to use them effectively in your react component

Understanding Fetch() API in Javascript

Opeyemi Odunayo — Fri, 20 Oct 2023 18:18:06 +0000

This article covers all you need to know about the FETCH() API and how to get started I'm very sure you will be glad as you're about to read this helpful material let's go !!!!!

What's API
API simply stands for application programming interface, this abbreviation explains it all because it's straightforward, it enables a smooth interaction between two computers i.e. it enables a user to get data into its computer from another computer with a a method called fetch.

Types of API

RESTful APIs: Representational State Transfer APIs use HTTP methods (GET, POST, PUT, DELETE) and are designed around resources. They are widely used for web services and are typically accessed over the internet. A simple REST API endpoint and its response typically follow a standard structure. Here's an example of what a simple REST API endpoint and its response might look like: Endpoint: /api/users HTTP Method: GET Request: To retrieve a list of users. Response:

[
  {
    "id": 1,
    "username": "user123",
    "email": "user123@example.com"
  },
  {
    "id": 2,
    "username": "johndoe",
    "email": "johndoe@example.com"
  },
  {
    "id": 3,
    "username": "alice",
    "email": "alice@example.com"
  }
]

In this example:

The endpoint /api/users represents a resource for retrieving a list of users. The HTTP method used is GET, which is used to request data from the server. The response has an HTTP status code of 200 OK, indicating that the request was successful.
The Content-Type header specifies that the response is in JSON format. The response body is a JSON array containing a list of user objects, each with an id, username, and email field.
This is a simplified example, and real-world APIs may have more complex endpoints and responses, but the basic structure of an endpoint and its response in a RESTful API typically includes the HTTP method, endpoint URL, status code, headers, and a data payload in a standard format like JSON or XML.

GraphQL APIs: A query language for APIs, GraphQL allows clients to request only the specific data they need, reducing over-fetching and under-fetching of data you can learn more about the types of GraphQL here https://dev.to/callebdev/understanding-graphql-and-its-design-principles-fd6

Now what's FETCH, and how to use it

in the context of API (application interface) "FETCH" typically refers to making an HTTP request to retrieve data from a server or send it, it's a common term used when discussing web APIs.

Here's an overview of the syntax and key components of the Fetch API:

Basic Fetch Syntax:
To make a basic GET request using the Fetch API, you can use the following syntax:

fetch(url)
  .then(response => response.json())
  .then(data => {
    // Handle JSON data here
  })
  .catch(error => {
    // Handle errors here
  });

fetch(url): This initiates a GET request to the specified URL and returns a Promise that resolves to the Response object representing the response to the request
The first .then() is responsible for handling the response itself, which includes checking the HTTP status code, headers, and other metadata. It's typically used to convert the Response object into the format that you need, such as parsing it as JSON or extracting specific information. Inside this .then() block, you receive the Response object as an argument.
The second .then() is used to work with the data obtained from the response. It executes after the first .then() and receives the result of the previous .then() as its argument. This is where you can perform further processing on the parsed data, use it in your application, or update the user interface.
.catch(error => { ... }): This callback is executed if there is an error during the request, such as a network issue or a request that failed for some other reason

now that we understand what is fetch, to use the fetch function in javascript to make HTTP requests to an API you can follow this step

I built a Rick and Morty app from which I get all the data I need via javascript fetch API and I think this a perfect resource to
practice it(fetch API) link to the final project https://opeyemi-2018.github.io/cartoon/

you can just follow this step
1. Create an HTML file copy and paste the below code inside the body element

<div class="main-con">
  <div class="logo">
    <img src="images/rick_and_morty.png" alt="" />
  </div>

  <div class="api-container">
         <div class="api-container">
        <!-- <div id="Api-output">
                  <div class="img">
                     <img src="" >
                  </div>
                    <div class="info-div">
                      <h2>ope</h2>
                      <h3>ondo</h3>
                      <h3>ondo</h3>
                      <h4>20</h4>
                </div>
            </div> -->
      </div>
  </div>
</div>
<script src="main.js"></script>

2. Create a CSS file copy and past below code inside

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: #03001c;
  font-family: sans-serif;
}

.main-con {
  padding: 4% 4%;
}

.logo {
  color: #fff;
  padding: 3% 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  width: 15%;
}

.api-container {
  display: grid;
  grid-template-columns:
    1fr 1fr
    1fr;
  column-gap: 10px;
  row-gap: 10px;
}

#Api-output {
  border: 1px solid #fff;
  background-color: #27374d;
  padding: 3px 1%;
  border-radius: 10px;
}
img {
  width: 25%;
  border-radius: 50%;
}

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

.info-div {
  background: rgb(4, 87, 87);
  border-radius: 5px;
  border: 1px solid gray;
  color: white;
  padding-top: 10px;
}

.info-div h2,
h3,
h4 {
  margin-left: 10px;
  font-size: 16px;
}

@media screen and (max-width: 850px) {
  .api-container {
    display: grid;
    grid-template-columns:
      1fr
      1fr;
  }
}

@media screen and (max-width: 600px) {
  .api-container {
    display: grid;
    grid-template-columns: 1fr;
  }
}

3. Create a javascript file e.g. (script.js) where you will write your code. In the script.js file Use the "fetch function" You can store the URL in a variable

let URL = "https://rickandmortyapi.com/api/character"

or you write it directly in the fetch method. to write it directly in the fetch method you can simply follow these steps, you create a function since we will be calling the function to make the program run

function getApiData() {
  fetch("https://rickandmortyapi.com/api/character")
    .then((res) => res.json())
    .then((data) => {
      data.results.forEach((post) => {
        apiContainer.innerHTML += `
                 <div id="Api-output">
                   <div class="img">
                     <img src="${post.image}">
                   </div>
                   <div class="info-div">
                      <h2> Name: ${post.name}</h2>
                      <h3> Location: ${post.location.name} 
                      </h3>
                   <h4>No of movies: ${post.episode.length} 
                   </h4>
                 </div>
               </div>
              `;
      });
    });
}
getApiData();

so let's go through the steps and explain what each
method does

the fetch is used to make an HTTP request GET request to
the specified URL, it returns a promise that resolves to the
response from the server
since fetch uses promise we use .then() to handle
the response, the promise will return another promise
you will notice the first .then() has a JSON() method
just to specify we're expecting JSON data
we use the second .then() to get the useful data we needed
because the first .then() return some irrelevant stuff
we use the catch error function for debugging
to handle any error that might come up while sending our
request
we loop through the data using forEach method to get each of
the data that contains the image of each character, name, the
number of the episodes they appear
We dynamically populate the data into the HTML code that we
have already styled.

Conclusion
This article is intended to provide you with fundamental
knowledge on how to fetch an API.