DEV Community: Itunu Lamina

Error Is Not an Exception: Why This Difference Matters in Real Systems

Itunu Lamina — Tue, 17 Mar 2026 17:54:26 +0000

In software development, it’s easy to conflate errors with exceptions. Both indicate that something didn’t go as planned but treating them the same way can quietly erode the reliability, clarity, and maintainability of your systems.

Understanding the difference is not just academic. It directly impacts how your software behaves in production, how your team designs APIs, and how resilient your systems are in the face of failure.

The Core Principle

Errors are expected.
Exceptions are unexpected.

Error: A legitimate outcome of a function or operation. Part of normal system behavior.
Exception: A violation of assumptions, something the system cannot recover from safely.

Failing to distinguish these leads to:

Hidden control flow
Noisy logs
Fragile APIs
Slower debugging and longer incidents

Why Errors Should Be Explicit

Failures happen constantly in production:

Users enter invalid data
Resources are missing
Networks fail

These are not edge cases. They are part of the environment your software operates in. Modeling them explicitly makes your code:

Predictable
Readable
Easy to maintain

TypeScript example:

// ❌ Using exceptions for normal outcomes
function getUser(id: string): User {
  const user = db.find(id)
  if (!user) throw new Error("User not found")
  return user
}

// ✅ Modeling errors explicitly
function getUser(id: string): User | null {
  return db.find(id) ?? null
}

Go example:

// ✅ Errors are part of the function contract
func GetUser(id string) (User, error) {
    user := db.Find(id)
    if user == nil {
        return User{}, errors.New("not found")
    }
    return user, nil
}

Explicit error handling ensures the caller knows exactly what to expect and can handle outcomes properly.

Exceptions Indicate Broken Contracts

Exceptions, by contrast, signal that something is fundamentally wrong:

Invariants are violated
Internal state is corrupted
Program assumptions are broken

These are not recoverable. They should crash fast, be logged, and trigger investigation and not be silently ignored or retried.

TypeScript example:

function withdraw(amount: number) {
  if (amount < 0) {
    throw new Error("Invariant violated: negative withdrawal")
  }
}

Go example:

func MustConnect() *DB {
    db, err := Connect()
    if err != nil {
        panic("cannot connect to database")
    }
    return db
}

Impact on Real Systems

Reliability: Treating errors as exceptions makes your system break. Requests fail unnecessarily, retries are skipped, and fallback mechanisms are never reached.
Observability: If normal outcomes throw exceptions, logs become noisy and alerts meaningless. Real failures are buried under “false positives.”
API Design: Functions that throw for expected outcomes create misleading contracts. Callers cannot reason about behavior without reading implementation.
Distributed Systems: Failures are guaranteed in distributed environments, timeouts, partial failures, and network partitions. Treating these as exceptions leads to cascading failures and unpredictable behavior.
Team Productivity: Confusing errors and exceptions increases cognitive load. Debugging takes longer, and new engineers struggle to understand system behavior.

A Practical Rule

If the caller can handle it, it’s an error.
If the system cannot safely proceed, it’s an exception.

Errors should be visible, expected, and handled.
Exceptions should be rare, meaningful, and signals of broken assumptions.

The Bottom Line

Software will fail. Always.
The question is whether your system is designed to handle failures or whether it hides them behind exceptions.

Keeping errors and exceptions distinct:

Improves system resilience
Clarifies control flow
Reduces operational noise
Strengthens team understanding of system behavior

Failing to do so creates fragile systems that break silently, crash unpredictably, and make debugging a nightmare.

Design explicitly. Model reality. Treat exceptions as truly exceptional. That is how resilient, maintainable systems are built.

How to Implement Face Detection in React Native Using React Native Vision Camera

Itunu Lamina — Fri, 19 Apr 2024 09:27:53 +0000

Face detection is a technology that allows applications to identify and locate human faces within images or videos. It's widely used in various domains, including security systems, photography apps, and augmented reality experiences.
In this guide, we'll explore how to build a simple face detection app in React Native using React Native Vision Camera.

What we'll build: A basic app that uses your phone's camera to ensure a human face is spotted before capturing.

Getting Started

Before we begin, you will need to install Node.js (which is included with npm) on your machine. You may verify this by typing node -v and npm -v into your terminal. If nodejs is not already installed, go to nodejs.org/en/download.

Set up React Native: We won't delve into the details of creating a React Native project here, but if you're new to it, there are plenty of beginner-friendly tutorials available online to help you get started

Let's Code!

