Forem: Nwosa Tochukwu

Why Nigeria's Tech Communities Deserve Better Infrastructure

Nwosa Tochukwu — Thu, 26 Feb 2026 13:43:09 +0000

Nigeria has one of the most exciting tech ecosystems on the continent. We have talented developers, ambitious founders, thriving communities, and events happening every single week across the country. But here is the problem nobody talks about — most of these events are invisible.

Not because they are not happening. Because there is nowhere to find them.

My own experience

In 2021, I was posted to Ekiti State for my NYSC. I started learning tech in 2022, excited about the journey ahead. But one thing kept frustrating me — I could not find tech events near me. No meetups, no workshops, no hackathons that I knew of. I assumed nothing was happening in Ekiti.

When I relocated to Lagos in 2024, I expected it to be easier. And in some ways it was — events existed. But finding specifically tech events still took time, distractions, and luck. I would scroll through Eventbrite, get lost in unrelated events. I would check Twitter and miss announcements that came and went. I would find out about a great workshop three days after it happened.

I was in Lagos — Nigeria's tech capital — and I was still missing events.

That told me the problem was not about location. It was about infrastructure.

What we are missing

Every thriving tech ecosystem has infrastructure that holds it together. Developer documentation. Community forums. Event platforms. Places where people can show up, connect, and grow together.

Nigeria has the people. We have the talent. We have the energy. What we are missing is the connective tissue — the platforms that make it easy for communities to find each other.

Right now, a developer in Enugu who wants to attend a Web3 workshop has to check multiple WhatsApp groups, scroll through Twitter, ask around, and hope someone mentions it in time. A student in Plateau trying to find their first hackathon has almost no way to discover what is happening near them.

This is not a small inconvenience. Opportunities lost to poor visibility compound over time. The developer who never finds their community takes longer to grow. The organiser whose event reaches 20 people instead of 200 gets discouraged. The ecosystem moves slower than it should.

The gap nobody was filling

What surprised me was that nobody had built a solution specifically for this. Global platforms like Eventbrite and Meetup exist, but Nigeria is an afterthought for them. They are not built around our 36 states. They do not understand that a developer in Kaduna needs a different discovery experience than someone in Lagos. They are expensive for grassroots organizers who are running community events for free.

The Nigerian tech community deserved something built for it, not borrowed from somewhere else.

So I built TechLinkUp

In 2025, I started building TechLinkUp — Nigeria's first dedicated platform for tech event discovery. The idea is simple: one place where any Nigerian can find tech events in their state, in their category, for free.

Today we have 153 events listed across categories like AI, Web3, fintech, cybersecurity, hackathons, women in tech, and more. We cover all 36 states. Listing an event is completely free for organizers. Finding one takes seconds for attendees.

But I want to be honest — we are early. This is not a finished product. It is a foundation.

What I really want to build

The events platform is just the beginning. What excites me most is the data layer underneath it.

Right now, nobody knows which states in Nigeria have the most active tech communities. Nobody knows which event formats — workshops, hackathons, conferences, meetups — drive the most engagement. Nobody knows which cities outside Lagos are quietly building something special but lack the visibility to attract the support they deserve.

TechLinkUp will answer those questions. Not by guessing, but by building the infrastructure that makes that data exist in the first place.

Imagine being able to show that Enugu has a growing Web3 community that nobody is paying attention to. Or that Ibadan developers are showing up consistently to AI events but have no dedicated space to grow. That data changes conversations. It directs investment, mentorship, and attention to where it is actually needed.

This is bigger than one platform

I am a frontend developer with three years of experience. I built TechLinkUp alone, bootstrapped, because I felt the problem personally and could not wait for someone else to solve it.

But this is not really about TechLinkUp. It is about what Nigeria's tech ecosystem becomes when we close the infrastructure gaps. When a developer in any of the 36 states can find their community as easily as someone in Lagos. When organizers in underrepresented cities get the visibility their work deserves. When we stop losing talent to isolation and missed opportunities.

We have the people. We just need to connect them.

If you are building in Nigeria, I want to hear from you

If you are an event organiser, list your event on TechLinkUp — it is free and takes five minutes.

If you are a developer or tech enthusiast, check if there is something happening in your state. You might be surprised.

And if you believe Nigeria's tech communities deserve better infrastructure, share this. The more people who know TechLinkUp exists, the faster we build the ecosystem we all want to be part of.

techlinkup.xyz

Hoisted and Confused? Let’s Decode JavaScript’s Scope Magic

Nwosa Tochukwu — Mon, 12 May 2025 18:07:53 +0000

JavaScript isn't broken — but if you've ever wondered why a variable returns undefined or a function throws an error before it's even called... you're not alone.

Many developers hit weird bugs due to scope and hoisting without realizing what's really going on. I just dropped a post that breaks down:

Why var, let, and const behave so differently
How JavaScript really handles function and block scopes
What hoisting actually does (and doesn’t)
How to write bug-free, predictable code

If you've ever thought “JavaScript makes no sense”, this post is for you.

👉 I wrote the full breakdown here:
Understanding JavaScript Scope and Hoisting: A Beginner to Intermediate Guide

A Comparative Analysis of Alpine.js and ReactJS

Nwosa Tochukwu — Fri, 28 Jun 2024 23:34:23 +0000

Introduction

Frontend development as we all know is consistently evolving with new technologies coming up to simplify the process of building interactive and dynamic web applications.

In this article, we will be comparing two frontend technologies namely Alpine.js and Reactjs. We will get to know their unique features, strengths and use cases.

As a participant in the HNG Internship program, where Reactjs is mostly used, I will also share my thoughts on Reactjs and my aspirations for the program.

Alpine.js, what is it all about?

Alpine.js founded by Caleb Porzio in 2019 is a lightweight JavaScript framework designed to provide declarative behavior for HTML. It is often seen as a simpler alternative to more complex frameworks like Reactjs and Vue.js, offering reactive and declarative syntax without the overhead of a full-blown framework.

Key features of Alpine.js

Simplicity and Lightweight: Alpine.js is minimal, providing just enough reactivity to enhance behavior while the bundle size is small.
Declarative Syntax: It allows developers to directly add interactivity with HTML making it easy to understand and maintain.
No Build Step Required: Alpine.js can just be added through a CDN, removing the need for a build process and making it perfect for simple projects.

Recatjs, what is it all about?

Reactjs founded by Facebook in 2013 is a widely-used JavaScript library for building user interfaces (UI). It maintains component-based architecture and unidirectional data flow which have become industry standard

Key features of Reactjs

Virtual DOM: It uses virtual DOM (a mimic of the Real DOM) to optimize rendering, ensuring efficient updates and enhanced performance
Component-Based Architecture: Reactjs allows you to create reusable UI components. Promoting a maintainable and modular code base.
Rich Ecosystem: Reactjs offers a comprehensive ecosystem for developers with its vast arrays of libraries and tools.

Comparative Analysis

Performance

Alpine.js: With its minimalistic approach, Alpine.js adds very little overhead, resulting in fast initial load times and minimal performance impact.
ReactJS: The virtual DOM in ReactJS enhances performance by minimizing direct DOM manipulations, but it may carry some runtime overhead compared to simpler libraries like Alpine.js.

Learning Curve

