DEV Community: Angel Afube

Why Semantic HTML Still Matters for SEO — Even in Modern Frameworks

Angel Afube — Fri, 20 Feb 2026 12:22:30 +0000

Building an ecommerce app using Angular comes with its demands, and the focus is majorly on seamless functionalities. You want your web app to function smoothly, with dynamic interfaces and a beautiful UI of course. While there is no harm in these objectives, there is also no harm in considering the SEO perspective during development. Good HTML helps Google rank your web app and makes it easier for users to find it in the first place.

So imagine the horror of discovering that while the website was visually and functionally amazing, it wasn't doing so well in terms of SEO ranking — because from Google's perspective, there was no structure. No clear signals about what the page was about or what content mattered most.

Let's dive in.

When Everything is a `div`, `span` or `p` Tag

Because this wasn't a company's website or a blog, it seemed fine to just have everything wrapped in divs and represented with spans and paragraphs. Page titles, section headings, product names, product descriptions — all in <p> or <span> tags, with CSS doing the heavy lifting to give them unique font sizes, weights, and colors.

<p class="text-lg font-semibold">
  Black Andi Dress
</p>

From a UI standpoint, it looked good. The structure appeared fine. But from Google's perspective, it was not.

Search engines do not read user interfaces the way users do. Instead, they rely on semantic structure to understand what a page is about, which content is important, and what should be prioritized. So, when you have just divs and paragraphs with cool styling, Google sees it as plain text everywhere on the page — no primary subject to anchor to, no product name to elevate, no page title to latch onto.

What Google is actually looking for when it crawls your page:

Tag	What it tells Google
`<h1>`	Main topic of the page
`<h2>, <h3>`	Sections and sub-sections
`<p>`	Supporting content or descriptions
`<a>`	Crawlable navigation paths

Without those signals, Google can't confidently say "this page is about the Black Andi Dress." It just sees "Black Andi Dress" as another piece of text floating somewhere on the page. No context. No hierarchy. No ranking advantage.

This is how leaning entirely on div and p tags with functional logic actively harms the SEO of your ecommerce application.

What Even Is Semantic HTML?

According to w3schools, A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements are div and span tags which tells nothing about its content.
Examples of semantic elements are h1, img, table, and article tags which clearly defines its content.

The key distinction is intentionality. Semantic HTML is about choosing tags that reflect what the content is, not just what it looks like.

Why Semantic HTML matters beyond SEO

Semantic HTML isn't just an SEO trick. It delivers real benefits across the board:
Accessibility — Screen readers and assistive technologies rely on semantic structure to help users with disabilities navigate a page. When everything is a <div>, a screen reader has no way of knowing where the navigation is, where the main content begins, or what the heading hierarchy looks like. Semantic tags provide those cues clearly.

Code maintainability — When you return to a codebase six months later (or hand it off to another developer), semantic HTML makes intent obvious. Finding a nav to update is far easier than hunting through a sea of <div class="nav-wrapper-2">.

Better user experience — When content is organized with meaningful tags, browsers can render pages more predictably, and users can navigate more intuitively — especially those using keyboard navigation or browser reader modes.

The Good News: You Don't Need to Touch the UI

The most common fear when fixing semantic HTML is: "If we change the tags, we'll break the design." That fear is largely unfounded, especially when using utility-first CSS like Tailwind.
Your classes stay exactly the same. You're just changing the wrapper:

Before ❌
<p class="text-lg font-semibold">
  Black Andi Dress
</p>

After ✅
<h2 class="text-lg font-semibold">
  Black Andi Dress
</h2>

No visual regression. No layout shifts. Same Tailwind classes. Massive semantic improvement.

The same logic applies across your product pages — promote product names to <h1> on detail pages, convert section titles to <h2> or <h3> where appropriate, and let heading hierarchy reflect the actual importance of content rather than how big you want the text to look.

Where It Gets Tricky in Angular and React

Frameworks introduce a subtle but important confusion: components that look semantic aren't always semantically correct at the HTML level.

In React, for example, libraries like Semantic UI offer components named <Header> and <Footer>. These look familiar, but they don't always output actual <header> or <footer> HTML elements. The underlying HTML may vary — and what Google reads is the rendered HTML, not the component names.

In Angular, the trap is slightly different. Consider this:

<p [routerLink]="['/stores', storeName, productCode]">
  Black Andi Dress
</p>

This navigates correctly when a user clicks it. Angular handles the routing perfectly. But from Google's perspective, this is just a paragraph of text. It is not a linK, hence, Google will not recognize it as such.

Tag Implementation	Crawlable by Google	SEO Value
`<p routerLink>`	NO	NO
`<div (click)>`	NO	NO
`<a routerLink>`	YES	YES
`<a href>`	YES	YES

The correct fix is to use an actual <a> tag with routerLink:

 <a [routerLink]="['/stores', singlestore.storename ]"
  class="p-3 font-medium text-sm text-green-400 hover:text-green-600 transition-colors"
  title="{{ product?.product_name }}"
>
  {{ product?.product_name }}
</a>

Angular renders this as a proper <a href="..."> in the DOM — one that Google can crawl, follow, and use to discover product pages.

Best Practices

A few principles to keep front of mind as you work through this:

One <h1> per page, preferably: The <h1> signals the primary topic of a page to search engines. Multiple <h1> tags dilute that signal. On a product detail page, the product name gets the **<h1>**. On a listing page, the same product name might only warrant an **<h3>**.

