Forem: Opajobi Oyegoke

Why my startup failed…

Opajobi Oyegoke — Tue, 24 Jun 2025 21:20:54 +0000

On a boring Thursday afternoon, I sprang up from my couch when a bright idea struck my mind. I jolted to get my journal and pen, and I started to write. In a minute, I was sitting by my workspace, or rather, I carried my laptop on my lap (cos I don’t have a workspace) and engaged ChatGPT to validate the thoughts in my head. This came off the back of having concluded learning to use the MERN stack, so the first step I took was to ensure it could be built using this stack, and yes, it could be. I got to work, planned out the architecture and features of the app, and the satisfaction that came with being the founder of a thriving startup fueled my drive to make sure it saw the light of day.

The backend plane took off almost immediately. I wrote the schemas and dealt with authentication logic, which was hassle-free. I took on building endpoints to create a game, fetch existing games, join existing games, and update profiles without breaking a sweat—but that’d be a lie because what’s a coding session without silly bugs that cost hours of debugging? In no time, my backend was completed.

In retrospect, if I were to start over, I’m not sure if I would still stick with using MongoDB as the backend or rather use a backend-as-a-service. This is because I struggled to incorporate Google Sign-In and Apple Sign-In logic in my MERN app, and you’ll agree with me that this proves to give a better user experience, giving users the luxury of signing up with their Google or Apple accounts.

The camel that would go on to break the camel’s back was my choice of frontend framework. I had no doubts going with React Native since I was obviously building an app, but little did I know this would greatly impact how my startup performed.

Another major challenge I cannot overstate is how I struggled with design. Remember, it’s a solo project, and I neither had the budget to employ a designer nor the luxury of having one on my team. So, where did I go from here? I took my journal again and started wireframing. After a lot of crumpled paper thrown into my bin in a fashion that Steph Curry would be proud of, I came up with a decent UI. Whether the UX is great remains unclear.

So, I started building my frontend, built the onboarding and authentication pages in a minute, and hooked my backend, which worked perfectly. I proceeded with the homepage and other tabs. I still was working around what illustrations and colors I would use, and trust me, this was a huge headache. To not bore you, the app came together after a while, fully functional, at least enough to pass as an MVP.

I was so excited—this was going to fly, I was going to get a lot of users in no time. It solved a real problem, and it couldn’t fail. These were words that I couldn’t get out of my head. Oh, I was going to take off with this app—these were indeed the stuff that dreams are made of.

I didn’t pay attention to the marketing side of things because I was strong-willed that if it addressed a problem and had good UX, it couldn’t fail. Little did I know—and I partly can’t blame myself because I was working on a stringent budget, if there was one.

My MVP was ready, and this is where the challenge came in: how do I share my MVP with potential users when the app isn’t hosted on the App Store or Play Store? I weighed my options. I definitely didn’t have the funding to host on either of these platforms. I was puzzled, and I proceeded to do what I think was the gravest mistake I could make—I made a screen recording of the app on my mobile just to show users the functionality.

I posted it on X-https://x.com/oyegoke19/status/1895226381887512891?s=46 ,and I expected way more traction, but I couldn’t complain about the 8,000 views I got. The way I thought this would work was that I was supposed to use this traction to get users to test my MVP. However, I didn’t have a platform to share my app. The only way I thought of to address this issue was to switch from a native app to a web app, which would require converting my React Native app to a React web app. This took me more time than expected, and by the time it was ready, I’d lost so much traction—the 8,000 people who viewed my initial post were no longer there to test my app.

I was dejected. I didn’t know what to do, and to this day, I don’t have active users for this product that I put blood, sweat, and tears into building. Lessons learned, and I take the experience as a learning curve. With the right approach, this is a challenge I’d love to take on again.

3D Animation: The Ultimate Game-Changer for your Website

Opajobi Oyegoke — Fri, 28 Mar 2025 21:54:15 +0000

INTRODUCTION

The emergence of 3D technology has opened new doors to innovation and creativity, transforming the digital landscape in ways previously thought impossible. While 2D websites have provided great user experiences through their simplicity and user-friendliness, web design has evolved beyond the limitations of traditional layouts. Imagine a website where you can walk through a virtual showroom, spin a 3D model of product, customize products in real-time. That’s intriguing, isn’t it?
Studies have shown that people tend to retain information better when it is presented visually. Take for instance, having to compare a 2D image of a mobile phone to a 3D model. Which would convey the actual specifications and design details of the phone better? Of course, the 3D model. Several top companies, (Apple, Nike, Adidas, Audi, Tesla, Samsung among others), harness the immersive capabilities of 3D technology on their websites to showcase their products or services in an engaging manner.
In this article, we’ll explore how to render a 3D model on your website and also add some basic animations to boost interactivity, you don’t want to miss out!

PREREQUISITES

Fundamental knowledge of ReactJs
Basic CSS skill
Basic GSAP (GreenSock Animation Platform) skills
Basic understanding of ThreeJs

RENDERING THE 3D MODEL

Before diving into the rendering process, it is necessary to refresh our memories on the basics of Three.js.

Canvas

A canvas is a HTML element used as a rendering surface for 3D graphics. It acts as a container where Three.js renders scenes, objects, and animations. The canvas element is created and managed by the Canvas component in React Three Fiber, providing a seamless integration of Three.js into React applications.

Light

Just as you are unable to see in a dark room, a scene in threejs requires light to render the mesh material properly. There are three types of light in threejs;

Ambient Light
- Gives a general, even light to the entire scene, making everything visible without creating shadows.
Directional Light
Acts like sunlight, shining in one direction and creating shadows, giving a realistic effect to objects.
Spot light- Works like a flashlight, focusing light on specific areas or objects, and can cast shadows.

Orbit Controls

The OrbitControls component in React Three Fiber allows users to interact with 3D models by rotating, zooming, and panning the camera around the scene. It provides intuitive mouse and touch controls, making it easier to navigate and explore 3D environments. This component is essential for enhancing user experience by enabling smooth and responsive camera movements.

It is time to render a 3D model in our application. The model used in this project was sourced from Sketchfab, a home for thousands of 3D models from different authors.

Steps to Render the 3D Model

1.Download and Extract the .gltf File

Download the .gltf format file and extract it to access its contents.

2.Move Files to Public Folder

Move the .bin file, .gltf file, and the textures folder into your project’s public folder.

3.Rename Files for Clarity
Rename your .gltf and .bin files from the default name "scene" to a more descriptive model name.

4.Update .gltf File

Open the .gltf file in a text editor.
Search for the buffers section and update the uri to match the renamed .bin file.

Rendering the Model in a React Application

Now, for the key step of rendering the model in your React application, you need to convert the .gltf file to JSX.

Convert .gltf to JSX

Open your terminal.
Navigate to the location of the .gltf file using the cd command.
Run the following command:

npx gltfjsx name.gltf

Replace name.gltf with the actual name of your .gltf file.

This process will generate a JSX component that you can import and use in your React application to render the 3D model. This creates a new jsx file of our model, open the jsx file. After running the npx gltfjsx name.gltf command, follow these steps to edit the generated JSX file for proper integration into your React application:

Add the Default Keyword to the Export Statement
Open the generated JSX file in your text editor.
Locate the export statement at the bottom of the file.
Modify it to include the default keyword.
Rename the Function to the Model Name