Alpine.js: Its simplicity and declarative nature make Alpine.js easy to learn, especially for developers familiar with HTML and JavaScript.
ReactJS: Learning ReactJS requires more effort due to its extensive ecosystem and concepts like state management with hooks.

Ecosystem

Alpine.js: As a lightweight library, Alpine.js has a smaller ecosystem but can be easily integrated with other tools and frameworks.
ReactJS: ReactJS's mature and extensive ecosystem provides a wealth of libraries, tools, and community support, making it suitable for large-scale applications.

Use Cases

Alpine.js: Ideal for small to medium-sized projects where simplicity and speed are crucial. It excels at enhancing static HTML with interactivity, without a complicated setup.
ReactJS: This is ideal for large-scale applications that demand robust state management and access to a rich ecosystem of supporting tools and libraries.

My Journey with ReactJS in the HNG Internship

With the start of my HNG Internship experience, I'm happy to go deeper into ReactJS. This internship presents a unique opening to work on actual projects, sharpen my skills, and collaborate within a vibrant community of developers.

ReactJS's component-based architecture and extensive ecosystem align with my passion for building scalable and maintainable applications while maintaining ownership of my code structure. I am excited to utilize the power of ReactJS to create dynamic user interfaces and to gain hands-on experience in state management, routing, and performance optimization.

Conclusion

Both Alpine.js and ReactJS bring unique strengths to the frontend development landscape. Alpine.js's simplicity and lightweight nature make it a compelling choice for certain projects, while ReactJS's mature ecosystem and robust architecture are unparalleled for large-scale applications.

If you're eager to delve into the ever-changing landscape of front-end development, I highly suggest exploring the HNG Internship. Though it may not be ideal for absolute novices, the program offers invaluable learning experiences and a chance to showcase your abilities.

Developing a comprehensive understanding of the strengths and limitations of various front-end technologies will enable us to make informed decisions and build more effective web applications.

Tochukwu Nwosa
obere4u@gmail.com
Frontend Developer
LinkedIn

How to Perform Form Validation in React

Nwosa Tochukwu — Wed, 22 Nov 2023 21:29:32 +0000

This guide provides readers with the knowledge and skills they need to implement form validation in React. It covers all the essential aspects of form validation, from understanding the importance of validation to handling form submission.

The guide begins by explaining the importance of form validation. It then shows how to set up a form component and implement validation logic. Next, it discusses how to display validation errors and handle form submissions. Finally, it covers real-time validation, validation libraries, customizing validation logic, testing form validation, and best practices for form validation in React.

The guide is written in a step-by-step manner, making it easy to follow. It also includes code examples and screenshots to help readers understand the concepts.

The ultimate goal of this guide is to help readers create robust and user-friendly forms with accurate data validation in React applications.

I. Introduction

Importance of form validation in web development.
Benefits of using Form Validation in React.

II. Setting up the Form Component

Create a new component for the form.
Setup initial state and form fields.

III. Implementing Form Validation Logic

Define validation rules and error messages.
Handle form field changes and updates.
Perform validation on form submission.

IV. Displaying Validation Errors

Create an error state to store the validation form.
Display an error message next to the invalid form field.
Style the error message for better visuality.

V. Handling Form Submission

Prevent Form submission if there are validation errors.
Display a success message for a successful submission.
Reset Form after submission

VI. Implementing Real-Time Validation

Validate form fields as users interact or type with them.
Provide feedback on field validity. VII. Using Validation Libraries
Explore popular form validation libraries (e.g. Formik, Yup, etc.) VIII. Customizing Validation Logic
Implement custom validation functions for complex rules.
Handle unique validation scenarios specific to your application. IX. Testing Form Validation
Write unit test for form validation logic.
Test various scenarios, including valid and invalid. X. Best Practices and Tips
Keep validation logic separate from presentation components.
Provide clear instructions and error messages to users.
Consider accessibility and useability when designing forms XI. Conclusion
Recap the importance of form validation.
Encouragement to implement form validation in your

I. Introduction

Form validation is a critical part of web development. It ensures that user input is correct, complete, and meets specific requirements.
This guide will walk you through the process of performing form validation in React, so you can create reliable and user-friendly forms for your applications.

II. Setting Up Form Component

To start, we will create a new React component that will handle the form. This component will be the container for all form-related elements and logic. We will start by setting up the initial state to track form data and potential errors. We will then define the necessary form fields using React's controlled components, which will bind them to the state values.

import React, { useState } from 'react';

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: ' ',
    email: ' ',
    password: ' ',
  });

  // Event handlers for form field changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  // ...

  return (
    // JSX code for the form component
  );
};

export default MyForm;

III. Implementing Form Validation Logic

Now it is time to implement the logic for validating the form. First, define the validation rules for each form field and their corresponding error messages. For example, you might require a minimum length for a password or a valid email format for an email field.
To handle changes to the form fields, set up event handlers that will capture user input. Within these event handlers, perform the necessary validation checks based on the defined rules and update the error state accordingly.

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: ' ',
    email: ' ',
    password: ' ',
  });

  const [formErrors, setFormErrors] = useState({
    name: ' ',
    email: ' ',
    password: ' ',
  });
  // Event handlers for form field changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
    // Perform validation checks and update the error state
    if (name === 'name' && value.length < 3) {
      setFormErrors((prevState) => ({
        ...prevState,
        name: 'Name must be at least 3 characters long.',
      }));
    } else if (name === 'email' && !isValidEmail(value)) {
      setFormErrors((prevState) => ({
        ...prevState,
        email: 'Please enter a valid email address.',
      }));
    } else if (name === 'password' && value.length < 8) {
      setFormErrors((prevState) => ({
        ...prevState,
        password: 'Password must be at least 8 characters long.',
      }));
    } else {
      setFormErrors((prevState) => ({
        ...prevState,
        [name]: '', // Reset error message
      }));
    }
  };
   // other codes
};

IV. Displaying Validation Errors

To provide users with clear feedback on validation errors, create an error state within the form component. When a form field fails validation, update the error state to store the corresponding error message.
Then, display the error messages next to the respective form fields, making sure they are easily visible. Consider styling the error messages distinctively to draw attention and help users identify and correct their input.