Headings define importance, not appearance. This is the most common misunderstanding. If you need a small-looking heading, use the appropriate heading tag and control the size with CSS. Don't reach for a **<p>** tag just because you want smaller text.

A basic, effective heading structure for a product page looks like this:

<h1>Black Andi Dress</h1>
<h2>Product Description</h2>
<h2>Specifications</h2>
<h2>Pricing & Availability</h2>

Even two or three clear headings dramatically improve SEO clarity for the page.
Combine semantic tags for compounding effect. Link equity and heading signals stack:

<h3>
  <a [routerLink]="...">Black Andi Dress</a>
</h3>

Don't use <div (click)> or <p routerLink> for navigation: If something should be a link, it should be an **<a>** tag.

Use semantic structure tags to define regions. Wrap your navigation in <nav>, your main content in <main>, your page header in <header>. These tags cost nothing to add and give Google a clearer map of your page.

Don't use HTML to style — that's CSS's job: Use tags to describe what content is, and let your stylesheet handle how it looks. This separation keeps your markup clean, meaningful, and maintainable.

Conclusion

Semantic HTML is not outdated. It's not a relic of the pre-framework era. And modern frameworks — as powerful as they are — do not replace it.

Even in a fully dynamic Angular SPA, Google still depends on semantic structure to understand your content.

It's a matter of being intentional about the tags you reach for — choosing <h1> because that element is the main heading, choosing <a> because that element is a link. The styling stays the same. The SEO impact does not.

Build beautiful. Build functional. But also build with meaning — because that's what gets you found.

Appreciation on a second look: Lessons from Revisiting Bootstrap

Angel Afube — Fri, 17 Oct 2025 13:19:05 +0000

When I started my frontend development journey, HTML and CSS were my comfort zone. Once I began encountering libraries and frameworks, I’ll be honest—I resisted. Why complicate things? Vanilla HTML and CSS worked just fine, or so I thought.

Everything changed after my Tech4Dev Women Techsters Fellowship during my NYSC year. I realized that HTML and CSS were just the foundation—a glimpse into the broader and more dynamic world of frontend development. I became excited about learning the tools that make modern web applications powerful.

Then came Bootstrap.

At first, I only learned Bootstrap because I had to. I wasn’t exactly impressed. Later on, I discovered Tailwind CSS and fell in love instantly. Its utility-first approach was everything I wanted, and honestly, it made me think Bootstrap had been the problem all along.
But recently, while taking a Udemy course that brought up Bootstrap again, I decided to revisit it with an open mind.

And guess what? I learned a lot.

This article isn’t a Tailwind vs. Bootstrap comparison. Rather, it’s about the lessons I learned from revisiting Bootstrap and working with it on a simple single-page application (SPA). Special shoutout to Fortunate Adediwura for making his awesome design available—check out the Figma link here.

A Quick Refresher: What Is Bootstrap?

Bootstrap is a popular open-source CSS framework originally developed by Twitter. It provides a collection of prebuilt components, grid systems, and utilities that help developers build responsive and mobile-first websites quickly.

Setting Up Bootstrap

You can set up Bootstrap in two main ways:

Via CDN: Just copy the link to Bootstrap’s CSS and JS into your HTML file.
Using package manager: For more integrated setups in modern web apps, you can install it via npm.
Visit the Bootstrap official page for more details on this.

Highlights from My Simple SPA

To test my renewed perspective, I built a simple single-page application (SPA) using Bootstrap.

The design included four main sections:

A responsive navbar
A clean hero section
Multiple content blocks (fictional logistics services)
A neat, consistent footer

You can explore the full code and structure on my GitHub repository, or view the live version here.

Revisiting Bootstrap through this project gave me a fresh appreciation for its structure and hidden power:
Responsive Navbar
I used Bootstrap’s built-in classes — navbar, navbar-expand-lg, container-fluid, and collapse.
The magic here was responsiveness: the navbar automatically collapsed into a hamburger menu on smaller screens, no custom JavaScript required.
Bootstrap handled accessibility, toggling, and alignment straight out of the box.

💡 Lesson: Bootstrap simplifies responsive navigation so much that you can focus on design instead of device breakpoints.

Clean Hero Section
The hero relied on the Bootstrap grid (row, col-md-*) and utility classes like d-flex, justify-content-center, and align-items-center for layout.
It felt structured yet flexible—perfect for centering text and images elegantly across all devices.

💡 Lesson: Bootstrap’s grid system transforms complex layout work into clean, semantic class combinations.

Multiple Content Blocks (Our Services)
Each service—Air Freight, Ocean Freight, Ground Shipping—was built using Bootstrap’s card component and grid layout (row g-0, col-md-*).
The alternating image-text pattern showcased how easily Bootstrap handles multi-column designs with minimal CSS.
Images stayed fluid with the img-fluid class, adapting beautifully to any screen width.

💡 Lesson: The Bootstrap grid + card combo makes it easy to create polished layouts that look custom-made.

Info Section (Package Forwarding Details)
Here, I used a two-column layout with container, row gx-5, and col.
The list items used flex utilities (d-flex, gap-*, text-start) to align icons and text neatly without writing a single line of custom alignment CSS.

💡 Lesson: Bootstrap’s flexbox utilities make modern layouts intuitive, clean, and responsive by default.

Neat, Consistent Footer
The footer used the Bootstrap grid (row, col) and nav utilities (nav flex-column) to organize links into tidy, responsive columns.
The consistent spacing (mb-2, p-0) kept everything balanced, while custom colors gave it a unified dark theme.

