DEV Community: Abhay Raj

Where The Hell Did I go - Day 4 Log

Abhay Raj — Thu, 12 Jun 2025 16:58:40 +0000

Building while learning

People who’ve been reading my articles regularly might be wondering—where did this jarhead vanish after posting like a maniac for three straight days, and then suddenly went completely silent?

Was it due to a dip in motivation? Or is he just “all talk, no walk”?

The truth is—a lot happened in the last 10 days in my personal life, and because of that, I had to shut everything down.
What happened exactly? Well… I’m not comfortable sharing that here, so I’ll keep it to myself.

All I can say is—some of my close ones need me right now. So expect a few irregularities in my blogs over the next 10–15 days.

And thanks for listening. Whoever’s reading this—you’re awesome. Truly.

The Progress

Yesterday, after a long 7-day gap, I finally sat down and revisited my strategy.

To be honest, the way I was learning Next.js was boring me to death. I was just watching tutorials and building those tiny, clone-style apps.

But as a solo developer, my main focus is to learn, upskill, and ship fast.

So, I’ve decided to switch completely to the official Next.js docs. If I ever get stuck, I’ll watch videos to fill in the gaps.

Reading documentation is speeding things up—and I need that speed!

In one of my earlier articles, I mentioned that I have some product ideas in my head that I want to turn into reality. And for that, Next.js is a key tool in my arsenal.

I’ve already created a landing page to collect emails for this upcoming product. I plan to build it publicly—and Twitter (X) is going to be my place to share updates.

What’s the product?
Check out this landing page for a rough idea of what I’m working on:
👉 Landing Page
=> Do sign up for the updates!!

Man… being a solo developer means I have to:

✅ Learn to build stuff
✅ Learn to design logos, banners, and visuals
✅ Learn to market myself
✅ Learn sales and communication

These are all the things I realized while smashing my head against Canva, trying to make logos and banners.

At the end of the day, Sora saved me.
I actually liked the logo I made. Of course, a professional designer could’ve done way better—but given my current skills, it felt like a solid win. (Big thanks to Sora ❤️)

Go check out the landing page—I promise you’ll get a decent sense of what’s coming.

I’ll share everything in detail in my next blog (dropping in the next 2-3 days). So stay tuned!

Abhay Raj, signing out

📅 June 12, 2025

P.S.
I just checked my previous blog where I promised to write about history.pushState. I’m really sorry for the delay. I haven’t forgotten—I’ll cover it properly in the next post. It’s gonna be a long one, I can feel it. :)

Claude Sonnet 4 And The Future of Junior Devs - Day 3 Log

Abhay Raj — Tue, 03 Jun 2025 18:42:37 +0000

Sonnet 4 — A Thin Thread Holding a Sword Over Our Heads
I think it’s been more than a week since Anthropic launched Sonnet 4, and today, I got to experience its superpowers. It works like a junior dev — but on steroids.

All thanks to my cousin who made me use Sonnet 4. Later, I decided to cut open my gut.

After watching a couple of videos and seeing how it handles huge codebases, it made me wonder about the future of devs, especially junior devs. But before I start my rant of the day, I want to give you a quick overview of a conversation I had over 10 months ago with a Senior Software Engineer working at a very good XYZ company.

At that point in time, I was looking for a job as a junior dev. But getting no response on my resume and having little to zero personal network in the tech industry, I had no option other than to build a network myself.

And guess where I went to do that? The almighty platform that's worse than Lord Facebook — a place you can’t stand but at the same time can’t leave.

It’s LORD LINKEDIN.

I had made around 700 connections, but personally, I knew only 3 out of 700 people. Which is quite good… right?

There I met this guy — a senior engineer. He eats, drinks, and sleeps tech. At that point in my life, he advised me:

“DON’T COME INTO TECH. YOU’VE CHOSEN THE WRONG INDUSTRY TO START YOUR CAREER. COMPANIES ARE RELUCTANT TO HIRE JUNIOR DEVS AT THE MOMENT BECAUSE OF SATURATION AND AI. COMPANIES ARE TAKING A BET ON EXPERIENCED DEVS — DEVS WHO KNOW HOW TO USE AI WELL AND GET AWAY WITH THE WORK OF JUNIOR DEVS. DON’T INVEST MORE THAN 6 MONTHS TO FIND A JOB. IF YOU FIND ONE... GOOD. IF NOT 🖕”

And I, being a good listener, took his advice seriously. I stopped looking for a job 3 months ago and started freelancing 🙃

The Rant

After watching Sonnet 4 in action today, I felt he was right. But my bruised ego doesn’t want me to stop. Even if I want to leave tech... I can’t. I don’t know what else I could monetize — except maybe being a mechanic at a repair shop. (I love working with cars and bikes.)

So to outperform this Sonnet 4, I went back and asked GPT, “Your cousin is trying to steal the bread from my plate. How can I not let him do this?”

ChatGPT:

You're asking one of the realest and most relevant questions right now. AI like Sonnet 4, GPT-4, and Claude is shaking up software development big time — and it will impact how jobs, freelancing, and learning to code evolve in the coming years.

Let’s break it down rationally — not fearfully:

⚠️ Yes, AI can write & fix code fast. So what's the point of coding then?

Here’s the truth:

🔥 AI is not killing coding — it's changing the role of developers:
You're no longer just a coder. You're now a problem solver, a system architect, and a creative builder.

AI can do the “typing” part, but not the thinking (yet). You still need:

Systems thinking
Product sense
Debugging + design skills
Business logic
Real-world implementation decisions

🧭 So what should you do now?
✅ 1. Learn to code — but don't stop at syntax

Learn how systems work, not just how to build "To-Do Apps"
Focus on architecture, scalability, and real projects
Use AI tools with you (not against you) — treat them as teammates, not enemies

✅ 2. Build a unique developer edge

