DEV Community: Nafiz Mahmud

Vibe Coding for Beginners: What are the pros and cons?

Nafiz Mahmud — Fri, 06 Mar 2026 14:44:39 +0000

If you've spent any time on Tech Twitter or dev Discord servers lately, you've probably heard the term "vibe coding" thrown around. It sounds chill, maybe a bit reckless, and definitely controversial.

For beginners, the question isn't just about whether it's cool—it's about whether it's going to help us become better engineers or stunt our growth before we even start.

Today, I'm breaking down the pros and cons of using vibe coding as a beginner software developer. Let's dive in.

What Actually Is "Vibe Coding"?

Before we judge it, let's define it.

In the current tech landscape, vibe coding doesn't just mean putting on your lo-fi hip-hop playlist and hacking away. It refers to a development style heavily powered by AI tools (like LLMs), where you focus on the intent and logic of the application while letting the AI handle the syntax, boilerplate, and implementation details.

You're managing the "vibe" of the project—the flow, the features, the user experience—while the machine writes the actual code.

But is this safe for a beginner? Here's the breakdown.

The Pros: Why It's Tempting

1. Unblocked Momentum
Nothing kills a beginner's passion faster than getting stuck on a missing semicolon or a weird import error for three hours. Vibe coding allows you to push through syntax hurdles quickly. You keep building, you keep seeing results, and that dopamine hit keeps you motivated.

2. Focus on Logic Over Syntax
As a new dev, it's easy to get lost in the how and forget the why. Vibe coding forces you to think about architecture and feature flow. You learn to articulate what you want the program to do, which is a critical skill regardless of how the code gets written.

3. Faster Portfolio Building
In the job market, shipped projects matter. Vibe coding can help you prototype and build full-stack applications much faster than if you were writing every line from scratch. Having a deployed project to show recruiters is often better than having a folder full of half-finished tutorials.

The Cons: The Hidden Traps

1. The "Black Box" Problem
If you don't understand the code the AI generates, you don't own it. When something breaks (and it will), you'll be helpless to fix it. Beginners need to struggle a bit with debugging to build intuition. Vibe coding can rob you of that essential learning process.

2. Illusion of Competence
It's easy to feel like a wizard when the code works. But if you can't explain why it works in an interview, that confidence will shatter quickly. Relying too much on vibes can lead to severe imposter syndrome when you're forced to code without assistance.

3. Bad Habits and Security Risks
AI models are trained on public code, which includes bad practices, deprecated methods, and sometimes security vulnerabilities. A beginner might not know the difference between secure authentication code and a risky snippet. Without foundational knowledge, you might be building on shaky ground.

The Verdict: How to Use It Responsibly

So, should you vibe code? Yes, but with guardrails.
Here is my recommendation for beginners:

The 80/20 Rule: Let AI handle 80% of the boilerplate, but write the core logic yourself. This ensures you understand the heart of your application.

Review Every Line: Never copy-paste blindly. If the AI generates a function, read it. Google the methods you don't recognize. Treat the AI as a pair programmer, not a ghostwriter.

Break It on Purpose: Once the AI gives you working code, try to break it or modify it manually. This tests your understanding and ensures you aren't just along for the ride.

Final Thoughts
Vibe coding isn't cheating; it's a tool. But like any powerful tool, it requires skill to wield safely.

As beginners, your goal isn't just to ship code—it's to become developers who understand the craft. Use the vibe to keep your momentum high, but don't let it replace the fundamentals. Keep the flow, but learn the rules.

Happy coding,
Nafiz

Beyond the Hype: 5 Reasons Why SEO is the Backbone of Your Digital Strategy

Nafiz Mahmud — Mon, 23 Feb 2026 16:42:25 +0000

Imagine opening a state-of-the-art retail store. You have the best products, the friendliest staff, and beautiful interior design. There's just one problem: you built the store in the middle of a desert. No roads lead to it, there are no signs, and nobody knows it exists.

