DEV Community: Alphaexcel

AI Won't Replace Developers, But It Will Change How We Work

Alphaexcel — Wed, 25 Mar 2026 00:03:52 +0000

Lately, there’s been a growing fear in the software engineering world.

You see it everywhere:

developers on forums

people learning to code

tech conversations online

And the questions are usually the same:

Will AI replace developers?

Is it still worth learning programming?

Are we too late to the industry?

It’s easy to understand why people feel this way.

AI tools today can:

generate code

debug errors

explain complex concepts

write documentation

scaffold entire project structures

That’s a huge shift.

And yes, there are moments where you use AI and think:

“This just did in seconds what would have taken me much longer.”

That can feel intimidating at first.

But I’ve started seeing it differently — not as a replacement, but as a tool that changes how we work.

💡 Code Generation Is Not Software Engineering

One major misunderstanding in the AI discussion is this:

People assume that generating code equals software engineering.

It doesn’t.

Software engineering involves:

understanding problems

designing solutions

making architectural decisions

thinking about scalability

maintaining systems over time

communicating with teams

AI can generate output.

But developers provide judgment.

And that difference matters.

⚙️ Where AI Actually Helps Developers

Instead of replacing developers, AI is becoming a productivity tool.

Here’s where it helps most:

Development support

generating boilerplate code

scaffolding projects faster

Learning support

explaining unfamiliar concepts

breaking down complex frameworks

Debugging support

suggesting possible causes of errors

helping interpret stack traces

This doesn’t remove developers.

It removes friction.

⚠️ The Real Risk Isn’t AI

The real risk isn’t AI.

The real risk is refusing to adapt.

Technology has always evolved:

new frameworks appear

tools improve

workflows change

AI is just a faster version of that change.

Developers who learn how to work with AI will likely become more productive.

Developers who ignore it may struggle to keep up.

👨‍💻 My Perspective as Someone Growing in Tech

As someone still growing in tech, I’ve decided not to see AI as competition.

Instead, I see it as:

a learning accelerator

a productivity tool

and sometimes a debugging partner

There are moments where I use AI and think:

“This is doing in seconds what would have taken me much longer.”

But instead of seeing that as a threat, I see it as a way to grow faster.

However, there’s an important truth:

If you rely on AI without understanding the fundamentals, it will eventually show.

That’s why I’m focusing on:

core programming concepts

problem-solving

system thinking

and learning how to use AI effectively

🚀 The Future of Developers

AI will definitely change software development.

But it won’t eliminate developers.

It will change what makes a developer valuable.

In the future, strong developers will likely need:

better problem-solving skills

stronger system understanding

better judgment

ability to work with intelligent tools

And honestly, that’s not something to fear.

It’s something to grow into.

🔚 Final Thought

AI is not the enemy of developers.

It is a tool.

And like every powerful tool, what matters is how it is used.

The developers who thrive will not be the ones who resist change the most, but the ones who learn how to adapt and work with it.

What’s your take on AI in development?

Do you see it as a threat, a tool, or something in between?

Automated Diaspora Data Broker for African Exports

Alphaexcel — Sun, 06 Jul 2025 16:18:28 +0000

🛠️ What I Built

Automated Diaspora Data Broker for African Exports

An AI-powered data agent using Runner H to uncover weekly product demand insights from diaspora communities across the globe — helping small African exporters make smarter decisions and connect directly with active buyers.

This AI agent finds trending products, unmet diaspora needs, and untapped export opportunities using public social data, compiles everything into a structured Google Sheet, and gives actionable weekly recommendations.

Watch the automation in
action:

⚙️ How I Used Runner H

I created a multi-step prompt for Runner H that does the following:

Research diaspora conversations on platforms like Reddit, Twitter/X, and Facebook groups using keywords like:
- “Buy African food”
- “Where to order shea butter”
- “I miss Ankara fabric in Germany”
Analyze for patterns:
- Top requested African products
- Most mentioned countries and cities
- Challenges in sourcing or buying
Output a structured Google Sheet with:
- Trending Products tab
- Market Opportunities tab
- Weekly Recommendation tab
Summarize findings in 5 simple bullet points exporters can act on.

The prompt runs weekly and serves as an automated research assistant for African SMEs and solopreneurs.

🌍 Use Case & Impact

Real-World Problem