Package Power: First, we need to install the React Native Vision Camera library. Open your terminal in your project directory and type:

npm install react-native-vision-camera@3.7.1

We need frame processors (functions that are written in JavaScript (or TypeScript) which can be used to process frames the camera "sees".) To use the frame processors;

Set up worklet runner

npm install react-native-worklets-core

Add the babel plugin to your babel.config.js:

module.exports = {
  plugins: [
    ["react-native-worklets-core/plugin"],
    // ...
  ],
  // ...
};

Now, let's import the necessary components in our camera component file and ensure the camera loads.

import React, { useRef, useState } from 'react';
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import {
  useCameraDevice,
  useCameraPermission,
  CameraCaptureError,
  Camera,
  type VideoFile,
  type CameraPosition,
  useFrameProcessor,
} from 'react-native-vision-camera';

function CameraComponent() {
  const { hasPermission, requestPermission } = useCameraPermission();
  const device = useCameraDevice('front');
  const cameraRef = useRef<Camera | null>(null);

  useEffect(() => {
    (async () => {
      await requestPermission();
    })();
  }, [requestPermission]);

  if (!hasPermission) {
    // Camera permissions are still loading
    return (
      <View style={styles.container}>
        <ActivityIndicator color="#162D4C" />
      </View>
    );
  }

  if (device == null) {
    // Camera permissions are not granted yet
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: 'center' }}>No camera device found</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Camera
        video={true}
        ref={cameraRef}
        frameProcessor={isRecording ? undefined : frameProcessor}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={!!device}
        pixelFormat="yuv"
      />
      <View style={styles.bottomBar}>
        <TouchableOpacity
          disabled={isRecording}
          onPress={handleTakeVideo}
          style={isRecording ? styles.isRecording : styles.shutterButton}
        />
      </View>
    </View>
  );
}

Now, let's implement the face detection in our component.

install a frame processor plugin

npm install vision-camera-trustee-face-detector-v3

Update our CameraComponent

import React, { useState } from 'react';
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import {
  useCameraDevice,
  useCameraPermission,
  CameraCaptureError,
  Camera,
  type VideoFile,
  type CameraPosition,
  useFrameProcessor,
} from 'react-native-vision-camera';
import { Worklets } from 'react-native-worklets-core';
import { scanFaces, type Face } from 'vision-camera-trustee-face-detector-v3';

function CameraComponent() {
  ...

  const [faces, setFaces] = useState<any>();
  const [photo, setPhoto] = useState<string>("");

  const handleFaceDetection = Worklets.createRunInJsFn((face) => {
    setFaces(face);
  });

  const frameProcessor = useFrameProcessor(
    (frame) => {
      'worklet';
      try {
        const scannedFaces = scanFaces(frame, {});
        if (Object.keys(scannedFaces).length > 0) {
          handleFaceDetection(scannedFaces);
        }
      } catch (error) {}
    },
    [handleFaceDetection]
  );

  async function handleTakePicture(){
    if (cameraRef.current) {
      setFaces(undefined);
      if(faces){
        const shot = await cameraRef.current.takePhoto({});
        setPhoto(`file://${shot.path}`);
        setFaces(undefined);
      } else {
        Alert.alert('Please position your face in the frame and try again')
      }
    }
  };

  return (
    <View style={styles.container}>
      <Camera
        video={true}
        ref={cameraRef}
        frameProcessor={frameProcessor}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={!!device}
        pixelFormat="yuv"
      />
      <View style={styles.bottomBar}>
        <TouchableOpacity
          disabled={isRecording}
          onPress={handleTakePicture}
          style={styles.shutterButton}
        />
      </View>
    </View>
  );
}

You can go ahead to setup the preview using the source photo!

complete code here

Running the App!

Connect your device using a USB cable or a wireless connection (consult the React Native documentation for specifics).
In your terminal, run npx react-native run-android or npx react-native run-ios depending on your device.

Now, open the app on your device and point the camera at yourself. If everything works correctly, you should see the camera preview and the "Please position your face in the frame and try again" message whenever your face is not detected!

This guide breaks down the process of implementing face detection in React Native step by step, from setting up the project to testing the app. It includes code snippets and explanations tailored for beginners to grasp the concept easily.

Note that in the case of video, set the frameProcessor prop to undefined after you've started recording if you don't need to use the frameProcessor during recording

Sources

React Native Documentation: reactnative.dev/docs
React Native Vision Camera: react-native-vision-camera.com
Face Detection Plugin: vision-camera-trustee-face-detector-v3