AI + Human = 100x Dev — people who know how to use AI to build fast and smart will win
Learn to:
Prompt like a pro
Use AI for debugging, scaffolding, testing
Review and understand AI’s output (because it's not always right)

💼 What about freelancing?
🤖 AI is flooding low-skill freelancing markets

Simple CRUD apps, landing pages, basic bug fixes? AI can do that.
But clients still need humans who can:
Understand their business logic
Talk to them
Design systems and solve unexpected problems
Deliver quality and maintainability

👉 You must move up the ladder:

Don’t just be a “doer”
Be a consultant, solution provider, AI-native developer
Build a strong niche: e.g., "I help e-commerce brands optimize their backend using serverless and AI tools”

🔮** Future-proof Roles (2025–2030):**
Role --> Why it survives
AI-Augmented Developer --> Fastest builders, best at debugging & integration
System Designer / Software Architect --> Thinkers behind the scenes
DevOps + Infra + Cloud Engineers --> AI still sucks at networking, infra, & CI/CD
Freelancers with niche & branding --> They build trust + provide value, not just code
Product engineers (with UX + business sense) --> Who build with impact, not just features
🧠 Bottom line:

Coding is still worth it — but only if you go beyond surface-level
Use AI like a jetpack — not a replacement
Freelancing is viable — if you build your brand, niche, and deliver beyond just code

If you fear AI, you'll lose. If you embrace AI, you'll outpace 95% of devs.

The way it has answered my query, we have to have
✅Systems thinking - Role more inclined towards an architect
✅Product sense - Role inclined towards a product manager
✅Debugging + design skills - Role of a dev (Thank God!!)
✅Business logic - Role similar to a business analyst
✅Real-world implementation decisions - can be right only if you understand your target audience well (I feel)

So, mastering your craft as a dev is one thing, but having a broad overview of all the other things mentioned above seems to be the only way to kickstart our career as developers.

Now, this is not a senior dev giving advice.
This advice is given by one AI to face the problems created by another AI.

How much of it is true? I don’t know.

A sword is hanging by a thread over our heads, and we have no other option but to embrace these changes.

What could be the best direction to move towards?

Well, if you’re a senior dev reading this article with years of experience, your 2 cents (please comment below) could help people like us. (Yes, me included.)

The Progress
I’ve made a bit of progress with the course, but mostly my time was spent refactoring the previous code.

I did nested routing and linked different components through routes. It made the code look more scalable and structured. I also set up a small backend on Node.js to store real-time data entered on the client side.

Also, the headphones are detected by the system now. The PipeWire installation has done its work.

That was all I did today, and before leaving, I’ll quench your thirst for some tech nectar. You guys deserve that for staying so long with this article.

Do you guys know why we use <Link> from react-router-dom as anchor tag <a> can do the same work as <Link>?

On the surface, it looks like both <a> and <Link> from react-router-dom do the same thing—navigate to another page. But they work very differently in a React application, especially in a Single Page Application (SPA). Here's the key difference:

When you use a plain HTML <a> tag:

<a href="/about">About</a>

Clicking it causes a full page reload. This:

Reloads the entire app
Loses app state (e.g., scroll position, form data, variables)
Is slower because the browser reloads HTML, CSS, JS, etc.

The Advantage of <Link> from react-router-dom

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

When you use <Link>:

It prevents full page reload
It updates the URL using history.pushState behind the scenes
It allows React Router to handle the routing internally
The current state of the app stays intact
It makes the app feel faster and more responsive

Now what is this history.pushState?

It’s your homework for today. I’ll write about it tomorrow — so stay tuned!

My fingers are numb now (today’s workout was insane).

Abhay Raj, signing out
📅 June 3, 2025

🔥 Fire Burns The Ignorant - Featuring Arch - Day 2 Log

Abhay Raj — Tue, 03 Jun 2025 16:07:36 +0000

Neovim and Arch demand sacrifice - your sanity, preferably.

I was kind of regretting switching from Ubuntu to Arch. ALSA (Advanced Linux Sound Architecture) is the main culprit. Falling head over heels for Arch’s slick terminal might’ve been a bit impulsive.

ALSA (Advanced Linux Sound Architecture) really burned my time. Every time I connect my headphones, Arch doesn’t care — I have to open alsamixer manually to adjust audio.

I even installed PipeWire to auto-detect earphones and switch audio output, but it didn’t work as expected. After about an hour of searching and trying, I gave up and decided to properly read about ALSA.

With great power comes great responsibility. Arch gives us deep control over our OS, but I guess I’m not responsible enough (yet) to wield that power in a civilized way.

I guess it’s time to read all my fundamental rights, fundamental duties and amendments that I can make from Arch wiki.

Btw I was joking. I am not regretting anything, I am actually enjoying the learning curve.

But before moving ahead with today’s blog, let’s discuss the solution of the problem statement I gave you yesterday

import Post from './Post'
import NewPost from './NewPost'
import classes from './PostList.module.css'
import {useState} from 'react'
import Modal from './Modal'

export default function PostList({isPosting, onStopPosting}){
  const [enterBody, setEnterBody] = useState('');
  const [enterName, setEnterName] = useState('');

  function enterBodyHandler(){
    setEnterBody(event.target.value);
  }

  function enterNameHandler(){
    setEnterName(event.target.value)
  }

  return(
    <>
      {isPosting ?   
      <Modal onClose={onStopPosting}>
       <NewPost onChangeBodyHandler={enterBodyHandler} onChangeNameHandler={enterNameHandler}/>
      </Modal> : null 
      }

      <ul className={classes.posts}>
        <Post author={enterName} body={enterBody}/>
        <Post author="Manuel" body="Check out the full course!" />
      </ul>
    </>
  )
}

Your task was to figure out whether the function enterBodyHandler() and function enterNameHandler() will work correctly or throw error?

You might have come up with the logic that it will throw an error because event is not passed as parameter in the enterBodyHandler() and enterNameHandler(). And that is what I thought initially. But when I ran the functions without event being passed to the functions, it worked properly. NO ERRORS.

Browser behaviour peed over my smarty pants 🤢

In older browsers, or in non-strict mode, the event object is available as a global variable (window.event). So even if you don’t pass event as a parameter, event.target.value might still work.

However, React uses strict mode in development — and does not rely on or expose global event. So the fact that this worked might indicate:

You’re not running React in strict mode.
Your browser environment temporarily supported window.event.

If it does not, your code would fail with a ReferenceError: event is not defined error.

It is a best practice to always pass the event object as a parameter to your handler, because React does not rely on the global event object.

So, always declare event as a parameter in your event handlers.

function enterBodyHandler(event) {
  setEnterBody(event.target.value);
}

function enterNameHandler(event) {
  setEnterName(event.target.value);
}

Talking about my progress

I have revised fifty percent of React so far. The course by Maximilan Schwarzmüller is quite good. I would have tagged him here but he is not on Hashnode. Poor guy!!

I feel the pace with which I am moving ahead with the course work is a bit slow. These days I am trying to shift to a more Keyboard focused workflow and saying no to he mouse pad. All this hardwork for getting blazingly fast with all my workflows. Neovim + Arch are devouring my time - But that’s how it goes. right??

If you’ve have stayed with me for this long, then I feel you’re interested to read more. God damn it!! I have to keep using these fingers quite for some time to squirt the hell out of your nerdy brains.

Do you guys know why do we use useEffect to fetch data, but call fetch() directly in event handlers?

When fetching the data you want to trigger the API calls only at certain times like after the component mounts or when certain dependencies change, not on every render.

If you use data fetch in a unconventional way as given below

import { useState } from 'react';

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

  if (!data) {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error(error));
  }

  return <div>{data ? data.message : 'Loading...'}</div>;
}