💡 Lesson: With Bootstrap’s grid and nav utilities, even simple footers can feel professional and well-structured.

Revisiting Bootstrap through this project helped me appreciate its structure and power. Here are six lessons I took away:

Lessons from Revisiting Bootstrap

It's Simple and Straightforward to Use
Bootstrap’s documentation is beginner-friendly. Whether you're coding the navbar or setting up modals, it’s easy to find what you need and get going quickly.
It Has Helpful and Interactive Components
From buttons to carousels to alerts, Bootstrap offers a wide range of components out of the box. These are not just static — they come with JavaScript behavior that works with little configuration.
Responsiveness Is a Built-in Goal
Bootstrap's grid system makes it incredibly easy to build layouts that respond to different screen sizes. I didn’t have to write custom media queries—just use the right classes, and it works.
It Ensures Cross-Browser Compatibility
I tested the SPA on multiple browsers, and it worked consistently across all of them. Bootstrap abstracts away many browser inconsistencies, saving you debugging time.
Access to a Vast Open Source Community
Bootstrap has a massive developer community. Need templates, UI kits, or troubleshooting tips? The ecosystem has you covered.
I Need to Learn More About Licensing
Using Bootstrap made me realize how important it is to understand software licenses—especially when using open-source frameworks or integrating UI kits. ~~(More on this in a future article.)~~

Final Thoughts

Revisiting Bootstrap was a humbling and enlightening experience. Sometimes, it’s not about picking the newest or trendiest tool—it’s about using the right one for the job. While TailwindCSS remains my go-to for many projects, I now see the value in Bootstrap, especially for rapid prototyping and scalable responsive design.

If you're like me and once dismissed Bootstrap, give it another try. You just might be surprised.

Thanks for reading! ✨

Have you revisited any tools recently and changed your mind about them? Let me know in the comments.

Why Skipping HTML & CSS Fundamentals Will Hurt You - Even in This Age of AI

Angel Afube — Fri, 04 Jul 2025 08:54:20 +0000

With the ease that comes with using AI tools, it's tempting to think developers can skip the fundamentals of HTML and CSS. When ChatGPT or Copilot can write code, build layouts, and debug issues in seconds, why not jump straight into React, TypeScript, Angular, and the like? The world is moving fast - who has time for the "simple stuff"?

But here's the hard truth: if you don't understand basic HTML and CSS, everything else will eventually feel like a struggle.

I've seen it firsthand. Interns and trainees are often excited to move past seemingly redundant "HTML AND CSS" and dive straight into working with components and complicated logic flows. (Even I once felt HTML and CSS were skippable - back when AI wasn't this dominant in the development world.) But excitement quickly fades when they hit a wall: a stubborn layout, a flexbox puzzle, or a broken grid. Suddenly, the magic of frameworks seems far away.

Some new developers say, "I know a bit of HTML and CSS - I just want to go deeper." But the thing about going deeper is this: when your foundation is shaky, learning seems more complicated. And then there's another group - those who think that since AI can generate code, they don't need to learn much. While they're not entirely wrong, we must remember this: prompt engineering feeds off what we know. If you don't understand the basics, you might not even know what to ask or how to ask.

The Illusion of Speed

AI is amazing. I use it. You probably do too. It speeds up coding, makes suggestions, and even explains syntax. But it should support your thinking, not replace it.

If you don't understand how CSS layout works or what z-index actually controls, you'll find yourself asking the wrong questions - and rewriting the same broken and confusing prompt over and over again.

Fundamentals Are Not Optional

For a long time, I saw HTML and CSS as just an "introduction to coding." But over time, I realized that they are not optional - they are the core technology of the web. Not surprising that every framework and library I've worked with brings me back to them.

Here are some of the core concepts every frontend developer should be comfortable with:

Semantic HTML - Not just for accessibility, but for SEO and structure.
The Box Model - Understanding padding, borders, margins, and how they stack up is essential for layout clarity.
Flexbox and Grid - These are the backbone of responsive designs.
CSS Specificity and the Cascade - Know why your styles aren't applying, and how to fix them.
Media Queries - Because mobile-first isn't just a trend - it's a design principle.
Debugging with DevTools - Not guesswork, but actual analysis of what's wrong.

Learn Slow to Build Fast

I'm not saying you should stay stuck in tutorials forever. But I am saying: learn the right things at the right time.

Master HTML and CSS before you dive into animation libraries, utility-first frameworks, or complex state management. It might feel slow at first, but it saves you from frustration, rewrites, and embarrassing bugs down the line.

When you understand how layouts truly work, you spend less time asking: "Why is my div not centered?" And more time building real features with confidence and clarity.

AI Helps Those Who Know

Here's the final truth: AI tools work best when you already understand what they're doing.

They can suggest snippets and auto-complete lines, but only you can actually put the suggestions to good use by debugging intelligently, tweaking the output to suit your need, or even ask better questions. AI doesn't replace fundamentals - it accelerates those who already have them.

So don't skip the basics.Keep your excitement to go deeper - but make sure your foundation is solid first.

If you're starting out or mentoring others, don't rush past HTML and CSS. Revisit them. Play with them. Break things, fix them, and learn slowly. It's the best investment you can make in your future as a developer; especially with the threat of AI taking over [a topic for another day].

The Rise of AI-Generated Content: Cheating or Smart Work?

Angel Afube — Sat, 01 Mar 2025 13:39:15 +0000