How to Use a Data Fetching Tool to Manage Server State in Your React Application

Itunu Lamina — Tue, 06 Jun 2023 07:17:00 +0000

Managing server state in a React application is a crucial aspect of building robust web applications. One of the key challenges in this process is efficiently fetching data from the server and handling it in a way that ensures a smooth user experience. In this article, we will explore how to use a data fetching tool to manage server state effectively in your React application.

Why Use a Data Fetching Tool?

Before diving into the implementation details, let's understand why using a data fetching tool can be beneficial. While it is possible to fetch data from a server using built-in JavaScript functions like fetch() or axios, these low-level APIs require handling a lot of boilerplate code, such as managing loading and error states, caching, pagination, and more. A data fetching tool abstracts away these complexities, providing a simpler and more convenient way to fetch data.

Introducing React Query

React Query is a popular data fetching library that simplifies the process of fetching, caching, synchronizing, and updating server state in React applications. It offers a powerful set of features and an intuitive API, making it an excellent choice for managing server state.

Installation

To get started, install React Query using npm or yarn:

npm i @tanstack/react-query

#or

yarn add @tanstack/react-query

Basic Usage

Once React Query is installed, you can start using it in your React components. Let's walk through a basic example to demonstrate how to fetch and manage server state with React Query.

First, import the necessary functions and components from the React Query library:

import { useQuery } from '@tanstack/react-query';

Next, define a function that fetches data from the server. In this example, we'll fetch a list of users:

const fetchUsers = async () => {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
};

Now, use the useQuery hook to fetch the data and manage the server state:

const UsersList = () => {
  const { data, isLoading, error } = useQuery('users', fetchUsers);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

In the code snippet above, the useQuery hook takes two arguments: a unique query key ('users') and the function (fetchUsers) responsible for fetching the data. The hook automatically manages the loading state (isLoading), error state (error), and caches the data (data). This ensures that the UI automatically updates when the data changes.

Advanced Features

React Query provides various advanced features to handle more complex scenarios:

Mutations

Mutations allow you to modify data on the server. React Query simplifies the process of sending requests, handling loading and error states, and updating the cache after a mutation. Here's an example:

import { useMutation } from 'react-query';

async function(userData) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData),
  });

  const data = await response.json();
  return data;
};

const CreateUserForm = () => {
  const { mutate, isLoading, error } = useMutation(createUser);

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const userData = Object.fromEntries(formData.entries());
    mutate(userData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" />
      <input type="email" name="email" placeholder="Email" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Create User'}
      </button>
      {error && <p>Error: {error.message}</p>}
    </form>
  );
};

In the code snippet above, the useMutation hook is used to define a mutation operation (createUser). The mutate function triggers the mutation and automatically handles loading and error states.

Query Invalidation and Refetching

React Query provides a mechanism to invalidate and refetch data based on various triggers, such as user actions or time intervals. For example, you can refetch data every 5 seconds:

const { data } = useQuery('users', fetchUsers, {
  refetchInterval: 5000,
});

Or manually trigger a refetch:

const { data, refetch } = useQuery('users', fetchUsers);

function handleRefresh() {
  refetch();
};

These features give you fine-grained control over when and how data should be fetched and updated.

Why Not Use the Flux Pattern?

Complexity: Implementing the Flux pattern requires defining actions, action creators, reducers, and managing the store. This adds additional layers of complexity to your codebase, especially as the application grows in size and complexity.
Boilerplate code: The Flux pattern often involves writing a significant amount of boilerplate code to handle actions, reducers, and store updates. This can lead to code bloat and make the application harder to maintain.
Data fetching and caching: While Flux patterns provide mechanisms for managing state, they don't offer built-in solutions for data fetching and caching. You would need to handle these aspects separately, potentially resulting in duplication of code and added complexity.
Synchronizing server state with client state: With Flux patterns, synchronizing the server state with the client state can be a manual and error-prone process. React Query simplifies this by automatically caching and synchronizing the server state with the UI.

React Query, on the other hand, provides a streamlined and efficient way to manage server state without the need for additional patterns or libraries. It abstracts away the complexities of data fetching, caching, and state management, allowing you to focus more on building UI components and delivering a great user experience.

Alternatives

While React Query is a powerful data fetching tool, it's worth mentioning that there are other excellent options available in the React ecosystem. Two popular alternatives to React Query are SWR and RTK Query.

When it comes to choosing between React Query, SWR, and RTK Query, it ultimately depends on your specific requirements and preferences. Each tool has its own strengths and focuses on different aspects of data fetching and state management.