const MyForm = () => {
  // other codes

  return (
    <form>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
        />
        {formErrors.name && <p className="error">{formErrors.name}</p>}
      </div>

      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
        {formErrors.email && <p className="error">{formErrors.email}</p>}
      </div>

      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
        />
        {formErrors.password && <p className="error">{formErrors.password}</p>}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
};

V. Handling Form Submission

When the user submits the form, prevent the submission if there are any validation errors present. Validate the form data using the defined rules and update the error state with any remaining validation failures.

If the form passes validation, display a success message to indicate a successful submission. Additionally, consider resetting the form by clearing the fields to provide a fresh entry point for the user.

const MyForm = () => {
  // other codes

  const handleSubmit = (e) => {
    e.preventDefault();

    // Final validation check
    const isFormValid = Object.values(formErrors).every((error) => error === ' ');

    if (isFormValid) {
      // Form submission logic
      console.log('Form submitted successfully!');
      // Reset the form
      setFormData({
        name: ' ',
        email: ' ',
        password: ' ',
      });
      setFormErrors({
        name: ' ',
        email: ' ',
        password: ' ',
      });
    } else {
      console.log('Form contains validation errors.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields and error messages */}
    </form>
  );
};

VI. Implementing Real-Time Validation

To enhance the user experience, you can implement real-time validation. This means checking the form fields for errors as the user types or interacts with them.

You can use event handlers to capture user input in real-time and trigger the validation logic for the respective form fields. You can then provide instant feedback to users by indicating the validity of their input, such as highlighting the field or displaying an icon indicating success or failure.

const MyForm = () => {
  // other code
  // Event handlers for form field changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
    // Perform validation checks and update error state
    if (name === 'name' && value.length < 3) {
      setFormErrors((prevState) => ({
        ...prevState,
        name: 'Name must be at least 3 characters long.',
      }));
    } else if (name === 'email' && !isValidEmail(value)) {
      setFormErrors((prevState) => ({
        ...prevState,
        email: 'Please enter a valid email address.',
      }));
    } else if (name === 'password' && value.length < 8) {
      setFormErrors((prevState) => ({
        ...prevState,
        password: 'Password must be at least 8 characters long.',
      }));
    } else {
      setFormErrors((prevState) => ({
        ...prevState,
        [name]: ' ', // Reset error message
      }));
    }
  };
  // other codes
};

VII. Using Validation Libraries

To streamline the form validation process, you can use existing validation libraries, such as Formik and Yup. These libraries provide comprehensive form validation solutions and make it easy to integrate them into your React project.

To get started, explore popular validation libraries and choose the one that best meets your needs. Install the library and integrate it into your React application by following the documentation. Then, use the library-specific methods and components to handle form validation seamlessly, reducing the amount of boilerplate code.

# Install Formik and Yup

npm install formik yup

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';


const MyForm = () => {
  // other codes  
  const initialValues = {
    name: '',
    email: '',
    password: '',
  };  
  const validationSchema = Yup.object({
    name: Yup.string().required('Name is required.'),
    email: Yup.string().email('Invalid email address.').required('Email is required.'),
    password: Yup.string().min(8, 'Password must be at least 8 characters long.').required('Password is required.'),
  });  
  const handleSubmit = (values, { resetForm }) => {
    // Form submission logic
    console.log('Form submitted successfully!', values);
    resetForm();
  };  
  return (
    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
      <Form>
        <div>
          <label htmlFor="name">Name:</label>
          <Field type="text" id="name" name="name" />
          <ErrorMessage name="name" component="div" className="error" />
        </div>        
        <div>
          <label htmlFor="email">Email:</label>
          <Field type="email" id="email" name="email" />
          <ErrorMessage name="email" component="div" className="error" />
        </div>        
        <div>
          <label htmlFor="password">Password:</label>
          <Field type="password" id="password" name="password" />
          <ErrorMessage name="password" component="div" className="error" />
        </div>        
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

VIII. Customizing Validation Logic

Although many validation scenarios can be covered by built-in rules or validation libraries, you may encounter unique requirements specific to your application. In such cases, it is essential to be able to customize the validation logic.

You can implement custom validation functions to handle complex rules that go beyond the built-in capabilities. These functions can address scenarios where multiple fields have dependencies or need to be validated together. You can adjust the validation logic to suit your specific use cases and integrate it into the existing validation flow.

const MyForm = () => {
  // other codes  
  const isPasswordSecure = (password) => {
    // Custom validation logic for password security
    return password.length >= 8 && password.match(/[a-z]/) && password.match(/[A-Z]/) && password.match(/[0-9]/);
  };
  // other codes  
  const handleInputChange = (e) => {
    // other codes
    // Validation check for password security
    if (name === 'password' && !isPasswordSecure(value)) {
      setFormErrors((prevState) => ({
        ...prevState,
        password: 'Password must be at least 8 characters long and contain at least one lowercase letter, one uppercase letter, and one digit.',
      }));
    }   
    //other codes
  };
  //other codes
};

IX. Testing Form Validation

To ensure that your form validation is reliable and accurate, it is essential to write unit tests. These tests should cover a variety of scenarios, including valid and invalid input, to ensure that all edge cases are covered.

You should verify that the error messages are displayed correctly and match the expected validation failures. You should also test the form's behavior when subjected to different validation conditions, ensuring that it handles errors appropriately and allows successful submissions when valid.

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

test('Form displays validation errors correctly', () => {
  render(<MyForm />);

  // Attempt to submit the form without entering any values
  fireEvent.click(screen.getByText('Submit'));

  // Verify that error messages are displayed
  expect(screen.getByText('Name is required.')).toBeInTheDocument();
  expect(screen.getByText('Email is required.')).toBeInTheDocument();
  expect(screen.getByText('Password is required.')).toBeInTheDocument();
});

// More tests for different scenarios and form validation rules
// other codes

X Best Practices and Tips

Keep the validation logic separate from the presentation components. This will make your code more maintainable and modular, as you can easily reuse the validation logic in different forms.
Provide clear instructions and error messages. This will help users understand what they need to do to correct their input. The error messages should be specific and helpful so that users can easily identify and fix the problem.
Consider accessibility and usability aspects. This means using ARIA attributes for screen readers and ensuring that the form can be navigated using only the keyboard.
By following these best practices, you can create effective form validation in your React applications and deliver a smooth and user-friendly experience.

XI. Conclusion

In this guide, we have explored the process of performing form validation in React. By setting up the form component, implementing validation logic, displaying error messages, handling form submissions, leveraging real-time validation, utilizing validation libraries, customizing validation logic, testing form validation, and following best practices, you can create robust and user-friendly forms in your React applications.

With this knowledge, you are well-equipped to incorporate form validation in your React projects and enhance the overall user experience.

Build a Simple Shopping List App with JavaScript

Nwosa Tochukwu — Sun, 11 Jun 2023 15:28:05 +0000

Introduction:

In this tutorial, we'll walk through the process of building a simple shopping list app using JavaScript.

This app will allow users to add items to a list, mark them as bought, and clear the entire list. It's a beginner-friendly project that will help you understand the basics of DOM manipulation and localStorage. So, let's get started!

This is the live page
https://cart-companion.netlify.app/

Prerequisites:
Basic understanding of HTML, CSS, and JavaScript.
A Text editor or integrated development environment (IDE) of your choice.

Setting Up the Project:
To begin, create a new directory for your project and set up the following files:

index.html - Copy the provided HTML code into this file.
style.css - Copy the provided CSS code into this file.
app.js - Copy the provided JavaScript code into this file.
site.webmanifest - Copy the provided site manifest code into this file.

Make sure to link the CSS, JavaScript, and Site Webmanifest files to the HTML file using appropriate <link> and <script> tags.

Explaining the HTML Structure:

Let's start by understanding the HTML structure of our shopping list app:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="style.css"
    />
    <link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link
      rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap"
      rel="stylesheet"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/favicon-16x16.png"
    />
    <link
      rel="manifest"
      href="/site.webmanifest"
    />
    <title>Cart Companion</title>
  </head>
  <body>
    <div class="container">
      <img
        src="assets/shopping-cart.png"
        alt="A cat inside a cart"
      />
      <input
        type="text"
        id="input-field"
        placeholder="Item"
      />
      <div id="action-button">
        <button id="add-button">Add to cart</button>
        <button id="clear-button">Clear cart</button>
      </div>
      <p id="empty-list">No item here... yet</p>

      <ul id="shopping-list"></ul>

      <div id="toast-container"></div>
    </div>

    <script
      src="app.js"
      type="module"
    ></script>
  </body>
</html>

In the code above, we have the basic HTML structure with a container div where our app content will reside.

Styling the App with CSS

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Rubik", sans-serif;
  background-color: #eef0f4;
  color: #432000;
  -webkit-user-select: none;
  user-select: none; /*so that users can't select anything*/
}

img {
  width: 150px;
  margin: 0 auto;
}

input {
  color: #432000;
  background-color: #dce1eb;
  border: 1px solid #000000;
  padding: 15px;
  border-radius: 8px;
  font-size: 20px;
  text-align: center;
  font-family: "Rubik", sans-serif;
  margin: 10px 0;
}

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 10px;
  flex-wrap: wrap;

  padding: 0;
}

ul li {
  flex-grow: 1;
  padding: 15px;
  border-radius: 5px;

  box-shadow: 1px 2px 3px rgba(0 0 0 /0.5);
  color: #a52a2a;
  font-weight: bold;
  text-align: center;

  cursor: pointer;
}

ul li:hover {
  background: #81061c;
  color: #ffffff;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 320px;
  margin: 30px auto;
}

/*  adding fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* adding fade-out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* smooth transition */
.transition {
  transition: all 0.3s ease;
}

/* sorting buttons container */
.sort-buttons-container {
  margin: 20px 0;
}

#empty-list {
  display: none;
  text-align: center;
  font-style: italic;
  color: gray;
}

/* toast container */
#toast-container {
  position: fixed;
  z-index: 9999;
}