This might lead to an infinite loop of fetches and renders as React component can re-render many times due to state changes, props updates, or other filthy reasons.

By putting the data fetch inside useEffect you ensure the side effects like data fetch should run-typically only when the component first mounts, or when certain dependencies change.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error));
  }, []);

  return <div>{data ? data.message : 'Loading...'}</div>;
}

Save yourself from unwanted infinite loops and mental breakdowns.

If you made it this far, I hope I become as nerdy as you and keep pushing out good quality and quantity of technical content.

This is enough for your brain today.

Abhay Raj, signing out
📅 June 2, 2025

🏋️ Lifted some states up!! - Day 1 Log

Abhay Raj — Tue, 03 Jun 2025 06:55:11 +0000

Well, I forgot to create a GitHub repo for my personalized learning journey. I should definitely create one by the end of the day.

I’m excited to write today about my progress. But before that — Palash Shrote , thanks for reading my rant. I wasn’t expecting anyone to read it (especially on Day 1), but you made my day and lit a little fire under my butt to keep going. That’s why I’m here writing my Day 1 log at 2:19 AM. Really, thank you.

Honestly, the day was quite hectic. Living with your parents does come at a cost. That cost? I pay it by being the “Chotu” of the family. And seeing my discipline, dedication, and devotion, my family has promoted me to “Chotu-cum-Driver.” I take them anywhere, anytime — wherever they want to go. The service is 24×7×365. 👍

Meanwhile, today I tried building small features where I could use state management heavily in React.

States do mess with your head when they grow in number. I find it a little tricky to pass them through props when an application involves multiple components.

Right now, I’m trying to build a simple blogging app where we can add new posts. Not much has been done so far — just using states to manage different components, with props acting as a linker between them.

All of this is my revision set for React, as I haven’t coded seriously for a long time. I did a client project in February, but I still felt the need to revise everything before jumping back in. From mid-Feb till yesterday, I hadn’t touched my coding console. So, I decided to start fresh — and strong.

No matter how many times you revise or redo something, you always learn something new.

React has done a huge favor for the developer community by wrapping lengthy vanilla JS scripts into hooks, props, and whatnot.
If you’ve got a good command over vanilla JS, working with React becomes fun.

A simple example to demonstrate:

Let’s render a list of items and handle click events in both vanilla JS and React.