React Query is a powerful and flexible solution with a comprehensive set of features, making it suitable for a wide range of applications. It offers excellent caching capabilities, mutation support, and seamless integration with React.

SWR, on the other hand, shines when it comes to providing fast and efficient data fetching with its Stale-While-Revalidate approach. It's lightweight, easy to use, and works well with Next.js.

RTK Query is a great choice if you're already using Redux or prefer a more opinionated and integrated solution. It offers powerful caching and state management capabilities while leveraging the Redux ecosystem.

Ultimately, it's recommended to evaluate the specific requirements of your project, explore the documentation and examples of each tool, and choose the one that best fits your needs. All three options—

Conclusion

Using a data fetching tool can greatly simplify the process of managing server state in your React applications. It provides a powerful set of features, such as caching, mutations, and query invalidation, which can significantly enhance the performance and user experience of your application. By leveraging React Query, you can focus more on building your UI components and less on handling the complexities of server state management.

Keep building! 🚀

React Ref: Everything You Need to Know in Simple Terms

Itunu Lamina — Mon, 20 Mar 2023 07:41:33 +0000

So, imagine you're at a party and you see this cute person across the room that you want to talk to. But, there's a problem: they're surrounded by a bunch of other people and you can't get to them.

In this article, we will explore everything you need to know about React ref, including what it is, how it works, and how you can use it to enhance your React applications.

What is React Ref?

React Ref is a feature in React that provides a way to access and manipulate the DOM elements directly. Refs allow developers to refer to a specific element or component in their code, even when that element is not in the current scope of the component.

Well, React Ref is like having a VIP pass that lets you skip the line and go straight to the cute person. In this case, the cute person is an element in your React component, and the other people are all the other elements surrounding it.

How does React Ref work?

React Ref works by creating a reference to a specific element in the DOM. This reference is created using the ref attribute in the JSX code, which is then attached to the element you want to refer to.

Using React Ref

But, how do you get this VIP pass? It's easy! You just need to create a reference to the element you want to access using the useRef() hook in a component:

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  return (
    <div ref={myRef}>
      Hello, world!
    </div>
  );
}

Now, you have a reference to the div element and you can access its properties and methods by calling myRef.current. For example, if you want to change the color of the text to blue, you can do this:

myRef.current.style.color = 'blue';

Forwarding React Ref

But, what if you want to pass this VIP pass to another component? Well, you can use the forwardRef() function to forward the reference from the parent component to the child component. It's like giving your friend your VIP pass so they can also talk to the cute person!

import React, { useRef, forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => (
  <div ref={ref}>
    I'm the child component!
  </div>
));

function ParentComponent() {
  const myRef = useRef(null);

  return (
    <div>
      <ChildComponent ref={myRef} />
      <button onClick={() => myRef.current.style.color = 'red'}>
        Make it red!
      </button>
    </div>
  );
}

Now, you have access to the div element in the child component from the parent component. And, when you click the button, the text color will change to red!

Conclusion

So, that's React Ref. It's like having a VIP pass to the cute person you want to talk to at a party, and being able to pass it to your friends too!

In this article, we have explored everything you need to know about React Ref, including what it is, how it works, and how to use it. By using React Ref in your applications, you can enhance the user experience and create more dynamic and responsive UIs.

Keep building! 🚀

Why Functional Testing: A Real-Life Perspective

Itunu Lamina — Thu, 19 Jan 2023 19:05:28 +0000

Functional testing is an important step in building quality applications. It is a process of testing a software application to ensure that it meets its specified requirements and works correctly. In simple terms, functional testing checks if the application is working as it should.

Introduction

Functional testing is a testing process that validates the software system against functional requirements. The purpose of Functional testing is to test each functionality of the software application, by providing apt input, output verification against the Functional requirements. In other words, functional testing is a type of testing whereby the system is tested against the function requirement/specification.

A real-life example of the importance of functional testing is a website for a retail store. If the website does not work correctly, customers may have trouble making purchases or finding the products they need. This can lead to lost sales and a negative impact on the store's reputation. However, if functional testing is done, any issues with the website can be identified and fixed before it is released to the public. This ensures that customers have a positive experience and are more likely to return to the store in the future.

There are many reasons why functional testing is a must-have for building high-quality applications. One of the main reasons is that it helps to find and fix bugs early on in the development process. When bugs are found and fixed early, it saves time and money in the long run. It also helps to ensure that the final product meets the needs of the user.

Why automate Functional Tests?