/*  toast message */
.toast {
  display: inline-block;
  padding: 12px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
}

/* toast message animation */
.toast.show {
  opacity: 1;
}

/* bought item */
.bought {
  opacity: 0.5;
  text-decoration: line-through;
}

#action-button {
  display: flex;
  padding-inline: 0.3em;
}

/* add / clear button style */
#add-button,
#clear-button {
  color: #fdfdfd;
  background-color: #ac485a;
  border: 0;
  padding: 15px;
  border-radius: 8px;
  font-size: 20px;
  text-align: center;
  font-family: "Rubik", sans-serif;
  cursor: pointer;
}

#clear-button {
  margin-left: auto;
}

#add-button:hover {
  background-color: #8a2b3d;
  font-weight: bold;
}

#clear-button:hover {
  background: #a50303;
  font-weight: bold;
}

Feel free to customize the styles according to your preferences. You can change the colors, fonts, and layout to match your design aesthetic.

Implementing the JavaScript Functionality

Now comes the exciting part – implementing the JavaScript functionality for our shopping list app. Here's the JavaScript code:

//selectors
const addButtonEl = document.querySelector("#add-button");
const emptyListMsg = document.querySelector("#empty-list");
const inputFieldEl = document.querySelector("#input-field");
const clearListButton = document.querySelector("#clear-button");
const toastContainer = document.querySelector("#toast-container");
let shoppingListEl = document.querySelector("#shopping-list");

let isPageReload = false;

addButtonEl.addEventListener("click", function () {
  let inputValue = inputFieldEl.value;

  if (inputValue !== "") {
    addItemToShoppingList(inputValue); // Add item to shopping list
    clearInputField();
  }
});

// Load initial shopping list from localStorage
loadShoppingList();

function loadShoppingList() {
  isPageReload = true;
  const shoppingListFromLocalStorage = localStorage.getItem("shoppingList");
  if (shoppingListFromLocalStorage) {
    let itemsArr = JSON.parse(shoppingListFromLocalStorage);
    clearAddToShoppingList();

    if (itemsArr.length > 0) {
      for (let i = 0; i < itemsArr.length; i++) {
        let currentItem = itemsArr[i].value; // Access the value property of the item object
        addItemToShoppingList(currentItem);
      }
    }
  }

  isPageReload = false;
  clearInputField(); // Clear the input field on page load
  updateEmptyListState();
}

function clearAddToShoppingList() {
  shoppingListEl.innerHTML = "";
  updateEmptyListState();
  localStorage.removeItem("shoppingList");
}

function clearInputField() {
  inputFieldEl.value = "";
}

//Add item to shopping list
function addItemToShoppingList(itemValue) {
  let itemId = Date.now().toString(); // Generate a unique ID for the item

  let item = {
    id: itemId,
    value: itemValue,
  };

  let itemsArr = [];

  if (localStorage.getItem("shoppingList")) {
    itemsArr = JSON.parse(localStorage.getItem("shoppingList"));
  }

  // Check if the item already exists in the shopping list
  const existingItem = itemsArr.some(
    (existingItem) => existingItem.value === itemValue
  );

  if (existingItem) {
    showToast("Item already exists!", true); // Display a toast message indicating the item already exists
    return; // Exit the function to avoid adding the item again
  }

  itemsArr.push(item);
  localStorage.setItem("shoppingList", JSON.stringify(itemsArr));

  clearInputField(); // Clear the input field

  if (!isPageReload) {
    showToast("Item added successfully");
  }

  createItemElement(item);
  updateEmptyListState(); // Update the empty list state
}

//Display the shopping list
function createItemElement(item) {
  let itemEl = document.createElement("li");
  itemEl.textContent = item.value;
  itemEl.classList.add("transition"); // Add transition class for smooth effect

  itemEl.addEventListener("dblclick", function () {
    removeItemFromShoppingList(item.id);
    itemEl.remove();
    showToast("Item removed successfully!");
    updateEmptyListState(); // Update the empty list state
  });

  // Add fade-in animation when adding item
  setTimeout(() => {
    itemEl.classList.add("fadeIn");
  }, 0); // Add the fade-in class immediately after creating the element

  shoppingListEl.append(itemEl);
}

//Remove item from the shopping list
function removeItemFromShoppingList(itemId) {
  let itemsArr = [];

  if (localStorage.getItem("shoppingList")) {
    itemsArr = JSON.parse(localStorage.getItem("shoppingList"));
  }

  itemsArr = itemsArr.filter((item) => item.id !== itemId);
  localStorage.setItem("shoppingList", JSON.stringify(itemsArr));
  // Update the empty list state
  updateEmptyListState();
}

// show toast message
function showToast(message, isError = false) {
  //Array.from() search for an existing toast message with the same content
  const existingToast = Array.from(toastContainer.children).find(
    (toast) => toast.textContent === message
  );
  if (existingToast) {
    return;
  }

  const toast = document.createElement("div");
  toast.className = `toast ${isError ? " error" : ""}`;
  toast.textContent = message;

  toastContainer.appendChild(toast);

  toast.classList.add("show");

  setTimeout(function () {
    toast.classList.remove("show");
    setTimeout(function () {
      toast.remove();
    }, 300); // Remove the toast from the DOM after the animation duration
  }, 500); // Delay the toast display to ensure smooth animation
}

// mark an item as bought
function markItemAsBought(itemEl) {
  if (!itemEl.classList.contains("bought")) {
    itemEl.classList.add("bought");
  }
}

// Event listener for clicking on an item
shoppingListEl.addEventListener("click", function (event) {
  const clickedItem = event.target;

  if (clickedItem.tagName === "LI") {
    markItemAsBought(clickedItem);
  }
});