Small-scale exporters across Africa often struggle to:

Identify what diaspora consumers truly want
Know where to target for demand
Find time or tools to research effectively

Who This Helps

African entrepreneurs shipping local goods (e.g., snacks, fashion, cosmetics)
Diaspora-focused vendors selling online from the UK, US, or EU
Export marketers and trade promotion agencies

How This Helps

Saves time and money doing market research
Empowers smarter, data-backed exports
Opens pathways to new markets and unmet needs

❤️ Social Love

I’m participating in the Community Champion prize too!

I’ve shared my project on Twitter/X and LinkedIn — please check it out, engage, and share to help spread the vision for African SME empowerment through AI!

🔗 [https://x.com/oyinemi/status/1941894145439649816?t=87TNhIQ_JNnrzWCJbVtLwA&s=19]

Thanks for reading — I hope this inspires other entrepreneurs to use AI tools like Runner H for real-world impact! 🇳🇬✨

Let’s build smarter, export better, and connect global markets through data + creativity.

ANGULAR COMPONENT LIFECYCLE HOOK METHODS YOU SHOULD KNOW

Alphaexcel — Tue, 18 Oct 2022 15:52:17 +0000

Angular Lifecycle Hooks You Need to Know

What is “Lifecycle” and “Hook”?

Before understanding Angular lifecycle hooks, let’s break down the two key terms:

Lifecycle

Lifecycle refers to the different stages a component goes through from:

Creation
Rendering
Updating
And finally destruction

You can think of it like a living organism:

«It is “born”, it “grows”, and eventually it “dies”.»

Hook

A hook refers to specific points (or checkpoints) in a component’s lifecycle where Angular allows you to run custom logic.

So in simple terms:

«Hooks are the “entry points” into different stages of a component’s lifecycle.»

What is Angular Lifecycle Hook?

An Angular lifecycle hook is a set of special methods that allow you to tap into different stages of a component’s life.

A component lifecycle begins when:

Angular creates (instantiates) a component class
Renders the component view and its child views

It continues with:

Change detection (when Angular checks for data updates)
Updates to the view when data-bound properties change

Finally, the lifecycle ends when:

Angular destroys the component
Removes it from the DOM (Document Object Model)

«NB: Directives can also have lifecycle hooks.»

List of Angular Lifecycle Hooks

Angular provides the following lifecycle hooks:

- "ngOnChanges()"
- "ngOnInit()"
- "ngDoCheck()"
- "ngAfterContentInit()"
- "ngAfterContentChecked()"
- "ngAfterViewInit()"
- "ngAfterViewChecked()"
- "ngOnDestroy()"

Most Important Lifecycle Hooks You Should Know

Although Angular provides many lifecycle hooks, you will mostly use just a few in real projects.

ngOnChanges()

This hook is called whenever input-bound properties of a component change.

When to use it:

When you want to respond to changes in input data coming from a parent component.

2.ngOnInit()

This is one of the most commonly used lifecycle hooks.

It runs once after the component is initialized.

Typical use cases:

Fetching data from APIs
Initial setup logic
Component initialization tasks

Execution Flow Insight

When a component is created, Angular follows this order:

Class is instantiated
Constructor is called
Angular sets input properties 4."ngOnInit()" is called

Constructor vs ngOnInit

Constructor: Used for basic class setup and dependency injection
ngOnInit: Used for initialization logic that depends on Angular bindings

Simple Explanation:

When you create a component:

Angular first creates the class
Then runs the constructor
Then sets up input properties
Finally runs "ngOnInit"

That is why "ngOnInit()" is called after the constructor.

ngOnDestroy()

This hook is called just before Angular destroys a component.

When to use it:

Cleaning up subscriptions
Clearing timers
Preventing memory leaks

Why ngOnDestroy is Important

If you don’t clean up properly, your application may:

Consume unnecessary memory
Continue running background processes
Cause performance issues

"ngOnDestroy()" helps prevent this.

Summary of Lifecycle Flow

Here is a simplified lifecycle flow:

Component is created
Constructor runs
Angular initializes inputs
"ngOnInit()" runs
Component updates (change detection)
Component is destroyed → "ngOnDestroy()" runs

Conclusion

Angular lifecycle hooks help you control what happens at different stages of a component’s life.

Although Angular provides many hooks, the most important ones you will use daily are:

- "ngOnInit()"
- "ngOnChanges()"
- "ngOnDestroy()"

Understanding these three will already allow you to build better and more efficient Angular applications.

Keep practicing, and these concepts will become second nature.

Happy Coding 🚀

How to fetch data from the backend for PrimeNg drop down

Alphaexcel — Sun, 02 Oct 2022 03:31:05 +0000

When using components in PrimeNG, depending on the framework of your choice—which may be Angular, React, or another framework—you'll often need to fetch data from a backend and display it to users.

Today, we'll be discussing how to use the PrimeNG Dropdown component to display data fetched from a backend service.

Getting Started

The first thing you need to do is visit the PrimeNG documentation:

This link takes you directly to the Dropdown component documentation.

Next, install PrimeNG and PrimeIcons using the following commands:

npm install primeng --save
npm install primeicons --save

Once they have been installed successfully, you'll be able to import PrimeNG modules into your application.

For example:

import { AccordionModule } from 'primeng/accordion';
import { MenuItem } from 'primeng/api';

To use the Dropdown component specifically, import:

import { DropdownModule } from 'primeng/dropdown';

Then add it to your module imports.

A Quick Note on PrimeNG Modules

If you have worked with UI libraries such as Angular Material, PrimeNG, or similar component libraries, you may have noticed that each component requires its corresponding module to be imported.

This approach helps improve application performance by ensuring that only the components you need are included in the final build.

A good practice is to create a shared module where you import and export all the PrimeNG modules you frequently use. This makes your project easier to maintain and reduces repetitive imports across your application.

Fetching Data from the Backend

The first step is to create an empty array that will hold the data returned from your backend.

Next, subscribe to a service that contains the function responsible for fetching the data.

A typical example looks like this:

this.cityService.getCities().subscribe(data => {
  this.cities = data;
});

Once the data has been assigned to the array, you can bind it to your PrimeNG Dropdown.

Creating the Dropdown

The PrimeNG Dropdown component looks like this:

<p-dropdown
    [options]="cities"
    [(ngModel)]="selectedCity"
    optionLabel="name">
</p-dropdown>

Let's look at what each property does:

Property| Description
"options"| Contains the array of data displayed in the dropdown
"ngModel"| Stores the selected value
"optionLabel"| Determines which property is displayed to the user

In this example, "cities" represents the array containing the data returned from the backend.

To better understand how it works, let's use some mock data.

Understanding the Data Structure

The following example comes directly from the PrimeNG documentation:

interface City {
    name: string;
    code: string;
}

export class DropdownDemo {

    cities: City[];

    selectedCity: City;

    constructor() {
        this.cities = [
            { name: 'New York', code: 'NY' },
            { name: 'Rome', code: 'RM' },
            { name: 'London', code: 'LDN' },
            { name: 'Istanbul', code: 'IST' },
            { name: 'Paris', code: 'PRS' }
        ];
    }

}

Here, "cities" is an array of objects.

Each object contains two properties:

- "name"
- "code"

The Dropdown component uses the "optionLabel" property to determine which of these values should be displayed.

Understanding optionLabel

Suppose we have the following Dropdown:

<p-dropdown
    [options]="cities"
    [(ngModel)]="selectedCity"
    optionLabel="name">
</p-dropdown>

Since "optionLabel" is set to "name", the dropdown will display:

New York
Rome
London
Istanbul
Paris

However, if we change the component to:

<p-dropdown
    [options]="cities"
    [(ngModel)]="selectedCity"
    optionLabel="code">
</p-dropdown>

The dropdown will instead display:

NY
RM
LDN
IST
PRS

PrimeNG simply displays whichever property you specify in the "optionLabel".

Common Mistakes

Using the Wrong Property Name

Suppose your API returns:
[ { "cityName": "Lagos" } ]`plaintext
This will not work:

optionLabel="name"plaintext

Because the property is called "cityName", not "name".

Instead, use:

optionLabel="cityName"plaintext

Forgetting to Subscribe

This won't work:
this.cities = this.cityService.getCities();typescript
You must subscribe to the Observable:
this.cityService.getCities().subscribe(data => { this.cities = data; });typescript

Forgetting FormsModule

If you're using "ngModel", make sure you've imported:
`
import { FormsModule } from '@angular/forms';

`

Conclusion

Working with a PrimeNG Dropdown becomes much easier once you understand three key concepts:

"options" supplies the data.
"optionLabel" determines what users see.
"ngModel" stores the selected value.

Whether your data comes from a hardcoded array, a REST API, Firebase, or another backend service, the process remains exactly the same once the data is assigned to the array referenced by "options".

What was the first PrimeNG component that gave you trouble when you started using the library?

Let me know in the comments.

Happy coding!

STARTING OUT WITH ANGULAR

Alphaexcel — Sun, 25 Sep 2022 23:57:32 +0000

What is Angular?

Angular is a TypeScript-based JavaScript framework used for building web applications.

It is also described as a component-based framework that uses TypeScript, HTML, and CSS to build client-side Single Page Applications (SPAs).

Angular helps developers build structured, scalable applications by breaking the UI into reusable components.

Why Angular?

Angular is owned and maintained by Google, which means it receives regular updates and long-term support.
It is widely used for building enterprise-level applications.
It allows developers to build applications in a modular way, meaning you can focus on individual features without building everything at once.
Angular supports building Single Page Applications (SPA) where content updates dynamically without full page reloads.
It provides built-in tools for testing, routing, and state management, making development more organized.

Structure of Angular

Angular applications are built using modules and components.

Each component usually contains:

A TypeScript file (".ts") for logic
An HTML file for the view (what is displayed in the browser)
A CSS file for styling

Key Structure Concepts:

The TypeScript file handles logic and functionality.
The HTML template controls what the user sees.
Angular applications have a root module, which acts as the starting point of the application.
Different components communicate and work together to build the full application.

Standalone Components (Angular 14+)

With Angular 14 and above, standalone components were introduced.

These components:

Do not need to be declared inside a module
Can function independently like mini modules

This makes Angular applications more flexible and modern.

Main Concepts of Angular

Components

A component is the basic building block of an Angular application.

It controls a part of the user interface. For example:

A Navbar component handles navigation
A Dashboard component handles the main content

Creating a component:

ng generate component componentName

Replace "componentName" with the name you want.

Component Interaction

Component interaction is how components communicate with each other.

Parent → Child communication:

You use "@Input()" to pass data from parent to child.

Child → Parent communication:

You use "@Output()" with "EventEmitter".

NB:

Decorators are special functions that tell Angular how a class, property, or method should behave.

Pipes

Pipes are simple functions used in Angular templates to transform data.

They take input and return a formatted output.

Example uses:

Dates
Currency
Text formatting

Example:

{{ '26/01/1997' | date:'dd/MM/yyyy' }}

The "|" symbol is called a pipe operator.

Directives

Directives are classes that add extra behavior to elements in Angular.

They help you control:

Structure
Appearance
Behavior of elements

Types of directives:

Component Directives

These are the components themselves used in templates.

Attribute Directives

Used to change appearance or behavior of elements.

Examples:

- "ngClass"
- "ngStyle"
- "ngModel"

Structural Directives

Used to change the structure of the DOM.

Examples:

- "*ngIf"
- "*ngFor"
- "*ngSwitch"

Routing

Routing is how you navigate between different pages or views in an Angular application.

It allows you to move between:

Home page
Login page
Dashboard
Other views

How routing works:

Angular uses a "router-outlet" to display matched components.

Example route configuration:

path: '',
component: ComponentName

"path" defines the URL
"component" defines what should be displayed

Services

Services are used to handle logic and data that should not be inside components.

They are commonly used for:

API calls
Data sharing
Business logic

Real-life example:

A service is like a data subscription—you use it to access external data without overloading your component.

Creating a service:

ng generate service photos/photos

Using Dependency Injection:

To use a service inside a component:

constructor(private photoService: PhotoService) {}

This is called Dependency Injection, and it allows Angular to provide the service where needed.

Modules

Modules are containers that organize an Angular application.

They hold:

Components
Services
Pipes
Other modules

Creating a module:

ng generate module moduleName

Important Note:

An Angular application has one root module, and all other modules are connected to it.

Conclusion

Angular is a powerful framework that helps you build structured and scalable web applications.

By understanding components, services, routing, directives, and modules, you can start building real-world applications step by step.

Keep practicing, and things will start to make more sense with time.

Happy coding 🚀