-Locate the function definition at the beginning of the file.
-Rename the function to match your model name for better clarity and maintainability.
Save the Changes to render the model, you should simply call the model component within the Canvas component imported from react-three/fiber. Remember what we learnt about lighting? So we need to add lighting to our scene, we’ll add an ambient light in our project.

import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { ContactShadows, OrbitControls } from "@react-three/drei";
import Watch from '../../public/Watch'

function CanvasContainer() {
  return (
    <Canvas
      camera={{
        position : [2.353582538479416, 0.6054083440896885, 3.217196497518671]
      }}
    >
      <ambientLight intensity={2.5} />
      <OrbitControls enableZoom={false}/>
      <Suspense fallback={null}>
        <Watch />
      </Suspense>
      <ContactShadows
        position={[0, -2, 0]}
        opacity={0.5}
        scale={50}
        blur={1}
        far={10}
        resolution={256}
        color="#000000"
      />
    </Canvas>
  );
}
export default CanvasContainer;

We have successfully rendered our model in our application. I’ll go a step further, styling the canvas component setting its height to a 100 viewport height.

Well done, you’ve been able to render a 3d model in react application. You’ve not come this far to back out now, so let’s keep going!

ANIMATING WITH GSAP SCROLLTRIGGER

The star of the show, GSAP scrolltrigger, is used to animate our 3D model when there’s a scroll in the application. To harness the animating capabilities of gsap, we need to import it using the following code:

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

The animation code is written inside our model JSX file. Let’s carefully go through the animation process step by step:

1.Import Necessary Functions
First, ensure you import the necessary functions that we’ll be using for the animation.
2.Destructure the Camera and Scene Objects
Next, we need to destructure the camera and scene objects from the Three.js object created as the model is rendered. This is a crucial step as it forms the foundation of our animation.
3.Also, create an instance of your timeline in gsap upon which subsequent animations are applied. This helps in sequencing animation properly
const tl = gsap.timeline()
4.Animating the Model
The animation process involves tweaking the camera's position along the three axes, as well as adjusting the scene's position and rotation. Therefore, it is essential to have access to these values for effective animation.

Below is a code snippet of the process:

import React, { useRef, useLayoutEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Canvas, useThree } from '@react-three/fiber';

gsap.registerPlugin(ScrollTrigger);

function MyModel(props) {
  const group = useRef();
  const { scene, camera } = useThree();

  useLayoutEffect(() => {
    // Animation code using GSAP and ScrollTrigger
gsap.to(camera.position, {
x: 10, // Example value, adjust as needed
     y: 5, // Example value, adjust as needed
 z: 15, // Example value, adjust as needed{
      scrollTrigger: {
        trigger: '#yourElementId', // Replace with your actual element ID or class
        start: 'top top',
        end: 'bottom bottom',
        scrub: true,
      }}
    });

    gsap.to(scene.position, {
x: 10, // Example value, adjust as needed
     y: 5, // Example value, adjust as needed
 z: 15, // Example value, adjust as needed{
      scrollTrigger: {
        trigger: '#yourElementId', // Replace with your actual element ID or class
        start: 'top top',
        end: 'bottom bottom',
        scrub: true,
      }}
});
gsap.to(scene.rotation, {
x: 10, // Example value, adjust as needed
     y: 5, // Example value, adjust as needed
 z: 15, // Example value, adjust as needed{
      scrollTrigger: {
        trigger: '#yourElementId', // Replace with your actual element ID or class
        start: 'top top',
        end: 'bottom bottom',
        scrub: true,
      }}
    });
    });
  }, []);

  return (
    <group ref={group} {...props} dispose={null}>
      {/* Model nodes and materials */}
    </group>
  );
}

useGLTF.preload('/path/to/model.gltf');
export default MyModel;

You might wonder how I got the x,y, and z values for the camera position, scene position and scene rotation that is the basis of our animation. I used useControl from Leva to obtain real-time valuees for the camera position, scene position, and scene rotation. These values were adjusted through an intuitive UI as shown in the image below. This method allowed precise control and easy fine-tuning, ensuring the desired visual outcome.

import {useControls} from 'leva'


 const {cameraPosition, scenePosition, sceneRotation} = useControls({
    cameraPosition: {
      value: {x:0, y:0, z:0},
      step: 0.05
    },
    scenePosition: {
      value: {x:0, y:0, z:0},
      step: 0.05
    },
    sceneRotation: {
      value: {x:0, y:0, z:0},
      step: 0.05
    }
    
  })

  useFrame(() => {
    camera.position.x = cameraPosition.x;
    camera.position.y = cameraPosition.y;
    camera.position.z = cameraPosition.z;

    scene.position.x = scenePosition.x;
    scene.position.y = scenePosition.y;
    scene.position.z = scenePosition.z;

    scene.rotation.x = sceneRotation.x;
    scene.rotation.y = sceneRotation.y;
    scene.rotation.z = sceneRotation.z;
  })

CONCLUSION

I must commend you for following till the end, well done. This article has covered a lot, from the immersive advantage of a 3D website over a traditional 2D website, to walking through the process of creating an interactive 3D animation. We looked at the technologies required to achieve this awesome animation, we also explored how to render a 3D model in react app. Finaly, we went a step further by exploring the animation process, learnt about GSAP scrolltrigger and how it is used to animate the 3D model.
In this article, we only covered the basics of 3D web animation, there’s a great deal that can be achieved by harnessing the full capabilities of 3D web animation. This is your stepping stone to building that jaw dropping 3D website, get practicing mate!

Do’s and Dont’s of self learning web development

Opajobi Oyegoke — Fri, 21 Feb 2025 19:31:04 +0000

I grew up as a curious kid, picking up books I could lay my hands on, driving screwdrivers at electrical gadgets in the home. This, I would say, fueled my drive to get into tech as a self-learning frontend developer. However, my journey has been stalled by quite a number of challenges, major one being self-doubt (as much as I hate to admit) and in turn has made finding consistency a tough nut to crack.

In this writing, I pointed out a number of challenges that I faced as a self-learning junior developer and how I managed to crawl out of those pitfalls.

Tutorial cycle- I started my journey as a self-taught developer watching YouTube tutorials and coding along. As educative and informative as these videos may be, they do not fully encompass the fundamentals of certain tech concepts. To put it in context, while I learnt to build react native projects, I always got stuck midway through the videos, why? This is because I was watching a tutorial made some 3 months ago in a field where stacks are getting updated on a daily basis. As much as you could learn a handful from tutorials, you need to ask yourself the question, do I genuinely understand the basics of this code or am I blindly following along?
Documentation- I have discovered that there is no easier way to understand a framework or library than reading the docs. The docs were written by expert technical writers and have bridged the gap between complex technical concepts and easy-to-follow documentation. So to grow maximally as a self-taught developer, you need to learn to read and understand the docs.
Engage in tasks and challenges- Another way to learn how to code is to practice your skills on tasks and challenges. There are several of these coding challenges, an example is Frontend Mentor. This, I believe, will equip you with a skill that’s very ingenious to developers, problem-solving.
Pick your niche- Web development is as broad as you can think of, most definitely broader than you can think of. So it is very important to pick your poison and stick by it. Starting off, I was pretty much confused, I loved the aesthetics of Awwwards landing pages, I also had a kink for building mobile apps, and oh, there’s a number three, Threejs, I saw a reel of a 3D website and I couldn’t help myself but want to learn. However, it is not impossible to be good in all of these, but as a self-learning developer, it will really help to stick with a niche and go all out on it.
Community and mentorship- Being in an active community or having a mentor can go a long way in your tech journey as a self-learning developer. These will push you to go the extra mile at bettering yourself.