// Update the empty list state
function updateEmptyListState() {
  const shoppingListFromLocalStorage = localStorage.getItem("shoppingList");
  const itemsArr = shoppingListFromLocalStorage
    ? JSON.parse(shoppingListFromLocalStorage)
    : null;

  if (itemsArr?.length > 0) {
    emptyListMsg.style.display = "none";
  } else {
    emptyListMsg.style.display = "block";
  }
}

clearListButton.addEventListener("click", function () {
  localStorage.removeItem("shoppingList");
  clearAddToShoppingList();
  showToast("Cart cleared successfully!");
  updateEmptyListState();
});

The JavaScript code is responsible for handling user interactions, managing the shopping list data, and updating the user interface accordingly. We'll break down the code into sections and explain each part in detail.

Adding Items to the Shopping List: One of the essential features of our app is the ability to add items to the shopping list. Let's start by adding the necessary code:

//Add item to shopping list
function addItemToShoppingList(itemValue) {
  let itemId = Date.now().toString(); // Generate a unique ID for the item

  let item = {
    id: itemId,
    value: itemValue,
  };

  let itemsArr = [];

  if (localStorage.getItem("shoppingList")) {
    itemsArr = JSON.parse(localStorage.getItem("shoppingList"));
  }

  // Check if the item already exists in the shopping list
  const existingItem = itemsArr.some(
    (existingItem) => existingItem.value === itemValue
  );

  if (existingItem) {
    showToast("Item already exists!", true); // Display a toast message indicating the item already exists
    return; // Exit the function to avoid adding the item again
  }

  itemsArr.push(item);
  localStorage.setItem("shoppingList", JSON.stringify(itemsArr));

  clearInputField(); // Clear the input field

  if (!isPageReload) {
    showToast("Item added successfully");
  }

  createItemElement(item);
  updateEmptyListState(); // Update the empty list state
}

The addItemToShoppingList function takes an itemValue as a parameter and adds it to the shopping list. It also handles checking for duplicate items and displays a toast message to notify the user.

Displaying the Shopping List: Next, let's implement the code to display the shopping list on the screen:

function createItemElement(item) {
  let itemEl = document.createElement("li");
  itemEl.textContent = item.value;
  itemEl.classList.add("transition"); // Add transition class for smooth effect

  itemEl.addEventListener("dblclick", function () {
    removeItemFromShoppingList(item.id);
    itemEl.remove();
    showToast("Item removed successfully!");
    updateEmptyListState(); // Update the empty list state
  });

  // Add fade-in animation when adding item
  setTimeout(() => {
    itemEl.classList.add("fadeIn");
  }, 0); // Add the fade-in class immediately after creating the element

  shoppingListEl.append(itemEl);
}

The createItemElement function creates a new list item element for each item in the shopping list and appends it to the DOM. It also handles the removal of items when double-clicked and updates the empty list state.

Removing Items from the Shopping List: Now, let's add the code to remove items from the shopping list:

//Remove item from the shopping list
function removeItemFromShoppingList(itemId) {
  let itemsArr = [];

  if (localStorage.getItem("shoppingList")) {
    itemsArr = JSON.parse(localStorage.getItem("shoppingList"));
  }

  itemsArr = itemsArr.filter((item) => item.id !== itemId);
  localStorage.setItem("shoppingList", JSON.stringify(itemsArr));
  // Update the empty list state
  updateEmptyListState();
}

The removeItemFromShoppingList function removes the item with the specified ID from the shopping list. It also updates the empty list state and displays a toast message to inform the user.

Updating the Empty List State: To provide a better user experience, let's add code to update the empty list state based on the presence of items in the shopping list:

function updateEmptyListState() {
  const shoppingListFromLocalStorage = localStorage.getItem("shoppingList");
  const itemsArr = shoppingListFromLocalStorage
    ? JSON.parse(shoppingListFromLocalStorage)
    : null;

  if (itemsArr?.length > 0) {
    emptyListMsg.style.display = "none";
  } else {
    emptyListMsg.style.display = "block";
  }
}

The updateEmptyListState function checks if the shopping list is empty and displays a message accordingly.

Creating the Site Manifest

Let's create the site manifest file (site.webmanifest) and define the necessary configuration. Here's the code for the site.webmanifest file:

{
  "name": "Cart Companion",
  "short_name": "CartCom",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#EEF0F4",
  "background_color": "#EEF0F9",
  "display": "standalone"
}

In the manifest file, we've specified the app's name, short name, icons for different devices, theme color, background color, and display mode. Adjust the icon URLs, theme colors, and other properties as needed to match your app's design. This will help us add the site to our phone home screen.

Conclusion

Congratulations! You've successfully built a simple shopping list app using HTML, CSS, and JavaScript. Throughout this tutorial, we covered the basics of web development, including HTML structure, CSS styling, and JavaScript functionality. You learned how to add and remove items from the list, display them on the screen, and persist the data using the browser's localStorage.

Feel free to enhance this app by adding more features such as item quantities, editing functionality, or even integrating it with a backend server.

I hope you enjoyed this beginner-friendly tutorial and gained valuable insights into web development. Start practicing and exploring new ideas to strengthen your skills!

Get Hands-On
Ready to explore and enhance your web development skills further? Try adding new features to the shopping list app or build your own projects. Experiment with different CSS styles, implement search functionality or create a responsive design. The possibilities are endless!

Remember, practice is the key to mastery. So keep coding, exploring, and building amazing web applications.

Happy coding!

Mastering the Rules of React Hooks

Nwosa Tochukwu — Wed, 31 May 2023 15:40:00 +0000

Introduction:

Explore the world of React Hooks where functional components are at the forefront and complex state management is made easy. This comprehensive guide will delve into the rules of React Hooks, revealing their potential and teaching you how to utilize them effectively. Join us on this journey as we uncover the key principles of React Hooks and witness their impact on the development of React applications.

Section 1: Understanding the Essence of React Hooks

React Hooks have transformed the way we handle state and lifecycle management in functional components. Before we delve into the rules, let's grasp the essence of React Hooks. Hooks are functions that enable us to use state and other React features in functional components. They provide a more concise and intuitive way to handle complex logic, eliminating the need for class components. By understanding the core principles of React Hooks, we lay the foundation for mastering their usage.

Section 2: The Rules of React Hooks

In order to fully utilize the capabilities of React Hooks, it's important to adhere to a set of guidelines that dictate their usage. These guidelines are in place to ensure appropriate state management, prevent performance problems, and maintain consistent code. Let's delve into the fundamental rules of React Hooks:

Rule of Hooks: Hooks must be used only at the top level of functional components.

Always call React hooks before the return keyword of React functional components

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // logic here
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}

Rule of Hooks: Only call hooks from inside React functional components

import React, { useState, useEffect } from 'react';

const [name, setName] = useState("")

export default function myComponent() {
return (
  <div>
    // code here
  </div>
 )
}

Bad practice

import React, { useState, useEffect } from 'react';


export default function myComponent() {

const [name, setName] = useState("")

return (
  <div>
    // code here
  </div>
 )
}

Good practice

Dependency Array: Properly managing dependencies with useEffect to avoid unnecessary re-renders.

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data here
    // ...

    return () => {
      // Cleanup logic here
    };
  }, []); // Empty dependency array to run effect only once

  return <div>{data}</div>;
}