In the digital world, a website without Search Engine Optimization (SEO) is that store in the desert.

SEO often gets a bad reputation as a technical, confusing, or "black box" marketing tactic. But at its core, SEO is simply the process of making your website understandable to search engines and valuable to users. It is the bridge between your business and the customers actively looking for what you offer.

If you're still on the fence about investing time and resources into SEO, here are five compelling reasons why it is not just important—it's essential for your survival and growth.

1. Visibility and Organic Traffic
The most obvious benefit of SEO is visibility. Think about your own habits: when you need a product, service, or answer to a question, where do you go? You Google it.

Studies consistently show that the vast majority of clicks go to the first few search results on Google. In fact, the first organic search result gets an average click-through rate (CTR) of nearly 40%, while results on the second page get less than 1% of clicks.

If your website isn't ranking on the first page, you are effectively invisible to the majority of your potential customers. SEO moves your site from page 10 to page 1, putting your brand directly in the line of sight of high-intent users. Unlike social media, where your post disappears in a feed after 24 hours, SEO drives organic traffic that is sustainable and consistent.

2. Credibility and Trust
There is a psychological component to search rankings. Users inherently trust Google. When Google places your website at the top of the search results, it acts as a digital endorsement.

Ranking high signals to users that you are an authority in your field. It suggests that your content is relevant, your site is secure, and your business is legitimate. Conversely, a site that is hard to find or looks outdated can damage your brand's reputation before a customer even clicks on your link.

Furthermore, users tend to trust organic search results more than paid advertisements. While PPC (Pay-Per-Click) ads are marked as "Sponsored," organic listings are viewed as earned credibility. Building this trust takes time, but once established, it creates loyal customers.

3. Improved User Experience (UX)
A common misconception is that SEO is only about pleasing search engine algorithms. That used to be true, but today, Google prioritizes the user.

Modern SEO practices align perfectly with good website design. To rank well, you need:
Fast load times: No one likes waiting for a slow site.
Mobile-friendliness: Most searches happen on phones.
Clear navigation: Users need to find what they want quickly.
High-quality content: Answers need to be accurate and easy to read.

By optimizing for SEO, you are inadvertently optimizing for the human experience. A better user experience leads to lower bounce rates, longer time on site, and ultimately, higher conversion rates.

4. Cost-Effectiveness and Long-Term ROI
Marketing budgets are always a concern. While Paid Search (Google Ads) can bring immediate traffic, it is like renting space. The moment you stop paying, the traffic stops.

SEO is more like buying property. It requires an upfront investment of time and effort, but the results compound over time. Once you rank well for specific keywords, you can maintain that position with less ongoing effort than paid ads require.

This makes SEO one of the highest ROI (Return on Investment) marketing channels available. You are attracting users who are actively searching for your solutions, meaning the traffic is highly qualified. You aren't interrupting people with ads they don't want; you are answering questions they are already asking.

5. Competitive Advantage
Your competitors are likely already investing in SEO. If they are ranking above you, they are capturing the market share that should be yours.

SEO levels the playing field. It allows small businesses to compete with larger corporations if they have better content and a more optimized site. By analyzing what your competitors are doing right (and wrong), you can find gaps in the market. Maybe they aren't targeting a specific local keyword, or their blog content is thin.

Ignoring SEO means handing your customers over to the competition on a silver platter. In a crowded digital marketplace, optimization is the difference between leading the pack and trailing behind.

The Bottom Line: SEO is a Marathon, Not a Sprint
It is important to manage expectations. SEO is not a magic switch you flip to get rich overnight. It is a long-term strategy that requires patience, consistency, and adaptation. Search engine algorithms change, and user behaviors shift.

However, the businesses that treat SEO as a foundational part of their operations are the ones that thrive. It builds brand awareness, establishes trust, improves your website, and drives revenue.