These are the bits that influenced my journey as a self-learned developer, and I’ve not put my foot off the gas yet. I’m still on this journey, and so should you. Watch this space, I’ve got something exciting coming out in a few days.

High-level workflow in MERN apps

Opajobi Oyegoke — Tue, 22 Oct 2024 18:33:30 +0000

I started to learn full-stack development using the MERN stack and only then did I fully understand the constant data exchange between the user and the server. This short article highlights the workflow in a simple MERN app.
Suppose you have ever seen a tutorial video on APIs. In that case, I bet this common analogy that APIs act as waiters in a restaurant bridging the gap between customers and kitchen staff, would not be strange to you.
The React frontend can be likened to diners in a restaurant who interact with the waiters to send and receive food. Mongodb database, the pantry where food recipes and ingredients are stored while the Express backend serves as the kitchen where dishes are prepared. The kitchen pulls from the pantry to prepare dishes for the diners.
The API Endpoints, the waiters, are responsible for carrying requests to the kitchen and delivering responses back to the diners. Each waiter handles a specific task which could be any of a GET, POST, PUT, OR DELETE request.
This analogy has helped paint a brighter picture of how the web works. I look forward to sharing more as I go through this learning curve.

Firebase Authentication: Are you truly secure?

Opajobi Oyegoke — Fri, 21 Jun 2024 22:53:28 +0000

INTRODUCTION

Verizon’s 2023 Data Breach Investigations Report (DBIR) reported that 49% of security breaches involved compromised credentials. This highlights the critical importance of implementing a robust website authentication system on the developer's part.
Firebase authentication is a comprehensive authentication service provided by Firebase. It simplifies implementing authentication in web and mobile applications by offering various sign-in options and handling the backend for developers.

OVERVIEW OF FIREBASE AUTHENTICATION

Firebase is a Backend-as-a-Service (BaaS) application development platform by Google. Firebase provides tools and services to help developers build, improve, and grow their apps. These include App hosting, Authentication, Cloud Storage, Realtime Database, Cloud Firestore, Cloud Functions, Analytics, and Crashlytics.
The scope of this article does not exceed the authentication service of Firebase. In detail, we will explore the process of implementing the Email/Password authentication and the Google sign-in method.

SETTING UP FIREBASE AUTHENTICATION.

To implement Firebase Authentication, you start by creating a Firebase project. Open the Firebase console page, and click the Add Project option. Follow the subsequent prompts to create your Firebase project.

The next step is to add Firebase to your app, which could be an iOS, Android, or web app—our focus in this article is on the web app. You'll be prompted to create an app name. Upon creation, Firebase generates a configuration code unique to your project, which allows you to link your web app to the Firebase project.

Note that this article features implementing Firebase Auth in a web application developed using Reactjs, so this tutorial is tailored towards using Firebase with a React application. It is necessary to install Firebase as a dependency in our project by running the command:

npm install firebase

Then, create a js file where you initialize the Firebase SDK to our app.
To assess the Firebase Authentication system in our project, we import the getAuth function that sets up Firebase authentication allowing us to manage sign-ins, sign-ups, and authentication states as shown in the code snippet below:

import {initializeApp} from 'firebase/app';
import {getAuth} from 'firebase/auth'

const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxx.com",
    projectId: "auth-71d4f",
    storageBucket: "auth-71d4f.appspot.com",
    messagingSenderId: "420633845077",
    appId: "1:420633845077:web:e610a208e4fa3aa48de3dc"
  };

  const app = initializeApp(firebaseConfig);
  export const auth = getAuth(app)

INTEGRATING FIREBASE AUTHENTICATION

CREATING USER ACCOUNT WITH EMAIL AND PASSWORD

Firebase authentication allows users to create user accounts using their email and password. Note that the sign-in method must be enabled in the Firebase console for it to be implemented.
The “createUserWithEmailAndPassword” function from the Firebase Auth module is used to create user accounts. This function receives 3 parameters, auth (the instance of the Firebase Auth service), email, and password.

import {createUserWithEmailAndPassword} from 'firebase/auth'
//React state to maintain user input
const [registerEmail, setRegisterEmail] = useState("");
    const [registerPassword, setRegisterPassword] = useState("")
// function to create user account 
const register = async () => {
        try{
            const user = await createUserWithEmailAndPassword(auth, registerEmail, registerPassword)
            console.log(user)
        } catch(error){
            console.log(error.message)
        }
       
}

**SIGN IN WITH EMAIL AND PASSWORD

**
This process is similar to creating a user account as we explored earlier, but with a different function. Signing in uses the signInWithEmailAndPassword function from the Firebase Auth module. Similar to the createUserWithEmailandPassword function, it accepts three parameters, auth, email, and password.
Here’s an example implementation:

import {signInWithEmailAndPassword} from 'firebase/auth'
 
const login = async () => {
        try{
            const user = await signInWithEmailAndPassword(auth, loginEmail, loginPassword)
        } catch(error){
            console.log(error.message)
        }
    }

GOOGLE SIGN-IN

Firebase Authentication allows users create accounts using their Google Accounts. To implement this, the Google sign-in option must be enabled in your firebase project console. Signing in with Google uses the signInWithPopup function from the Firebase Auth module. This function takes two parameters, the auth instance and a provider instance and is created using the GoogleAuthProvider function imported from the firebase Auth module.

import {createUserWithEmailAndPassword, GoogleAuthProvider, signInWithPopup} from 'firebase/auth'
 const provider = new GoogleAuthProvider();

    const signInWithGoogle = ()=>{
        signInWithPopup(auth, provider)
    }

MONITORING AUTHENTICATION STATE

Firebase Authentication allows you to monitor the user's authentication state. To implement this, use the onAuthStateChanged function from the Firebase Auth module. This function takes two parameters: the authentication instance and a callback function that executes whenever the user's authentication state changes. The callback function receives the user object if the user is signed in, or null if the user is signed out.

import { onAuthStateChanged } from 'firebase/auth 
import { useState } from "react"

const [user, setUser] = useState({})
    onAuthStateChanged(auth, (currentUser) => {
        setUser(currentUser)
    },[])

LOGGING OUT

Firebase Authentication allows users to log out of their accounts easily. To implement this, use the signOut function from the Firebase Auth module. This function takes one parameter: the authentication instance. Once called, it signs the user out of their account

 import { signOut } from 'firebase/auth
const logout = async () => {
        await signOut(auth)
    }

BENEFITS OF FIREBASE AUTHENTICATION

Easy to develop
Multiple Sign-In options
Secure Authentication

CONCLUSION

In this article, we explored the world of Firebase Authentication, stressing its importance in our web applications to provide seamless user authentication. We also explored how to implement user authentications with email and password credentials and the Google sign-in option. We wrapped this article up by looking into the benefits of using Firebase Authentication in your project.

Creating dynamic web animations with gsap

Opajobi Oyegoke — Fri, 03 May 2024 19:01:35 +0000

Introduction to GSAP3.0

This article covers the basics of creating stunning web design animation using gsap. At the end of this article, readers should be able to implement simple animations to UI elements using gsap.
GreenSock Animation Platform (GSAP) is a powerful JavaScript library that allows developers to implement cool and fun animations in their web designs.
It is a general web design rule to keep the web page as simple as possible while not compromising website efficiency. This is to give users a great user experience while exploring web pages. The use of animations in web design overrides this rule however, it has proved to add to a great user experience rather than complicate it.
Scientific study reveals that visuals are processed 60,000 times faster in the brain than texts. This underscores that one of the easiest ways to ensure web users are immersed in the individual UI elements is to pair concepts with meaningful visuals.