The code snippet represents a functional component using React Hooks. It declares a state variable called data using the useState hook, initialized with a value of null. The useEffect hook is used to perform side effects, such as fetching data, within the component. In this example, the effect runs only once when the component mounts because the dependency array is empty ([]). The code for fetching data and any cleanup logic can be placed inside the effect. The fetched data is stored in the data state, and it is rendered within a <div> element.

Custom Hooks: Extracting reusable logic into custom hooks for cleaner and more maintainable code

import React, { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
        setIsLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, isLoading };
}

function MyComponent() {
  const { data, isLoading } = useFetchData('https://api.example.com/data');

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

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <div>No data available</div>
      )}
    </div>
  );
}

This code example showcases a custom hook named useFetchData, which contains the logic for obtaining data from an API. The hook accepts a URL as a parameter and provides the retrieved data and a loading state as output. The useEffect hook is used to initiate the data retrieval process when there is a change in the URL. This approach guarantees that the data is obtained correctly and that the component is updated in response.

useState: Handling state mutations correctly and leveraging the functional updates pattern.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}

The code snippet represents a functional component using React Hooks. It declares a state variable called count using the useState hook, initialized with a value of 0. The increment function is used to update the count state by incrementing its previous value. When the button is clicked, the increment function is called, updating the state and triggering a re-render. The current value of count is displayed within a <p> tag.

useEffect: Synchronizing side effects with component lifecycle events and cleanup.

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data here
    // ...

    return () => {
      // Cleanup logic here
    };
  }, []);

  return <div>{data}</div>;
}

The code snippet represents a functional component using React Hooks. It uses the useState hook to declare a state variable called data, initialized with null. The useEffect hook is used to perform side effects, such as data fetching, and it runs only once due to an empty dependency array. The fetched data is stored in the data state variable. Finally, the component renders the data variable within a <div>.

Error Handling: Properly handling errors within useEffect and useState.

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      }
    };

    fetchData();
  }, []);

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

  return <div>{data}</div>;
}

The code snippet uses React Hooks, specifically useState and useEffect, to create a functional component called MyComponent. The component fetches data from an API endpoint using the fetch function and updates the state variables data and error accordingly. If an error occurs during the data fetching process, it is stored in the error state variable. The component renders the fetched data if it exists or displays an error message if an error occurred.

Section 3: Embracing the Power of React Hooks

By adhering to the rules of React Hooks, we unlock their full potential and empower ourselves to write clean, efficient, and maintainable code. With the ability to handle state, lifecycle events, and side effects seamlessly, React Hooks revolutionize the way we approach React development. By embracing React Hooks, we unleash the true power of functional components and elevate our React applications to new heights.

Conclusion:

Congratulations! You have now mastered the rules of React Hooks, paving the way for more effective and enjoyable React development. Remember to always follow the rules of Hooks to ensure proper state management, optimize performance, and maintain code consistency. As you continue your journey with React, embrace the power of Hooks and explore the vast possibilities they offer. Happy coding, and may your React applications thrive with the magic of React Hooks!

Simplifying React Props Drilling: A Beginner's Guide

Nwosa Tochukwu — Wed, 17 May 2023 10:01:07 +0000

Introduction

If you're a React developer, you've probably come across the term props drilling. It's a common pattern used to pass data down from a parent component to a child component in React. While it's a powerful technique, it can also be confusing and overwhelming for beginners.

In this article, we'll break down props drilling into simple, easy-to-understand terms, and provide you with tips and tricks to simplify your code.

Section 1: What is Prop drilling?

In React, components can pass data to each other through props. Props drilling occurs when a component needs to pass data down to a child component that is not an immediate descendant.

For example, let's say you have a component called "Grandparent" that needs to pass some data to a component called "Grandchild." However, the data needs to go through a component called "Parent" first. In this scenario, the data would need to be passed from Grandparent to Parent, and then from Parent to Grandchild. This is props drilling.

Section 2: The Problem with Props Drilling

Props drilling can quickly become cumbersome, especially if you have multiple levels of nesting. Passing data through multiple components can lead to "prop hell," where you end up with a long chain of props that need to be passed down.

Additionally, props drilling can make your code more brittle and harder to maintain. If you need to add a new component in the middle of your chain, you'll need to update all the components that come after it to pass the new prop down.

Section 3: Simplifying Props Drilling

So, how can we simplify props drilling? Here are a few tips

Using Context

Context is a powerful feature in React that allows you to pass data down the component tree without explicitly passing props. Context provides a way to share data between components without having to pass props manually at every level.

Here's an example of using context to simplify props drilling:

// Create a context
const MyContext = React.createContext();

// Parent component providing data
function ParentComponent() {
  const data = "Hello from Parent";

  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// Child component consuming data
function ChildComponent() {
  return (
    <MyContext.Consumer>
      {(data) => <p>{data}</p>}
    </MyContext.Consumer>
  );
}

In this example, the ParentComponent provides the data through MyContext.Provider, and the ChildComponent consume it using the MyContext.Consumer. This way, you can access the data in the ChildComponent without manually passing it through intermediate components.

Leveraging Redux: Redux, a popular state management library for React, can be a game-changer when dealing with the complex data flow. It provides a centralized store that holds your application's state, eliminating the need for props drilling. With Redux, you can access the required data directly from the store, making your code cleaner and more maintainable.

Here's an example on how to use Redux to simplify props drilling

// Define Redux actions and reducers

// Parent component dispatching an action
function ParentComponent() {
  const data = "Hello from Parent";
  dispatch(setData(data));
  // ...

  return <ChildComponent />;
}

// Child component accessing data from the Redux store
function ChildComponent() {
  const data = useSelector((state) => state.data);

  return <p>{data}</p>;
}

In the example above, the ParentComponent dispatches an action to set the data in the Redux store, and the ChildComponent accesses the data using the useSelector hook. Redux handles the data flow, simplifying the props drilling process.

Harnessing Higher-Order Components (HOCs) Higher-Order Components (HOCs) are functions that take a component and return an enhanced version of it with additional capabilities. HOCs can be employed to inject props into components at any level of the component tree, thereby reducing the need for manual props drilling. By abstracting away the repetitive prop parsing logic, HOCs promote code reusability and enhance readability.

Here's an example of using an HOC to simplify props drilling:

// Define the HOC
function withData(Component) {
  return function WithData(props) {
    const data = "Hello from HOC";

    return <Component data={data} {...props} />;
  };
}

// Child component enhanced with the HOC
function ChildComponent(props) {
  return <p>{props.data}</p>;
}

// Usage of the enhanced component
const EnhancedChildComponent = withData(ChildComponent);

// Render the enhanced component
function App() {
  return <EnhancedChildComponent />;
}

In this example, the withData HOC injects the data prop into the ChildComponent, simplifying the need to manually pass it through the component hierarchy.

Choosing the Right Approach When faced with the decision of which technique to use, consider the specific requirements of your project. If you have a small-scale application with simple data-sharing needs, Context might be the most straightforward option. For larger applications with more complex state management requirements, Redux is an excellent choice. HOCs can be utilized when you need fine-grained control over props injection.

Conclusion

Props drilling is a vital concept in React development, enabling the passage of data from a parent component to any level of child components. By understanding the challenges associated with props drilling and implementing techniques like Context, Redux, or HOCs, you can simplify your code and enhance maintainability. Remember, the goal is to make your code concise, readable, and efficient. So, choose the approach that best aligns with your project's needs, and embrace the power of props drilling in your React applications.

Thank you for reading...

JavaScript topics to understand before moving to JavaScript libraies

Nwosa Tochukwu — Tue, 16 May 2023 19:27:15 +0000

Before diving into JavaScript libraries, it's important for beginners to have a solid understanding of the core JavaScript concepts and fundamentals. Here are some key topics you should familiarize yourself with:

1) Variables and Data Types:

Understand how to declare variables, work with different data types (strings, numbers, booleans), and perform basic operations.

2) Functions:

Learn how to create and use functions, including parameters, return values, and function expressions.

3) Control Flow:

Understand conditional statements (if/else, switch), loops (for, while), and how to control the flow of your program.

4) Arrays:

Familiarize yourself with arrays, their properties, and methods for manipulation (e.g., push, pop, splice).

5) Objects:

Understand object-oriented programming concepts in JavaScript, including creating objects, accessing properties, and using methods.

6) DOM Manipulation:

Learn how to interact with the Document Object Model (DOM) to manipulate HTML elements, modify content, and handle events.

7) Event Handling:

Understand how to handle user interactions and respond to events triggered by users or the browser.

8) Asynchronous JavaScript:

Explore asynchronous programming concepts such as callbacks, promises, and async/await to work with asynchronous tasks, such as making API requests.

9) Error Handling:

Learn how to handle and manage errors in JavaScript using try/catch blocks and understanding common error types.

10) Modules:

Familiarize yourself with JavaScript modules, which allow you to organize and reuse code, and understand how to import/export modules.

Conclusion

By gaining a strong foundation in these core JavaScript concepts, you'll be better prepared to grasp JavaScript libraries, as they often build upon these fundamentals.

Remember to practice coding and work on small projects to reinforce your understanding.

Unleashing the Power of Async() and Await: Revolutionizing Asynchronous JavaScript

Nwosa Tochukwu — Sun, 14 May 2023 14:13:47 +0000

Introduction:

Welcome, JavaScript enthusiasts! Prepare to embark on a thrilling journey into the realm of asynchronous code, where we unravel the secrets of the captivating duo: async and await. In this exhilarating primer, we will explore how these powerful keywords transform the way we write asynchronous JavaScript, making our code more elegant, readable, and efficient. So fasten your seatbelts and get ready to unlock the true potential of async and await!

Section 1: Decoding the Enigma: Understanding async and await

In the vast realm of JavaScript, asynchronous code reigns supreme. But fear not, for async and await are here to rescue us from the complexities of callbacks and Promises. These ingenious keywords allow us to create asynchronous functions that seamlessly handle background operations without blocking the main thread. The result? A smoother and more responsive user experience. Let's dive deeper into the magical world of async and await.

Section 2: The Dynamic Duo: `async` and `await`

Enter the async keyword, our gateway to the asynchronous world. By using async before a function declaration, we signal that it will execute asynchronously, allowing it to return a Promise. This clever addition sets the stage for the show's true star – await.

await holds the power to halt the execution of an async function until a Promise is resolved. Picture a conductor pausing a symphony, allowing other musicians to catch up. With await, we gracefully synchronize our code, making it read like a symphony of logic. Gone are the days of convoluted promise chains and callback pyramids. Let's see async and await in action!

Section 3: Elevating Asynchronous Operations: A Practical Example

Imagine fetching a list of users from the GitHub API. Traditionally, we would wrestle with promises and a complex syntax. But fear not, for async and await come to the rescue:

async function getUsers() {
  const response = await fetch('https://api.github.com/users');
  const users = await response.json();
  return users;
}

const users = await getUsers();

Behold the elegance! In just a few lines of code, we fetch data from the API, gracefully handle the promise resolution, and return an array of users. The power of async and await lies in their ability to simplify complex asynchronous operations into digestible, readable code.

Section 4: Unleash the Potential: Embrace `async` and `await`

With the advent of async and await, writing asynchronous JavaScript has become an art form. It empowers developers to create clean, concise, and maintainable code, paving the way for enhanced collaboration and accelerated development. If you haven't explored the realm of async and await yet, now is the time! Unleash the potential of your code and revolutionize your asynchronous JavaScript.

Conclusion:

As we bid farewell to the land of callbacks and bidirectional promises, we embrace the power of async and await. These remarkable keywords have ushered in a new era of asynchronous JavaScript, transforming complex code into an elegant symphony of efficiency. So, dear developers, immerse yourself in the world of async and await, and let your code dance to the rhythm of simplicity and readability. Share your experiences and insights in the comments below – let's build a vibrant community of async aficionados!

Happy Coding.....

Learn to use useState and useEffect hooks in React to create dynamic user interfaces

Nwosa Tochukwu — Fri, 05 May 2023 13:33:39 +0000

React is a widely used JavaScript library for building user interfaces, with useState and useEffect being two of its most important features

What is useState?

Imagine you have a toy box with many toys in it. Sometimes you want to play with a specific toy, so you take it out of the box and play with it. When you're done playing with it, you put it back in the box. This is how useState works in React!
**useState **is a way to store and update values (like toys in a toy box) within a component. You can use it to keep track of things like whether a button has been clicked or the value of a form input.
Here's an example:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

This example uses useState in React to keep track of the number of times a button has been clicked. We start the count at 0 by passing it as an argument to useState, and we update the count using the setCount function whenever the button is clicked.

What is useEffect?

In React, useEffect is like watering a plant every day to keep it healthy.
useEffect is a hook that enables us to execute side effects in a component. Side effects include tasks that interact with external systems, such as fetching data from an API, updating the document title, or setting up event listeners. With "useEffect", you can guarantee that your side effects are executed at the appropriate times during the component's lifecycle, such as after it has mounted or updated. This makes it a valuable tool for managing state and behavior in React applications.
Here's an example:

import { useState, useEffect } from 'react';

function Greeting({ name }) {
  const [message, setMessage] = useState('Loading...');

  useEffect(() => {
    fetch(`https://api.example.com/greeting?name=${name}`)
      .then(response => response.json())
      .then(data => setMessage(data.message));
  }, [name]);

  return <p>{message}</p>;
}

We're using useEffect to fetch a greeting from an API and update the message state whenever the name prop changes. We pass an array containing the name prop to useEffect, which tells React to re-run the effect whenever the prop changes.

Conclusion

useState and useEffect are important features in React. useState stores and updates component values, while useEffect runs side effects. Together, they create dynamic and interactive user interfaces that respond to user input and update automatically.

I hope this helped you understand useState and useEffect in React!

My name is Tochukwu Nwosa, a junior frontend developer with React

A Fun Introduction to padStart() in JavaScript: Padding Your Strings Like a Pro

Nwosa Tochukwu — Mon, 01 May 2023 16:27:28 +0000

In JavaScript strings are a very important part of the code. Indeed, you can say they're the engines of a program. Sometimes, however, it's necessary to check that your strings contain a specified number of characters even if this requires filling in the first string with several zeroes or different characters. This is where padStart() comes into play. Let's have some fun in this article, learning how to use padStart(). Make our string look exactly the way we want it!