Ready to get started?
Don't let your website remain a store in the desert. Start by auditing your current site, researching the keywords your customers use, and creating content that provides genuine value. The search engines—and your customers—are waiting for you.

Your Website Is Your Digital First Impression

Nafiz Mahmud — Fri, 02 Jan 2026 18:05:33 +0000

Let’s be honest — before anyone emails you, hires you, or takes your product seriously, they visit your website.

And they decide a lot in the first few seconds.

No pressure, right?

First Impressions Happen Faster Than You Think

When someone lands on your site, they’re subconsciously asking:

Is this person/company legit?
Do I trust this?
Do I understand what this site is about?
Is it worth my time?

They usually answer those questions in under 5 seconds.

That means your website isn’t just a portfolio or a landing page — it’s your digital body language.

Design Matters… But Not the Way You Think

A lot of developers assume first impressions are about flashy UI or fancy animations.

They’re not.

Most users don’t think:

“Wow, this site uses a cool tech stack.”

They think:

“This feels clean.”
“This loads fast.”
“I know what this does.”

Clarity beats creativity almost every time.

A simple layout, readable text, and obvious navigation will outperform a visually complex site that’s hard to understand.

Performance Is Part of the Impression

A slow website quietly tells users:

This might be outdated
This might be unreliable
This person might not care about details

Fair or not, performance is perceived as professionalism.

Fast load times, responsive layouts, and no broken links send a strong signal:

“This site is maintained.”

And maintenance builds trust.

Content Sets the Tone

Your copy matters more than you think.

Overly corporate language feels cold.
Buzzwords feel insecure.
Over-explaining feels exhausting.

The best websites sound human.

Clear sentences.
Direct messaging.
No unnecessary jargon.

If users feel like a real person is behind the site, they’re more likely to stick around.

Your Website Should Answer One Question Immediately

The most important question your site must answer is:

> “Am I in the right place?”

If someone can’t understand who you are and what you do within a few seconds, they leave — even if the site looks great.

This applies to:

Personal portfolios
SaaS landing pages
Agency websites
Side projects

Confusion kills curiosity.

A “Perfect” Website Is a Myth

Many developers delay launching because they want everything to be just right.

But here’s the truth:
Websites are never finished.

They evolve.
They break.
They get redesigned.
They get refactored (a lot).

The best websites didn’t start perfect — they started live.

Shipping something clear and usable today is better than shipping something perfect someday.

Final Thoughts

Your website doesn’t need to impress everyone.

It just needs to:

Load fast
Be clear
Feel trustworthy
Speak like a human

Because whether you like it or not, your website is already making an impression.

Make it a good one.

If you’re curious about my work, you can check out my portfolio here: https://nafizdev.appwrite.network/

Why Every Business Needs a Website in 2025

Nafiz Mahmud — Wed, 02 Jul 2025 15:35:43 +0000

In an era where attention is the new currency, your business can’t afford to be invisible. Yet, too many small business owners, freelancers, and even established professionals still rely solely on social media to represent their brand.

Let’s be honest — if your business doesn’t have a website in 2025, it’s already falling behind.

Social Media ≠ Online Presence
Sure, social platforms like Instagram, TikTok, or LinkedIn are great for reach. But they’re not a home. You don’t control the algorithm, the platform rules, or whether your content gets buried tomorrow.

A website, on the other hand, is your own piece of digital real estate. It’s the one place online where:

You control the narrative
You own the data
You set the rules

What a Website Really Does

A well-designed website is more than a digital brochure. It’s your:

First impression for 90% of potential clients or customers
Credibility badge — if you’re not online, you don’t exist to many
Conversion engine — turning clicks into inquiries, leads, or sales
24/7 storefront that works while you sleep
Still think your business doesn’t need one?

But I Don’t Know Where to Start…
That’s where I come in.

I’m Nafiz Mahmud— a freelance web developer helping individuals and businesses like yours launch fast, beautiful, and functional websites that actually move the needle.