Prerequisite

Basic understanding of HTML
Basic understanding of CSS

Getting started with GSAP

Install GSAP to create fun animations. Installing GSAP unlocks a powerful set of tools for creating advanced animations and interactive experiences on the web. There are a few ways to install GSAP:

npm
Yarn
and a simple script tag.
Check installation guides on the GSAPofficial documentation.

GSAP methods

GSAP uses several methods. However, there are two important methods developers should get familiar with.

gsap.to()

The gsap.to() method is the most common method for creating animation in GSAP because it allows you to define the destination values (and most coders think to animate to certain values).
This method takes two parameters, the first is the target(UI element) you want to animate. This can be selector texts such as “.class”, “#id”, etc. The second parameter is the variable, an object containing all the values you want to animate. Common properties include delay, duration, opacity, position on either the x or y-axis, ease, stagger, etc.



    <script>
        gsap.to(".box", {
            x:500, //specifies the value to which the box UI animates on the horizontal axis
            duration:1, // specifies the time taken for the animation to be complete.
        })
    </script>

This code animates the UI element with the class name of ‘box’ with properties such as its position on the x-axis and the duration of the animation.

gsap.from()

Just as with the gsap.to method, gsap.from is a common method for creating animations. It differs from the to() method in that it allows you to define where the values start and then animate to the current state. This method is perfect for animating objects onto the screen.



    <script>
        gsap.from(".box", {
            y:-200, //specifies the value to which the box UI animates on the vertical axis
            duration:1,
        })
    </script>

Below is a code snippet from my portfolio highlighting how each UI element is animated. I used the gsap.from() method in the majority of the animations, passing in the target, and properties.



    <script>
        gsap.from("#span",{
            opacity:0,
            x: -20,
            ease: Expo.easeInOut
        })

        gsap.from("nav ul li", {
                opacity: 0,
                x: -20,
                delay:0.4,
                ease: Power3.easeInOut
            })

        gsap.from(".hero span", {
                opacity: 0,
                duration:0.4,
                y: -50,
                delay:0.4,
                ease: Power3.easeInOut
            })
        gsap.from(".hero h1", {
                opacity: 0,
                duration:0.4,
                y: -60,
                delay:0.5,
                ease: Power3.easeInOut
            })
        gsap.from(".hero p", {
                opacity: 0,
                duration:0.4,
                y: -60,
                delay:0.6,
                ease: Power3.easeInOut
            })
        gsap.from(".hero button", {
                opacity: 0,
                duration:0.4,
                x: -10,
                delay:0.6,
                ease: Power3.easeInOut
            })
        gsap.from(".hero img",{
                opacity: 0,
                duration:0.4,
                y: -60,
                delay:0.8,
                ease: Power2.easeInOut
            })
        gsap.from(".featured--heading",{
                opacity: 0,
                x: -100,
                delay:0.9,
                ease: Power3.easeInOut
            })
        gsap.from(".featured--para",{
                opacity: 0,
                x: -100,
                delay:0.9,
                ease: Power3.easeInOut
            })
        gsap.from(".project--card div",{
                scrollTrigger:".project--card div",
                duration:1,
                opacity: 0,
                y: -60,
                delay:1,
                ease: Power3.easeInOut
            })
        gsap.from(".collabo",{
                scrollTrigger:".collabo",
                opacity: 0,
                duration:0.4,
                y: -60,
                delay:1.1,
                ease: Power3.easeInOut
            })
    </script>

Conclusion

In this article, we have just scratched the surface of the actual capabilities of GSAP, I encourage you to read the GSAP documentation, dedicate ample time to practice, and have fun creating jaw-dropping animations that astonish your audience.

10 VS Code extensions for maximum frontend development productivity

Opajobi Oyegoke — Wed, 24 Apr 2024 23:39:24 +0000

Undoubtedly, VS Code extensions make a difference to your front-end development experience, drastically improving efficiency and facilitating seamless coding experiences. In this article, I highlight 10 extensions I have worked with and proved to be game-changers in my coding journey.

1 LIVE SERVER
The live server extension in VS Code launches a developmental local server with a reload feature for static and dynamic pages. This extension is a must-have for web developers because it automatically refreshes the browser when a change is made to HTML, CSS, or JS code. It is great for observing updates in real-time with no need to refresh the browser. Live Server is one of the most downloaded extensions on VS Code stressing its importance to developers as it provides them an avenue to preview web pages even as they code.

Here's a demonstration showing how Live Server instantly updates changes made to the HTML code

2 POLACODE
Polacode extension is another important extension to have as a front-end developer. Its in-built features allow you to create a snippet of your code as an image enabling developers to share their codes for others to see.

Here's a code snippet created using Polacode

3 ERROR LENS
The Error lens extension acts as a diagnostic tool, similar to a doctor examining a patient’s symptoms. Just as a doctor identifies ailments and prescribes treatment, the error lens pinpoints coding mistakes and suggests remedial actions.

It checks your code line by line and highlights the error printing a message inline, as shown below.
Error Lens extension is essential for developers as it discovers the bug before the code is run.

4 BETTER COMMENTS
This is another essential VS Code extension to have in your armory as a frontend developer. Better comments improve your code commenting by annotating with alert, informational, TODOs, and more. This extension has over 6 million downloads highlighting its importance to frontend developers.
The Better Comments extension will help you create more human-friendly comments in your code.

5 PRETTIER

VS Code prettier extension is a code formatting tool that automatically adjusts code to adhere to the best practices of the language used. It ensures consistency in styling and readability making it a pivotal tool for maintaining clean and organized code within projects.

User-input code.

Formatted with Prettier

Prettier offers users the flexibility to customize formatting rules according to their preferences.

6 MATERIAL ICON THEME
The Material Icons Theme extension enhances the default VS Code icons for over 450 file types displayed in the Explorer pane of your workspace. With over 23 million downloads, this extension underscores its significance in enhancing the overall aesthetics of your workspace, offering visually appealing and intuitive icons for improved navigation and user experience.

7 GitLens
The GitLens extension is a pivotal tool for code development as it offers insights into the commit history of a code. This extension is a game changer in development teams, promoting collaboration as it gives information about the author and timestamp of a code update.
GitLens provides inline blame annotation and hover support showing the author name, relative date stamp, and git message.

8 BOOKMARKS
The Bookmarks extension helps you navigate your code, moving between important lines easily and quickly. This extension saves a lot of time trying to find a line of code amidst several hundreds of others.

Bookmarks at lines 97, 111, and 133 allow easy identification of these lines in a chunk of code

9 MULTIPLE CURSOR CASE PRESERVE

This extension is another must-have tool for a developer. Imagine you want to change a word that appears quite several times in your code with several cases such as uppercase, lowercase, or camel casing, this would seem such a time-consuming and gruesome task. Conventional Ctrl + D will change the word without consideration for the different cases in which the word exists, using multiple cursor case preserves the case by replacing the word but only with the same case as in the previous word.

10 CODE SPELL CHECKER

This extension checks your code to catch common spelling errors. It aids collaboration by allowing code simplicity.

“State Control in React: Behind the Scenes of Our Quiz App”