1. Vanilla JS

// Assume you have a <div id="app"></div> in your HTML

const app = document.getElementById('app');

// Data
const items = ['Apple', 'Banana', 'Cherry'];

// Render list
const list = document.createElement('ul');
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  li.addEventListener('click', () => {
    alert(`You clicked: ${item}`);
  });
  list.appendChild(li);
});
app.appendChild(list);

2. React

import React from 'react';
import { createRoot } from 'react-dom/client';

const items = ['Apple', 'Banana', 'Cherry'];

function App() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} onClick={() => alert(`You clicked: ${item}`)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

const root = createRoot(document.getElementById('app'));
root.render(<App />);

Which code do you find more readable?

In vanilla JS, event listeners are added individually to each element, while React makes event handling concise and inline.

Now, predict the output of the coding problem below. ok?? Cool.
Let’s make some use of your grey matter.

import Post from './Post'
import NewPost from './NewPost'
import classes from './PostList.module.css'
import {useState} from 'react'
import Modal from './Modal'

export default function PostList({isPosting, onStopPosting}){
  const [enterBody, setEnterBody] = useState('');
  const [enterName, setEnterName] = useState('');

  function enterBodyHandler(){
    setEnterBody(event.target.value);
  }

  function enterNameHandler(){
    setEnterName(event.target.value)
  }

  return(
    <>
      {isPosting ?   
      <Modal onClose={onStopPosting}>
       <NewPost onChangeBodyHandler={enterBodyHandler} onChangeNameHandler={enterNameHandler}/>
      </Modal> : null 
      }

      <ul className={classes.posts}>
        <Post author={enterName} body={enterBody}/>
        <Post author="Manuel" body="Check out the full course!" />
      </ul>
    </>
  )
}

Your task is to figure out whether the function enterBodyHandler() and function enterNameHandler() will work correctly or throw error?

Try doing it yourself and do come up with good explanation.

Earlier, I was thinking of writing the explanation in the same post. But my smarty pants self convinced me to wait and post the explanation in the tomorrow’s blog. So, stay tuned.

Abhay Raj, signing out.
📅 June 1, 2025

🚀 Building My Freelance Journey From Scratch - Day 0 Log

Abhay Raj — Fri, 30 May 2025 21:53:29 +0000

Who Am I?

Hi, I’m Abhay Raj.

I come from a hilly state in India — Himachal Pradesh. Most foreigners who visit India know about this place. For many Israelis, this is the state they look forward to relaxing in after completing their intense military service.

Even locals don’t usually want to leave. People here often find joy working close to their hometowns.
But that doesn’t hold true for me.

I’m an explorer at heart. I value experiences over comfort.

To feed this inner explorer and gather countless stories (so my grandchildren don’t get bored of me), I want to live life in its rawest, most adventurous form. But over the past 3–4 years, I haven’t done justice to myself. This has led to deep restlessness and a sense of despair.

Enough is enough.

I’m turning 27 in three months — physically fit, mentally sharp, and hungry to solve complex development problems. I’ve decided to own my time and my place of work, because life is short and unpredictable.

Yes, I’m taking a huge risk. I left something important in between to pursue this path.
What was that?
A story for another day.

What Am I Gonna Do?

The rant before was necessary to lay the foundation. Thanks for reading.

Now, what’s next?

To own my time and location, I believe remote freelance software development is the right path. I know it’s one of the hardest and riskiest paths in software — I’m not fooled by the glamorous marketing videos.

But I’m skilled and mature, I understand real-world problems, and I know how to build solutions.
So, I’m taking the plunge into freelance development.

This is one way I can make enough money to live a meaningful life.

Here on Hashnode, I’ll document everything — from starting at zero to building a solid client base that funds my wildest dreams.
I’m already in my late 20s and haven’t done much to chase my dreams yet.
That’s what’s lighting the fire under me.

I’m writing this with the hope that someday, when I achieve what I set out to do, people like me — especially burnt-out devs sick of micro-managed jobs — can look back and realize:
“Yes, it’s possible.”

I’ll share the full journey — my mindset, my learning path, and my client acquisition struggles. It’ll be raw, real, and unfiltered.

I’m not worried about how the market is treating developers right now (though I do worry about AI!).
What matters is:
I’m hell-bent on becoming a solo software developer who owns their time and freedom.

What I Did on Day 0?

I bought a course on Udemy:
“Next.js 15 & React - The Complete Guide” by Maximilian Schwarzmüller.

I completed about 1 hour of content today. I wanted to brush up on React before diving into Next.js for an upcoming project. Believe me, I have some solid project ideas that I’ll be building over the next 1–2 months. So, stay tuned!

My goal: Finish the course in a week. I already have decent experience with TypeScript, React, Vanilla JS, MySQL, and Node.js. I know C as well. So fingers crossed 🤞 I should be able to wrap up Next.js in a week.

I also set up my official accounts on:

Dev
Surprisingly, the hardest part was not setting up the accounts — it was finding a good display picture.

The one I was using was 4 years old. And I’m not a fan of clicking photos. So… I paid a cameraman ₹10 to click a high-res picture of me 😅.
In 2025, I’m paying for pictures. Odd, right?

Then I had to edit the background, contrast, all that jazz.
Yes, yes — it’s the same white-background picture on Hashnode.

Anyway, it’s work. I’m being professional.

Oh! And my portfolio is live too — click here.
Inspired by my first love: Linux (Ubuntu).
(Although I broke up with Ubuntu recently and switched to Arch, because… it's hot 😎.)

I might change my portfolio in some days but till then I will make use this one.

Final Note

It’s 1:35 AM as I’m writing this.

Before I sleep, I’ll be watching some tutorials for another 2–3 hours.
I need to push beyond my limits. Time is short. Stakes are high.

I’m doing this not just for myself — but for my parents too.
I want to give them the life they deserve.

Abhay Raj, signing out.
📅 May 31, 2025

Component in React

Abhay Raj — Fri, 03 May 2024 10:52:21 +0000

Introduction to React Components

Let's say we are designing a navigation bar for a web page in HTML:

 <nav>
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Contact</a></li>
  </ul>
 </nav>

This nav bar will be part of every web page listed on a website.

This navigation bar would typically be replicated across every page of a website, leading to

time consumption
Inefficiency
Repetition

Now, to resolve these issues we use React.

React is a JavaScript library used for building reusable user interface components in web applications.

If we talk about creating our Nav Bar in React then it will wrap all our nav bar markup, CSS, and JavaScript into a simple component that can be known as a nav bar component and represented as

<NavBar />

Under the hood, it still uses tags like <nav>, <ul>, and <li>.
However, it abstracts away the implementation details, allowing for easier reuse and maintenance.

This <NavBar /> component can be reused on multiple pages of a web app, speeding up the development process.

In React, components like NavBar serve as self-contained units of code, facilitating modularization and enhancing code maintainability.

Defining a component
As per the docs, a React component is a JavaScript function that you can sprinkle with markup except

The name always begins with an uppercase
They return JSX markup

JSX is nothing but a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript.

Take a look at the example below:

export default function NavBar(){
 //Return JSX markup
 return(
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
)
}

How to use a component

As we have defined our NavBar component, we can use it inside other components.

Let's say we are creating a home page of the web app where we are using the <NavBar /> component inside our home page component:

function NavBar(){
return(
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
)
}

export default function HomePage(){
 return (
  <div className='HomeContainer'>
     <NavBar />
     <h1>Home Page</h1>
     <ol>
       <li>component 1</li>
       <li>component 2</li>
       <li>component 3</li>
     </ol>
  </div>
)
}

A question might have arisen in your mind while going through this blog that

How does the browser differentiate between an HTML tag and a component?

The answer lies in their casing i.e;
if a markup starts with a lowercase like <section> then the browser interprets it as an HTML tag whereas if any markup starts with an uppercase like <NavBar /> then it is interpreted as a component.