I offer:

💡 Strategy-first design — I don’t just make it look good, I make it work.
⚡ Speed & performance — Nobody likes a slow website. Neither does Google.
🛠️ Ongoing support — You won’t be left hanging after launch.
📱 Mobile-first builds — Because your customers are on the go.

Whether you’re starting from scratch or need a complete redesign, I can help you build a site that reflects your brand and supports your business goals.

👉 Let’s talk: 👇👇👇
https://www.fiverr.com/s/AykGYYq

TL;DR
If you’re serious about your business in 2025, a website is no longer optional — it’s essential.

And if you need help building one that works hard for you, not the other way around, I’m here to help.

Qwik Resumability Explained

Nafiz Mahmud — Sun, 15 Dec 2024 15:37:34 +0000

Resumability in Qwik is a revolutionary concept that minimizes the amount of JavaScript that needs to be downloaded and executed on the client side.

It allows Qwik applications to "resume" from where they left off on the server, without needing to replay or rehydrate the entire application state on the client.

Here’s an explanation of resumability in Qwik:

1. Pre-rendered HTML with Application State:

Qwik applications are pre-rendered on the server, and the generated HTML contains all the necessary state and context for the application embedded as part of the DOM.

2. No Client-Side Rehydration:

i. Unlike traditional frameworks (React, Angular, etc.), Qwik does not require "rehydration," which is the process of re-executing components to rebuild the state and attach event listeners.

ii. Instead, Qwik uses the server-provided HTML directly and activates only the necessary parts of the application when a user interacts with it.

3. Fine-Grained Code Loading (Lazy Execution):

Qwik breaks the application into micro-modules. These are small JavaScript chunks loaded on-demand. For example:

i. A button click handler is loaded only when the button is clicked.

ii. A form validation script is downloaded only when the user interacts with the form.

4. Resuming State:

i. When a Qwik app initializes on the client, it already "knows" the application state because this state was serialized on the server and included in the HTML.

ii. Qwik resumes execution where it left off, rather than rebuilding the entire component tree.

5.Event-based Activation:

Qwik activates application parts only when specific events (like a button click or input change) require them. This reduces the amount of JavaScript the browser executes initially.

Why Resumability is Powerful -

Improved Performance:
Qwik delivers a fast "Time to Interactive" (TTI) because minimal JavaScript is downloaded upfront.

Pages are interactive immediately after loading since no hydration step is needed.

Optimized Resource Usage:
Only the code for features that users interact with is downloaded. This makes Qwik ideal for large applications or those accessed on slower networks/devices.

SEO and User Experience:
Server-side rendering (SSR) ensures search engines and users get a fully rendered HTML page instantly.
JavaScript is loaded lazily, so the UX is smooth without delays caused by heavy script execution.

Example Scenario

Traditional Framework:
On a React app, when the page loads, the entire component tree is rehydrated. Even if the user interacts with just one button, the whole app needs to re-run its JavaScript.

Qwik's Approach:
On a Qwik app, the page loads as plain HTML. When the user clicks a button, Qwik fetches only the button’s handler code and executes it, leaving the rest of the app untouched.

Key Takeaway
Resumability in Qwik is a game-changer for building fast, efficient, and scalable web applications. By enabling the app to pick up where the server left off without a full rehydration process, it drastically reduces the JavaScript footprint and improves performance for users.

Next.js Server Actions

Nafiz Mahmud — Mon, 24 Jun 2024 09:09:58 +0000

Next.js Server Actions is a powerful feature introduced in Next.js that allow you to run server-side code without having to create a separate API endpoint. Server Actions are defined as asynchronous functions marked with the 'use server' directive, and can be called directly from client-side components.

Here's an example of defining a Server Action to add a new todo item to a database:

// app/actions.js
'use server'

import { addTodo } from '@/lib/db'

