DEV Community: Sufian mustafa

I Took an 18-Month Break from Dev.to to Master AI — Now I’m Back with Real Projects

Sufian mustafa — Fri, 31 Oct 2025 21:29:53 +0000

Two years ago, I joined Dev.to with the same excitement every new dev feels — but quickly I realized that I had no direction, no project, and no clear voice.

I was just posting random content, sometimes copied, sometimes AI-generated, that lacked my own authentic voice.

My knowledge was only surface-level, and I had no real project to anchor my identity.

That realisation hit me hard.

I stepped away from all public platforms—including Dev.to—and made a silent promise:

“I won’t post again until I have something real to share — something built with my own hands.”

I wanted to become a *developer * who doesn’t just consume tutorials but creates meaningful tools, resources, and solutions.

To do that, I needed to build something from scratch.

That decision marked the start of an 18-month journey of intense learning, building, failing, and discovering what’s truly possible when you combine coding with AI.

From Basics to Building My Own Platform: doitwithai.tools

When I decided to take content creation seriously, I realised I needed a home for my ideas — a website built for long-term publishing and AI-focused education.

But as a junior developer familiar only with the basics of React/Next.js, building a fully optimised, scalable content platform was a daunting, near-impossible task—especially without a large budget.

All I had was basic knowledge of React and Next.js and a determination to build something that could last.

That’s when I turned to my most powerful coding partner — AI. 🤖

How AI Became My Coding Co-Founder

AI didn’t just help me write code — it changed how I thought about development.

Every time I hit a wall, AI became my debugging partner, my mentor, and my problem-solver.

Here are the details of how AI helped me through every phase of building Do It With AI Tools:

🧭 1. Niche & Direction

AI helped me brainstorm, analyse audiences, and identify a niche where I could merge my passions — coding, SEO, and content automation.

🎨 2. UI & Design

I used AI to generate UI concepts, wireframes, and even Tailwind-based components. Every layout, card, and animation was iterated with AI feedback.

⚙️ 3. Backend & CMS

The site runs on Next.js with Sanity CMS. AI guided me through schema design, data modeling, and optimizing content delivery for performance.

🧩 4. 2-layer caching system

This was one of the hardest parts. I implemented a two-layer caching system:

Client Side: Utilizing Memory Caching (in-memory JS objects) and IndexedDB for fast, persistent content hydration.
Server Side: Employing Redis via Upstash for scalable server-side data and API caching.
Creating a unified caching system for seamless communication between Client-Side Caching (CSC) and Server-Side Caching (SSC).
Implementing the stale-while-revalidate caching pattern for optimal content delivery.

🚀 5. SEO & Performance

From meta tags and schema to Core Web Vitals, code splitting, and reusable components — AI helped me refine every detail for speed and discoverability.

📚 6. AI Library & Content

I created a Free AI Library with downloadable AI assets
— tools, prompts, visuals, and docs — all curated and organized with AI’s help.

📝 7. Content Production

Even my articles, visuals, and videos were built through AI-assisted workflows, where I focused on strategy while AI accelerated creation.

🌍 8. Cross-Platform Scaling

Beyond the website, AI also helped create content strategies to scale the website across various platforms (TikTok, YouTube, Pinterest, LinkedIn, Twitter, etc.).

The Lessons Behind the Code

Each of these categories hides dozens of smaller challenges — debugging issues that kept me up at night.

AI didn’t remove the struggle — it made every challenge a deeper learning experience. Each bug, failed build, and late-night error became a chance to understand things that I once avoided.

*Through this process, I stopped seeing AI as a shortcut.
*
Instead, I started seeing it as a true coding companion.

Why Dev.to is My Destination Now

After 18 months of building, learning, and experimenting, I finally feel ready to share my journey — not as a consumer, but as a contributor.

This time, I’m here to share real, developer-focused knowledge on how AI is transforming the way we code, build, and scale.

I invite you to connect, challenge my workflows, and share your own experiences.

If you're curious to see the finished architecture and resource library that resulted from this journey, you can visit Do It With AI tools

— it’s where all my hands-on work and experiments live.

Let’s explore what’s possible when we code with AI, not against it.

I Took an 18-Month Break from Dev.to to Master AI — Now I’m Back with Real Projects

Sufian mustafa — Thu, 30 Oct 2025 22:37:17 +0000

Two years ago, I joined Dev.to with the same excitement every new dev feels — but quickly I realized that I had no direction, no project, and no clear voice.

I was just posting random content, sometimes copied, sometimes AI-generated, that lacked my own authentic voice.

My knowledge was only surface-level, and I had no real project to anchor my identity.

That realisation hit me hard.

I stepped away from all public platforms—including Dev.to—and made a silent promise:

“I won’t post again until I have something real to share — something built with my own hands.”

I wanted to become a *developer * who doesn’t just consume tutorials but creates meaningful tools, resources, and solutions.

To do that, I needed to build something from scratch.

That decision marked the start of an 18-month journey of intense learning, building, failing, and discovering what’s truly possible when you combine coding with AI.

From Basics to Building My Own Platform: doitwithai.tools

When I decided to take content creation seriously, I realised I needed a home for my ideas — a website built for long-term publishing and AI-focused education.

All I had was basic knowledge of React and Next.js and a determination to build something that could last.

That’s when I turned to my most powerful coding partner — AI. 🤖

How AI Became My Coding Co-Founder

AI didn’t just help me write code — it changed how I thought about development.

Every time I hit a wall, AI became my debugging partner, my mentor, and my problem-solver.

Here are the details of how AI helped me through every phase of building Do It With AI Tools:

🧭 1. Niche & Direction

AI helped me brainstorm, analyse audiences, and identify a niche where I could merge my passions — coding, SEO, and content automation.

🎨 2. UI & Design

I used AI to generate UI concepts, wireframes, and even Tailwind-based components. Every layout, card, and animation was iterated with AI feedback.

⚙️ 3. Backend & CMS

The site runs on Next.js with Sanity CMS. AI guided me through schema design, data modeling, and optimizing content delivery for performance.

🧩 4. 2-layer caching system

This was one of the hardest parts. I implemented a two-layer caching system:

Client Side: Utilizing Memory Caching (in-memory JS objects) and IndexedDB for fast, persistent content hydration.
Server Side: Employing Redis via Upstash for scalable server-side data and API caching.
Creating a unified caching system for seamless communication between Client-Side Caching (CSC) and Server-Side Caching (SSC).
Implementing the stale-while-revalidate caching pattern for optimal content delivery.

🚀 5. SEO & Performance

From meta tags and schema to Core Web Vitals, code splitting, and reusable components — AI helped me refine every detail for speed and discoverability.

📚 6. AI Library & Content

I created a Free AI Library with downloadable AI assets
— tools, prompts, visuals, and docs — all curated and organized with AI’s help.

📝 7. Content Production

Even my articles, visuals, and videos were built through AI-assisted workflows, where I focused on strategy while AI accelerated creation.

🌍 8. Cross-Platform Scaling

Beyond the website, AI also helped create content strategies to scale the website across various platforms (TikTok, YouTube, Pinterest, LinkedIn, Twitter, etc.).