You might be wondering why we need to write these tests, can't we just run the app and test like a regular user would? Well, Automation can certainly reduce time and effort in executing functional tests. Human error can also be lowered, preventing bugs from slipping past the test phase. However, new implementations can break existing features and we can be sure to catch them early enough from our existing test cases.
Although automated testing can never replace manual tests, having an ideal mix of the two will prove to be vital to have the desired quality in Software projects.

Behaviour Driven Development (BDD)-style assertions

Writing your tests in a declarative-style allows the reader to get the grab instantly. When you write imperative code that is packed with conditional logic, the reader is forced to exert more brain-CPU cycles. In that case, code the expectation in a human-like language, declarative BDD style using expect or should and not using custom code.

import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
    it('should display the correct title', () => {
        render(<MyComponent />);
        const text = screen.getByText('My Component!');
        expect(text).toBeInTheDocument();
    });

    it('should display the correct number of buttons', () => {
        render(<MyComponent />);
        const buttons = screen.getAllByRole('button');
        expect(buttons.length).toBe(3);
    });
});

Process Workflow for Functional Testing

Generally, functional testing in detail follows the steps below:

Determine which functionality of the product needs to be tested. This can vary from testing main functions, messages, error conditions and/or product usability.
Create input data for functionalities to be tested according to specified requirements.
Determine acceptable output parameters according to specified requirements.
Execute test cases.
Compare actual output from the test with the predetermined output values. This reveals if the system is working as expected.

Functional Testing Use Case Examples:

Take an online HRMS portal where the employee logs in with his user account and password. On the login page, there are two text fields for the username & password, and two buttons: Login and Cancel. Successful login takes the user to the HRMS home page and Cancel will close the login.

Specifications are as shown below:

The user id field takes a minimum of 6 characters, a maximum of 10 characters, numbers(0-9), letters(a-z, A-z), special characters (only underscore, period, hyphen allowed) and it cannot be left blank. User id must begin with a character or a number and not special characters.
Password field takes a minimum of 6 characters, a maximum of 8 characters, numbers (0-9), letters (a-z, A-Z), special characters (all), and cannot be blank.

The use-case scenario above can be tested through a variety of functional testing techniques which can be classified into two broad categories:

Positive testing
Negative testing

1. End-user based/System Tests

A positive testing category that Test the system to gauge if all components are working perfectly in combination.

In the example, this would entail testing the customer journey – HRMS application loading, entering accurate credentials, directing to the home page, performing tasks, logging out of the system. This test ensures that this workflow proceeds and completes without any errors.

2. Equivalence Tests

A negative testing category that ensures Test data is segregated into partitions called equivalence data cases. In this test, data in each partition must respond in the same way. Consequently, you only need to test one condition across all partitions. If the condition does not work in one partition, it won’t work in any of the others.

In the example, since the user id field can accommodate a maximum of 10 characters, it should behave the same way anytime data > 10 is entered.

3. Boundary Value Tests

These tests are used to check how the system behaves when data limits are implemented. (Negative Testing)

In the example, since the user id requires a minimum of 6 characters, this test will be used to check how the system responds when less than 6 characters are entered.

4. Decision-based Tests

These tests are initiated to check for possible system outcomes when a particular condition is met. (Negative Testing)

In the example, the following decision-based tests can be undertaken:

If incorrect credentials are entered, the system should inform the user and reload the login page.
If correct credentials are entered, the system should take the user to the home page UI.
If correct credentials are entered but the user wants to cancel login, the system should not direct to the home page UI.
Instead, it should reload the login page.

5. Alternate Flow Tests

Alternate path tests are run to validate all the possible ways that exist, other than the main flow to accomplish a function. (Positive Testing)

6. Ad-hoc Tests

These tests uncover discrepancies that might not have been identified in any of the other tests. Ad-hoc tests are targeted towards breaking the system and checking its response. (Negative Testing)

For Example, a sample test case would be:

A user is logged in, but the admin deletes the user account while he is performing some operations. It would be interesting to see how the application handles this gracefully.

In conclusion, functional testing is a must-have for building high-quality front-end applications. It helps to find and fix bugs early on, ensures compatibility with different devices and browsers, and helps to ensure a positive user experience. By taking the time to perform functional testing, developers can ensure that their final product is of high quality and meets the needs of the user.

Keep building! 🚀

A Foolproof Guide To 'this' In JavaScript

Itunu Lamina — Tue, 10 Jan 2023 11:32:31 +0000

Introduction

JavaScript's this keyword can be a source of confusion for many developers, especially when working with event handlers, callbacks, and other complex scenarios. Understanding how this works in JavaScript is crucial for writing efficient and maintainable code.