export async function addTodoAction(formData) {
  const text = formData.get("text")
  await addTodo({ text, completed: false })
}

In a client-side component, you can then call this Server Action using the action prop on a form element:

// app/page.js

import { addTodoAction } from './actions'

export default function TodoPage() {
  return (
    <form action={addTodoAction}>
      <input type="text" name="text" />
      <button type="submit">Add Todo</button>
    </form>
  )
}

When the form is submitted, Next.js will automatically serialize the form data, send it to the server, execute the addTodoAction function, and return the result back to the client.

Server Actions provide several benefits over traditional API endpoints, including:

No boilerplate: You don't need to create a separate API route, just define the action function.

Type safety: You can use TypeScript to define the input and output of the action, and Next.js will validate it for you.

Seamless client-server communication: The serialization and deserialization of data happens automatically, making it easy to pass data between the client and server.

Overall, Next.js Server Actions are a powerful tool that can
help you write more efficient and maintainable code by
reducing boilerplate and improving the developer experience.

React Use State Introduction

Nafiz Mahmud — Fri, 03 Nov 2023 14:02:49 +0000

React, one of the most popular JavaScript libraries for building user interfaces, has seen a significant shift in recent years towards functional components and hooks. With the introduction of React Hooks, developers can manage state and side effects in a more elegant and concise manner. In this blog post, we'll explore one of the fundamental hooks: useState, and discover how it can simplify state management in your React applications.

What is useState?

useState is a built-in React hook that allows functional components to manage and update their state. Prior to the introduction of hooks, state management in functional components was challenging, as they couldn't hold local component state. Class components were typically used for state management, but hooks have made it possible for functional components to take full control of their state.

Using useState

Let's dive right into using useState in a React functional component:

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

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

export default Counter;

In the code above, we import useState from React and use it within the Counter functional component. The useState function takes an initial state value as an argument and returns an array with two elements: the current state (count) and a function to update it (setCount). We destructure these values from the array.

State in functional components is not shared among instances. Each instance of the Counter component maintains its own state. When you click the "Increment" or "Decrement" buttons, the state updates, and React re-renders the component to reflect the new state value.

Advantages of useState :

Simplicity: useState simplifies state management by providing a straightforward way to initialize, read, and update state within functional components. It makes your code more concise and easier to understand.
Predictable: With the useState hook, state updates are always merged and not replaced. This predictability is particularly helpful when working with complex state objects.
Performance: React optimizes state updates using a virtual DOM, ensuring that only the parts of your component affected by state changes are re-rendered. This results in efficient updates and a smoother user experience.
No lifecycle methods: Hooks eliminate the need for class components and lifecycle methods, reducing the learning curve and making it easier to manage component logic.
Code reuse: The ability to use hooks in custom hooks allows for the easy sharing of stateful logic among different components.

Conclusion :

React's useState hook is a powerful tool for managing component state in functional components. It simplifies state management, leading to more readable and maintainable code, while also improving performance. As you become more familiar with React hooks, you'll find that they enable you to build robust and efficient applications with less boilerplate code. Whether you're a React novice or a seasoned developer, embracing hooks like useState can make your React development experience even more enjoyable.

Local Storage Bookmark Manager

Nafiz Mahmud — Wed, 08 Mar 2023 17:53:18 +0000

Hey, I developed this bookmark manager using React (ts), local storage and Recoil. You can do CRUD operations on it.

Bookmark Manager URL - https://all-2-0-react-frontend.vercel.app

Using a bookmark manager can save you time and frustration by keeping all your important links in one place.
-Chat GPT

Feel free to use and give feedback about it.

Thank you.
-Metal

React Virtual Dom...?

Nafiz Mahmud — Wed, 30 Nov 2022 17:01:16 +0000

Why React is not dropping the virtual DOM like Svelte || Solid ?

Won't it make React more performant ?

Also why not re-rendering dynamic values where needed (like Solid.js ) rather then doing a full page/component re-render ?