Opajobi Oyegoke — Tue, 16 Apr 2024 15:40:53 +0000

INTRODUCTION

The Quiz app project, developed using React, offers users an engaging platform to test their knowledge across a wide range of subjects. Using JavaScript, it generates 10 multiple-choice questions of varying difficulty. The app taps into the Open Trivia DataBase(OTDB), ensuring a diverse range of questions for users to tackle. With each question dynamically generated, users can expect a new and challenging experience with every session. The quiz app provides an educational and enjoyable way to learn. Behind the functionality of this quiz app sits various states that React maintains. This article highlights the states essential for the functionality of this app.

State in React refers to values managed internally within a component, similar to variables declared inside a function. These values can change over time and when they do, React automatically re-renders the component to reflect those changes in the user interface. This allows React components to dynamically update and respond to user interactions or changes in data.
In React, states are employed to enable interactivity in web applications . Without state management, the application would be static, boring and, would lack dynamic activity. Therefore, state management is very essential in developing websites that allow user interaction and dynamism. One of the common ways of managing state locally within a component is the useState hook, which allows components to declare and update state variables directly within the function body.

useState is a hook in React that allows functional components to maintain state. The useState hook returns a stateful value and a function to update it. To assess the useState hook, it needs to be imported from the react library like this:

import React, {useState} from "react";

Then, within the component, you use array destructuring to extract the state variable and the function to update it:

const [stateVariable, setStateFunction] = useState(initialValue);

stateVariable holds the current value of the state, and setStateFunction is used to update the state. The initialValue is the initial value of the state variable.

STATE REQUIREMENTS FOR OUR QUIZ APP

To ensure the proper functioning of our quiz app, several states were employed to look out for user interaction and ensure accurate interactivity, and seamless user experience in our quiz app.

STATE MANAGEMENT IN QUIZ APP

Question state This state holds the questions generated from API and serves as the basis upon which every other state functions to ensure an accurate and functional quiz app.