In this article, we will go over the various ways in which this is determined in JavaScript, and provide a foolproof guide for understanding and using this in your code.

How `this` is determined

JavaScript's this keyword refers to the object that the code is currently executing within. The value of this is determined by how the function is called, rather than where it is defined, which is known as implicit binding or runtime/late binding. In other words, this is determined at the time the function is invoked and not when it is defined.

`this` as a method of an object

The first way in which this is determined is when a function is invoked as a method of an object. For example:

const obj = {
    name: 'Mark',
    sayHi: function () {
        console.log(`Hi, my name is ${this.name}`);
    },
};

obj.sayHi(); // Output: "Hi, my name is Mark"

In this example, this inside the sayHi function refers to the obj object, because the function is invoked as a method of obj.

`this` as a standalone function

When a function is invoked as a standalone function, this is set to the global object (or undefined in strict mode). For example:

function sayHi() {
    console.log(`Hi, my name is ${this.name}`);
}

sayHi(); // Output: "Hi, my name is undefined"

In this case, this inside the sayHi function refers to the global object.

Explicitly setting the value of `this`

Another way to set the value of this is by using the call or apply methods. These methods allow you to explicitly set the value of this when calling a function. For example:

const person = { name: 'Mark' };

function sayHi() {
    console.log(`Hi, my name is ${this.name}`);
}

sayHi.call(person); // Output: "Hi, my name is Mark"

In this example, this inside the sayHi function is set to the person object using the call method.

`this` as a constructor

When a function is invoked as a constructor, this is set to the newly created object. For example:

function Person(name) {
    this.name = name;
}

const person = new Person('Mark');
console.log(person.name); // Output: "Mark"

In this case, this inside the Person function refers to the new object that is created when the function is invoked with the new keyword.

Function binding techniques

In addition, In JavaScript, the value of this is determined at runtime and it can change based on how the function is invoked. This is where it can get a little tricky to understand, especially when working with event handlers and callback functions, because the value of "this" may not be what you expect. To tackle this problem, you can use function binding techniques like .bind(), .call() and .apply() to ensure that this refers to the correct object.

Arrow functions and `this`

The last way this is determined is when a function is defined as an arrow function. Arrow functions do not have their own this scope and it will inherit this from its parent scope. This is useful when you need to preserve the value of this from the surrounding code. For example:

const person = {
    name: 'Mark',
    sayHi: () => {
        console.log(`Hi, my name is ${this.name}`);
    },
};

person.sayHi(); // Output: "Hi, my name is Mark"

In this example, the arrow function preserves the this context of the parent scope, which is the person object, as opposed to the global object or undefined.

Using the `bind` method

It's also important to note that in some cases, this can be set using the bind method to create a new function with a specific context, this method can be useful when you want to pass a function as a callback and maintain the context.

const person = { name: 'Mark' };
const sayHi = function () {
    console.log(`Hi, my name is ${this.name}`);
}.bind(person);

setTimeout(sayHi, 1000);

In this example, this inside the sayHi function will always refer to the person object, even when it's passed as a callback to the setTimeout function.

In conclusion, understanding how this works in JavaScript is crucial to writing efficient and maintainable code. By understanding how its value is determined, you can use function binding techniques and arrow functions to ensure that this refers to the correct object in your code. It's important to keep in mind that this may not have the expected value in certain situations, and by using the binding methods and arrow functions you can maintain the context of the this keyword.

Keep building! 🚀

Handling Network Status in Your React App

Itunu Lamina — Thu, 05 Jan 2023 05:10:01 +0000

One important aspect of any modern web application is the ability to handle network connectivity issues. Whether it's a temporary loss of connection or the user being in an area with no network coverage, it's crucial for the app to be able to gracefully handle these scenarios and communicate the current network status to the user.

In this article, we'll look at how to implement a simple system for indicating the internet/network status in a React app.

Handling Network Status Changes

The first step in indicating the network status in our React app is to handle changes in the network status. We can do this using the navigator.onLine property, which is a boolean value that indicates whether the browser is currently online or offline.

We can use this property to set the network status in our app's state, and then use it to display an appropriate message to the user.

Here's an example of how to do this using a custom useNavigatorOnLine hook:

import * as React from 'react';

const getOnLineStatus = () =>
    typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
        ? navigator.onLine
        : true;