The Lessons Behind the Code

Each of these categories hides dozens of smaller challenges — debugging issues that kept me up at night.

AI didn’t remove the struggle — it made every challenge a deeper learning experience. Each bug, failed build, and late-night error became a chance to understand things that I once avoided.

*Through this process, I stopped seeing AI as a shortcut.
*
Instead, I started seeing it as a true coding companion.

Why Dev.to is My Destination Now

After 18 months of building, learning, and experimenting, I finally feel ready to share my journey — not as a consumer, but as a contributor.

This time, I’m here to share real, developer-focused knowledge on how AI is transforming the way we code, build, and scale.

I invite you to connect, challenge my workflows, and share your own experiences.

If you're curious to see the finished architecture and resource library that resulted from this journey, you can visit Do It With AI tools

— it’s where all my hands-on work and experiments live.

Let’s explore what’s possible when we code with AI, not against it.

10 TypeScript Tricks to Save Your Coding Time

Sufian mustafa — Sat, 16 Mar 2024 22:36:33 +0000

Introduction to TypeScript

TypeScript is a superset of JavaScript that adds static typing options to the language. It compiles to pure JavaScript and provides developers with powerful tools to write powerful and scalable code. By leveraging TypeScript, developers can catch errors early in the development process, improve code control, and increase overall productivity.

Using TypeScript's Type Inference

TypeScript's type inference feature allows developers to remove annotations in most cases because the compiler can infer types for the given price. For example:

let number = 10; // TypeScript outputs the number as the type number

Using the union type

Combinations in TypeScript Types can declare variables that can store values of different types. This increases the flexibility and readability of the code. Consider this example:

type Result = number | string;

function displayResult(result: Result) {
  console.log(result);
}

Using Interfaces