Recently, my manager asked me if I was afraid of the moves AI was making in my field as a front-end developer. Without hesitation, I said yes.

Why? Because the frontend development landscape is already in a constant state of flux - even without AI in the picture. Frameworks evolve rapidly, updates roll out frequently, and competition is already fierce. Adding AI to the equation only intensifies the challenge.

Curious about others' perspectives, I asked a senior colleague the same question. His response?

"Worrying won't change anything. It just means you have to be better. Change will take some jobs and create new ones."

Then he concluded with, "But that's me just being optimistic though."

Shortly after that conversation, I came across an article by the VP of Content at Medium, where he outlined how Medium is approaching AI-generated writing. The decision, he explained, came after gathering feedback from writers and readers on whether fully AI-generated content should be allowed on the platform.

The responses were mixed.

Some users strongly believed that Medium should remain a platform for human knowledge and experiences - not AI-generated content. Others suggested a clear disclosure: If your content is AI-generated, identify it as such. And then there was the group that stood by their strong no-no: If you're just going to copy and paste AI-generated content, don't even bother publishing.

Medium, like many other platforms, welcomes the responsible use of AI tools to enhance writing. However, as AI capabilities evolve, I am certain that platforms like Medium are struggling to strike a balance between innovation and authenticity. Policies around AI-generated content are constantly being revisited, as there's no one-size-fits-all answer - at least, not yet.

AI: A Powerful Tool or a Threat to Creativity?

The debate over AI replacing traditionally human-centric jobs is a table-shaker, and it may never really reach a universally accepted conclusion. AI has undoubtedly been a productivity booster, helping professionals across industries work faster and more efficiently.

I'll admit - even as I write this article, I might use an AI-powered tool to refine my grammar and structure. 😉

But then, there's the other side of the coin - over-reliance or abuse of AI. Some people use AI not as a tool but as their primary brainpower, copying, and pasting content without adding originality or effort. So, I completely understand the frustration of spending hours researching, writing, editing, and optimizing a piece with a unique voice, only for someone else to generate similar content in seconds and potentially receive the same (or even more) credit. Even ChatGPT gives a disclaimer that it can make mistakes; hence users must fact-check important information.

What's worse? The skepticism around well-written content.

I recently saw a TikTok video where a lady ranted about how a beautifully crafted post was dismissed with the comment:

"This is definitely AI." or "na ChatGPT"

Why? Simply because it was grammatically correct, had proper punctuation, and flowed logically.

Since childhood, we've been taught grammar, punctuation, and effective reading, writing, and speaking. And yet, with the rise of AI-generated content, we now have to defend our own intelligence - as if writing well is no longer a human skill but an AI-generated trick.

At the same time, I kinda understand the counterargument:
"AI is a tool - if you can prompt it correctly to generate quality content, that's a skill in itself. Why spend hours writing when AI can do it in minutes?"

It's a fair point. Knowing how to structure AI prompts for optimal output is a skill. But does that mean AI-generated content should be treated the same as human-written content?

The Desperate Need for Clear AI Guidelines

Now more than ever, we need a centralized, objective standard defining the responsible and acceptable use of AI in content creation.

Should AI-generated content be clearly labeled?
Should platforms like Medium ban fully AI-written content?
Or is using AI to generate content just another form of smart work?

What do you think? Are you in the "AI should always be disclosed" camp, or do you believe that good content is good content, no matter how it's created?

How to Fix Soft 404 Errors and Create a Custom 404 Page in Next.js 14

Angel Afube — Wed, 22 Jan 2025 13:33:24 +0000

When I first came across an email alert from Google Search Console about soft 404 errors on the website built with Next.js 14, I had no idea what they were and what I was expected to do to fix them. I only knew about regular 404 errors! As I learned afterward, Soft 404 errors typically affect dynamically rendered content and can harm your SEO efforts and user experience.

In this article, I'll cover:

What soft 404 errors are and why they shouldn't be ignored.
How I fixed the soft 404 issues on my Next.js site.
A simple guide to creating a custom 404 page in Next.js 14.

What Is a Soft 404 Error?

According to Google Search Central, a soft 404 occurs when a server responds with a 200 OK status code for a page that doesn't exist instead of a 404 Not Found.
This confuses Google because the page is marked as valid (via the 200 status code), but it lacks meaningful content for users.

Common Causes of Soft 404 Errors

• Pages with weak or no content.
• Duplicate pages.
• Outdated or broken links.
• URL typos or misspellings.
• Incorrect server configurations.

Why Should You Fix Soft 404 Errors?

Leaving soft 404 errors unresolved can lead to:

SEO Damage
o Search engines waste their crawl budget rechecking invalid pages instead of indexing valid ones.
o Reduced visibility as your site's structure appears unreliable.
Poor User Experience
o Visitors encountering blank or broken pages lose trust in your site.
o Websites that depend on customer interaction may experience higher bounce rates.

How I Fixed Soft 404 Errors in My Next.js Site

Here’s the step-by-step approach I took to resolve the issue flagged by Google Search Console:

Investigate the Issue
Using the Google Search Console report, I identified that the flagged pages were:
• Deleted static pages from a previous setup.
• Pages deleted from the CMS (Content Management System) but still indexed by Google.
If you do not have Google Search Console linked to your site, tools like Screaming Frog can help identify soft 404s.
Remove Redundant Static Pages
In Next.js, static files located in the /pages directory are automatically treated as valid pages. I found several outdated files that were no longer linked to the site’s navigation. I deleted these files to prevent Google from attempting to index them. Alternatively, you can configure your server to return the appropriate 404 or 410 Gone status codes for such pages.
Redirect Missing Dynamic Content
For pages relying on CMS data, I implemented logic to redirect users to a custom 404 page if the requested data was missing. Here's a simplified version of the code:

Best Practices for Preventing Soft 404 Errors

Enhance Weak Content Pages with minimal content can be flagged as soft 404s. Ensure you have engaging and high-quality content that meets search engine standards.
Return Correct HTTP Status Codes If a page doesn’t exist, ensure your server or API returns a 404 status code. For example, in Next.js:

Set Up Redirects for Moved Pages If a page is permanently removed or moved, use a 301 redirect to send users and search engines to the correct page. This tells them the content has a new permanent location.
Use Robots.txt to Manage Crawling Disallow bots from crawling pages you don’t want indexed (e.g., admin panels or outdated URLs).
Monitor Regularly Make it a habit to check Google Search Console or other SEO tools for new soft 404 errors and fix them promptly.

Creating a Custom 404 Page in Next.js 14

A custom 404 page enhances your brand and guides lost users back to your site. In Next.js, create a pages/404.js file for file-based routing or app/not-found.js for app routing:

File-Based Routing

App Routing

Style the page to align with your site’s branding and consider adding search functionality or links to popular pages.

Conclusion

Soft 404 errors can undermine your site’s SEO and user trust. Identifying and fixing these errors with redirects, better content, and a custom 404 page keeps your site user-friendly, and optimized for search engines.

My Journey Through Hacktoberfest 2024

Angel Afube — Thu, 31 Oct 2024 13:44:22 +0000

When I first heard about Hacktoberfest in the She Code Africa Slack channel, I was intrigued but unsure. The beautifully animated website immediately hooked me, though the vast list of GitHub repositories felt daunting.

Finding My Feet

The turning point came during an Expo session where Busayo Ojo broke down the event and shared strategies for finding projects that matched my skills. Armed with newfound confidence, I registered and began scouting for projects where I could contribute as both a developer and technical writer.

First Contributions: Struggling and Succeeding

By October 9, just days after registering, I felt a sense of frustration. It seemed like everyone around me was securing tasks and getting assigned issues, while I was still pitching myself to project maintainers. My first project, Minifolio, led me to propose more edits than I had planned, pushing me to up my contributions. Shortly after, I found AgencyWebsite, where I enhanced the README and CONTRIBUTING.md files—a natural fit for my technical writing skills.

My journey continued with Flowinance and my first Wiki page contribution, which was a valuable learning experience. My final PR was with JobSewa, where I revamped the UI on the job application page, blending design and development for a user-friendly interface.

Projects

Minifolio
Minimal portfolio template for developers
Repo | Live link
Contributions: Proposed significant UI improvements.
AgencyWebsite
React/Vite-based agency website enhanced with 3D elements
Repo
Contributions: Enhanced documentation with a refined README and CONTRIBUTING.md.
Flowinance
Financial management app for transaction tracking
Repo | Wiki
Contributions: Created Wiki documentation to improve project navigation.
JobSewa
Job portal for connecting agricultural workers and employers
Repo | Live link
Contributions: Redesigned the UI for the job application page.

Each of these projects allowed me to apply and grow my skills as both a developer and technical writer while collaborating with fantastic maintainers and contributors!

Key Takeaways

Open source is for everyone, regardless of your experience level.
Share your ideas freely; it’s how the best outcomes happen.
Embrace feedback; corrections help you grow.
Open-source projects can feel overwhelming, but the rewards outweigh the hurdles.

Special Thanks

Heartfelt appreciation to the Hacktoberfest organizers and project maintainers who made this journey worthwhile—your dedication made open-source accessible and welcoming.

Big thanks to Victory Ejike for encouraging me to bid for projects, even when I lacked experience. To the incredible, badass product designers who, despite their busy schedules, took the time to give me valuable feedback — Faith Egwenu and Sophia Adepoju; thank you for the design inspirations that elevated my contributions. Your creativity and guidance were instrumental in shaping my UI enhancements!

Looking Ahead

Hacktoberfest was a rollercoaster of emotions and wins. With each PR, I became more comfortable in open-source spaces, learned to balance roles as a developer and writer, and built valuable skills. I’m eager to continue contributing to open-source, knowing persistence pays off and every project offers fresh lessons. Here’s to many more Hacktoberfests!

A Simple HTTP Status Code Cheat, Maybe?

Angel Afube — Thu, 12 Sep 2024 12:07:43 +0000

I used to be puzzled by how senior developers instantly knew what to do based on the HTTP status codes they saw in the network tab. They would glance at the response and say things like, “Let me check the endpoint or payload,” or “It’s something on the backend or the server,” or even just “Hold on, let’s see if something else pops up.” Sure, I knew that the famous 200 status meant all was good, but beyond that, I had to constantly look up codes whenever they came up.

Then, I came across a hack in Dr. Angela Yu’s Udemy course, where she referenced a keynote from Sander Hoogendoorn. He shared a simple way to remember the categories of HTTP status codes:

100’s → Hold on
200’s → Here you go!
300’s → Go away.
400’s → You screwed up (client-side)
500’s → I screwed up (server-side)

This tip really helped me reduce the time I spent searching for what each status code meant. Now, like senior devs 🤭🙈, I can quickly identify where the issue might be coming from just by looking at the first digit of the status code. While I still refer to the documentation for details, this cheat sheet gives me a great starting point. I’m sharing this with you in the hopes that it helps you too!