const useNavigatorOnLine = () => {
    const [status, setStatus] = React.useState(getOnLineStatus());

    const setOnline = () => setStatus(true);
    const setOffline = () => setStatus(false);

    React.useEffect(() => {
        window.addEventListener('online', setOnline);
        window.addEventListener('offline', setOffline);

        return () => {
            window.removeEventListener('online', setOnline);
            window.removeEventListener('offline', setOffline);
        };
    }, []);

    return status;
};

In this example, we use the useState hook to create a state variable called status, which is initially set to the value of navigator.onLine. We then use the window.addEventListener function to listen for the online and offline events, which are fired when the browser goes online or offline respectively. When these events are fired, we update the value of status using the setStatus function.

Finally, we return the value of status to display an appropriate message to the user.

Displaying a Network Status Indicator

Now that we're able to track the network status in our app, the next step is to display an indicator to the user. There are a few different ways we could do this, such as using an icon or a message, but in this example, we'll use a simple message at the top of the screen.

To create the indicator, we can use a component called NetworkStatusIndicator, which will display a message at the top of the screen when the browser is offline, and lets you know when the browser is online.

Here's an example of how to create the NetworkStatusIndicator component:

import * as React from 'react';

const NetworkStatusIndicator = () => {
    const { show, close } = useDisplayMessage();
    const isOnline = useNavigatorOnLine();
    const firstUpdate = React.useRef(true);

    React.useLayoutEffect(() => {
        if (firstUpdate.current) {
            firstUpdate.current = false;
            return;
        }
        isOnline
            ? show('You are back online!')
            : show('You are currently offline');
    }, [close, show, isOnline]);

    return null;
};

useDisplayMessage is your custom component for displaying messages

You can simply import the NetworkStatusIndicator at the root of your react project usually the App.js

import { NetworkStatusIndicator } from '@/components';

function App() {
    return (
        <>
            <NetworkStatusIndicator />
            {/* rest of your app */}
        </>
    );
}

Overall, handling network connectivity issues and indicating the network status helps improve the user experience, ensures data consistency, and allows for graceful degradation in the event of a loss of connection.

Keep building! 🚀

Using Custom Fonts In Tailwind CSS

Itunu Lamina — Sat, 26 Jun 2021 18:05:31 +0000

What are custom fonts?

Custom fonts allow you to use a beautiful combination of different fonts on your website to improve typography and user experience.

In this article, I will walk you through how you can conveniently use your favourite fonts in your web applications with tailwindcss.

Prerequisites

Before you begin this tutorial you'll need the following:

Code Editor installed
Tailwindcss set up

TTF, OTF, EOT, SVG, WOFF, WOFF2 😢?

If you are getting your fonts from CDN like google fonts or even adobe fonts then font format should really not be your concern.

If you are mostly targeting users with modern browsers, you can use WOFF and WOFF2 formats. These offer the best compression and allow you to deal with fewer files in your code. And if a user’s machine is so old that it doesn’t support either of these formats, it may be better to just serve them a system font as a fallback for performance reasons, anyway.
If you want to expand support as wide as possible, then add EOT and TTF files to the mix.

This tutorial will use the Transfonter, a modern and simple css @font-face generator.

Before you proceed, make sure you have your fonts ready.

remember to enable the add local rule

Setting up your project

Create a new project with your preferred framework. I will be using Next.js

Install tailwindcss

#npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

#yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Create your configuration files

npx tailwindcss init -p

This will create a minimal tailwind.config.js file at the root of your project and It will also create a
postcss.config.js file that includes tailwindcss and autoprefixer already configured.

Include Tailwind in your CSS

In your globals.css file inside the styles directory at the root of your project. Replace the content with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Installing Your Custom Font

If you are not using fonts from a CDN like google fonts.

Go to transfonter.org, click on the ADD FONTS button to import your already downloaded fonts.

Choose preferred format(s)

Click on the CONVERT button afterwards

Extract the downloaded zip file from Transfonter, Move all the files into the /public/fonts folder in your project directory.

Update your `globals.css`

There should be a stylesheet.css file in the fonts folder in your public directory of your project