Interfaces in TypeScript define object rules by specifying the objects and methods they must contain. They increase code reusability and security. Here is an example:

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}!`);
}

Using Generics

Generics allow you to create product recycling that uses materials with the following properties : different types of materials. They improve code abstraction and reduce duplication. For example:

Function Id(arg: T): T {
return arg;
}

let result = Id < string>("Hello"); // The result is a string type

Using enumerations

Enumerations in TypeScript provide a way to define a group of literals to make the code more interesting and readable. Consider this example:

Enum Directions {
Up,
Down,
Left,
Right,
}
 let userDirection: Direction = Direction.Up;

Using type guards

Type guards allow developers to narrow the type range of variables in rule blocks, This helps with security mode. It works like this:

function process(input: string | number) {
  if (typeof input === "string") {
    // input is treated as type string here
    console.log(input.toUpperCase());
  } else {
    // input is treated as type number here
    console.log(input.toFixed(2));
  }
}

Understanding declaration integration:

Declaration integration allows TypeScript to place multiple declarations with the same name into a single definition. This simplifies code organization and improves code readability. Consider the following:


interface Car {
make: string;
}

interface Car {
model: string;

const myCar: Car = { make: "Toyota", model: "Camry" };

Other tips and tricks

Use as const to create immutable types.
Utilize TypeScript's --strict mode for enhanced type checking.
Take advantage of Partial and Readonly utility types for object manipulation.

Conclusion

Incorporating TypeScript instructions into your coding routine can increase your productivity and code quality. Whether you're a beginner or an experienced developer, knowing these techniques will undoubtedly save time and effort on your projects.

Devin AI vs Other AI Tools

Sufian mustafa — Fri, 15 Mar 2024 22:20:29 +0000

1. Emergence of Devin AI

Devin, the brainchild of Cognition AI, has recently emerged as a formidable contender in the AI landscape. Developed by coding prodigies Scott and Andrew Wu—siblings who’ve been winning international coding competitions since their teens—Devin promises to redefine AI-assisted software development. But how does it stack up against the reigning champion, ChatGPT? Let’s find out.

2. ChatGPT vs. Devin AI: The Clash of Titans

2.1. ChatGPT: The Market Leader
ChatGPT needs no introduction. With over 189 million users, it has dominated AI conversations since its mainstream debut in November 2022.
As a versatile large language model (LLM), ChatGPT excels in writing, coding, image processing, and speech queries. It’s the gold standard against which other AI tools are measured.
2.2. Devin AI: The Newcomer with a Purpose
Devin AI materialized out of stealth mode, backed by a hefty $21 million in venture capital from Peter Thiel’s Founders Fund.
Unlike ChatGPT, Devin isn’t content with mere conversations. It aims higher—to be a full-fledged software engineer.

3. Coding Capabilities: Devin Takes the Lead

3.1. Autonomy Beyond Conversation
While ChatGPT relies on human interaction, Devin’s autonomy is a game-changer. It doesn’t just chat; it plans, executes, and collaborates on complex software tasks.
Devin’s standout feature: the ability to tackle entire software engineering projects independently.
3.2. Real-World Problem Solving
Devin has been tested against other AI programs, and the results are staggering. It solved nearly 14 out of 100 problems, while others managed less than 2.
Beyond tests, Devin has already taken on real jobs on platforms like Upwork, fixing issues and generating reports12.

4. The Future of AI-Assisted Development

Devin’s emergence signals a shift. It’s not just about chatbots; it’s about autonomous coding.
Imagine an AI that learns new technologies, hunts down bugs, and contributes to open-source repositories—all without human intervention.

5. Competition: The Fear of Job Displacement

AI as a Threat?
Some developers worry that Devin and similar AI tools might replace their jobs.
The fear is understandable, but it’s essential to recognize that Devin’s purpose isn’t to eliminate us—it’s to enhance our capabilities.

6. Devin’s Limitations: Where Does It Fall Short?

Devin AI, while impressive in its capabilities, has limitations. It lacks context understanding, emotional intelligence, ambiguity handling, and intuition. It struggles with subtle cues and understanding the bigger picture, preferring well-defined tasks. It also struggles with ambiguous instructions and lacks intuition, which guides decisions in human developers. Devin's limitations make it less effective in real-world projects and require further development.

7. Devin’s Impact on Job Roles

Devin is an evolutionary force that shifts routine tasks to AI wranglers, allowing developers to focus on higher-level thinking and innovation. This shift creates new roles, such as AI wranglers, who fine-tune and guide AI systems to align with human goals. Devin also enhances creativity by allowing engineers to collaborate with AI co-pilots, pushing boundaries and requiring ethical responsibility in AI-driven development.

** What are your thoughts on Devin AI and the future of AI-assisted development?**

Devin AI: The World’s First AI Software Engineer.

Sufian mustafa — Thu, 14 Mar 2024 20:50:52 +0000

Devin AI: To Be Feared or Embraced?

Scrolling through Twitter today, it feels like everyone's buzzing about Devin, the new AI software engineer from Cognition. The conversation is dominated by anxieties – will Devin render us jobless? Is "no-code" development the future? Here on dev.to, however, the discussion seems strangely muted. Let's break the silence and delve deeper into Devin's capabilities and what it truly means for the software development landscape.

The Advent of Devin: Who Or What Exactly Is It?

Originally introduced by Cognition AI, Devin is an unprecedented entrant in the field of autonomous coding agents. Unlike its counterparts, Devin isn’t confined to autocompleting tasks - it can architect and produce entire applications within minutes.

Accompanied by its shell, code editor, and web browser, Devin functions as an autonomous agent resolving software engineering issues. In performing tasks, it has showcased a shocking 13.86% success rate in rectifying GitHub issues found in real-world open-source projects. What's more, Devin transcends its original programming to learn unfamiliar technologies and refine its AI model.

A Stellar Resume: Practical Engineering and Real Jobs

Devin not only dominated the SWE-Bench coding benchmark but also sailed through practical engineering interviews from leading AI companies. Remarkably, it didn't stop at simulated tasks. When handed real jobs on Upwork, Devin proved capable, even succeeding in building a custom chrome extension.

Disconcerting as it might be for some, Devin's entrance isn't restricted to experimental scenarios. It's out there in the workforce, contributing to mature production repositories, and making noticeable waves.

The Future of No-Code: A Blessing or a Curse?

As speculation about job security swells amidst the news of this revolutionary AI tool, it's essential to trace back to its origins. Rightly termed an artificial intelligence innovation, Devin's potential is beyond argument. But is it a harbinger of an unemployed human workforce?

Sure, Devin is paving the path to a truly no-code future. With its ability to craft and release comprehensive software applications, the prospect of redundant traditional developers isn't inconceivable. Currently, large language models like Google's Gemini or OpenAI's ChatGPT fail to match Devin's capabilities, a mere testament to the latter's superior programming.

How Devin Operates: Breaking Down the Process

At the heart of Devin's unprecedented functionality lies an autonomous system, operating with its unique code editor, command line, and browser. It's been designed to streamline complex software-related challenges, splitting monumental tasks into manageable segments.

The process isn't robotic. Devin strategically plans and carries out intricate engineering projects. It responds to user feedback, promptly works around errors, and provides real-time progress updates.

The Final Verdict: A Remarkable Development

Regardless of fears over job security, Devin is undeniably a remarkable leap in the AI landscape. The technological realm is always evolving, with discoveries pushing boundaries and redefining norms. Rather than focusing on the potential risks, let’s appreciate the extraordinary progress that has brought us Devin. Engulfed in the wave of AI development, it's time to embrace this AI assistant and acknowledge the new height of software engineering it heralds. Devin might just be the future. And the future, as they say, is now.

10 Must-Know Git Commands for Software Engineers

Sufian mustafa — Wed, 13 Mar 2024 21:18:27 +0000

Git and GitHub are the most fundamental things that every Software Engineer must know. These tools are integral to a developer’s daily routine,
as we interact with them daily. Proficiency in Git not only simplifies your life but also enhances productivity significantly. In this blog post, we’ll explore a set of commands that will supercharge your productivity. As you become more proficient with these commands, you’ll save valuable time and become a more effective software engineer.

Git Vocabulary

Now, before we dive into exploring Git commands one by one, let’s familiarize ourselves with some essential Git terms. This will not only help you better understand the commands but also prevent confusion down the road when these terms are used in the later part of this blog.

HEAD

In Git, HEAD is a special pointer/reference that always points to the latest commit in the current branch. When you make a new commit, HEAD move forward to point to that new commit. For example, if you’re on the main branch and you make a new commit, HEAD will now point to that new commit, indicating that it's the most recent one in the main branch.

^ (Caret Symbol):

The ^ symbol in Git serves as a means to navigate through your project’s historical timeline. When you employ HEAD^, it references the commit immediately preceding your current one. If you append a number following ^, such as HEAD^2, it references the second commit preceding your current commit. In short, the ^ symbol allows you to traverse backwards in your project’s history, while the numerical value allows you to precisely determine the number of commits you wish to go back.

Staging

Staging is where you assemble the changes you want to include in your next commit. Staging allows you to carefully curate your commits, making it easy to review, organize, and refine your modifications. With staging, you have control over what gets included in your commit. To stage changes, you use the git add command, which is akin to declaring, "I want these changes to be part of my next commit."

Now let’s explore the 10 Git commands one by one.

1-Adding and Committing Files Together

Typically, in Git, we use the git add * command to stage all modified files for a subsequent commit. Afterwards, we utilize the git commit -m "commitMessage" command to commit these changes. However, there exists a more streamlined command that accomplishes both tasks in a single step:

git commit -am "commitMessage"

The -am flag allows us to not only stage these changes but also commit them in one efficient operation.

2-Creating and Switching to a Git Branch

Similar to the previous scenario, there’s another command that combines the functionality of the two commands. Instead of using two separate commands, git branch branchName to create a branch and then git checkout branchName to switch to it, you can achieve both tasks in a single step with the following command:

git checkout -b branchName

The -b flag with the git checkout command allows us to not only create a new branch but also immediately switch you to it.

3-Delete a Git Branch

To delete a branch in Git, you can use the git branch -d or git branch -D command. The -d option is for a safe deletion, which will only delete the branch if it has been fully merged into the current branch. The -D option is for a forceful deletion, which will delete the branch regardless of whether it's fully merged or not. Here are the commands:

Safe deletion (checks for merge):

git branch -d branchName

Forceful deletion (doesn’t check for merge):

git branch -D branchName

4-Renaming a Git Branch

To rename a branch, you can use the git branch -m command followed by the current branch name and the new desired branch name. For example, if you want to rename a branch called oldBranch to newBranch, you would run:

git branch -m oldBranch newBranch

However, if you want to rename the current branch where you are working right now, without specifying the old name explicitly, you can use the following command:

git branch -m newBranchName

Here, you don’t need to specify the old branch name because Git will assume that you want to rename the current branch to the new name.

5-Unstaging a Specific File

Sometimes, you may want to remove a particular file from the staging area, allowing you to make additional modifications before committing. Use:

git reset filename

This will un-stage that file while keeping your changes intact.

6-Discarding Changes to a Specific File

If you want to completely discard the changes made to a specific file and revert it to its last committed state, utilize:

git checkout -- filename

This command ensures that the file returns to its previous state, undoing any recent modifications. It’s a helpful way to start fresh on a particular file without affecting the rest of your changes.

7-Updating Your Last Git Commit

Imagine you’ve just made a commit in your Git repository, but then you realize that you forgot to include a change in that commit, or perhaps you want to fix the commit message itself. You don’t want to create a whole new commit for this small change. Instead, you want to add it to the previous commit. This is where you can use the command:

git commit --amend -m 'message'

This command modifies the most recent commit you made. It combines any staged changes (ones you’ve added with git add) with your new comment to create an updated commit.

A thing to remember is that if you have already pushed the commit to a remote repository, you will need to force push the changes using git push --force to update the remote branch. Because a standard git push operation appends a new commit to your remote repository rather than modifying the last commit.

8-Stashing Changes

Imagine you’re working on two different branches, A and B. While making changes in branch A, your team asks you to fix a bug in branch B. When you attempt to switch to branch B using git checkout B, Git prevents it, displaying an error:

Unable to change branch
We can commit our changes as suggested by the error message. But committing is more like a fixed point in time, not an ongoing work in progress. This is where we can apply the error message’s second suggestion and use the stash feature. We can use this command for stashing our changes:

git stash

git stash temporarily saves changes that you're not ready to commit, allowing you to switch branches or work on other tasks without committing incomplete work.

To reapply stashed changes in our branch, you can use git stash apply or git stash pop. Both commands restore the latest stashed changes. Stash applying simply restores the changes, while popping restores the changes and removes them from the stash.

9-Reverting Git Commits

Imagine you’re working on a Git project, and you discover that a particular commit, introduced some undesirable changes. You need to reverse those changes without erasing the commit from history. You can use the following command to undo that particular commit:

git revert commitHash

It’s a safe and non-destructive way to correct errors or unwanted alterations in your project.

For instance, let’s say you have a series of commits:

Commit A
Commit B (undesirable changes introduced here)
Commit C
Commit D To reverse the effects of Commit B, you would run:

git revert commitHashOfB

Git will create a new commit, let’s call it Commit E, which negates the changes introduced by Commit B. Commit E becomes the latest commit in your branch, and the project now reflects the state it would have been in if Commit B had never happened.

If you’re wondering how to retrieve a commit hash, it’s straightforward using git reflog. In the screenshot below, the highlighted portions represent the commit hashes that you can easily copy:

Commit Hashes

10-Resetting Git Commits

Let’s assume you’ve made a commit to your project. However, upon inspection, you realize that you need to adjust or completely undo your last commit. For such a scenario, Git provides these powerful commands:

Soft reset

git reset --soft HEAD^

When you use git reset --soft HEAD^, you are performing a soft reset. This command allows you to backtrack on your last commit while preserving all your changes in the staging area. In simple words, you can easily uncommit while retaining your code changes, using this command. It is handy when you need to revise the last commit, perhaps to add more changes before committing again.

Mixed reset

git reset --mixed HEAD^

This is the default behaviour when you use git reset HEAD^ without specifying --soft or --hard. It un-commits the last commit and removes its changes from the staging area. However, it keeps these changes in your working directory. It is helpful when you want to un-commit the last commit and make changes from scratch while keeping the changes in your working directory before re-committing.

Hard reset

git reset --hard HEAD^

Now, let’s talk about git reset --hard HEAD^. It completely erases the last commit along with all the associated changes from your Git history. When you use --hard flag, there's no going back. So use this with extreme caution when you want to discard the last commit and all its changes permanently.

Thank you for reading. I hope this post is helpful and you learned some new commands. If you have any further questions, don’t hesitate to reach out. Feel free to share any Git commands you tend to use in your daily routine and find super handy. :)

She Makes $120,000 a Month Blogging

Sufian mustafa — Wed, 13 Mar 2024 20:33:57 +0000

If you thought blogging was dead, think again.

Sophia Lee was a struggling sophomore, looking for a job that could help pay her way through college. One day, she stumbled across a Pinterest pin that caught her interest. A mother claimed she made $10,000 per month blogging.

Sophia had a blog.

It was the typical one. Sporadic writings when something happened in her life. Only her family knew of it and visited it.

She had no idea you could make money with blogs.

But once she got that idea, she went all in. She wanted to make it big with her blog. And her strategy worked.

Today, five years later, she’s making $120,000 a month blogging.

Year #1: Focus on Fast Income

First, Sophia deleted all her original blog posts.

This first year, she focused on fast income. As a student, she had little time to write blog posts. And she needed money, fast.

She felt that the easiest way to make fast money with a new blog was with ads.

So her goal was to get accepted by an ad agency. She discovered that for that she needed page views. She chose Pinterest for this purpose.

After all, that’s how she’d herself discovered that you could make money, blogging.

Her second focus was to learn as much about blogging as possible. As fast as possible. That gave her an easy choice.

She could figure it out for herself, which would take a couple of years. Or spend $100 on a course and be making money in a couple of months. Take note of one thing here…

She did NOT have the mindset of, “Let me take this course and do nothing.”

She put what she learned at use immediately. That’s where she behaved in a different way than most people. Determined progress.

To earn money for the courses, she took babysitting gigs.

And every time she learned something new, she would follow it to a T for two months. After that she would adjust. This is another wise piece of advice.

Use it as is for two months, then tweak and adjust.

Year #2: Focus On Affiliate marketing and SEO

This year, Sophia focused on affiliate marketing, mainly from Amazon Associates.

Sophia advised against doing affiliate marketing the first year. Maybe because you need more traffic to make it worth it. Maybe because it takes more time.

She didn’t say.

When you do affiliate marketing on a blog, it means you need to do SEO. Search Engine Optimization.

This was another topic Sophia had to learn.

Now she masters it, but she wasn’t born with that skill. Notice how all the way through, she learns and implements. Learns and implements.

Then tweak.

Year #3: Focus on Email List and Social Media

Sophia didn’t understand the importance of an email list until now.

I would switch this to the first year. Unless you really don’t have the energy. An email list will become your most important asset.

Sophia said to make sure with everything you posted to be extremely helpful.

Keep the reader in mind at all times.

Don’t write about yourself. People don’t care about you. They care about themselves.

Focus on them.

Sophia also started on social media. She chose Instagram and YouTube. Both good places to find traffic.

Once again, she focused hard.

That meant an Instagram story every day. A YouTube video once a week. All that was extra work, though.

Because of all the extra workload, Sophia started to hire.

She had to. She hired part-time freelancers to help her with her blogging. Now she had a team.

Year #4: Focus on Course Creation

In Year #4, Sophia began to create courses and focused on this part of her business.

There is good money in courses. Digital courses. Especially when you have the experience and the knowledge you teach others.

She also started a second business.

One she’d wanted always. An interior design business. Plus, she began to be more risky in her choices.

But she made the money now to be able to be risky.

Year #5: Focus on TikTok and Hiring Full-time Employees

In Year #5, Sophia decided to focus on TikTok.

She also started more new business ventures. And she switched from hiring part-time employees to full-time employees.

It helped her with her work-flow.

Why would she prefer full-time employees? Because, like she said, part-time employees do other things as well. When you have someone full time, they are more focused and more involved with your business.

Could You Make $100,000 a Month in 5 Years?

Why not?

You now have a 5-year blueprint to follow. You know exactly what worked for Sophia, year by year. And right now, she’s making $120,000 per month.

Not too shabby.

If you’re not sure if blogging is for you, though, why not start with a small project first?

The End of Programming

Sufian mustafa — Tue, 12 Mar 2024 20:46:00 +0000

The end of classical Computer Science is coming, and most of us are dinosaurs waiting for the meteor to hit.

The Evolution of Classical Computer Science

We're witnessing a transformative shift in the landscape of Computer Science, signaling the end of traditional methodologies as we know them.
Reflecting on my journey, which began with programming personal computers like the Commodore VIC-20 and Apple ][e in the 1980s, and continued through my academic pursuits in Computer Science, including a PhD at Berkeley, I realize the predominant focus was on what I term “classical” CS: encompassing programming, algorithms, data structures, systems, and programming languages. In this paradigm, the pinnacle achievement was translating ideas into human-authored programs — typically in languages like Java, C++, or Python. Regardless of complexity, concepts in Classical CS, from database join algorithms to intricate protocols like Paxos consensus, were all encapsulated within human-readable, human-understandable code.

Navigating the AI Winter: Reflections on Traditional Algorithms

Back in the early ’90s when I was in college, the field of AI was going through a rough patch known as the AI Winter, and classical algorithms ruled the roost. I remember my research stint at Cornell with Dan Huttenlocher, a leading figure in computer vision (now the Dean of the MIT School of Computing). In Dan’s PhD-level computer vision course around 1995, we never delved into topics like deep learning or neural networks; our focus was on classical algorithms such as Canny edge detection, optical flow, and Hausdorff distances. Deep learning was just starting to emerge, far from being considered mainstream AI or CS.

Despite the passage of 30 years, the foundational principles of Computer Science remain rooted in data structures, algorithms, and programming. I'll be surprised if, in another three decades, or even a mere decade, we're still following the same approach in CS education. It's clear to me that the field of CS is on the cusp of significant changes, changes that many of us may not be fully prepared for:

Programming will be obsolete

The future of programming is on the brink of a radical transformation. I firmly believe that the traditional notion of "writing a program" is on its way out, with AI systems poised to replace most software as we know it. For the vast majority of applications, software will be trained rather than manually coded. Even for scenarios requiring seemingly straightforward programs, AI will step in to generate them, alleviating the need for human intervention.

This concept may sound far-fetched, but consider the evolution of Computer Science from its roots in Electrical Engineering. Early pioneers likely envisioned a future where deep knowledge of semiconductors, binary arithmetic, and microprocessor design would be essential for understanding software. However, in today's reality, the majority of software developers have little to no understanding of CPU mechanics or transistor physics. Similarly, I anticipate that future Computer Scientists will be so detached from traditional software concepts that tasks like reversing a linked list or implementing Quicksort will seem alien to them.

Current advancements in AI, such as coding assistants like CoPilot, merely scratch the surface of what's to come. It's evident to me that AI will ultimately take over the entire process of writing programs, relegating humans to a supervisory role at best. The rapid progress in AI content generation, such as the leap from DALL-E v1 to DALL-E v2 within a span of 15 months, highlights the underestimation of large AI model capabilities. What once seemed like science fiction is quickly becoming reality.

I'm not just talking about CoPilot replacing programmers; I envision a future where the concept of writing programs is entirely replaced by training models. Future CS students won't need to learn mundane tasks like adding nodes to binary trees or coding in C++. Such education will become obsolete, akin to teaching engineering students how to use a slide rule.

Engineers of the future will effortlessly deploy massive AI models, ready to tackle any task, with minimal human input. The focus will shift from manually coding algorithms to providing the right examples, training data, and evaluation methods. Powerful models capable of generalizing through few-shot learning will render massive datasets unnecessary in most cases. The process of "training" an AI model won't involve complex operations like running gradient descent loops in PyTorch; instead, it will be about teaching by example, letting the machine do the heavy lifting.

In this new era of Computer Science, machines will possess immense capabilities and knowledge, resembling an educational endeavor more than an engineering one. Unlike human children, these AI systems will be entrusted with critical tasks like piloting airplanes, managing power grids, and potentially governing entire nations. As the focus shifts towards educating intelligent machines rather than directly programming them, the traditional notion of programming will become obsolete.

How does all of this change how we think about the field of Computer Science?
How does all of this change how we think about the field of Computer Science?

The new atomic unit of computation becomes not a processor, memory, and I/O system implementing a von Neumann machine, but rather a massive, pre-trained, highly adaptive AI model. This is a seismic shift in the way we think about computation — not as a predictable, static process, governed by instruction sets, type systems, and notions of decidability. AI-based computation has long since crossed the Rubicon of being amenable to static analysis and formal proof. We are rapidly moving towards a world where the fundamental building blocks of computation are temperamental, mysterious, adaptive agents.

This shift is underscored by the fact that** nobody actually understands how large AI models work**. People are publishing research papers actually discovering new behaviors of existing large models, even though these systems have been “engineered” by humans. Large AI models are capable of doing things that they have not been explicitly trained to do, which should scare the shit out of Nick Bostrom and anyone else worried (rightfully) about an superintelligent AI running amok. We currently have no way, apart from empirical study, to determine the limits of current AI systems. As for future AI models that are orders of magnitude larger and more complex — good friggin’ luck!

The shift in focus from programs to models should be obvious to anyone who has read any modern machine learning papers. These papers barely mention the code or systems underlying their innovations; the building blocks of AI systems are much higher-level abstractions like attention layers, tokenizers, and datasets. A time traveller from even 20 years ago would have a hard time making sense of the three sentences in the (75-page-long!) GPT-3 paper that describe the actual software that was built for the model:

We use the same model and architecture as GPT-2 [RWC+19], including the modified initialization, pre-normalization, and reversible tokenization described therein, with the exception that we use alternating dense and locally banded sparse attention patterns in the layers of the transformer, similar to the Sparse Transformer [CGRS19]. To study the dependence of ML performance on model size, we train 8 different sizes of model, ranging over three orders of magnitude from 125 million parameters to 175 billion parameters, with the last being the model we call GPT-3. Previous work [KMH+20] suggests that with enough training data, scaling of validation loss should be approximately a smooth power law as a function of size; training models of many different sizes allows us to test this hypothesis both for validation loss and for downstream language tasks.

This shift in the underlying definition of computing presents a huge opportunity, and plenty of huge risks. Yet I think it’s time to accept that this is a very likely future, and evolve our thinking accordingly, rather than just sit here waiting for the meteor to hit.

Sidebar: What have I been up to lately?

My long-time readers will notice that I haven’t been blogging much lately. Sorry about that! I’ve been a bit busy.

About three years ago, I left Google for a startup that was acquired by Apple. I subsequently left Apple to lead engineering at another startup for a couple of years. In that time I learned a ton about startup life, building AI systems, and building teams. It was great.

A couple of months ago I jumped ship to start my own company. I’m now the co-founder and CEO of Fixie.ai, a stealth startup in the AI space, and the blog post above may or may not represent some of the thinking going into this new venture. We have a fantastic founding team and I’m really excited about what we’re going to be able to accomplish. Over the next few months I hope to share more about what we’re up to. Until then, hang tight!

Conclusion:

"In conclusion, the landscape of Computer Science is on the brink of a profound transformation. The traditional approach of manually writing programs is gradually giving way to AI-driven systems that learn and adapt on their own. This shift challenges conventional notions of programming and calls for a reevaluation of how we educate future generations of Computer Scientists.

As we embrace this new era, it's essential to recognize the potential and risks it presents. While AI-powered programming promises unprecedented efficiency and innovation, it also raises concerns about control, understanding, and the ethical implications of autonomous systems.

Ultimately, the future of Computer Science lies in educating intelligent machines, rather than merely programming them. This shift not only reshapes the field but also opens up new possibilities for collaboration between humans and AI.

Credit: This article is adapted from an original piece by Matt Welsh.

Exploring React 19: A Deep Dive into the Latest Features and Enhancements

Sufian mustafa — Tue, 12 Mar 2024 05:49:00 +0000

React 19 heralds a new era in frontend development, packed with a myriad of features and enhancements aimed at revolutionizing the way we build user interfaces. In this article, we embark on a deep dive into React 19, dissecting its core features, architectural changes, and performance optimizations to provide developers with an in-depth understanding of what this latest iteration brings to the table.

Concurrent Rendering Unveiled:
React 19 introduces concurrent rendering as the default mode, a paradigm shift in how React handles updates and reconciliation. Unlike its predecessor, React 18, which relied on synchronous rendering, React 19 embraces concurrency to break down UI updates into smaller, asynchronous tasks. This approach leads to improved responsiveness and smoother user experiences by allowing React to prioritize and schedule high-priority updates while avoiding UI-blocking operations.

Suspense for Data Fetching Reinvented:
Building on the foundation laid by previous releases, React 19 revamps Suspense for data fetching, offering a more intuitive and flexible solution for managing asynchronous operations. With Suspense, developers can declaratively handle loading states, error boundaries, and data dependencies, simplifying the development of complex data-driven applications. Additionally, Suspense now seamlessly integrates with concurrent rendering, enabling developers to orchestrate data fetching and rendering concurrently for optimal performance.

Enhanced Server-side Rendering (SSR):
React 19 introduces significant improvements to server-side rendering, leveraging advancements in streaming and concurrency to deliver faster TTFB and improved SEO performance. By embracing concurrent rendering on the server, React 19 can efficiently stream HTML responses to clients, reducing time-to-content and enhancing perceived performance. Furthermore, React 19 offers better support for streaming data fetching, enabling SSR-powered applications to fetch and render data incrementally for a smoother user experience.

Incremental Adoption Strategies:
Recognizing the diverse ecosystem of existing React applications, React 19 prioritizes incremental adoption, providing developers with tools and strategies to upgrade their projects gradually. Whether migrating from older React versions or integrating React into legacy codebases, React 19 offers improved compatibility and migration guides to streamline the transition process. Developers can now leverage features like automatic code-mods and compatibility flags to incrementally adopt React 19 without disrupting existing workflows.

Performance Optimization Techniques: Under the hood, React 19 employs a plethora of performance optimization techniques to boost runtime efficiency and reduce bundle sizes. From optimized reconciliation algorithms to lazy component loading, React 19 strives to deliver faster rendering and improved memory management. Additionally, React 19 introduces a new scheduler architecture, enabling fine-grained control over rendering priorities and resource utilization for enhanced performance tuning.
Developer Tools for Insightful Debugging: Complementing the release of React 19 are updated developer tools, equipped with advanced debugging and profiling capabilities. Developers can now gain deeper insights into component lifecycles, state changes, and performance bottlenecks, enabling them to optimize their applications more effectively. With features like time-slicing profiler and flame charts, React 19 empowers developers to diagnose and resolve performance issues with unprecedented precision.

Let’s delve deeper into the exciting features of React 19 and explore their potential impact on your development workflow:

1. React Compiler (Experimental):

While still under development, the React Compiler holds immense potential for performance optimization. Here’s a closer look:

Benefits: By translating React code into smaller, optimized JavaScript, the compiler can potentially lead to faster initial page loads and smoother user experiences, especially on low-powered devices.
Considerations: As an experimental feature, the compiler is not yet ready for widespread production use. Additionally, its effectiveness might vary depending on the complexity of your application.

2. Concurrent Mode Improvements:

React 19 builds upon the foundation of concurrent rendering introduced in React 18, offering several enhancements:

Prioritization: React 19 prioritizes user interactions like scrolling and typing even while data is being fetched. This ensures a smooth and responsive user experience, preventing interactions from feeling sluggish.
Suspense at the Root Level: React 19 enables using Suspense at the root level of your application, allowing you to gracefully handle data fetching errors and display fallback content even at the application's entry point.

3. Automatic Batching:

This optimization automatically groups multiple state updates into a single re-render, significantly reducing the number of unnecessary re-renders that can occur in complex applications. This leads to improved performance and smoother animations.

4. useId Hook:

React 19 introduces the useId hook, simplifying the process of generating unique IDs within functional components. This is particularly helpful for managing dynamic content like lists and forms, eliminating the need for manual ID generation and potential conflicts.

5. Strict Mode Enhancements:

Strict Mode, a development tool used to identify potential issues in your application, receives further refinements in React 19:

Legacy API Deprecation Warnings: Strict Mode now warns you about the use of deprecated APIs, helping you modernize your codebase and avoid potential compatibility issues in future React versions.
useLayoutEffect Hook Deprecation Warning: While still available in React 19, using the useLayoutEffect hook within Strict Mode triggers a warning, encouraging you to consider alternative lifecycle methods like useEffect for improved performance.

Beyond the Features:

Beyond the specific features, upgrading to React 19 offers broader benefits:

Improved Code Maintainability: Features like the useId hook and stricter checks in development mode can lead to cleaner and more maintainable code, reducing the risk of bugs and making collaboration easier.
Staying Up-to-Date: Upgrading to the latest version allows you to leverage the latest advancements and benefit from future improvements introduced in React.

Smoother UX with Suspense

A tech company tried out Suspense, a feature that lets you show something on the screen while waiting for the rest of the data to load. This got rid of annoying loading icons, making the site feel smoother when moving from page to page.

Easier Global State Management

A new financial tech company used React 19’s updated tools for managing data across the whole app. They managed to cut down on unnecessary code by 62% and got new features out the door 47% faster. This is all thanks to React 19 making it easier to handle data.

As these stories show, React 19 is helping developers make better websites faster. Whether it’s making the site faster, easier to find on Google, nicer to use, or simpler to code for, React 19 is making a big impact. As more people start using it, we’ll likely see even more great results from the latest in React.

Conclusion

React 19 is here to make building websites and apps a lot easier and better. With cool new stuff like the React Compiler, Actions API, and better Hooks, writing code gets quicker, and managing your app’s data is simpler.

It also brings in features that make apps run smoother and load faster, which is great for both users and search engines. Plus, React 19 works well with web components, so you can use React in more ways than before.

If you already have an app and want to upgrade to React 19, don’t worry. It’s pretty straight forward if you follow a step-by-step plan. Using tools like codemods and Strict Mode, and doing lots of testing, can help make the upgrade smooth. Upgrading is worth it because it makes your app work better and can make your life as a developer easier.

In short, React 19 is all about helping developers do their job better and making apps that run better for everyone. As more people start using it, we’re going to see even cooler and more interactive websites and apps out there.

10 Advanced JavaScript Tricks for Experienced Developers 🚀🚀

Sufian mustafa — Mon, 11 Mar 2024 19:17:58 +0000

10 JavaScript Hacks You Need to Know Right Now (Before Your Peers Do!)

JavaScript is a versatile and powerful programming language that has become an indispensable tool for web development. Experienced developers often struggle to master advanced techniques to optimize their code that improve performance, etc. Build more efficient and maintainable applications In this article, we’ll explore ten advanced JavaScript tricks that will take your programming skills to the next level.

1. Destructuring Assignment

Assignment destructuring is a concise way to extract values from arrays or objects and assign them to variables. It simplifies your code and improves readability.For arrays, you can use bracket notation, and you can use braces for objects.

// Destructuring arrays
const [firstItem, secondItem, ...rest] = [1, 2, 3, 4, 5];

// Destructuring objects
const { name, age, ...details } = { name: 'Lokesh', age: 25, occupation: 'Developer' };

2. Spread Syntax

You can use the spread syntax to extend the elements of an array or the properties of an object into another array or object. This is useful for making copies, merging objects, and passing multiple arguments to functions.

// Copy an array
const originalArray = [1, 2, 3];
const newArray = [...originalArray];

// Merge objects
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };

3. Currying

Currying is a functional programming technique in which a function that takes multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for better reuse and composition of the code.

const multiply = (a) => (b) => a * b;
const multiplyByTwo = multiply(2);
const result = multiplyByTwo(5); // Output: 10

4. Memoization

Storage is a caching technique used to store the results of expensive function calls and avoid unnecessary recalculations. It can significantly slow performance long-term recursive or consuming functions.

const memoizedFibonacci = (function () {
  const cache = {};

  return function fib(n) {
    if (n in cache) return cache[n];
    if (n <= 1) return n;

    cache[n] = fib(n - 1) + fib(n - 2);
    return cache[n];
  };
})();

5. Promises and Async/Await

Promises and Async/Await are essential to handle asynchronous operations more gracefully and make code more readable and maintainable. They help avoid callbacks hellish and improve error handling.

// Using Promises
function fetchData() {
  return new Promise((resolve, reject) => {
    // Asynchronous operation, e.g., fetching data from an API
    // resolve(data) or reject(error) based on the operation result
  });
}

// Using Async/Await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

6. Closures

Closures are functions that remember the environment in which they were created, even if that environment is no longer accessible. They are useful for creating private variables and for behavior encapsulation.

function createCounter() {
  let count = 0;
  return function () {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

7. Function Composition

Function composition is the process of combining two or more functions to create a new function. It encourages code reuse and helps create transformations complex step by step.

const add = (x) => x + 1;
const multiplyByTwo = (x) => x * 2;
const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);
const addAndMultiply = compose(multiplyByTwo, add);
console.log(addAndMultiply(3)); // Output: 8

8. Proxy

The proxy object allows you to create custom behavior for basic object operations. It allows you to intercept and modify object operations. ‘object, such as accessing properties, assigning, and calling methods.

const handler = {
  get: (target, prop) => {
    console.log(`Accessing property: ${prop}`);
    return target[prop];
  },
};

const targetObj = { name: 'Lokesh', age: 25 };
const proxyObj = new Proxy(targetObj, handler);
console.log(proxyObj.name); // Output: Accessing property: name \n Lokesh

9. Event Delegation

Event delegation is a technique in which you attach a single event listener to a parent rather than multiple listeners to each child. memory usage and improves performance, especially for large lists or dynamically generated content.

document.getElementById('parent').addEventListener('click', function (event) {
  if (event.target.matches('li')) {
    console.log('You clicked on an li element!');
  }
});

10. Web Workers

Web Workers allow you to run JavaScript code in the background, alongside the main thread. They are useful for offloading CPU-intensive tasks, Avoid UI hangs and improve performance Responsiveness.

// In the main thread
const worker = new Worker('worker.js');
worker.postMessage({ data: 'some data' });

// In the worker.js file
self.addEventListener('message', function (event) {
  const data = event.data;
  // Perform heavy computations with the data
  // Post the result back to the main thread
  self.postMessage({ result: computedResult });
});

Conclusion

In Conclusion mastering these advanced JavaScript tricks, experienced developers can create more efficient and maintainable and with better performance. These techniques not only demonstrate your knowledge of JavaScript, but also enable you to solve complex problems with elegance and finesse. As you continue to explore the language, remember that practice and Experimentation is the key to becoming a proficient JavaScript developer. Happy coding!

India’s first AI humanoid robot teacher starts teaching

Sufian mustafa — Sun, 10 Mar 2024 18:49:52 +0000

"Is the role of humans being taken over by robots?"

Today, we're checking out something pretty cool. It's like the first step in a big partnership between humans and robots. Ever thought about living in a world where people and robots work together? 🤔💡 Well, that's exactly what we're looking into!

Meet IRIS, India's new AI Teacher Robot! Think of her as the new player in this exciting team, created by Makerlabs Edutech.

Together, we're exploring how this awesome robot might be starting a teamwork era between humans and technology.

Let's dive in and talk about how this robot could lead us into a time where people and robots team up for education. Are we at the beginning of a fresh era where humans and robots become buddies in learning?

India’s first sari-donning AI humanoid robot teacher starts teaching

The first AI humanoid robot developed for teaching in India is grabbing attention across social media platforms.

Developed by a firm called Makerlabs Edutech, the saree-clad humanoid called ‘Iris’ has taken up teaching assignments in the southern state of Kerala.

Iris is also a component of the 2021 NITI Aayog (the apex public policy think tank of the Government of India) project Atal Tinkering Lab, which aims to increase extracurricular activities in school.

The makers highlight the humanoid is set to advance the traditional learning landscape. “IRIS embodies our commitment to pushing the boundaries of what’s possible, inspiring confidence in more groundbreaking innovations to come, said Makerlabs Edutech in a post on Linkedin.

In a populous country like India, where there is a shortage of good-quality teachers, the proposition of humanoid robots taking up teaching assignments is highly compelling. Statistics suggest that India has nearly 265 million students in school, and a shortage of teachers is reported nationwide.

Check out the Instagram post featuring IRIS, India's latest AI Teacher Robot!

Aiming to enhance the quality of education

The Iris humanoid robot was unveiled in Thiruvananthapuram’s KTCT Higher Secondary School in Kerala to improve students’ educational experiences.

Makerlabs intends Iris to be a cutting-edge voice assistant for educational settings, not just a robot. Iris offers quickness and smooth operation thanks to its robotics and generative artificial intelligence (AI) capabilities.

Iris is a multilingual AI instructor who may assist with interactive learning, offer personalized voice assistance, and answer tough inquiries in various academic areas. In addition, Iris has wheels for increased mobility that help to make the teaching process more interactive and engaging.

Iris also can enhance student engagement in the classroom, personalize instruction, and accommodate various learning preferences.

Iris undoubtedly offers a peek at the educational future in which artificial intelligence (AI) will assist teachers in the classroom, even though the long-term effects are still unknown.

“With IRIS, we’ve set out to revolutionize education by harnessing the power of AI to create a truly personalized learning experience. By adapting to each student’s needs and preferences, IRIS empowers educators to deliver engaging and effective lessons like never before”, said Makerlabs Edutech in a post on Instagram.
Benefits of humanoid robots in education

Humanoid robots have been found to enhance learning and engagement in several educational domains. A report by Robotical suggests that they can facilitate the growth of computational thinking in early learners and increase student engagement in a broad range of curriculum disciplines.

Humanoid robots are an excellent teaching tool for kids

on the autism spectrum. It has been demonstrated that giving students a human form fosters a deeper sense of connection and ownership; this is particularly true when utilizing “learning by teaching” and caring-giving instructional approaches, according to the firm.

A wide range of disciplines, including reading, writing, languages, science, technology, engineering, and mathematics, may be successfully taught by humanoid robots. However, they have also been utilized to impart metacognitive skills like self-assurance, drive, and dedication to work.

As humanoid technology has advanced leaps and bounds in recent years, we hope such general-purpose robots will become a common sight in educational institutions across the globe.

Conclusion

Closing this chapter, IRIS from Makerlabs Edutech emerges as a game-changer, pioneering a personalized and engaging learning experience.
As we look at the exciting journey with IRIS, it makes us think: Are we entering a time where we team up with robots? Can we smoothly join a workforce where we work closely with these AI buddies? The big question remains: Are we really ready for this big change, and does it mean a future where regular jobs shift? The ride with IRIS not only shapes how we learn but also makes us wonder about a world where people and robots live and work together. 🚀💭

Top 10 Mistakes To Avoid When Using React in 2024

Sufian mustafa — Sat, 09 Mar 2024 19:19:03 +0000

Mistakes can slow development and lead to less efficient and performant applications.

So, this article will discuss ten mistakes developers must avoid when using React. By understanding and avoiding these mistakes, developers can ensure they use React effectively and efficiently.

1. Building a Monolith React App

Building monolith apps has been the go-to when you’re working with React. For instance, you’d likely use “create-react-app” to bootstrap your React project.

Problem: By doing so, you build a giant monolith React app that can cause maintainability and scalability issues as your project grows.

Solution: Leverage next-generation build systems like Bit to design and develop independent components for any React project. Bit lets you create components in an independent environment, allowing it to be used in any context while keeping track of the places it’s being used.

Additionally, it uses Ripple CI to automatically propagate changes across the component tree to ensure all usages use the latest version.

2. Importing More Than You Need

Importing more components or modules than necessary can increase bundle size and negatively impact performance.

Problem: Larger bundle sizes lead to slower load times and potentially a poorer user experience.

Solution: Import only the specific components or functions you need from a module. Use code-splitting to load components on demand.

// Import only specific components
import { Button } from './components';

// Code splitting
import React, { lazy, Suspense } from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));
<Suspense fallback={<div>Loading...</div>}>
  <OtherComponent />
</Suspense>

3. Not Separating Business Logic from Component Logic

Mixing business logic (data fetching, transformations, etc.) directly within components can make code less reusable and more challenging to test and maintain.

Problem: It leads to tightly coupled components and difficulty independently testing business logic.

Solution: Create separate functions or services to handle business logic and call them from components.

// Data fetching service
function fetchUserData() {
  // ...
}

// Component
function UserDetails() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetchUserData().then(setUser);
  }, []);
  // Render user data
}

4. Prop Drilling

Prop drilling refers to passing props through multiple levels of components, often unnecessarily, to reach a profoundly nested component.

Problem: It can make code less readable, harder to maintain, and more prone to errors.

Solution: Use React Context or a state management library like Redux to share data more effectively across components without prop drilling.

// Context
const UserContext = React.createContext();

// Provider
<UserContext.Provider value={{ user }}>
  {/* Child components can access user data without props */}
</UserContext.Provider>
// Consumer
<UserContext.Consumer>
  {(user) => {
    // Use user data here
  }}
</UserContext.Consumer>

5. Duplicated Work on Each Render

Performing expensive computations or operations within a component’s render function can lead to performance issues, especially with frequent re-renders.

Problem: Recalculations on every render can cause sluggishness and potential performance bottlenecks.

Solution: Use techniques like memoization (with React.memo, useMemo, or useCallback) to cache values and prevent unnecessary re-renders.

// Memoized component
const MyComponent = React.memo(function MyComponent(props) {
  // ...
});

// Memoized value
const memoizedValue = useMemo(() => computeExpensiveValue(props), [props]);

6. Ignoring Code Readability and Structure

Writing messy, unorganized code can make understanding, maintaining, and collaborating difficult.

Problem: Spaghetti code becomes hard to navigate, debug, and refactor, decreasing development efficiency.

Solution: Follow consistent coding styles, use descriptive variable names, properly indent code, and break down complex functions into smaller, reusable units.

// Readable and structured code
function MyComponent() {
  const [count, setCount] = useState(0);
  function incrementCount() {
    setCount(count + 1);
  }
  return (
    <div>
      <button onClick={incrementCount}>Increment ({count})</button>
    </div>
  );
}
// Spaghetti code (avoid!)
function MyComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        ({count}) + 1
      </button>
    </div>
  );
}

7. Overusing State and Unnecessary Re-renders

Managing state unnecessarily in components can lead to performance issues and unnecessary re-renders.

Problem: Frequent state updates trigger re-renders, even if the changes are irrelevant to the rendered UI.

Solution: Carefully consider whether a component needs state and optimize state updates to minimize re-renders. Use useReducer for complex state management.

// Optimized with memoization
const MyComponent = React.memo(() => {
  const [text, setText] = useState('');
  const filteredText = useMemo(() => text.toUpperCase(), [text]);
  return <p>{filteredText}</p>;
});

// Unoptimized (avoids memoization)
const MyComponent = () => {
  const [text, setText] = useState('');
  return <p>{text.toUpperCase()}</p>;
};

8. Using the useEffect Hook Improperly

The useEffect hook is a powerful tool for handling side effects in React components, but it’s crucial to use it correctly to avoid unintended consequences.

Problem: Improper use of useEffect can lead to infinite loops, memory leaks, or unexpected behavior.

Solution: Understand the dependency array of useEffect and use it to control when the effect runs. Be mindful of cleanup

functions to prevent memory leaks.

useEffect(() => {
  // Side effect that runs only when count  changes
}, [count]);

9. Ignoring Error Handling and Logging

Not addressing errors effectively can lead to frustrating user experiences and difficulty debugging issues.

Problem: Unhandled errors crash the application, and inadequate logging makes diagnosing and fixing problems hard.

Solution: Implement try-catch blocks to handle errors gracefully and use libraries like react-error-boundary to handle component-level errors. Utilize logging libraries like winston or debug for structured logging and easy debugging.

try {
  // Perform operation
} catch (error) {
  console.error(error);
  // Handle error gracefully
}

// Error boundary example
<ErrorBoundary>
  {/* Protected component */}
</ErrorBoundary>

10. Re-inventing the Wheel

Spending time re-writing existing libraries or components can be inefficient and unnecessary.

Problem: Duplicating existing functionality wastes time and effort, potentially leading to bugs and inconsistencies.

Solution: Leverage existing, well-maintained libraries and components for standard functionalities like routing, state management, form handling, etc. Only write custom components when truly necessary.

Conclusion

In conclusion, mastering React involves learning its advanced features and understanding and adhering to best practices to ensure efficient and maintainable code. By avoiding the common mistakes outlined in this article, developers can significantly enhance their React development experience and build high-quality applications.

Avoid reinventing the wheel by leveraging existing libraries and components for standard functionalities, saving time and ensuring consistency in your codebase. By staying informed about the latest developments in the React community and continuously improving your skills, you can unlock the full potential of React and deliver exceptional user experiences in your applications.