What Are HTTP Codes?

HTTP status codes are three-digit messages from a server in response to a browser's request. They help communicate how the request was handled — whether successful, redirected, failed, or other properties about the result of the request. They are essential in web development, giving developers and browsers critical information about the state of the server and the requested resource.

Why Are They Helpful?

They provide insights for debugging and error handling. By recognizing the meaning behind the codes, developers can focus their debugging efforts, quickly detect the root of issues, and hence; speed up the development process.
These codes serve as communication bridges between the client and server-side; to handle actions such as browser behavior, redirects, caching, etc.
HTTP response codes play an important role in user experience and search engine optimization. For instance, search engines use these codes to discover and evaluate the health of a website. Then, the 404 - not found pages guide users on the line of action to take - whether they inputted the wrong URL or the page is no longer available.
Search engines are not the only ones who monitor the health of an application with status codes. DevOps team can also proactively use HTTP codes to monitor and spot issues with the server.

Common HTTP Status Codes and Their Meanings

While I have the summarized bit, I still need some of these short explanations below to guide me in my debugging process. Here's a quick run-through of some common HTTP status codes I come across when I am coding or even just browsing through a site:

100 Continue
The server has received the request headers, and the client should proceed to send the request body.
200 OK
The request was successful, and the server returned the requested resource.
201 Created
The request has been fulfilled, and a new resource has been created.
204 No Content
The server successfully processed the request, but there is no content to send back.
301 Moved Permanently
The resource has been permanently moved to a new URL.
302 Found
The resource is temporarily located at a different URL.
304 Not Modified
The resource has not been modified since the last request, and the client can use the cached version.
400 Bad Request
The server could not understand the request due to invalid syntax.
401 Unauthorized
The client must authenticate itself to get the requested response.
403 Forbidden
The server understands the request, but the client does not have permission to access the resource.
404 Not Found
The server could not find the requested resource.
410 Gone
The resource is no longer available and has been permanently removed.
500 Internal Server Error
The server encountered an unexpected condition that prevented it from fulfilling the request.
501 Not Implemented
The server does not support the functionality required to fulfill the request.
502 Bad Gateway
The server, while trying to process the request, received an invalid response from another server it relied on to fulfill the request.
503 Service Unavailable
The server is not ready to handle the request, often due to being overloaded or down for maintenance.
504 Gateway Timeout
The server, while acting as a gateway, did not receive a timely response from the upstream server.
505 HTTP Version Not Supported
The server does not support the version of HTTP used in the request.

So now whenever I come across status codes, I have this shortcode in my head with the brief explanations above.
100's → wait
200's → good
300's → go
400's → my bad
500's → your bad

Feel free to create your own version or stick to Sander Hoogendoorn's! As I have highlighted earlier, this cheat is not a replacement for deep research, but it's a practical starting point for quickly diagnosing HTTP status codes and speeding up your development process.

"How Confusing Can Version Control Be?"

Angel Afube — Mon, 09 Sep 2024 12:51:54 +0000

As a junior front-end developer, my initial thought when asked to study extensively on version control, was, "How hard could it be?" Create a branch, write code, commit, push, and then raise a pull request—simple, right? Well, I quickly realized that version control has its pitfalls, especially if you don’t fully understand how it works. Here are some lessons I learned the hard way that may help you avoid similar mistakes:

1. Always Pull from the Main Branch

If you push your code and notice that your changes aren’t reflected or that you're missing some updates, you probably forgot to pull first. Trust me, I learned this the hard way! Before you start a new branch, always pull the latest changes from the default/main branch to ensure you're working with the latest version of the project. Failure to do so can result in missing key components that your task may depend on and, worst of all, merge conflicts later.

2. How do branches work exactly?

I once attempted to revert a hero section ui by switching to an older branch and pushing, assuming the old design would return with the push. But nothing changed! It felt like trying to unlock a door with the wrong key — no matter how hard I tried, it just wouldn't work. What I didn’t understand was that branches are independent lines of development, which serve as pointers to commits. So switching to an old branch would only point to the project history recorded in that branch. To effect changes, one must compare and merge with the main branch properly.

3. git stash and git stash pop are Lifesavers

Ever forget to switch branches and accidentally make changes on the main branch? Yep, that happened to me. But git stash saved the day. It temporarily stores your changes, allowing you to switch branches and apply the changes later with git stash pop. git reset HEAD is another powerful command to undo changes in case you realize you messed up.

4. Handling Divergent Branches

Divergent branches occur when the histories of two branches have different sets of commits that do not share a common base. When branches diverge, choosing how to reconcile them is crucial. Please opt for git config pull.rebase false (merge) over git config pull.rebase true (rebase) or git config pull.ff only (fast-forward only) — a tip from a senior dev!. It is a safer option to preserve the history of all commits and have a record of all merges.

5. Organized Commits Are Key

This isn’t directly about version control, but well-organized commits make git log incredibly helpful. Don't wait until you’re almost done to make one huge commit. Break your work into smaller, meaningful commits. If you're setting up the UI, commit. Consuming an endpoint? Commit again. Make each step trackable; especially for times when you might need to revert.

6. Use .gitignore wisely

Some files and configurations (like sensitive credentials) should be excluded from version control. Make sure you have a proper .gitignore file to avoid accidentally pushing sensitive or unnecessary files to the repo. You don’t want to expose secret API keys or clutter your repo with logs.