@import url('/fonts/stylesheet.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

If you are using CDN, simply use the import rule like this

@import url('https://fonts.googleapis.com/css2?family=Jomhuria&family=Roboto:wght@300;400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, extend the fontFamily in the theme in your tailwind.config.js to use the new imported font family, in our case BR Firma,

module.exports = {
    purge: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            fontFamily: {
                sans: ['BR Firma', 'sans-serif'],
            },
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

Voila! 😁 We have our custom fonts loaded

Check out the following resource for in-depth understanding.

Simple Splash Screen in React Native

Itunu Lamina — Mon, 14 Jun 2021 20:49:20 +0000

A splash screen is a screen that appears when you open an app on your mobile device. Sometimes it's referred to as a launch screen or startup screen.

A splash screen being a startup screen can also serve as a form of good user experience while waiting for the background activity in your app to complete.

In this article, I'll introduce you to how you can implement a splash screen in react native with a focus on android.

Prerequisites

Before you begin this tutorial you'll need the following:

VS Code installed
Nodejs installed
NPM installed
React native installed
Android Emulator for testing

Should you consider size?

As much as mobile apps are more straightforward than web apps, you don’t want to risk having display issues on some devices due to inconsistencies in your splash screen resolutions. Experienced designers can create the required splash screen resolutions for both android and IOS from scratch.

In this tutorial, we will be using the App Icon Generator, an online platform for creating icons and images for Android and iOS apps.

Before you proceed, make sure you have a high-definition, 2,000-by-3,000px (72 PPI) image ready.

remember to rename your image sets to launch_screen

Building the splash screen

Open your react-native project in VS Code.

Install the package

#npm
npm install react-native-splash-screen

#yarn
yarn add react-native-splash-screen

Plugin configuration

Navigate into /android/app/src/main/java/MainActivity.java. Replace the code with the code below:

package com.splash;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "Splash";
  }
}

Add the splash screen

Create a file called launch_screen.xml in /android/app/src/main/res/layout (create the layout-folder if it doesn't exist). The contents of the file should be the following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

Extract the generated zip file from App Icon Generator earlier, Copy all the folders in the /android into the /android/app/src/main/res folder in your project directory.

Create colors.xml in /app/src/main/res/values. The content should be this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

Finally, to hide the splash screen after the app loads,
go to your App.jsx

import SplashScreen from 'react-native-splash-screen'
import React, { useEffect } from 'react'

const App = () => {
    useEffect(() => {
        SplashScreen.hide()
    }, [])

    return (
        // Your Component
    )
}

Conclusion

We could have chosen to create the splash screen without the package but the react-native-splash screen ensures the splash screen stays till all JavaScript files load meanwhile in the other approach
the splash screen will not come up until all JavaScript files finish compiling.

Check out the following resource for in-depth understanding.

DEV Community: Itunu Lamina

Error Is Not an Exception: Why This Difference Matters in Real Systems

The Core Principle

Why Errors Should Be Explicit

Exceptions Indicate Broken Contracts

Impact on Real Systems

A Practical Rule

The Bottom Line

How to Implement Face Detection in React Native Using React Native Vision Camera

Getting Started

Let's Code!

Running the App!

Sources

How to Use a Data Fetching Tool to Manage Server State in Your React Application

Why Use a Data Fetching Tool?

Introducing React Query

Installation

Basic Usage

Advanced Features

Mutations

Query Invalidation and Refetching

Why Not Use the Flux Pattern?

Alternatives

Conclusion

React Ref: Everything You Need to Know in Simple Terms

What is React Ref?

How does React Ref work?

Using React Ref

Forwarding React Ref

Conclusion

Why Functional Testing: A Real-Life Perspective

Introduction

Why automate Functional Tests?

Behaviour Driven Development (BDD)-style assertions

Process Workflow for Functional Testing

Functional Testing Use Case Examples:

1. End-user based/System Tests

2. Equivalence Tests

3. Boundary Value Tests

4. Decision-based Tests

5. Alternate Flow Tests

6. Ad-hoc Tests

A Foolproof Guide To 'this' In JavaScript

Introduction

How this is determined

this as a method of an object

this as a standalone function

Explicitly setting the value of this

this as a constructor

Function binding techniques

Arrow functions and this

Using the bind method

Handling Network Status in Your React App

Handling Network Status Changes

Displaying a Network Status Indicator

Using Custom Fonts In Tailwind CSS

What are custom fonts?

Prerequisites

TTF, OTF, EOT, SVG, WOFF, WOFF2 😢?

Setting up your project

Install tailwindcss

Create your configuration files

Include Tailwind in your CSS

Installing Your Custom Font

Choose preferred format(s)

Update your globals.css

Simple Splash Screen in React Native

Prerequisites

Should you consider size?

Building the splash screen

Install the package

Plugin configuration

Add the splash screen

Conclusion

How `this` is determined

`this` as a method of an object

`this` as a standalone function

Explicitly setting the value of `this`

`this` as a constructor

Arrow functions and `this`

Using the `bind` method

Update your `globals.css`