const [questions, setQuestions] = useState([]);
useEffect(() => {
        if (questions.length === 0) {
      fetch("https://opentdb.com/api.php?amount=10&category=21&difficulty=easy&type=multiple")
        .then((response) => response.json())
        .then((data) => {
          setQuestions(data.results);
},[questions])

The questions state is initialized with an empty array when the quiz app is launched and set to contain questions pulled from the API inside useEffect. The useEffect hook in React performs side effects i.e. actions that occur outside of the typical React component and are not directly controlled by React. Examples of such actions include data fetching, in the case of our quiz app, subscription to external data sources, etc.
The setQuestions function updates the question state with the result of data pulled from the API as shown in the code above.

Answer State The Answer state maps over the questions state and returns an object containing the questions, answer, incorrect answers, and selected answers. This enables the app to determine if the user gets a question right when the selected answer is the same as the correct answer in the state.

  const [questionsAndAnswers, setQuestionsAndAnswers] = useState([]);
 // each item in questionsAndAnswers will be an object of:
          /*
            -question
            -shuffled answers
            -correct answer
            -selected answer
          */
          setQuestionsAndAnswers(
            data.results.map((questionObject) => {
              return {
                question: questionObject.question,
                Answers: [
                  ...questionObject.incorrect_answers,
                  questionObject.correct_answer
                ],
                correctAnswer: questionObject.correct_answer,
                selectedAnswer: ""
              };
            })
          );

Completion state This state checks if all questions have been answered.

 const [showWarning, setShowWarning] = React.useState(false);

 const notAllAnswered = questionsAndAnswers.some(
      (questionObject) => questionObject.selectedAnswer === ""
    );

    setShowWarning(notAllAnswered);

The some() method checks the questionsandAnswers state to see if at least one of the selected answer properties is empty. This implies that not all questions have been answered and this updates the showWarning state to warn the user of having not answered at least one question.

Correct answer count state This state computes the number of questions the quiz app user got. It does this by looping through each QuestionandAnswers object to compare the selected answer and the correct answer, if they are the same, the setNumCorrectAnswers updates the numCorrectAnswers state by incrementing its initial value by 1.

 const [numCorrectAnswers, setNumCorrectAnswers] = useState(0);

const [showResult, setShowResult] = useState(false);

 if (!notAllAnswered) {
      questionsAndAnswers.forEach((questionObject) => {
        // compare selected answer & correct answer
        if (questionObject.selectedAnswer === questionObject.correctAnswer) {
          setNumCorrectAnswers(
            (prevNumCorrectAnswers) => prevNumCorrectAnswers + 1
          );
        }
      });

      // show result
      setShowResult(true);
    }

5 Result State
The Result state controls the visibility of the quiz result.

CONCLUSION

In conclusion, effective state management is crucial for ensuring the smooth functionality and interactivity of our quiz app. By utilizing various states such as the Questions state, Answers state, Completion state, Correct Answers count state, and Result state, we can efficiently handle data retrieval, user interaction, quiz completion tracking, and Result presentation. By understanding and implementing these states effectively, we can create a user-friendly quiz app that meets the needs and expectations of our audience. Thank you for joining us on this journey of exploring state management in our quiz app and feel free to ask any question in the comment section.

7 Essential JavaScript syntax you should know before learning React

Opajobi Oyegoke — Sat, 06 Apr 2024 07:23:52 +0000

The roadmap to becoming a seasoned front-end developer is quite technical and time-consuming. This roadmap is a sequential step of languages that should be mastered and honed, equipping developers with the necessary skills to thrive in front-end web development. In this roadmap, the prior language could serve as a building block for the next, and as such not learning these languages in the right order might prove difficult going forward.

JavaScript is the programming language of the web and it serves as the backbone of modern web development. JavaScript programs the behavior of the web enabling dynamic and interactive user experiences. Its syntax forms the basis upon which frameworks and libraries, such as React, and Vue are built. For developers aspiring to dive into the world of React development, mastering JavaScript is not merely advisable, it’s indispensable.
In this article, we’ll delve into seven essential JavaScript syntax concepts that are essential for effective React development. Understanding these fundamental building blocks equips developers with the tools needed to harness the full potential of React, enabling them to design sophisticated user interfaces with ease and efficiency. So, if you are just embarking on your React journey or seeking to deepen your understanding of the indispensable importance of JavaScript in front-end development, join us as we explore some of the various JavaScript syntaxes used in React.

1. Function Declaration

A JavaScript function is a block of code designed to perform a particular task. A JavaScript function will only be executed when it is called i.e. invoked. The function keyword defines a JavaScript function, followed by a name and then parentheses (). The parentheses may include parameters separated by commas and the code to be executed is placed in curly brackets{}.

function name(parameterA, parameterB) {
  // code to be executed
}

In React, components serve as the building blocks of user interfaces. These components in simpler terms are a fraction of the UI elements such as the header, nav bar, footer, etc. React components are conventionally declared as JavaScript functions that return JSX (JavaScript XML) elements, a syntax extension for JavaScript that allows writing HTML-like code within JavaScript. Employing components simplifies the rather cumbersome process of building complex user interfaces.
For example, a simple functional component in React might look like this

import React from 'react'

function MyComponent () {
  return(
    <div>
      <h1> Hello, World!</h1>
      <p> This is a functional component in React </p>
    </div>
);
}
export default MyComponent;

In this example, when the component is rendered in the application, the MyComponent function returns a div with an h1 heading and paragraph.

2. Array Destructuring

In JavaScript, array destructuring is a powerful feature that allows developers to extract multiple values from arrays and assign variables to them.

Const numbers =[1, 2, 3, 4, 5]; //an array of numbers

Const [first, second, third] = numbers; //the numbers array destructured, extracting values and assigning them to variables.

Each variable is assigned the value of the corresponding element in the array.
Similarly, this technique is used to unpack values from arrays returned by hooks.
For example, the UseState hook that manages states in a React component.

import React, {useState} from ‘react’;
Const [state, setState] = useState()

In the code snippet above, the useState hook by default returns an array with two elements, the current state value i.e. state, and a function (setState) to update the state. By using array destructuring, extracting these elements and assigning them to variables (state and setState) is easy.

3. Object Destructuring

This is similar to array destructuring, the only difference here is that this extracts properties from objects instead of an array and assigns them to variables.

import React from 'react';

function UserProfile () {
  const user ={
    name: 'Joy Meyers',
    age: 24,
    city: 'Lisbon'
};

//object destructuring to extract objects
const {name, age, city } = user;

return(
  <div>
    <h2> User Profile </h2>
    <p> Name: {name} </p>
    <p> Age: {age} </p>
    <p> City: {city} </p>
</div>
);
}

export default userProfile;

Object destructuring allowed us to extract the name, age, and city properties and directly access them within the component.

4. Mapping

In JavaScript, the map() method produces a new array by iterating on every element in an array and performing a function on them.

const surname = [Harry, Jude, Jadon, Luke]
const name = surname.map(myFunction()) 

function myFunction(value) {
  return value;
}


import React from 'react';

function LanguageList(){
  const languages = ['English', 'French', 'Spanish', 'Italian', 'Latin']

  const language = languages.map((language)  => <li>{language}</li>)

  return (
    <div>
      <h2>Language List</h2>
      <ul>{language}</ul>
    </div>
  )
}

export default LanguageList;

In the example above, we see how the map method is used on an array to return each array item as an unordered list.

5. Conditional Statement

The if statement is used to specify that a block of JavaScript code should be executed if a condition is true. The else statement is used to specify that a block of Javascript code should be executed if the condition is false while the else if statement is used to specify a new condition if the first one is false.

if (conditionA) {
  //  block of code to be executed if conditionA is true
} else if (conditionB) {
  //  block of code to be executed if the conditionA is false and conditionB is true
} else {
  //  block of code to be executed if the conditionA is false and conditionB is false
}

In React, a combination of any of these three statements is used in conditional rendering when a variable will determine the property of an element.

6. Ternary expressions

In JavaScript, a ternary expression is a concise way to write conditional statements. It consists of three parts: a condition, a value to return if the condition is true, and a value to return if it is false.

Condition ? expression1 : expression2

It is generally considered a best practice in React to use ternary expressions or logical&& operators for conditional rendering instead of traditional if statements.

function conditionalRendering(){
  const isConnected = true
  return(
    <>
    <h2>conditional Rendering</h2>
    {isConnected ? <p>Welcome back!</p>: <p> Check your connection</p>} 
    </>
  )
}
export default conditionalRendering;

7. Logical && operator

In JavaScript, conditional rendering using logical && operators will only render the expression on the right hand side if the expression on the left hand side is true.

Expression1 && <p> Conditional Rendering </p>

If the expression on the left is false, the entire expression short-circuits, and the expression on the right is not evaluated.

function conditionalRendering(){
  const isConnected = true
  return(
    <>
    <h2>conditional Rendering</h2>
    {isConnected && <p>Welcome back!</p>} 
    </>
  )
}
export default conditionalRendering;

Conclusion

In conclusion, understanding these JavaScript concepts is crucial for effective React Development. In this article, we covered seven fundamental JavaScript syntaxes which should be at the tip of your fingers if you aspire to be an effective React developer.
Getting familiar with these JavaScript concepts allows developers to write cleaner and concise codes, and ultimately build more complex and efficient React applications.

Getting Started with Socket.io:Enhancing Real-Time Communication in Web Applications

Opajobi Oyegoke — Mon, 06 Nov 2023 14:41:10 +0000

INTRODUCTION

Socket.io is an open-source library for real-time, bi-directional (two-way) communication between clients (web browsers ) and servers. Socket.io allows the connection of multiple clients to a single server and facilitates real-time data sharing between those clients and servers. It provides a convenient and efficient way to establish bidirectional communication channels, enabling clients to send and receive data from the server and between clients in a real-time and interactive manner. This makes it a powerful tool for building applications that require live updates, chat, online gaming, collaborative features, and more.
Socket.io is a versatile library that can be used on various platforms, socket.io provides client-side with a JavaScript library meaning it can be used in web applications built with HTML, CSS, and JavaScript.

Setting up your Development Environment

To use socket.io, you need to have Node.js and npm ( Node Package Manager )installed on your computer. To install Node.js on Windows or macOS, simply download Node.js installer from the official website. After installation, open your terminal or command prompt and run the following commands to verify that Node.js and npm are installed:

node -v
npm -v

These commands should display the versions of Node.js and npm indicating that installation was successful.
Now, create a new Node.js project by opening the terminal or command prompt and navigating to your project directory, run the following command to initialize a Node.js project.

npm init -y

This will create a package.json file that manages your project's dependencies and settings. The next step is to install socket.io as a dependency in the project. This is achieved by simply running the following command:

npm install socket.io

On installation, socket.io should be added to the list of dependencies in the package.json file created earlier.
Also note that express, a Node.js framework that we are going to be using, is installed. You can add express to project dependencies simply by running the following command:

npm install express@4

Server and Client Setup

Creating a Socket io Server

Creating a socket io server is pivotal to this process because it is over this server that data are emitted and broadcast from and to the client side. To achieve this, create a JS file in your project directory using a code editor. Here is a simple example of a Socket.io server:

const express = require('express'); //imports express from express

const { Server } = require('socket.io'); //imports Server class from socket.io
const { createServer } = require('node:http');

const app = express(); //creates an express app
const server = createServer(app); //setup an HTTP server
const io = new Server(server);//Socket.io server created and et on top of HTTP server

server.listen(3000, () => {
   console.log('server running at http://localhost:3000')
})

I will cover this code in the next few lines, express is a popular node.js framework and it simplifies the process of building web applications, and as such it is imported and used to create an express application and set up an HTTP server. It is on this HTTP server that the socket.io server is established. The io. on code handles the actual real-time communication, it is an event handler that listens for a 'connection' event. When a client connects to the Socket.io server. the event is triggered and the callback function (socket) =>{...} runs.
You can test if it is connected to the server by running the command in your terminal:

node ('name of server js file')

Setting Up a Basic HTML Client

Here, we are simply going to write HTML code for a simple chat app.

<!DOCTYPE html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }



      #form { background:  #b3ffb3; padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }

      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }

      #input:focus { outline: none; }

      #form > button { background: seagreen; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 5px; outline: none; color: #fff; }



      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages > li { padding: 0.5rem 1rem; }

      #messages > li:nth-child(odd) { background: #efefef; }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form id="form" action="">

      <input id="input" autocomplete="off" /><button>Send</button>

    </form>

  </body>

</html>

(The above code snippet is from socket.io official documentation)
The HTML client side of a simple chat app is shown as follows:

Establishing a connection between Client and Server

To establish a connection between Client and Server, there is a need to understand the two-way relationship between client and server in establishing a connection for real-time applications using socket.io. First, the server is responsible for serving the HTML file to the client and managing WebSocket connections and real-time communication with clients.

const { join } = require('node:path'); //imports join from node


app.get('/', (req, res) => {

  res.sendFile(join(__dirname, 'index.html'));

});

Your socket.io server js file should look like this:

const express = require('express'); //imports express from express

const { Server } = require('socket.io'); //imports Server class from socket.io

const { join } = require('node:path'); //imports join from node

const { createServer } = require('node:http');



const app = express(); //creates an express app

const server = createServer(app); //setup an HTTP server

const io = new Server(server);//Socket.io server created and et on top of HTTP server



app.get('/', (req, res) => {

    res.sendFile(join(__dirname, 'index.html'));

  });  

io.on('connection', (socket) => {

     console.log('A user Connected');

     socket.on('disconnect', () => {

        console.log('user disconnected');

      });

});  

server.listen(3005, () => {

   console.log('server running at http://localhost:3005')
})

(code snippet from socket.io)
The next step is to create the socket. io-client package on the client side to aid its connection to the server using the socket.io client library. To achieve this, simply add the following code to the client-side HTML file, right before the closing body tag(

Enhancing Web Transaction Security: AI-Powered Fraud Detection and Prevention

Opajobi Oyegoke — Mon, 23 Oct 2023 15:23:14 +0000

Introduction

In the modern and digital era, web transactions have become an integral part of our daily lives owing to ever-evolving Internet access and ongoing digitalization. From online shopping, online banking, digital payments, and more, a vast array of transactions now take place on the web. In 2022, retail e-commerce sales were estimated to exceed 5.7 trillion U.S. dollars worldwide, with the figure expected to increase exponentially over the coming years according to Statista. Given the high frequency of web transactions, ensuring their security is imperative. A secure web transaction is pivotal to the protection of sensitive data and preventing financial loss and as such the primary purpose of a web transaction is defeated when there's a breach of its integrity. According to Statista, the United States, being one of the biggest online markets, as of December 2022 has had almost half of the users experience cyber-attacks while eight in ten U.S. board directors believed their organization was at risk of material cyber attack in the coming year. This incessant attack leaves its victim vulnerable to debt, bankruptcy, depression, and even suicide, there is a need now more than ever to curb this vice by ensuring the utmost Security of web transactions.
Artificial Intelligence (AI) has been harnessed in the field of cybersecurity, particularly in fraud detection and prevention for web transactions. AI employs sophisticated algorithms and machine learning techniques to analyze vast amounts of transaction data, detect anomalies, and predict fraudulent activities. By leveraging AI's capabilities, web transactions are much more secure through detection and prevention of Fraud.
This article looks into how Artificial Intelligence can be harnessed in fraud detection and prevention for web transactions.

Understanding Web transaction security

Web transactions are business transactions conducted over the Internet. Web transactions permit buyers and sellers to meet online, trade, and exchange goods or services for money. They encompass a wide range of activities including online purchases, financial transactions, online banking, and even activities like online booking and reservations. Web transactions form the backbone of e-commerce as without online transactions, buying and selling over the Internet is non-existent. There is an increasing paradigm shift from much more conventional traditional commerce to E-commerce owing to the convenience and accessibility of the Internet. The significance of the evolution of web transactions cannot be overemphasized as it has had a transformative impact on various aspects of society, business, and, personal life. Amongst the numerous significance of web transactions is its ability to offer convenience as people can shop and conduct financial transactions from the comfort of their homes. It is also worth mentioning that web transactions consequently contribute to economic growth in society.
However, there's been a compromise to the safe and secure conductance of web transactions as cybercriminals are posing this compromise. Cyber Criminals use various fraudulent techniques, these techniques include phishing, which is the practice of using deceptive emails or websites to trick individuals into revealing sensitive information such as login details or credit card details, hacking, identity theft, payment fraud, and, so on. This menace has been on the rise in recent years leaving an indelible mark on the recipient of these frauds and scams. Businesses and Individuals are subjected to financial loss, damage to trust, bankruptcy, indebtedness, and, loss of business continuity. Ensuring the security of web transactions is pivotal in meeting the high standards that web users have set for web transactions in that it should be risk and hassle-free. There is a need for an efficient fraud detection and prevention mechanism to erase a cloud of doubt over the security of web transactions.

Leveraging AI for Fraud Detection

Artificial Intelligence (AI) is simply a transformative field of computer science and technology that aims to create intelligent machines, especially computer systems capable of simulating human intelligence. AI is able to automate tasks performed by humans. Machine Learning, a subset of Artificial Intelligence, involves training computer algorithms to learn from data and make predictions and generalizations from them. It's about enabling computers to identify patterns, make sense of information, and, improve their performance on specific tasks as they observe and learn from the data available. The availability of big data has been the driving force for the growth of Artificial Intelligence. AI has a wide range of applications, from Natural Language Processing used in chatbots, virtual assistants, Image and Video analysis, Healthcare, Manufacturing, Autonomous vehicles, Education, and, a lot more.
To narrow the wide range of applications of Artificial Intelligence into our scope, we shall look into its role in Fraud Detection and prevention.
AI through machine learning has proved to be pivotal in Fraud detection by processing vast amounts of data and identifying patterns and anomalies that might go unnoticed by traditional methods. AI has helped cut down the risks of cyber fraud in recent years thereby enhancing security in web transactions. AI uses a vast array of mechanisms in Fraud detection, AI identifies patterns and anomalies that can indicate fraudulent activities, and it also is very efficient at analyzing user behavior and detecting anomalies. AI can establish a baseline of normal activities, deviations from this baseline trigger alerts. AI enables real-time monitoring of transactions, which is critical for the prompt identification and prevention of Fraud. AI checks unusual patterns such as unusual purchase behavior, unfamiliar device access, or irregular transaction locations.

In Fraud detection, a variety of artificial intelligence (AI) algorithms are employed to analyze transaction data and identify patterns or anomalies that may indicate fraudulent activity. Some common types of such AI algorithms used in fraud detection include:

Supervised Learning Algorithm

Supervised Learning algorithm, a subset of Machine Learning, is a powerful tool for classifying and predicting outcomes based on historical data. This algorithm is trained with large amounts of data usually transaction data that has been labeled as legitimate or fraudulent. By learning from this labeled data, supervised learning models can make informed decisions and detect fraudulent activities with a high degree of accuracy. A decision tree is a type of supervised learning algorithm that creates tree-like structures to classify transactions based on a set of rules which might include features such as transaction amount, location, and, time. Logistic regression, Random Forest, and Support Vector Machines are common supervised learning algorithms.

Unsupervised Learning Algorithm

Unsupervised Learning Algorithm is another subset of Machine learning where the algorithm is trained with unstructured data that lacks classification. In contrast to the Supervised learning algorithm, the Unsupervised learning algorithm's primary purpose is to discover patterns and relationships within the data. This algorithm may include Clustering, anomaly detection, Customer segmentation, etc

Deep Learning Algorithm

Deep Learning is a subfield of Machine learning that performs tasks by training an artificial neural network to perform tasks by learning directly from data. It differs from Machine learning in its use of deep neural networks with multiple layers which allows these networks to automatically learn intricate patterns and representation from raw data. Deep learning algorithms are increasingly used in fraud detection due to their ability to automatically learn complex patterns and representations from data such as transaction amount, location, time, user behavior, and, more. These data are processed and patterns and representation are extracted. Once the deep learning algorithm is trained, it can identify anomalies in new transactions. Anomalies that may indicate potential fraud are transactions that deviate from the learned historical data. Deep learning algorithm has shown to be efficient as it can adapt to evolving fraud patterns, as fraudsters devise new tactics, this algorithm can learn and detect new types of fraudulent activities.

AI-Powered Techniques for Fraud Prevention

We have been able to establish the pivotal role of Artificial Intelligence in Fraud detection, however, it is imperative that once fraud is detected, devices to prevent this fraud should be put in place. AI has been harnessed to put up several techniques to prevent Fraud, A few of these will be looked into:

Real-Time Monitoring

AI Systems can monitor web transactions in real time, analyzing numerous factors such as transaction amount, location, device information, and, user behavior. AI algorithms are capable of recognizing patterns in transaction data, they detect anomalies by comparing incoming transaction data to historical data that has been fed into the algorithm. Any deviation from the norm might be an indication of Fraud.

Behavioral Analysis for Identifying Anomalies

AI systems are capable of identifying patterns in user behavior such as login times, locations, purchase history, and, interaction patterns. When users deviate from their established profiles, AI systems take notice. Take for instance, when a user logs in from a specific location and suddenly logs in from a distant location, this is flagged as an anomaly, and as such, such transactions do not proceed. These systems are also capable of identifying unusual spending patterns or the use of uncommon devices.

Conclusion

Artificial Intelligence (AI) application to fraud detection and prevention is evolving and has shown great potential in eliminating fraud and scams over web transactions. AI can detect anomalies, identify fraudulent activities, and consequently prevent fraud. It is worth mentioning that AI is not capable of identifying and preventing the entirety of fraud on the web, this is because fraudsters devise dubious techniques to bypass the strict vetting of such transactions by AI algorithm. AI algorithms however learn from such and prevent future occurrences.

CSS Grid; pathway to flawless and responsive layout.

Opajobi Oyegoke — Tue, 17 Oct 2023 13:03:33 +0000

INTRODUCTION

CSS Grid is a powerful layout system that allows the creation of complex grid-based layouts in web development. Prior to the emergence of Grid, CSS had used float and positioning to move items around a web layout which posed so many limitations. The ability of CSS Grid to enable efficient, flexible and responsive web design by providing a two-dimensional grid-based layout system makes it one of the most widely used layout tool. The CSS Grid offers a grid-based layout system equipping rows and columns, making it easier to design web pages without the mental stress of having to use floats and positioning. It is near impossible to design a website without employing layouts, this depicts to a large scale the importance of layout in web design and the power of CSS grid in executing this task. It however might seem a challenge getting the hang of this pivotal tool at the start, openness to learning and constant practice are the recipe to mastering this tool. This document covers the basics of CSS Grid, enough to equip a newbie with knowledge essential to design a simple web layout and get those with prior knowledge going. Grab your pen and Computer, get on with me on this learning adventure.

At the end of this article, you should be able to design this web layout using CSS Grid. Its HTML and CSS code have been produced right under it for easier understanding. You should feel free to refer back to it if faced with any difficulty.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Grid</title>
</head>

<body>

    <div class="container">
       <div class="header">Header</div>
       <div class="nav">Nav</div>
       <div class="main">Main</div>
       <div class="sidebar">Sidebar</div>
       <div class="ads">Ads</div>
       <div class="footer">Footer</div>
    </div>

</body>

</html>

CSS

        .container{
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-gap: 1em;
            grid-template-rows: 100px 100px 100px;
        }

        .container div{
            padding: 20px;
        }

        .header{
            background-color: #bbb;
            grid-column: 1/4;
        }

        .ads{
            background-color: bisque;
        }

        .sidebar{
            background-color: antiquewhite;
        }

        .nav{
            background-color: aquamarine;
            grid-column: 1/2;
            grid-row: 2/4;
        }

        .main{
            background-color: cadetblue;
            grid-row: 2/4;
        }

        .footer{
            background-color: darkseagreen;
            grid-column: 1/4;
        }

I understand the code might seem a large chunk and quite incomprehensible, but I bet if you stick around till the end, you will be able to pull it of without breaking a sweat. Now let's dive into the dynamics;

GRID CONTAINERS

The grid container is an HTML element that dictates the overall structure of the grid. Factors that determine the overall structure of a grid layout includes the columns, rows and how items are placed within the grid.
An HTML element is styled as a grid container by assigning its display property to grid in CSS.

This is an HTML document showing the div element container and subsequent children div;

<!DOCTYPE html>

<html lang="en">
<head>
</head>
<body>
    <div class="container">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
</body>
</html>

*This container element is styled as a grid container;

        .container {
            display:grid;
            }

GRID ITEMS

**
A grid container contains grid items, in other words they are the child element of HTML element that behaves as container. Grid items can be wrapped in div tags

_ An image displaying the grid-container and grid-item in HTML
_
Take for added context, the grid container represents an Ice Cube Tray and the grid items, Ice Cubes. The grid container(Ice cube tray) defines the structure and layout while the grid items(ice cubes) are the elements positioned within that structure. I hope that better helps paint the picture.

GRID CONTAINER PROPERTIES

**
In CSS Grid, grid container properties are used to define the overall layout and structure of the grid. Here are some basic properties you can use to style a grid container:
- Grid-template-column
- Grid-template-rows
- Grid-gap

GRID-TEMPLATE-COLUMN

The Grid-template-column defines the number of columns or width in a grid layout.

        .container {
            display:grid;
            grid-template-column:1fr 1fr 1fr;
            }

The value is a space separated list where each value defines the width of the respective column. The value could take a wide range of units from pixels, fractional unit, percentage to a whole lot others.
Contextually, this can be likened to the number of columns present in an ice cube tray.

A simple layout with three columns of equal sizes.

GRID TEMPLATE ROW

The grid-template-rows property is used to specify the height of each row.

  .container {

            display: grid;
            grid-template-columns: 1fr 1fr 1fr ;
            grid-template-rows: 100px 50px ;
            grid-gap: 10px;

        }

The value is a space separated list where each value defines the height of respective row.

Grid-template-row property used to set height of row.
**

GRID-GAP

**
The grid-gap property is used to assign gap between columns and rows in the grid.

GRID ITEM PROPERTIES

CSS grid item properties are the several properties that is used to style and position grid items within a grid container.

Grid-column
Grid-row

GRID-COLUMN

The grid-column property is a shorthand for setting both grid-column-start and grid-column end properties. It allows you specify the starting and ending positions of a grid item within the grid columns. To place a grid-item in a column, you can refer to line numbers or use the keyword "span" to define how many columns the item will span.
Example, to make grid-item1 span the entire width;

.container>div:nth-child(1){
    grid-column:1/4;
}

This command will cause the column of the grid item to span column 1 through column 4, as shown below;

The numbering of the column and row lines might seem confusing, but fret not!, the image below explains the row and column lines.

Another Example to make item 6 span from column line 2 to 4

.container>div:nth-child(6){
    grid-column:2/4;
}

GRID-ROW

**
The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties and it is used to define on which row to place an item. This works similar to grid-column, the only difference is in that it spans the length o container instead of its width as regards grid-column.

CONCLUSION

**
Basically, CSS Grid is like a design genius for web layouts. The grid container is your magical playground where you define the layout with rows and columns. Then, the grid-items are like your design elements easily placed and styled within those rows and columns. It's a game changer for making stunning and organized web-pages. Get comfortable with the concept and practice often to master this tool.