These are just a few version control tips from my experience as a junior dev. They’re by no means exhaustive, but I hope they save you from some of the mistakes I made. If you have any other tips or pitfalls to avoid, feel free to share them with me!

Exploring the Angular vs. Next.js Debate

Angel Afube — Sat, 29 Jun 2024 03:11:59 +0000

Choosing the right development framework can make or break a project; shaping its efficiency, production quality, and overall success. Every developer has their favorite, but the real challenge lies in selecting the one that best suits your project needs.

In the dynamic world of JavaScript frameworks, Next.js and Angular stand out as two of the most powerful and popular choices. This article takes you on an exploration of these powerful frameworks, uncovering their unique strengths and ideal use cases. So whether you're chasing efficiency, scalability, or just the coolest tech, we've got the insights you need to make an informed decision.

Nextjs

Next.js is a powerful React framework that takes web development to the next level. Its React component is designed to help developers create dynamic, full-stack web applications with ease. Imagine building sleek, responsive user interfaces that not only look great but perform exceptionally well. With Next.js, you can do just that, thanks to its impressive features like static site generation (SSG), server-side rendering (SSR), and incremental site regeneration, among other cool features.

The development process is streamlined by configuring the necessary tooling for React projects right out of the box. Its built-in server and compatibility with numerous npm modules allow developers to jump-start any project quickly. This means you can focus more on building and less on configuration, saving both time and cost. The result? An interactive, fast, and awesome web application that stands out in today's digital landscape.

Key features
Hybrid Pre-rendering: Next.js provides developers with the flexibility to choose how they render their pages, whether through static site generation (SSG), server-side rendering (SSR), or a combination of both. This approach ensures that users experience fast and smooth performance, regardless of the rendering method chosen.

Simplified File-based Routing: Next.js comes with a simplified file-based routing system that supports nested routing, error handling, and loading states. This makes creating and managing page routes straightforward and efficient, enhancing the overall development process.

Efficient Code Splitting: With Nextjs's code splitting, the codes are partitioned into smaller bundles, such that only the necessary javascript is loaded on demand. This results in faster page load times and seamless navigation throughout the web app, significantly improving the user experience.

Optimization of Images, Scripts, and Fonts: Next.js includes built-in optimizations for images, scripts, and fonts, enhancing website rendering and core web vitals. These optimizations lead to faster loading times and a better overall user experience.

Advanced Data Fetching: Next.JS excels in data fetching with built-in capabilities for importing data from external APIs. Using async/await in server components and an extended fetch API, developers can handle request memoization, data caching, and revalidation effortlessly. This simplifies the process of retrieving data, making code easier and more efficient to read and write.

Pros

Impressive web speed and performance owing to Next.js's awesome built-in features like code splitting, hybrid pre-rendering, image optimization, and intuitive data-fetching.
Simplified file and routing structure for seamless web application development.
A large, active, and reliable community; making helpful resources and essential documentation available for developers to code, debug, and build more efficiently.

Cons

For developers with little or no knowledge of React, learning Next.js can be a bit of a hurdle.
It may seem overly complex for certain use cases.
There are concerns about its limited scalability, which can lead to performance issues.

Angular

Angular is a powerhouse application-design framework perfect for crafting efficient and sophisticated single-page apps. With its reusable components, impressive two-way data binding, and seamless dependency injection, Angular simplifies the creation of dynamic, complex, and large-scale applications.

Additionally, its extensive third-party libraries and vibrant community support make it a go-to choice for developers aiming to build robust, complex, and high-performance web applications.

Key features
Component-Based Architecture: Angular's architecture, similar to React, promotes reusability and maintainability. By breaking down the UI into reusable components, developers can build and manage complex applications more efficiently.

Seamless Two-Way Data Binding: The two-way binding available with Angular automatically synchronizes the model and the view, saving developers time and effort. This ensures that any changes in the model are instantly reflected in the view and vice versa, simplifying state management.

Powerful Dependency Injection: Angular's robust dependency injection system streamlines the management of code and functionalities. This system efficiently delivers services and manages dependencies, ensuring that components have everything they need to function properly.

Built-in Routing System: Angular has an impressive built-in routing system that allows developers to map different states to specific URLs. This feature supports dynamic user interfaces and multiple views, enhancing the single-page application experience.

Reactive Programming Support: The reactive programming possible with Angular makes it fantastic for handling asynchronous data streams and events. This allows for automatic updates whenever data changes, leading to more responsive applications.

Powerful Template Language: Angular's powerful template language simplifies DOM manipulation, enabling developers to create interactive and dynamic user interfaces with ease. This makes building complex UIs more intuitive and efficient.

Pros

It is a great framework for building large-scale, enterprise-level, and complex web applications; ensuring speed, high performance, and scalability.
Features such as dependency injection, an inbuilt routing system, and two-way data binding make it easy to manage and maintain the codebase.
A large and vibrant community dedicated to constantly improving the functionalities available; and providing a wealth of resources to keep developers informed and equipped to build applications with Angular.

Cons

For developers new to Angular, learning can be time-consuming and challenging.
While Angular is powerful, it can sometimes face certain performance limitations.
Angular's extensive functionalities can be somewhat of an overkill for lightweight projects.

The Comparison

1. Performance and Scalability

Both Angular and Nextjs excel at the topic of performance and scalability, but they approach it differently. Nextjs leverages pre-rendering and automatic code-splitting features for pages to load faster and be more responsive. In contrast, Angular employs client-side rendering, which requires loading all necessary code upfront, impacting load time compared to Nextjs.