To begin, padStart() is a built-in method in JavaScript that adds characters to the beginning of a string until it reaches a desired length. When you need to format numbers, make user IDs, or work with any kind of string that requires a certain number of characters, this can be helpful. Here an example

padStart() is used to add five zeros to the beginning of the string "hello" in the code above. The first parameter of padStart() specifies the total length of the new string, and the second parameter specifies the character to add to the string until it reaches the desired length.

How do we use padStart()?

Let's look at some examples of how padStart() can be used in our code now that we know what it does

Formatting numbers Let's say we want to show a number as a string with a certain number of digits. Until the string reaches the desired length, we can use padStart() to add zeros to its beginning:

In the above example, we, first of all, use toString() to convert the number 42 to a string, and then use padStart() to add three zeroes to the beginning of the string so that it has a total of five digits

Creating user IDs Let's say we want to give each new user a unique user ID when we create a user registration form for a website. Using padStart(), we can ensure that each user ID contains a predetermined number of digits In the above example, we first set userId to 1 and then use toString() and padStart() to add three zeroes to the beginning of the string so that it has a total of four digits. We then set userId to 1234 and use padStart() again to make sure it has a total of four digits, but this time no zeroes are added because the string already has four digits.

In conclusion, the JavaScript method padStart() can be used to format strings and ensure that they contain a predetermined number of characters. We've seen a few ways to use padStart() in our code, but there is no end of possibilities. Consider using padStart() the next time you work with strings in JavaScript to ensure that they are formatted correctly.

We talked about padStart() and how it works in this article. We discovered that the method padStart() lets us add leading characters to a string until it reaches a predetermined length. We also saw some examples of how to use padStart() with template literals and format strings with leading zeros.

Here's a rundown of what we talked about:

We can add leading characters to a string until it reaches a certain length using the padStart() method.
The total length we want the string to have is the first argument passed to padStart().
The character we want to use as padding is the second argument of padStart(). It is, by default, a space.
When working with dates and times, we can format strings with leading zeros using padStart(). PadStart() can also be used to format strings with dynamic values using template literals. In general, padStart() is a powerful and adaptable tool that can assist us in formatting strings in several different ways. We can make our code easier to read and maintain by utilizing padStart(), which is always a good thing.

Did you find this article on padStart() informative? If so, don't be shy - give it a like and drop a comment! Your feedback means the world to us and helps us to keep delivering great content

My name is Tochukwu Nwosa and I'm a Junior Front-end Dev (React)

DOMContentLoaded vs window.onload

Nwosa Tochukwu — Mon, 01 May 2023 13:32:21 +0000

You've been waiting for a friend to come and play, but they haven't come yet, you'd probably be bored and sad, wouldn't you?
That's a little like the way it works when you load your website. Your computer will have to open all the pictures, words, and videos that make up this website when you visit a Web site. It may take some time to put everything in order, especially if the site is large.
That is exactly what DOMContentLoaded and window.onload wants to avoid by making sure that everything on the website is loaded properly so that visitors don't have to wait for a long time to see the website.

window.onload is like a signal that tells the website that everything has finished loading. It's like your friend finally showing up to play after you've been waiting for a long time.

Here's an example of how window.onload works in code:

window.onload = function() {
  // This code will only run when the page has finished loading
  alert('The website is fully loaded!');
};

The DOMContent Loaded is a little bit of a different. It's like a signal that tells the website that the basic structure has been loaded, but some of the pictures and videos may still be loading. It feels like your friend's come, but so far they haven't brought all the toys.
This is a code example of how DOMContentLoaded works.

document.addEventListener('DOMContentLoaded', function() {
  // This code runs when the basic structure of the page has loaded
  alert('The website structure has loaded!');
});

The basic contents that need to be loaded before the DOMContentLoaded event is fired are the elements that are required for the page layout and structure to be visible and functional to the user, while the other contents such as images and videos are usually considered secondary contents that can be loaded later without affecting the functionality of the page.

By using these events, website developers can make sure that the website loads as quickly as possible, and that visitors can start interacting with the website as soon as the basic structure is loaded. This helps to provide a better user experience and ensures that visitors don't get bored or irritated while waiting for the website to load.

In summary, window.onload and DOMContentLoaded are signals that tell the website when everything is finished loading, or when the basic structure of the website is loaded. It's like you're waiting for a friend to show up to play, and you're happy when he finally shows up.

If you found this article helpful or informative, I would love to hear from you! Please feel free to leave a comment or like the post to let me know your thoughts. Your feedback is greatly appreciated. Thank you for reading!

My name is Nwosa Tochukwu and I'm a Junior Front-end developer (REACTJS)

Forem: Nwosa Tochukwu

Why Nigeria's Tech Communities Deserve Better Infrastructure

My own experience

What we are missing

The gap nobody was filling

So I built TechLinkUp

What I really want to build

This is bigger than one platform

If you are building in Nigeria, I want to hear from you

Hoisted and Confused? Let’s Decode JavaScript’s Scope Magic

A Comparative Analysis of Alpine.js and ReactJS

Introduction

Alpine.js, what is it all about?

Key features of Alpine.js

Recatjs, what is it all about?

Key features of Reactjs

Comparative Analysis

Performance

Learning Curve

Ecosystem

Use Cases

My Journey with ReactJS in the HNG Internship

Conclusion

How to Perform Form Validation in React

Table of Contents

I. Introduction

II. Setting Up Form Component

III. Implementing Form Validation Logic

IV. Displaying Validation Errors

V. Handling Form Submission

VI. Implementing Real-Time Validation

VII. Using Validation Libraries

VIII. Customizing Validation Logic

IX. Testing Form Validation

X Best Practices and Tips

XI. Conclusion

Build a Simple Shopping List App with JavaScript

Introduction:

Explaining the HTML Structure:

Styling the App with CSS

Implementing the JavaScript Functionality

Creating the Site Manifest

Conclusion

Mastering the Rules of React Hooks

Introduction:

Section 1: Understanding the Essence of React Hooks

Section 2: The Rules of React Hooks

Section 3: Embracing the Power of React Hooks

Conclusion:

Simplifying React Props Drilling: A Beginner's Guide

Introduction

Section 1: What is Prop drilling?

Section 2: The Problem with Props Drilling

Section 3: Simplifying Props Drilling

Conclusion

JavaScript topics to understand before moving to JavaScript libraies

1) Variables and Data Types:

2) Functions:

3) Control Flow:

4) Arrays:

5) Objects:

6) DOM Manipulation:

7) Event Handling:

8) Asynchronous JavaScript:

9) Error Handling:

10) Modules:

Conclusion

Unleashing the Power of Async() and Await: Revolutionizing Asynchronous JavaScript

Introduction:

Section 1: Decoding the Enigma: Understanding async and await

Section 2: The Dynamic Duo: async and await

Section 3: Elevating Asynchronous Operations: A Practical Example

Section 4: Unleash the Potential: Embrace async and await

Conclusion:

Learn to use useState and useEffect hooks in React to create dynamic user interfaces

What is useState?

What is useEffect?

Conclusion

A Fun Introduction to padStart() in JavaScript: Padding Your Strings Like a Pro

How do we use padStart()?

Section 2: The Dynamic Duo: `async` and `await`

Section 4: Unleash the Potential: Embrace `async` and `await`