When we look at it from the angle of handling large-scale, complex applications, Angular shines more with its robust two-way binding and dependency injection for ease of code management. In summary, while Nextjs is the guy for high-traffic projects that require speed and great performance; Angular is most suitable for enterprise-level and extensive applications, that require scalability and comprehensive solutions.

2. The learning curve
Nextjs and Angular boast a large and vibrant community, offering extensive resources to learn and understand the frameworks. While this is true, the learning curve varies depending on the developer's experience. For Nextjs, prior knowledge of ReactJs is required to ease the learning and assimilation process. Newcomers to Angular may be required to put in good effort and time to get a good grasp of its architecture and concepts.

Thankfully, both frameworks provide more than enough documentation, tools, tutorials, and guides to enable developers to master the skills and build cool applications.

3. Community
Next.js and Angular stand out as top JavaScript frameworks for good reason - they boast vibrant and active developer communities ready to support and collaborate.

Angular boasts a mature and extensive ecosystem backed by Google, while Next.js leverages React's extensive ecosystem and community support. Regardless of the diversity in the community, both frameworks provide rich documentation, tools, tutorials, and support that facilitate learning and development, making them reliable choices for developers.

4. Use Cases
At this point in this article, it is clear that Next.js and Angular are two powerful JavaScript frameworks that cater to different needs and project requirements. Nextjs is the ideal tool for applications that prioritize server-side rendering, SEO optimization, and high-performance needs; while Angular thrives in developing large-scale, enterprise-level applications that require intricate functionalities and robust architecture.

A Sidetrack to ReactJS

To truly appreciate the concepts in Next.js, it's essential to have a solid grasp of React first. Next.js is built on top of React, and Angular, while different, also shares foundational concepts with React aimed at building fast, high-performing applications seamlessly. Understanding React will not only help one excel in using Next.js but also give a better grasp of Angular's architecture and philosophy. So, it should be no surprise that I am thrilled to deepen my understanding of ReactJS and enhance my skills as a front-end developer.

On that note, I am eagerly looking forward to my journey with the HNG Internship, which promises to push me to new heights in building dynamic applications with ReactJS. This experience will undoubtedly refine my abilities and broaden my horizons in web development.

Conclusion

Both Next.js and Angular offer unique advantages and cater to different project needs. Next.js excels in performance and simplicity, making it ideal for server-rendered applications. Angular, on the other hand, provides a comprehensive solution for large-scale, enterprise-level, high-performance, and scalable applications.

But we shouldn't forget what we established from the start - that ultimately, the focus of development should always be on what the project requires. Each framework has its strengths, but the choice depends on the specific needs and goals of the project.

If you're interested in learning more about the HNG internship and the opportunities it offers, check out their internship page. For employment purposes, explore how you can hire top talent from the program. The HNG Internship is an incredible platform to hone your skills and gain real-world experience in the tech industry, and I can't wait to dive in.

FURTHER READING
NEXT.JS
ANGULAR
Nextjs vs Angular: Choose the Right Framework
Angular vs. Next.js: Choosing the Right Framework for Your Web Development Project
Next.js vs AngularJS: A Comparative Analysis
Next JS vs Angular: A Comprehensive Comparison

DEV Community: Angel Afube

Why Semantic HTML Still Matters for SEO — Even in Modern Frameworks

When Everything is a div, span or p Tag

What Even Is Semantic HTML?

Why Semantic HTML matters beyond SEO

The Good News: You Don't Need to Touch the UI

Where It Gets Tricky in Angular and React

Best Practices

Conclusion

Further Reading

Appreciation on a second look: Lessons from Revisiting Bootstrap

A Quick Refresher: What Is Bootstrap?

Setting Up Bootstrap

Highlights from My Simple SPA

Lessons from Revisiting Bootstrap

Final Thoughts

Further Reading

Why Skipping HTML & CSS Fundamentals Will Hurt You - Even in This Age of AI

The Illusion of Speed

Fundamentals Are Not Optional

Learn Slow to Build Fast

AI Helps Those Who Know

The Rise of AI-Generated Content: Cheating or Smart Work?

AI: A Powerful Tool or a Threat to Creativity?

The Desperate Need for Clear AI Guidelines

How to Fix Soft 404 Errors and Create a Custom 404 Page in Next.js 14

What Is a Soft 404 Error?

Common Causes of Soft 404 Errors

Why Should You Fix Soft 404 Errors?

How I Fixed Soft 404 Errors in My Next.js Site

Best Practices for Preventing Soft 404 Errors

Creating a Custom 404 Page in Next.js 14

Conclusion

Further Reading

My Journey Through Hacktoberfest 2024

Finding My Feet

First Contributions: Struggling and Succeeding

Projects

Key Takeaways

Special Thanks

Looking Ahead

A Simple HTTP Status Code Cheat, Maybe?

What Are HTTP Codes?

Why Are They Helpful?

Common HTTP Status Codes and Their Meanings

Further Reading

"How Confusing Can Version Control Be?"

1. Always Pull from the Main Branch

2. How do branches work exactly?

3. git stash and git stash pop are Lifesavers

4. Handling Divergent Branches

5. Organized Commits Are Key

6. Use .gitignore wisely

Further Reading

Exploring the Angular vs. Next.js Debate

Nextjs

Angular

The Comparison

A Sidetrack to ReactJS

Conclusion

When Everything is a `div`, `span` or `p` Tag