In this article, I’ll explain and demonstrate what clean code is. Then I’ll share my favorite clean code patterns for building modern Agile applications.

I won’t use complex jargon. I’ll hit you with simple, clear JavaScript examples that focus on the core concepts. Straight to the point, no nonsense – that’s how I roll.

Let’s get started.

Table of Contents

1. The Cost of Bad Code

2. Clean Coder vs. Messy Coder

3. AI Can’t Save You If Your Code is a Mess 🗑️

4. 12 Clean Code Design Patterns for Building Agile Applications ⚖️

   • 🌿 Use Names That Mean Something

   • 🔨 Keep Functions Laser-Focused (SRP)

   • 🚪 Use Comments Thoughtfully

   • ⚡ Best Practices for Writing Good Comments

   • 🧩 Make Your Code Readable

   • 🏌️ Test Everything You Write

   • 💉 Use Dependency Injection

   • 📂 Clean Project Structures

   • 🤹‍♂️ Be Consistent with Formatting

   • ✋ Stop Hardcoding Values

   • 🤏 Keep Functions Short

   • ⛺ Follow the Boy Scout Rule

   • 🏟️ Follow the Open/Closed Principle

5. Modern Best Practices to Help You Write Clean Code: A Summary 🥷

6. Automated Tools for Maintaining Clean Code ⚓

   • 1️⃣ Static Analysis

   • 2️⃣ Automated Code Formatting

   • 3️⃣ Continuous Integration (CI) Testing

   • 4️⃣ CI/CD pipelines

7. The Role of Documentation in Agile Software Development 🚣

8. Conclusion 🏁

9. Frequently Asked Questions About Clean Code 🧯

In Agile, where change is the only constant, clean code is your armor. It makes you adaptable, swift, and, most importantly, in control.

Here’s the truth: writing clean code is not optional if you want to survive in the software development industry. Fortunately, we human beings are able to master clean code with some effort and practice.

The Cost of Bad Code

To explain this stack bar graph, in the initial development phase, bad code is slightly more costly to change than clean code.

But as we move into the maintenance and refactoring phases, the gap widens significantly, with bad code costing nearly twice as much as clean code.

By the legacy phase, bad code reaches 100% cost – now it’s extremely expensive to update, while clean code remains more manageable at 45%.

As of now, the most recent analysis on the cost of poor software quality in the U.S. is the 2022 report by the Consortium for Information and Software Quality (cisq.org). This report estimates that poor software quality cost the U.S. economy at least $2.41 trillion in 2022, with technical debt accounting for about $1.52 trillion of this amount.

You can read more about that here.

Recent discussions continue to highlight the significant impact of technical debt on software quality and business performance.

For instance, a 2024 survey indicated that for more than 50% of companies, technical debt accounts for greater than a quarter of their total IT budget. And this can really hinder innovation if it’s not addressed.

As you can see, there’s no doubt that bad code is a costly problem in software development.

Clean Coder vs. Messy Coder

Here’s a graph that shows the journey of two types of coders:

• ⚠️ The Messy Coder (Red line): Starts fast but crashes hard. The more lines they write, the more trouble they make.

• ⚡ The Clean Coder (Blue line): Starts slow but stays consistent. Growth doesn’t stop — it accelerates.

🫵 Now, you decide which line you want to follow.

AI Can’t Save You If Your Code is a Mess 🗑️

When you get stuck writing code, you might turn to AI. But let me tell you something: AI can’t save you if your code is a mess.

It’s like building a house on sand. Sure, it stands for a while, but one strong gust of wind or big wave, and it collapses.

Remember: AI is just a tool. If you don’t know how to write clean, scalable applications, you're setting yourself up for failure.

If you can’t maintain the code you write, you’re in trouble.

I’ve seen it over and over again: developers who know five programming languages. They can build apps, websites, software. They know algorithms and data structures like the back of their hand.

But when faced with a large project or someone else’s messy code, they crumble.

They’re like an aerospace engineer who designs and builds their own planes but doesn’t know how to fly them. They crash into their own code.

This was me...once upon a time. I’d write thousands of lines of code, only to realize I couldn’t even understand what I wrote last week. It was chaos for me.

But then it hit me — every developer struggles with this. It wasn't about how much I knew. It was about how I organized and structured what I knew. In other words, it was about knowing the art of programming itself.

I decided to escape this trap. After five months of intense work — four to five hours a day writing, designing, and researching — I created something I wish I had when I started programming. A book that’s a complete beginner’s guide: Clean Code Zero to One.

If you want to learn more about the book, I give you all the details at the end of this tutorial. So read on to learn more about writing clean code.

12 Clean Code Design Patterns for Building Agile Applications ⚖️

If your code doesn’t follow these modern clean code design patterns, you could be creating a ticking time bomb. These patterns are your tools. Master them and enjoy the success of your projects. Let me show you one by one.

🌿 Use Names That Mean Something

Naming your variables or functions b or x is not helpful. Call them what they are so they’re easier to understand. Here’s an example of both a bad and good variable name:

// Weak and vague
let b = 5;

// Strong and clear
let numberOfUsers = 5;

People who write unclear names don’t want to own their mistakes. Don’t be that person.

🔨 Keep Functions Laser-Focused (SRP)

A function should do one thing—and do it perfectly. This is called the Single Responsibility Principle (SRP).

Good code is like a hammer. It hits one nail, not ten. For example, if you are hiring someone to do everything in your company — finance, sales, marketing, janitorial work, and so on — they’ll likely fail miserably because they can’t focus one one thing. The same goes for your classes in code.

🚧 When a class or function does more than one thing, it becomes a tangled mess. Debugging it feels like solving a puzzle upside down. If your class handles both user input and database operations, for example, it’s not multitasking — it’s madness. Break it up. One method, one job.

🔥 My Rule: Your code works for you. Keep it sharp, focused, and controllable, or it’s going to control you. Here is how to make that happen:

// Clean: One job, one focus
function calculateTotal(a, b) {
    return a + b;
}

function logTotal(user, total) {
    console.log(`User: ${user}, Total: ${total}`);
}

// Messy: Trying to do EVERYTHING
function calculateAndLogTotal(a, b, user) {
    let total = a + b;
    console.log(`User: ${user}, Total: ${total}`);
}

🪧 When you mix tasks, you mix in confusion. As simple as that.

🚪 Use Comments Thoughtfully

There is a great saying among professional developers:

“ Code speaks for itself. ”

You don’t explain what a door does every time someone walks into a room, do you? Your code should work the same way.

Comments aren’t bad, but if your code can’t stand on its own, then you may have a problem.

🪧 A good comment should tell “why” not “how or what”. If a developer doesn’t understand “how” something works, then they likely aren’t going to understand “why” either.

Here are some short examples of good comments vs bad comments. I’ll also show you a real-world project for writing clean comments.

Example 1: Bad Comment 👎

// Multiply the price by the quantity to calculate the total
const total = price * quantity;

This is a bad comment because it simply repeats what the code already says. The code price * quantity is self-explanatory, so the comment doesn’t add anything useful.

Good Comment: 👍

If the code is clear and simple, you don’t need a comment.

const total = price * quantity;

Example 2: Bad Comment 👎

// Check if the user logged in
function isUserLoggedIn(session) {
    return !!session.user;
}

This comment is bad because it doesn’t explain why the isUserLoggin() exists. It just explains what happens. But we already know that this is an auth function. This comment is a waste of time.

Good Example 👍

// The user is authenticated before accessing protected resources
function isUserLoggedIn(session) {
    return !!session.user;
}

This is a good comment because it explains why the code exists. It tells us that the function checks if the user is authenticated before allowing access to sensitive parts of the app. It focuses on the bigger picture.

⚡ Best Practices for Writing Good Comments

1. Explain the “Why,” not the “What”:
   Write comments to explain the purpose or context of the code, not what the code is doing.

2. Avoid obvious comments:
   Don’t write comments for things the code already makes clear.

3. Keep them short and precise:
   Write concise comments that are easy to read and directly explain the purpose.

4. Update comments regularly:
   Outdated comments can mislead developers, so always update them when the code changes.

Real-World Example (with Good Comments) 🛒

Let’s implement these practices into a real-world project: a large e-commerce application. One function calculates shipping costs based on the order details. Here's the full code, I will explain each comment below:

// Shipping rules:
// - Free shipping for orders over $100
// - Standard shipping ($10) for orders below $100
// - Additional $5 for international orders

function calculateShipping(order) {
    let shippingCost = 0;

    // Check if the order qualifies for free shipping
    if (order.total >= 100) {
        shippingCost = 0; // Free shipping
    } else {
        shippingCost = 10; // Standard shipping cost
    }

    // Add additional cost for international orders
    if (order.isInternational) {
        shippingCost += 5;
    }

    return shippingCost;
}

// Example usage
const order1 = { total: 120, isInternational: false };
const order2 = { total: 80, isInternational: true };

console.log(calculateShipping(order1)); // Output: 0
console.log(calculateShipping(order2)); // Output: 15

At the start of the function, we include a comment explaining the rules for shipping costs. This gives the reader an overview of the logic without needing to read the full code.

// Shipping rules:
// - Free shipping for orders over $100
// - Standard shipping ($10) for orders below $100
// - Additional $5 for international orders

Then, the first condition checks if the order total is greater than or equal to $100. A comment here clarifies why free shipping is applied.

// Check if the order qualifies for free shipping
if (order.total >= 100) {
    shippingCost = 0; // Free shipping
}

The second condition applies an additional charge for international shipping. The comment explains why the extra cost is added.

// Add additional cost for international orders
if (order.isInternational) {
    shippingCost += 5;
}

Why are these comments good?

Imagine you’re working in a team of 20 developers. Someone reads the calculateShipping function six months later. Without these comments, they might waste time guessing why international orders have an extra fee. Good comments clarify the why and save hours of frustration.

🧩 Make Your Code Readable

If someone reading your code feels like they’re solving a riddle, you’ve already become a troublemaker. Here is the proof:

// Clean: Reads like a story
if (isLoggedIn) {
    console.log("Welcome!");
} else {
    console.log("Please log in.");
}

// Messy: Feels like chaos
if(isLoggedIn){console.log("Welcome!");}else{console.log("Please log in.");}

If your code is messy and hard to read, it will confuse others—and even yourself later! Imagine coming back to your own code after six months and feeling like you’re reading a foreign language. Readable code saves time, reduces bugs, and makes everyone’s life easier.

🍵 Why is Readability Important?

1. For yourself: When you revisit your code after weeks or months, clean code helps you pick up where you left off without wasting time figuring out what you did.

2. For your team: If someone else reads your code, they shouldn’t have to solve a puzzle. Clean code makes teamwork smoother and prevents miscommunication.

3. Fewer bugs: Clear code is easier to debug because you can quickly spot mistakes.

🧙‍♂️ How to Write Readable Code

Let’s build a simple program to manage books in a library. We’ll make it clean and readable and then I will break down this code below:

// A class to represent a book
class Book {
    constructor(title, author, isAvailable) {
        this.title = title;
        this.author = author;
        this.isAvailable = isAvailable;
    }

    borrow() {
        if (this.isAvailable) {
            this.isAvailable = false;
            console.log(`You borrowed "${this.title}".`);
        } else {
            console.log(`Sorry, "${this.title}" is not available.`);
        }
    }

    returnBook() {
        this.isAvailable = true;
        console.log(`You returned "${this.title}".`);
    }
}

// A function to display available books
function displayAvailableBooks(books) {
    console.log("Available books:");
    books.forEach((book) => {
        if (book.isAvailable) {
            console.log(`- ${book.title} by ${book.author}`);
        }
    });
}

// Example usage
const book1 = new Book("The Clean Coder", "Robert Martin", true);
const book2 = new Book("You Don’t Know JS", "Kyle Simpson", false);
const book3 = new Book("Eloquent JavaScript", "Marijn Haverbeke", true);

const library = [book1, book2, book3];

displayAvailableBooks(library); // Show available books
book1.borrow(); // Borrow a book
displayAvailableBooks(library); // Show available books again
book1.returnBook(); // Return the book
displayAvailableBooks(library); // Final list

We created a Book class to represent each book. It has properties like title, author, and isAvailable to track its status.

• The borrow method checks if the book is available. If yes, it marks it as unavailable and prints a message.

• The returnBook method makes the book available again.

• The displayAvailableBooks function loops through the library and prints only the books that are available.

• We create three books (book1, book2, book3) and store them in a library array.

• We borrow and return books, showing how the list of available books changes.

As you can see, readable code is not just about style. It saves time, prevents bugs, and preserves your code as useful for years to come.

🏌️ Test Everything You Write

If you don’t take the time to write tests, you shouldn’t be surprised if your code breaks. If you do want to write tests, follow this unit testing strategy to catch problems ahead.

What Is Unit Testing?

Concretely, unit testing checks individual parts of your code (like functions or classes) to ensure they work correctly. Just like checking each brick of your house for soundness before building the walls.

Let me give you an example of how unit testing works:

class Calculator {
    add(a, b) { return a + b; }
    subtract(a, b) { return a - b; }
}

// Test it (Unit Test)
const calculator = new Calculator();
console.assert(calculator.add(2, 3) === 5, "Addition failed");
console.assert(calculator.subtract(5, 3) === 2, "Subtraction failed");

Here’s what’s going on in this code:

First, we create the calculator class:

class Calculator {
    add(a, b) { return a + b; }
    subtract(a, b) { return a - b; }
}

The Calculator class has two methods: add and subtract.

• add(a, b) takes two numbers and returns their sum.

• subtract(a, b) takes two numbers and returns their difference.

Next, we set up the tests:

const calculator = new Calculator();

Here, we’re creating an instance of the Calculator class to test its methods.

Then we write test cases:

console.assert(calculator.add(2, 3) === 5, "Addition failed");
console.assert(calculator.subtract(5, 3) === 2, "Subtraction failed");

console.assert(condition, message) checks if the condition is true. If it’s false, the message ("Addition failed" or "Subtraction failed") is displayed in the console.

• First test: calculator.add(2, 3) === 5

  • Calls the add method with 2 and 3.

  • Checks if the result is 5.

• Second test: calculator.subtract(5, 3) === 2

  • Calls the subtract method with 5 and 3.

  • Checks if the result is 2.

So what happens if something breaks? It’s pretty simple to solve any issues that arise here. In this case, if the add or subtract method doesn’t work correctly, the test will fail. For example:

console.assert(calculator.add(2, 3) === 6, "Addition failed");

• The condition calculator.add(2, 3) === 6 is false.

• The console will display: "Addition failed".

Real-World Example: Testing a Login System 👥

Let’s test a simple login system to see how unit testing works in a real-world scenario.

class Auth {
    login(username, password) {
        return username === "admin" && password === "1234";
    }
}

// Test the Auth class
const auth = new Auth();
console.assert(auth.login("admin", "et5t45#@") === true, "Login failed for valid credentials");
console.assert(auth.login("user", "wrongpassword") === false, "Login succeeded for invalid credentials");

First, create the Auth class:

class Auth {
    login(username, password) {
        return username === "admin" && password === "1234";
    }
}

The login method checks if the username is "admin" and the password is "1234". If both match, it returns true – otherwise, false.

Next, set up the tests:

const auth = new Auth();

Create an instance of the Auth class. Then write the test cases:

console.assert(auth.login("admin", "1234") === true, "Login failed for valid credentials");
console.assert(auth.login("user", "wrongpassword") === false, "Login succeeded for invalid credentials");

• First test: Checks if valid credentials ("admin", "1234") succeed. If not, "Login failed for valid credentials" is displayed.

• Second test: Checks if invalid credentials ("user", "wrongpassword") fail. If not, "Login succeeded for invalid credentials" is displayed.

🌱 Why testing results in clean code:

1. You naturally write smaller, more focused functions to make your code testable

2. Tests verify that your code behaves as expected under different conditions.

3. With tests in place, you can confidently update your code, knowing the tests will catch any mistakes.

💉 Use Dependency Injection

Hardcoding dependencies is like tattooing someone’s name on your forehead — it’s permanent, can be abrasive, and locks you in.

So, what does Dependency Injection do? It lets you manage your code's relationships by passing dependencies as arguments. It’s flexible, adaptable, and maintainable.

To demonstrate how it works, here I’m using the Nodemailer dependency for sending emails to users:

// Dependency: Sending emails with Nodemailer
const nodemailer = require('nodemailer');
function sendEmail(to, subject, message) {
    const transporter = nodemailer.createTransport({ /* config */ });
    return transporter.sendMail({ from: "programmingwithshahan@gmail.com", to, subject, text: message });
}

⚠️ To save yourself from risk, make sure to avoid hardcoding dependencies. Use abstraction or configuration files for secure maintenance.

This is just one example. As a developer, you may use hundreds of libraries or dependencies.

I’m not saying you shouldn’t rely on dependencies/libraries at all, as nowadays it is hard to avoid them. But you should be very careful before installing them in your coding projects.

You should check the security, performance, quality, or functionality of an organization's software systems. Because they sometimes contain risks that can ruin your entire project.

🚧 Always control your tools, don't let them control you.

📂 Clean Project Structures

A well-organized project is the difference between a trash heap and a high-end boutique.

Here is how each folder should be organized:

If your codebase looks like a junk drawer, you’ve already caused trouble for your future self.

Let’s go through the clean project structure you can see above to better understand it:

1. myProjet/src

This is the main container for your entire application. Everything your app needs is stored inside this folder. It has subfolders to keep things tidy and managed in one place.

2. components

This is where you keep all the reusable pieces of your app. You can use these components in multiple places without building them again.

3. services

This is the "brain" of your app. It handles all the work behind the scenes for both the frontend and backend. emailService.js, userService.js and productService.js are some of the example files for your services folder.

4. utils

This contains all the small, handy tools you need to make your application run smoothly and make your life easier. For example, formatedate.js, validateEmail.js and generateId.js are some of the common utils files to make reusable pieces of components for your entire project.

5. tests

Conventionally, test files are typically located outside the src folder, at the project root level. This keeps your production code (src) separate from your test code (tests), making it cleaner and easier to manage. Have a look:

myProject/
├── src/              # Production code
│   ├── components/
│   ├── services/
│   └── utils/
├── tests/            # Test files
│   ├── components/
│   ├── services/
│   └── utils/
├── package.json      # Project configuration
└── README.md         # Documentation

Some developers may prefer creating one testing file inside the test folder to test everything in one place. Unfortunately, it may feel clean at first, but as your project grows, you’ll have to find and search for specific code blocks. It’s ugly and can produce unexpected testing results. So breaking them into multiple testing files inside the tests folder is highly recommended.

Real-world example 📧

So let me create a clean, durable project structure for you to apply in any future projects you might work on. Needless to say, clean project structure is the foundation of building a maintainable project.

From our previous email sending application example, we will write a clean project structure for this app. We want to build an application that sends emails to users. Your clean project structure for this app should look like this:

As you can see, I packed every subfolder and file inside the src folder which is the main container of our application. Inside the src folder, we created components, services, utiles. Finally, we have a manageable test folder outside the src folder to test each component independently. This test folder has nothing to do with our production code that is located inside the src folder.

🤹‍♂️ Be Consistent with Formatting

Don’t write code like you’re 10 different people. Be consistent with your formatting.

Use tools like Prettier or ESLint to enforce a consistent style. If every file looks different, you’re creating chaos that no one wants to fix.

I would say that consistency in formatting is one of the most important aspects of writing clean code.

Have a look...

// Always use 2 spaces for indentation
function calculateArea(width, height) {
  if (width <= 0 || height <= 0) {
    throw new Error("Dimensions must be positive numbers.");
  }
  return width * height;
}

// Add meaningful whitespace for readability
const rectangle = {
  width: 10,
  height: 20,
};

// Clear separation of logic
try {
  const area = calculateArea(rectangle.width, rectangle.height);
  console.log(`Area: ${area}`);
} catch (error) {
  console.error(error.message);
}

Let’s examine some of the aspects of this code that make it clean:

1️⃣ Consistent Indentation

Why 2 or 4 spaces? It’s clean, minimal, and universally accepted in many JavaScript style guides. It doesn’t overwhelm the eyes, and the code structure stands out clearly. When you mix inconsistent indentation (2 spaces here, 4 spaces there), you confuse people—and confused people make mistakes.

2️⃣ Meaningful Whitespace: Giving Code Room to Breathe

That extra line break between the rectangle definition and the try block is like a pause in a sentence — it gives the reader time to process.

3️⃣ Clear Separation of Logic: Modular Thinking

try {
  const area = calculateArea(rectangle.width, rectangle.height);
  console.log(`Area: ${area}`);
} catch (error) {
  console.error(error.message);
}

Look at how the logic is divided into clear sections:

• First, the calculation (calculateArea function).

• Then, the output (console.log).

• Finally, error handling (catch block).

Each task has its own space and purpose.

4️⃣ Readable Error Handling

When you throw errors or log messages, you format them cleanly. No vague or cryptic messages here. A developer seeing this will immediately know the problem.

throw new Error("Dimensions must be positive numbers.");

🐦‍⬛ General tips for consistent formatting:

• Use 2 or 4 spaces for indentation consistently throughout your codebase. Avoid tabs to maintain uniformity across different editors.

• Keep lines to a maximum of 100-120 characters to prevent horizontal scrolling and improve readability.

• Group related logic together and separate blocks of code with blank lines to highlight their purpose.

• Finally, avoid over-aligning code. Instead, let indentation naturally guide the flow of logic.

✋ Stop Hardcoding Values

Hardcoding values is a lazy way to code. Here is the proof:

// Bad: Hardcoded and rigid
function createUser() {
    const maxUsers = 100;
    if (currentUsers >= maxUsers) throw "Too many users!";
}

// Clean: Dynamic and flexible
const MAX_USERS = 100;
function createUser() {
    if (currentUsers >= MAX_USERS) throw "Too many users!";
}

You see, changing this variable won’t surprise you in the future. You know exactly where to find it to change uncertain values.

Its best to store your fixed values in the global configuration (config) file.

🪧 So, avoid hardcoding values at all costs. Hardcoding is the shortcut that may drive your future self (or others) crazy.

🤏 Keep Functions Short

If your function is longer than 20 lines, it’s probably trying to do too much.

Short functions are sharp functions. They hit their mark every time.

Long, bloated functions are messy and hard to read, but short functions are clear and focused. Here is how your large functions should break down:

function updateCart(cart, item) {
    addItemToCart(cart, item);
    let total = calculateTotal(cart);
    logTransaction(item, total);
    return total;
}

function addItemToCart(cart, item) {
    cart.items.push(item);
}

Let me explain this code so you understand why breaking down large functions is a winning strategy.

1. The Main Function: updateCart() calls smaller helper functions to handle specific tasks like:

   • Adds the item to the cart.

   • Calculates the total price.

   • Logs the details of the transaction.

   • Finally, it returns the total price.

Instead of one long block of code that tries to do everything, it delegates tasks to helper functions.

2. Helper Function: addItemToCart() This function only handles adding the item to the cart. if you need to change how items are added (for example, checking for duplicates). You could just edit this small function instead of digging through a giant block of code in updateCart. That’s how you write clean code functions that’s a joy to read and easy to maintain.

What Happens If Functions Are Too Long? 💤

Let’s say you didn’t break down the updateCart function. Here’s what it might look like:

function updateCart(cart, item) {
    cart.items.push(item);
    let total = 0;
    for (let i = 0; i < cart.items.length; i++) {
        total += cart.items[i].price;
    }
    console.log(`Added ${item.name}. Total is now $${total}.`);
    return total;
}

What are the problems here?

• It’s trying to do everything.

• It’s hard to read, especially if it grows bigger.

• If something breaks, you’ll waste time figuring out which part is the problem.

Now the choice is yours: stick with the messy all-in-one approach or practice the clean one function one job mindset.

⛺ Follow the Boy Scout Rule

Always leave your campsite cleaner than you found it.

Let me break it down for you. You don’t just use something and leave it worse than before. That’s inconsiderate behavior. Real professionals leave things better than they found them.

In coding terms, every time you touch the codebase, make it better. Clean it up, refactor messy parts, and improve readability. If you don’t, you’re just piling on garbage that will eventually collapse on your head.

Here is an example. Instead of improving it, we’re just adding more layers of complexity:

// Original code: Hard to read, poorly named variables
function calc(a, b) {
  let x = a + b;
  let y = x * 0.2;
  return y;
}

// We're adding to it but not cleaning it up
function calcDiscount(a, b, discountRate) {
  let total = calc(a, b);
  let final = total - discountRate;
  return final;
}

After: it gets better every time. Here’s how a disciplined coder works — they improve as they go:

// Improved code: Clear names, refactored for clarity
function calculateSubtotal(price, quantity) {
  return price * quantity;
}

function calculateDiscountedTotal(price, quantity, discountRate) {
  const subtotal = calculateSubtotal(price, quantity);
  const discount = subtotal * discountRate;
  return subtotal - discount;
}

Now, anyone can tell what’s happening at a glance. Because we’ve broken down the code into smaller, more focused functions. Thus, adding new features won’t break existing functionality. 🏕️

🏟️ Follow the Open/Closed Principle

This design principle suggests your code should be designed to allow extensions without changing the existing foundation.

You want to add features — not rip it apart every time you upgrade. Modifying old code to fit new requirements is exactly like trying to rebuild your house every time you buy new furniture. It’s not sustainable.

Let’s see how you can build smarter, scalable code that lets you add features without breaking everything else.

Before: Violating the principle

You’ve got a class to handle payments — simple enough. At first, it just handles credit cards.

But then your boss shows up and says, “Hey, now we need PayPal support.”

And because you didn’t bother learning clean code, your code looks like a spaghetti monster straight out of a legacy enterprise system from 1995. Here’s the masterpiece you’ve crafted:

class PaymentProcessor {
  processPayment(paymentType, amount) {
    if (paymentType === "creditCard") {
      console.log(`Processing credit card payment of $${amount}`);
    } else if (paymentType === "paypal") {
      console.log(`Processing PayPal payment of $${amount}`);
    } else {
      throw new Error("Unsupported payment type");
    }
  }
}

const paymentProcessor = new PaymentProcessor();
paymentProcessor.processPayment("creditCard", 100);
paymentProcessor.processPayment("paypal", 200);

Alas! Every new payment type (like Apple Pay, Google Pay, and so on) requires modifying the processPayment method. Needless to say, you risk breaking existing functionality while adding new features. If you had learned this principle, you might not be in this mess.

Don’t worry: I’ll help you to fix this. First, we need to refactor the code. Instead of modifying the existing class, we’ll extend its functionality using polymorphism:

javascriptCopy code// Base class
class PaymentProcessor {
  processPayment(amount) {
    throw new Error("processPayment() must be implemented");
  }
}

// Credit card payment
class CreditCardPayment extends PaymentProcessor {
  processPayment(amount) {
    console.log(`Processing credit card payment of $${amount}`);
  }
}

// PayPal payment
class PayPalPayment extends PaymentProcessor {
  processPayment(amount) {
    console.log(`Processing PayPal payment of $${amount}`);
  }
}

// Adding a new payment type? Just extend the class!
class ApplePayPayment extends PaymentProcessor {
  processPayment(amount) {
    console.log(`Processing Apple Pay payment of $${amount}`);
  }
}

// Usage
const payments = [
  new CreditCardPayment(),
  new PayPalPayment(),
  new ApplePayPayment(),
];

payments.forEach((payment) => payment.processPayment(100));

Now, adding new payment methods doesn’t require changing the existing PaymentProcessor class. You just created a new subclass. So the original code remains untouched, meaning there’s no risk of breaking existing features.

Each payment type has its own class, and adding PayPal payment support, for example, doesn’t break the code. Now you can reply to your boss: “Of course, I will add this feature in 5 minutes.” Your promotion is waiting for you to accept it.

I share even more tips in my book Clean Code Zero to One.

Modern Best Practices to Help You Write Clean Code: A Summary 🥷

Now let me show you the best practices and summarise our 12 Clean Code design principles to help you write clean code for agile application development.

🔎 Common Code Smells and How to Fix Them

• 💊 Duplication: If you're copying code, you’re creating more work for yourself. Extract it into a function, and do it right.

• 🛤️ Long methods: If your method needs a scroll bar, it's doing too much. Break it down, keep it focused.

• 👑 King objects: No class should be doing everything. Simplify responsibilities, or your codebase will become messy.

💬 Effective Commenting Practices

• 💭 When to comment: Only comment if the code isn't clear. If it is, comments are just clutter.

• 🫗 Clarity: Comments should tell why, not what. If your code needs explaining, it might be too complex.

• 🌴 Avoid redundancy: Don't comment what's obvious. If your function is addNumbers, don't comment it does that.

🧼 Refactoring Techniques for Clean Code

• 🏭 Extract methods: Big methods? Break them down. It's not just about cleanliness –– it's about control.

• 🫕Rename variables: If your variable names don’t shout their purpose, change and improve them. Precision in naming is precision in thought.

• 🍃 Simplify conditionals: If your conditionals look like algebra, simplify them. If a == true, just write if(a).

🧪 Testing and Clean Code

• 🧙 Unit tests: Test every piece of code like you're interrogating a suspect. No stone unturned.

• 🏇TDD (Test Driven Development): Write tests first. It's not just about catching bugs, it's about knowing exactly what your code should do before you write it.

• 🧽 Clean tests: Your tests should be as clean as your code. If they're messy, they’re not going to be helpful.

🐛 Error Handling and Clean Code

• ⁉️ Exceptions: Use them. They're not just for errors, they're also for keeping your code clean from error clutter.

• 🖍️ Fail fast: If something's wrong, stop right there. Don't let errors add up. Deal with them immediately.

• 🚨 Logging: Log like you're documenting a crime scene. Clear, precise, and only what's necessary.

🌱 Code Reviews and Clean Code

• 🚢 Process: Have a system. No cowboy coding. Review, critique, improve.

• 🔪 Tools: Use tools that make reviews easy. They're not just for catching mistakes, they're also for teaching discipline.

• 🧦 Culture: Cultivate a culture where feedback is gold. Help your team learn how to handle and receive critiques.

Automated Tools for Maintaining Clean Code ⚓

Tools and automation techniques can be really helpful in writing clean code. If you’re not using the right tools and automating things to save yourself time, you’re missing out.

You think you can "eyeball" your way through code quality? Guess again. Without automation, this is what happens:

1. 👎 You miss obvious mistakes because you're "too busy."

2. 🤕 Your code looks different in every file, making collaboration a headache.

3. 🪦 Deployment breaks because you skipped a critical test.

Successful developers use the right tools to automate code and get things done. Here are four strategies for maintaining clean code using modern tools.

1️⃣ Static Analysis

Static analysis is actually a code inspector that reads through your code and points out potential issues early on. The best part? It works before runtime, catching errors that could otherwise lead to crashes, downtime, or embarrassing bugs.

How does it work?

1. Syntax checking: It looks at your code to analyze everything written in the correct syntax. If you misspell a variable or forget a closing bracket, it’ll call you out instantly.

2. Code quality rules: Tools like ESLint enforce rules like consistent indentation, avoiding unused variables, and sticking to best practices.

3. Error prevention: It identifies logic errors, such as using variables that haven’t been defined, or making comparisons that don’t make sense.

Here’s how static analysis works in action:

🚨 Before static analysis:

let sum = (a, b) => { return a + b; }
console.log(sume(2, 3)); // Typo, unnoticed until runtime

• Problem: The typo in sume will only cause an error when the code runs, and that could lead to frustrating debugging sessions or worse — breaking the app in production.

🚑 After static analysis (using ESLint):

codeError: 'sume' is not defined.

• Solution: ESLint immediately flags the typo before you even run the code. The error is caught early, saving you time and headaches.

2️⃣ Automated Code Formatting

Before Formatting:

function calculate ( x , y ){ return x+ y;}
console.log( calculate (2,3 ) )

• Problem: Inconsistent spacing and formatting make the code harder to read.

After using Prettier:

function calculate(x, y) {
  return x + y;
}
console.log(calculate(2, 3));

• Solution: Clean, consistent, and professional formatting is applied automatically. No more nitpicking over spaces or alignment.

Pretty basic stuff though. I covered this in case you write code in notepad or something where IDE is not provided (for example, a job interview).

3️⃣ Continuous Integration (CI) Testing

CI testing make sure every new change to your code is verified automatically. It’s like a safety net that catches bugs introduced during development. CI tools run your tests every time you push code, so nothing breaks after deployment.

How Does CI Testing Work?

1. Triggers on change: Each time code is committed, the CI tool (like GitHub Actions, Jenkins) runs automated tests.

2. Feedback: It gives you instant feedback if something fails.

3. Prevents broken code: Commits only clean, and the working code gets merged into the main branch.

4️⃣ CI/CD pipelines

We also use CI/CD pipelines as a continuous process that includes code building, testing, and deployment, while CI testing is a part of that process that focuses on automating the testing of code changes.

Differece between CI/CD pipelines vs CI testing:

• CI/CD pipelines: A CI/CD pipeline combines code building, testing, and deployment into a single process. This process make sure that all changes to the main branch code are releasable to production. CI/CD pipelines can reduce deployment time, decrease costs, and improve team collaboration.

• CI testing: CI testing is the process of automatically testing code changes that are integrated into a central repository. CI testing focuses on making sure the codebase is stable and that integration issues are resolved. CI testing help developer build software that is stable, bug-free, and meets functional requirements

🚧 This is what CI testing CI/CD pipelines concepts are really about. Not as complex as it seems. So let me elaborate more on CI testing with GitHub Actions, as we usually run tests through automated tools nowadays.

⚡ Continuous Integration (CI) Testing with GitHub Actions

As I said earlier, CI tools run automated tests every time you push code or open a pull request. This guarantees that only working, bug-free code gets merged into the main branch.

How to Set Up CI Testing with GitHub Actions

Step 1: Create Your Repository

Set up a GitHub repository for your project. Then, push your code to GitHub using the following commands:

git init
git add .
git commit -m "Initial commit for CI Testing"
git branch -M main
git remote add origin https://github.com/codewithshahan/codewithshahan.git
git push -u origin main

Or you can create a new repo from your GitHub account without using the command. Just login to your GItHub account and visit dashboard. Here you will find a “New” button to create a brand new repo:

Step 2: Add a GitHub Actions Workflow

Navigate to your repository’s Actions tab. To do this, first, you have to visit your repo on Github (you will find the link after creating your repo). In this case, I created a new repo called “codewithshahan”. Here, look for the Actions tab on the right side of the navigation bar.

After navigating the Actions tab, scroll down a little and you will find the continuous integration section:

Choose a setup workflow yourself. I will use Node.js for this project.

After clicking the configure button, a node.js.yml file will be created automatically, and you can adjust the code depending on your goals.

I won’t go into detail about how should modify your .yml file. It depends on your project goals and personal preference. Also, it is a whole different broader topic and as this article has already become quite long, so I’ll explain it in a future article. For now, just stick with this foundational knowledge.

This CI Testing workflow is best for modern application development. Your app remains stable while incorporating key features including testing (e,g. Dark Mode), Building and deploying applications directly within your GitHub repository. This way, you can push your code confidently, knowing your code is always clean and ready for production.

The Role of Documentation in Agile Software Development 🚣

If you want your code to be top-notch, you need to understand how to write good documentation. If you think documentation is just about scribbling down how the code works, you’re wrong. It's about explaining why it works, not just how it works. That’s where most people miss the mark.

1. 🚡 Create Useful Docs (Explain Why, Not Just How)

When you write documentation, you're not just throwing down some instructions for how to use the code. You're telling the next person (or even yourself in the future) why this piece of code exists in the first place. That’s the difference between good and bad documentation.

Bad docs leave people scratching their heads. They’re too vague, too simple, and they don’t answer the big questions. If your documentation is unclear, that likely means your thinking is unclear. You’re basically saying, "I don’t care if you understand this, it works, just use it." That’s not helpful.

Great documentation answers the tough questions:

• ✅ Why did you choose this approach over another?

• ✅ Why does this function exist? What problem does it solve?

• ✅ Why did you write this code the way you did?

If your docs are just regurgitating how to use the code, you’re not being as helpful as you can be. Start thinking deeper and explaining the reasoning behind everything.

2. ⏳ Keep the Docs Updated (Outdated Docs Are Worse Than No Docs)

Outdated documentation is the worst. In fact, it can be worse than having no docs at all. When you leave documentation that’s out of sync with the code, you’re doing your future self — or whoever has to deal with it next — a huge disservice.

Every time your code changes, your documentation needs to change too. It has to reflect the current state of things. Don’t mislead future developers (or yourself) by leaving outdated info that will only confuse them and waste their time. If something is no longer relevant, delete it. Outdated documentation is the equivalent of a cluttered mind — it holds you back.

Make it a habit to check and update your documentation regularly. The minute a line of code changes, so should your documentation. Period.

3. 🚆 Integrate Comments (Good Comments in Code Are Part of Documentation)

Here’s the deal — comments in your code should integrate with your documentation. Good comments aren’t just a crutch for developers who can’t explain their code elsewhere. They should improve your docs, not replace them.

Comments are supplements to your documentation. You write clean, understandable code that needs minimal explanation, but when something isn’t crystal clear, throw in a comment. Remember the rule for comments in your code: explain the why, not the how. It’s the same here. Don’t repeat yourself. Let your code do the talking. Comments should complement the bigger picture of your documentation, not act as a band-aid for sloppy code.

🪧 Great code should be self-explanatory. Fix the code, then add comments for clarification if necessary. Keep comments clean, short, and to the point.

If you want to write clean, efficient, and maintainable code, documentation is key. Stop thinking of docs as an afterthought or something you do to fill space. It’s an extension of your code — your way of communicating clearly and effectively. It’s your roadmap for future developers, and it’s a reflection of your thought process.

Conclusion 🏁

Clean code isn't a nice-to-have –– it's a must-have for those who aim to lead. It's about control, efficiency, and improvement over time in the long run. And ultimately, it’ll help you succeed in the game of agile software development.

🪧 If you want to truly master your craftsmanship, write clean code, and let the efficiency speak for itself.

Frequently Asked Questions About Clean Code 🧯

1. What is clean code? It's code that doesn't make you want to throw your laptop out the window.

2. Why is clean code important in Agile? Because Agile is about speed and change, and you can't be quick with a mess.

3. What are code smells? Signs that you're about to lose control of your codebase.

4. How can I improve commenting? Only comment on what's necessary, and make sure each comment adds value, not noise.

Thank you for being with me. You can visit my Twitter account or my website to read more posts about clean code and Agile application development. Until next time… keep improving your codebase.

If you’re serious about mastering clean code and taking your programming career to the next level, then my book is for you: Clean Code Zero to One. This book is your full guide from zero to one in clean code, from messy code to masterpiece. I am offering a 50% discount using the code "earlybird" — only for the first 50 copies. Plus, there’s a 30-day money-back guarantee — no risk, all reward.

Now, think about writing messy code – it’s just as confusing, if not more!

On the other hand, clean code is like an organized room: you can easily find what you need, understand what’s happening, and get things done faster.

Let’s have a look at this graph. It shows two different ways of writing code and how they affect the time it takes to add more lines:

1. ⚠️ Quick & Dirty Code (Red line): This is when you write code quickly without planning or organizing it well. At first, it may seem faster, but as more lines are added, it becomes harder to understand and fix. So, over time, it takes longer and longer to add each new line.

2. ⚡ Thoughtful & Clean Code (Blue line): This is when you write code carefully, making it easy to understand and change. At first, it might take a bit longer, but over time, it remains easy to work with. This way, adding new lines doesn't become more difficult.

In simple terms, writing clean code might seem slower at the beginning, but in the long run, it saves a lot of time and makes work easier. It also leads to more reliable software and better products.

Writing clean code is a habit that professional developers cultivate, showing dedication to quality and a strong work ethic. And in this article, I’ll walk you through some best practices for keeping your code clean.

What we’ll cover:

1. Use Meaningful Names

2. Follow the Single Responsibility Principle (SRP)

3. Avoid Unnecessary Comments

4. Make Your Code Readable

5. Write Unit Tests

6. Be Careful with Dependencies

7. Organize Your Project

8. Use Consistent Formatting

9. Avoid Hardcoding Values

10. Limit Function Length

11. Conclusion

10 Essential Tips for Writing Clean Code

To help you get started on your clean code journey, here are 10 practical tips to keep your code readable, organized, and efficient.

1. Use Meaningful Names

When naming variables, functions, and classes, pick names that clearly describe their purpose.

Instead of calling a variable b, try numberOfUsers. This way, anyone reading your code can easily understand its purpose without needing additional comments. A meaningful name eliminates guesswork and avoids confusion.

Example:

// Good
let numberOfUsers = 5; // Clear and easy to understand

// Bad
let b = 5; // Vague and unclear

💡 Naming Tips

• Variables: Use nouns that describe the data, like userAge or totalAmount.

• Functions: Use action words, like calculateTotal() or fetchUserData().

• Classes: Use singular nouns, like User or Order, to represent what they are.

// Variable: Describes the data it holds
let userAge = 25;

// Function: Uses an action word to describe what it does
function calculateTotal(price, quantity) {
    return price * quantity;
}

// Class: Singular noun representing a type of object
class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

2. Follow the Single Responsibility Principle (SRP)

The Single Responsibility Principle means that each function or method should have one specific job.

This keeps your functions short and focused which makes them easier to read, test, and maintain.

Imagine a toolbox where each tool has a unique purpose—clean code functions should work the same way.

For instance, if you have a function called calculateTotal, it should only handle calculating the total. If you add extra tasks, it can lead to confusing code that’s hard to maintain.

Here's an example to show why it's important to keep functions focused:

Let’s say you want to calculate a total and return an object with extra information, like who calculated it and when. Instead of adding these directly into calculateTotal, we can use a second function.

1. Good Example (Separate Tasks)

    // This function only calculates the total
    function calculateTotal(a, b) {
        return a + b;
    }
   
    // This function creates an object with extra details
    function createCalculationRecord(a, b, user) {
        let sum = calculateTotal(a, b); // Calls the calculate function
        return {
            user: user,
            total: sum,
            timestamp: new Date()
        };
    }
   
    let record = createCalculationRecord(5, 10, "Shahan");
    console.log(record);
   

   👍 Why this is good: Each function has a clear, focused task. calculateTotal only does the math, while createCalculationRecord adds the extra details. If you want to change how the total is calculated, you only update calculateTotal, and if you want to change the record format, you only update createCalculationRecord.

2. Bad Example (Mixed Tasks in One Function)

    // This function calculates the total and creates an object in one step
    function calculateTotalAndReturnRecord(a, b, user) {
        let sum = a + b;
        return {
            user: user,
            total: sum,
            timestamp: new Date()
        };
    }
   
    let record = calculateTotalAndReturnRecord(5, 10, "Shahan");
    console.log(record);
   

   👎 Why this is bad: The function name calculateTotalAndReturnRecord shows that it’s trying to do multiple things. If you want to use just the calculation, you can’t reuse this function without the record part. It’s also harder to update and test each task separately.

3. Avoid Unnecessary Comments

Good code should be self-explanatory without needing excessive comments. Focus on writing code that’s clear and understandable on its own.

Comments are helpful when explaining complex logic or a unique approach, but too many comments can clutter your code and make it hard to follow.

💬 When to Use Comments:

• To clarify why something is done in a particular way.

• When working with complex algorithms or calculations.

• To add notes about potential limitations.

Example:

// Clear name, no comment needed
let userAge = 25;

// Unclear name, comment needed
let a; // age of the user

4. Make Your Code Readable

Readable code uses indentation, line breaks, and spaces to keep everything neat and organized.

Think of it like writing a story: paragraphs make reading easier by breaking up large chunks of text. In coding, line breaks serve the same purpose.

Example:

// Good Code
if (isLoggedIn) {
    console.log("Welcome!");
} else {
    console.log("Please log in.");
}

// Bad Code
if(isLoggedIn){console.log("Welcome!");}else{console.log("Please log in.");}

In VS Code, Prettier and Black are popular formatters that automatically apply clean code styling for multiple languages.

PyCharm and IntelliJ have powerful built-in formatters with customizable rules, supporting PEP 8 for Python and other standard guides. These tools ensure consistent, readable code across projects with minimal manual effort.

5. Write Unit Tests

Unit tests help make sure each part of your code works as expected.

By testing small, individual parts (like functions), you can catch bugs early and prevent them from spreading to other parts of the code.

Concretely, unit tests are actually mini quality checks for each part of your code to ensure they’re working as intended.

🍎 Real-world Example:

Let’s look at how to test a complex JavaScript object with multiple methods, using a Calculator class as an example.

This approach will help you see why it’s important to keep each method focused on one task and ensure each one works correctly through unit testing.

Here is the Calculator class that includes methods for basic arithmetic operations: addition, subtraction, multiplication, and division.

class Calculator {
    constructor() {
        this.result = 0;
    }

    add(a, b) {
        return a + b;
    }

    subtract(a, b) {
        return a - b;
    }

    multiply(a, b) {
        return a * b;
    }

    divide(a, b) {
        if (b === 0) throw new Error("Cannot divide by zero");
        return a / b;
    }
}

As you can see, each method performs one specific operation. The divide method has additional logic to handle division by zero, which would otherwise cause an error.

Now, we’ll write unit tests to confirm that each method behaves as expected. 🔬

🧪 Writing Unit Tests for Each Method

To test our Calculator class, we can write unit tests that cover normal cases as well as edge cases. Here’s how we would set up tests for each method:

// Initialize the Calculator instance
const calculator = new Calculator();

// Test add method
console.assert(calculator.add(2, 3) === 5, 'Test failed: 2 + 3 should be 5');
console.assert(calculator.add(-1, 1) === 0, 'Test failed: -1 + 1 should be 0');

// Test subtract method
console.assert(calculator.subtract(5, 3) === 2, 'Test failed: 5 - 3 should be 2');
console.assert(calculator.subtract(0, 0) === 0, 'Test failed: 0 - 0 should be 0');

// Test multiply method
console.assert(calculator.multiply(2, 3) === 6, 'Test failed: 2 * 3 should be 6');
console.assert(calculator.multiply(-1, 2) === -2, 'Test failed: -1 * 2 should be -2');

// Test divide method
console.assert(calculator.divide(6, 3) === 2, 'Test failed: 6 / 3 should be 2');
try {
    calculator.divide(1, 0);
    console.assert(false, 'Test failed: Division by zero should throw an error');
} catch (e) {
    console.assert(e.message === "Cannot divide by zero", 'Test failed: Incorrect error message for division by zero');
}

🫧 Explanation of the tests:

1. Addition (add method): We test that add(2, 3) returns 5, and add(-1, 1) returns 0. If these tests pass, we know that the addition logic is working correctly.

2. Subtraction (subtract method): We verify that subtract(5, 3) returns 2, and subtract(0, 0) returns 0. These checks confirm that subtraction is accurate.

3. Multiplication (multiply method): We test the multiplication function with both positive and negative values, ensuring that multiply(2, 3) returns 6, and multiply(-1, 2) returns -2.

4. Division (divide method): We verify that dividing 6 by 3 returns 2. For division by zero, we use a try...catch block to confirm that an error is thrown with the correct message. This test make sure the method handles errors properly.

You can see that if any method fails, the test will produce a clear error message, allowing us to quickly identify and fix the issue. Testing methods individually helps us catch bugs early and maintain reliable, clean code as the project grows.

6. Be Careful with Dependencies

Dependencies are pieces of software that your code relies on. 🔌

Imagine you’re building a web app that sends emails. Instead of writing the email-sending code yourself, you use an external library like Nodemailer. Here, Nodemailer is a dependency—your app relies on it to handle the email-sending functionality.

Example:

const nodemailer = require('nodemailer');

function sendEmail(to, subject, message) {
    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'your-email@gmail.com',
            pass: 'your-email-password'
        }
    });

    const mailOptions = {
        from: 'your-email@gmail.com',
        to: to,
        subject: subject,
        text: message
    };

    return transporter.sendMail(mailOptions);
}

In this code, nodemailer is imported and used to create a transporter for sending emails. Without it, you’d need to build all the email functionality from scratch, which would be complex and time-consuming. By using Nodemailer as a dependency, your app can send emails easily.

Even though dependencies are useful, you should try to avoid over-dependence on external software or libraries. Use dependencies only when they simplify your work or add important functionality.

Managing dependencies effectively is key to writing clean code. Here are some tips:

• Limit Dependencies: Only include libraries or modules that are essential for your project.

• Keep Versions Updated: Use updated versions of libraries to avoid security risks.

• Separate Logic: Write core functions yourself whenever possible. This way, if you ever need to remove a dependency, it won’t break your code.

Let me give you an example with our previous Nodemailer code to implement the concept of separating logic in your code.

You can create a wrapper function that abstracts away the details of email sending. This way, you can change the underlying email service or remove the dependency on Nodemailer without affecting the rest of your code.

Here's how you can structure your code to accomplish this:

const nodemailer = require('nodemailer');

// Core function to send email
function sendEmail(to, subject, message) {
    const transporter = createTransporter();
    const mailOptions = createMailOptions(to, subject, message);
    return transporter.sendMail(mailOptions);
}

// Function to create the transporter
function createTransporter() {
    return nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'your-email@gmail.com',
            pass: 'your-email-password'
        }
    });
}

// Function to create mail options
function createMailOptions(to, subject, message) {
    return {
        from: 'your-email@gmail.com',
        to: to,
        subject: subject,
        text: message
    };
}

// Example usage
sendEmail('recipient@example.com', 'Test Subject', 'Hello, this is a test email.')
    .then(() => {
        console.log('Email sent successfully!');
    })
    .catch((error) => {
        console.error('Error sending email:', error);
    });

🗝️ Key points:

1. Core Functions: The sendEmail, createTransporter, and createMailOptions functions are separate, allowing you to modify one without affecting the others.

2. Easy Modifications: If you want to switch to another email service in the future, you can simply modify the createTransporter function.

3. Maintainability: This structure makes your code more maintainable and easier to understand.

7. Organize Your Project

A well-organized project structure is as important as the code itself.

Think of this like organizing your workspace—you need designated places for everything so that you can find them easily. For coding projects, create folders for specific parts, like components, utils, and services.

📂 How to Organize Your Project

To set up a clean and organized project, you should categorize different parts of your code into designated folders. Here’s a simple example of what a well-organized project structure might look like:

myProject
├── src
│   ├── components
│   ├── services
│   ├── utils
└── tests

Breakdown of the project structure:

1. myProject: This is the root folder of your project. It contains everything related to your application.

2. src (Source): This folder holds all the source code for your project. It’s where you’ll spend most of your time coding.

3. components: This subfolder contains reusable UI components. For example, if you're building a web app, you might have individual files for buttons, headers, or forms here. Each component can be in its own file to keep things modular.

   • Example structure within components:

    components
    ├── Button.js
    ├── Header.js
    └── Form.js

4. services: This folder includes functions that perform specific tasks or handle business logic. For example, if you're sending emails, you could have a file here with all the email-related functions.

   • Example structure within services:

    services
    ├── emailService.js
    ├── userService.js
    └── productService.js

5. utils (Utilities): Here, you place helper functions that can be used across your project. These might include functions for formatting dates, validating inputs, or any other common tasks that don't belong to specific components or services.

   • Example structure within utils:

    utils
    ├── formatDate.js
    ├── validateEmail.js
    └── generateId.js

6. tests: This folder is dedicated to your testing files. Keeping your tests organized helps ensure that as you build new features, you can easily test them without digging through your codebase.

   • Example structure within tests:

    tests
    ├── emailService.test.js
    ├── userService.test.js
    └── component.test.js

📨 Real-World Example: Working with Nodemailer

Let's say you are building an application that sends emails to users. You might structure your project like this:

myEmailApp
├── src
│   ├── components
│   │   ├── EmailForm.js
│   │   └── SuccessMessage.js
│   ├── services
│   │   └── emailService.js
│   ├── utils
│   │   └── validateEmail.js
└── tests
    ├── emailService.test.js
    └── EmailForm.test.js

• EmailForm.js: This component handles the user interface for sending an email, like the input fields for the recipient, subject, and message.

• SuccessMessage.js: This component displays a success message once the email has been sent.

• emailService.js: This service contains the logic for sending emails using Nodemailer, keeping your code modular and clean.

• validateEmail.js: A utility function that checks if an email address is formatted correctly.

• tests: Here, you would write tests to ensure your email service and components are functioning as expected.

🍱 Benefits of a Well-Organized Project

1. Ease of Navigation: Anyone looking at your project can quickly understand where to find specific parts of the code.

2. Better Collaboration: If you’re working with others, a clear structure helps everyone know where to contribute without stepping on each other’s toes.

3. Scalability: As your project grows, maintaining a clear structure helps manage the complexity and keeps your codebase clean.

4. Improved Maintenance: When you need to update or fix something, you can find the relevant files quickly, which saves time and reduces errors.

8. Use Consistent Formatting

Consistency in formatting improves readability.

Establish a pattern for how you write your code, such as using two spaces for indentation or always including a line break before comments.

Following consistent formatting makes your code look clean and well-organized.

🛠️ Tools for Formatting

• Prettier: Automatically formats code based on a set of rules. Here’s a tutorial that explains how to set up and use Prettier in VSCode.

• ESLint: Helps enforce coding standards by highlighting issues. Here’s a tutorial that includes a helpful and in-depth section on setting up ESLint for your projects.

9. Avoid Hardcoding Values

Hardcoding is directly embedding data values in code, like setting a user ID as 123 instead of using a variable.

Avoiding hardcoded values allows you to reuse code without making constant changes. Store values in variables, constants, or configuration files instead.

Here’s a scenario where hardcoding can lead to issues:

// Bad: Hardcoding user limit
function createUser(name) {
    let numberOfUsers = 100; // Hardcoded value
    if (numberOfUsers >= 100) {
        return 'User limit reached.';
    }
    // Code to create the user
    return 'User created.';
}

In this example, numberOfUsers is hardcoded to 100. If you want to change the user limit, you have to find and modify this value in the code. If it appears in multiple places, this task becomes cumbersome and error-prone.

🏗️ Improved Example Using Constants

Now, let’s refactor this code to use a constant instead:

// Good: Using a constant
const MAX_USERS = 100; // Store the limit in a constant

function createUser(name) {
    let numberOfUsers = getCurrentUserCount(); // Get the current count from a function or database
    if (numberOfUsers >= MAX_USERS) {
        return 'User limit reached.';
    }
    // Code to create the user
    return 'User created.';
}

// Example function to get current user count
function getCurrentUserCount() {
    // Simulate fetching the current count, e.g., from a database
    return 90; // Example count
}

🥣 Breakdown of the improved example:

1. Using Constants: The MAX_USERS constant is defined at the top. This way, if you ever need to change the maximum number of users, you only have to update it in one place.

2. Dynamic Values: The getCurrentUserCount() function dynamically retrieves the current user count from a database or any other source. This approach prevents hardcoding the count and allows for easy changes.

3. Maintainability: By storing values in constants, your code becomes more maintainable. If the business requirement changes and you need to increase the user limit to 150, you can simply change MAX_USERS from 100 to 150, and the change will reflect throughout your application.

4. Clarity: Using descriptive names for your constants (like MAX_USERS) improves the readability of your code. Anyone looking at your code can quickly understand what this value represents.

🤐 When to Use Configuration Files

In larger applications, you might also consider using configuration files (like JSON, YAML, or environment variables) to store values that may change between environments (development, staging, production).

For instance in your config.json file you can hardcode maxUsers as follows (keep in mind that in config.json, its recommended to use camelCase as it follows consistent formatting):

{
    "maxUsers": 100,
    "emailService": {
        "service": "gmail",
        "user": "your-email@gmail.com",
        "pass": "your-email-password"
    }
}

🪴 Using Configuration in Your Code:

const config = require('./config.json');

function createUser(name) {
    let numberOfUsers = getCurrentUserCount(); 
    if (numberOfUsers >= config.maxUsers) {
        return 'User limit reached.';
    }
    // Code to create the user
    return 'User created.';
}

10. Limit Function Length

Long functions are harder to understand and maintain.

There’s no strict rule, but in general, functions should ideally be no more than 20-30 lines. If a function has multiple responsibilities or contains many steps, that’s a good indication it might be too long. Breaking down these functions into smaller "helper" functions can make them more manageable and understandable.

Here’s what a long, complex function might look like:

function updateCart(cart, item, discountCode) {
    // Add the item to the cart
    cart.items.push(item);

    // Calculate the new total
    let total = 0;
    cart.items.forEach(cartItem => {
        total += cartItem.price * cartItem.quantity;
    });

    // Apply discount if available
    if (discountCode) {
        total = applyDiscount(total, discountCode);
    }

    // Log the transaction
    console.log(`Item added: ${item.name}, New total: $${total}`);

    return total;
}

⚠️ This function does multiple things:

1. Adds an item to the cart.

2. Calculates the total price.

3. Applies a discount if there’s a code.

4. Logs the transaction.

While this function might look manageable now, it can quickly grow if more tasks are added, making it harder to debug and maintain.

Let’s break this long function into smaller, single-purpose functions:

function updateCart(cart, item, discountCode) {
    addItemToCart(cart, item);
    let total = calculateTotal(cart);

    if (discountCode) {
        total = applyDiscount(total, discountCode);
    }

    logTransaction(item, total);
    return total;
}

function addItemToCart(cart, item) {
    cart.items.push(item);
}

function calculateTotal(cart) {
    return cart.items.reduce((total, cartItem) => total + cartItem.price * cartItem.quantity, 0);
}

function logTransaction(item, total) {
    console.log(`Item added: ${item.name}, New total: $${total}`);
}

🧩 Let me explain:

1. addItemToCart: This function is now responsible only for adding an item to the cart. It’s simple, with a clear purpose.

2. calculateTotal: This function calculates the total price of all items in the cart. It’s easier to read and understand, and if you need to update the way totals are calculated, you only have to modify this function.

3. logTransaction: Handles the responsibility of logging details. If you ever need to change what gets logged (for example, adding a timestamp), you can do so in this function without touching the rest of the code.

4. updateCart: The main function now reads more like a summary of the actions being taken: add an item, calculate the total, apply discounts, and log the result. It’s easier to follow and understand at a glance.

📒 Let’s summarize limiting function length:

1. 🎯 Focus on One Task: Each function should ideally perform just one task. If a function seems to be doing multiple tasks, consider breaking it up.

2. 🩼 Use Helper Functions: Helper functions are small, focused functions that assist a main function by performing a specific task. In the example above, addItemToCart, calculateTotal, and logTransaction are helper functions.

3. 🪦 Descriptive Names: Name your functions based on their tasks (for example, addItemToCart), which helps make the code self-explanatory.

Best Practices for Clean Code

Now that we’ve covered some important tips, let’s look at some overarching principles that make up the philosophy behind clean code:

1. 🎏 Simplicity: Always aim to make your code as simple as possible.

2. 🧂 Consistency: Keep your code uniform in style and structure.

3. 🌾 Clarity: Your code should clearly communicate what it does.

4. ⛽ Efficiency: Write code that’s optimized for performance without sacrificing readability.

These principles make coding less about writing and more about designing solutions. Writing clean code is a skill that grows with practice, so keep learning and improving over time.

🔌 A Note on Dependencies

Instead of hardcoding dependencies directly into your code, use package managers like npm (for JavaScript) or pip (for Python) to manage them. This way, you can easily update or remove them when needed.

Conclusion 🏁

Writing clean code is like building a strong foundation for a house. It keeps everything in order, making it easy to add new features or fix issues as your project grows.

With these tips, you can start developing habits that will make your code more readable, maintainable, and enjoyable to work on.

Recommended Next Steps 📘

For a structured guide to becoming a backend developer in six months, you can check out my backend developer roadmap. It’s designed to help beginners stay on track with weekly goals, covering the essential skills, tools, and technologies. This roadmap can keep you motivated and make learning more manageable.

You can follow me on 𝕏 for instant updates.

Hope to see you next time!

I'll give you a simple roadmap that'll help you know where you are and where you should go next.

Front End vs Back End

Every website has two parts: a front end and a back end.

The front end is the part that you see in the browser and interact with. Basically, it represents all the visual aspects of a website.

The back end is the part that powers the front end. It's behind the scenes, and it's mainly concerned with storing and accessing data using databases, APIs, and so on.

Because of this, web development jobs fall into three main categories:

• 👨‍💻 Front-end development

• 🛟 Back-end development

• 🚢 Full-stack development (involves both front-end and back-end development)

👷‍♂️What Exactly Does a Backend Developer Do?

Backend developers are responsible for constructing the foundational systems that drive the functionality of applications that users engage with.

This includes various tasks such as designing the architecture, and then implementing and maintaining these critical systems.

Their responsibilities typically involve working with:

• 💾 Databases, such as MySQL,

• ✂️ Frameworks, like Laravel or Ruby on Rails, and

• 🧨 APIs (Application Programming Interfaces).

Backend devs ensure that the backend infrastructure operates seamlessly, enabling smooth interactions between the user interface and the underlying data and processes.

Here are some of the core responsibilities of a backend developer:

• Understanding the website's performance needs and goals

• Developing and managing APIs for the website

• Developing systems for secure data storage and processing (especially special use cases like payments)

• Writing code, testing it, maintaining it, and developing solutions to bugs

• Designing the site's architecture using established methodologies like Agile/Scrum and various frameworks

• Organizing the system logic effectively

• Providing solutions to address system-related issues and challenges

🥷 What You Need to Know to Become a Backend Developer

Becoming a proficient backend developer requires mastering various skills and technologies.

Below, I've outline a comprehensive roadmap to help you achieve this goal as quickly as possible.

Just keep in mind that everyone learns at a different pace, so it's hard to set a specific timeframe on how long this will take. Some might be able to get through it in six months or less, but others might take significantly more time.

Step 1: Foundations of Backend Development 🏗️

• Understand the role and responsibilities of a back-end developer. Familiarize yourself with databases, frameworks, and APIs.

• Join a comprehensive course on databases. Learn about SQL and relational databases like MySQL. Practice creating and managing databases.

• Learn about server-side programming languages. Start with PHP or Python. Learn basic syntax, control structures, and data types.

Step 2: Advanced Backend Concepts 🔋

• Deepen your understanding of databases. Explore NoSQL databases like MongoDB. Learn about data modeling and optimization.

• Master server-side programming languages. Dig deeper into PHP or Python. Learn about functions, classes, and object-oriented programming.

• Get hands-on projects with frameworks. Choose a popular framework like Laravel for PHP or Django for Python. Build simple applications to understand the model-view-controller (MVC) architecture.

Step 3: API Development and Integration 🛠️

• Learn about APIs and their importance in backend development. Explore RESTful API design principles.

• Start building your own APIs. Use tools like Postman to test and debug API endpoints. Learn about different authentication methods as well as security.

• Focus on API integration. Learn how to consume APIs in web and mobile applications. Practice integrating third-party APIs into your projects.

Step 4: Troubleshooting and Optimization 🔮

• Master troubleshooting techniques. Learn how to diagnose and debug backend applications effectively.

• Jump into performance optimization techniques. Learn about lazy loading, caching, load balancing, and database indexing.

• Learn monitoring and analytics tools. Use tools like New Relic or Datadog to monitor application performance. Learn how to generate and analyze performance metrics.

Step 5: Cloud Infrastructure and Deployment 🌥️

• Understand cloud computing concepts. Learn about popular cloud providers like AWS or Azure.

• Take a course on cloud services for backend development. Learn about serverless computing, containerization, and microservices.

• Practice deploying applications to the cloud. Learn about CI/CD pipelines and automated deployment strategies.

Step 6: Advanced Topics and Projects 🚀

• Now you're ready to learn more advanced backend topics. Choose topics like message queues, event-driven architecture, and real-time communication.

• Work on a capstone project. Choose a challenging project that integrates various backend technologies and concepts.

• Finally, reflect on your learning journey. Review your projects and identify areas for improvement. Prepare for job interviews by practicing coding challenges.

Back-end Development Tools and Software

Here's a breakdown of the tools and software commonly used in back-end development:

1. Database Frameworks:

• MySQL: A relational database management system used for storing and retrieving data. It's widely used for web applications and offers scalability and reliability.

• MongoDB: A NoSQL database program that uses JSON-like documents with schema flexibility. It's suitable for applications with rapidly changing data models or unstructured data.

2. Web Servers:

• Node.js: Node.js is a cross-platform (meaning it supports multiple operating systems) JavaScript Runtime Environment that uses an event-driven, non-blocking I/O model. That means it can handle a large number of users at the same time. If you already know JavaScript, Node.js will likely be your best choice for building real-time applications like chat apps, online gaming apps, and collaborative tools.

• Apache HTTP Server 2: An open-source web server software that delivers web content across the internet. It's known for its stability, security, and flexibility, making it a popular choice for hosting websites and web applications.

  If your team is used to using languages like PHP or Python, Apache might be easier for them to work with.

• LiteSpeed: LiteSpeed is another web server software that helps websites handle lots of visitors without slowing down or crashing. It’s great for businesses that expect a lot of traffic, like during busy times. LiteSpeed also works with many programming languages like Python, Ruby, PHP, and Java.

Imagine you're a company with 20 servers that can each handle 500 websites. Together, that’s 10,000 websites. But if you switch to LiteSpeed, you might be able to handle 20,000 websites with the same number of servers. That’s a big improvement!

When choosing a web server, it depends on what kind of website or app you’re building. If you’re just starting out, try Node.js first. It’s simple because you only need to learn one language (JavaScript) to build both the front part and the back part of your website.

3. Security Protocols:

• SSL/TLS Certificates: These are cryptographic protocols that provide secure communication over a computer network. SSL (Secure Sockets Layer) and its successor TLS (Transport Layer Security) encrypt data between the server and client, ensuring confidentiality and integrity in online connections.

4. Version Control System:

Next on your journey is to become familiar with version control systems. These systems help track project history and enable collaborative work with others.

• 🔌 Learn Git: Git is the most widely used version control system, employed by over 70% of software development teams. It's a must-know tool, and allocating around two weeks for learning Git is advisable.

Back-end developers usually utilize these tools and software to build robust, scalable, and secure web applications that handle data storage, server hosting, and encryption of online communications.

If you seek more knowledge regarding backend development, you can check out this in-depth visual guide to backend development.

✅ Printable Roadmap

You can also use this printable Backend Developer Notion template to track your progress.

Beginner developers often struggle with choosing the right tech stack which leads them to waste their time and often lose motivation.

To help you out, I created this easy-to-follow 6-month backend developer roadmap in Notion so that you can track your progress and stick with your goals in real-time.

This roadmap:

• 🛤️ Provides a clear path to avoid confusion.

• 🎯 Helps you stay motivated by outlining where to start and end.

• 📚 Follows a structured plan, similar to a school syllabus.

• 📅 Organizes your learning with weekly goals for tools and languages.

• ⏳ Helps you get through it in 6 months, covering everything you need.

• 👀 Features a beautiful design for easy navigation.

👏 Conclusion

By following this roadmap and dedicating consistent effort to learning, you can acquire valuable backend development skills and be well-prepared to land a job in backend development.

If you're curious about becoming a front-end developer as well, you can read this article as well. 👉 The Roadmap to Become a Frontend Developer in 6 Months

If you ever wonder about the future of frontend development, you can also take a look at this article.

Stay tuned for more valuable content, and if you find it helpful, you may also like my YouTube Channel.

🤳My Social: X

Thanks for taking the time to read this article.

They can be anything from simple buttons to complex forms.

Why Use Reusable Components?

As your website grows, you can easily add new features by combining existing components. This makes your code more scalable and adaptable.

You can use your reusable code in future projects without writing it again from scratch.

🏭 How to Make Reusable React Components

Illustration credit: Shahan

Here are the two most important things to keep in mind when creating reusable React components:

1. 🩼Avoid Side Effects

Don't put logic that interacts with external data (like making API calls) directly inside a reusable component. Instead, pass this logic as props to the component.

For example, if a button does more than just looking pretty, like fetching data from the internet, it might not be reusable.

This is a reusable button component. But it lacks best practices. I will show you why in the example section.

// This is a reusable button component (bad practice!)
const Button = () => {
  return (
    <button> Click Me </button>
  );
}

2. 🗃️ Use Props

Props are arguments you pass to a component to customize its behavior and appearance. This allows you to use the same component for different purposes.

// This is a button component that can change its color
const Button = ({ color }) => {
  return (
    <button style={{ backgroundColor: color }}> Click Here </button>
  );
}

This is still a bad practice because you have a fixed label called "Click Here". If you want to change the text on your button to, let's say: "Sign Up", then you would have to go back to the button component and make that change.

That means every time you want to use a different text, we'd have to go back and edit the code. In other words, it's no longer reusable.

💪 Challenge: So what's the solution?

You already have the answer. But if you don't, I am going to show you in the example section.

🌴 Hint: Think about how you might want to use the component in different situations and design it to be flexible and adaptable.

🍃Examples of Reusable React Components

Here are some common examples of reusable React components, along with some code examples to get you started:

Buttons

Basic buttons with different styles and functionalities.

// Button component
import React from "react";

const Button = ({ color, label, onClick }) => {
  return (
    <button
      className={`padding-2 shadow-none hover:shadow background-light-${color} hover:background-dark-${color}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
};

export default Button;

// Using the Button component
<Button color="blue" label="Click Here" onClick={() => console.log("Button clicked!")} />

As you can see, I did not write "Click Here" in the button component. I want to make my button reusable, and thus it doesn't know anything about custom styles or texts.

So, I passed them as props (i.e., color, label, and onClick) to change them in the future without touching the original button components. Hope that makes it clear.

🪜Solution: You need to pass each functionality as props in the reusable component.

Navbars

Navigation bars that provide consistent navigation across your website.

// Navbar component
import React from "react";

const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="navbar">
      <div className="navbar-container">
        <div className="navbar-logo">
          <img src={logo} alt="logo" />
        </div>
        <div className="navbar-links">
          <a href="/">Home</a>
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
          {isLoggedIn ? (
            <a href="/profile">Profile</a>
          ) : (
            <a href="/login">Login</a>
          )}
        </div>
      </div>
    </div>
  );
};

export default Navbar;

// Using the Navbar component
<Navbar isLoggedIn={true} />

As you can see, I passed <Navbar isLoggedIn={true} />

This line utilizes the Navbar component and passes the isLoggedIn prop with a value of true, indicating the user is logged in. This will display the "Profile" link and hide the "Login" link.

Similar to the button component, the Navbar component is reusable and accepts props to customize its behavior. Perfect!

Why API Calls in a Button Component is a Bad Practice

Now, you understand everything about reusable components in React.

Let's dig deeper by solving a complex problem.

Consider the scenario where you have a button that does an API call. The code for the button component can be the following:

import React from "react"; 
import doAPICall from "../api"

const SaveButton  = () => {
  return (
    <button
      onClick={() => {
        doAPICall();
      }}
    >
      Save
    </button>
  );
}

export default SaveButton

It is quite clear that you can’t reuse the above button in multiple places as this button component contains a side-effect (doAPICall()) inside it.

You can make this component reusable. First, you'll have to extract out the side-effect and pass that as a prop to the button component like this:

const App = () =>  {
  function doAPICall() {
    // Does an API call to save the current state of the app.
  }

  return (
    <div>
      <SaveButton onClick={doAPICall}/>
    </div>
  )
}

The button component should look like this:

const SaveButton  = ({
  onClick
}) => {
  return (
    <button
      onClick={onClick}
    >
      Save
    </button>
  );
}

As you can see, the above button can now be reused anywhere you want to save data with the click of a button. The button can now be used like this in multiple places:

const App = () =>  {
  function saveUser() {
    // Does an API call to save the user.
  }

  function saveProject() {
    // Does an API call to save the project.
  }

  return (
    <div>
      <SaveButton onClick={saveUser}/>
      <SaveButton onClick={saveProject}/>
    </div>
  )
}

You can also make the button component more reusable by using a prop to control the label:

const App = () =>  {
  function saveUser() {
    // Does an API call to save the user.
  }

  function saveProject() {
    // Does an API call to save the project.
  }

  return (
    <div>
      <SaveButton onClick={saveUser} label="Save user"  />
      <SaveButton onClick={saveProject} label="Save project" />
    </div>
  )
}

The button component should look like this:

const SaveButton  = ({
  onClick,
  label
}) => {
  return (
    <button
      onClick={onClick}
    >
      {label}
    </button>
  );
}

👏Conclusion

Congratulations! You've successfully learned how to build reusable React components.

Remember, reusable components are the building blocks of robust React development. By practicing reusable components, you can build cleaner, more efficient, and more maintainable React applications.

The more you practice, the better you'll become at identifying opportunities to use them in your projects!

Read More: The Future of Frontend Development

Thank you for taking the time to read this article. Until next time.. Keep learning and you can follow me on 𝕏 for latest updates on programming and productivity.

To be a great web developer, you must learn many skills and techniques and hone your coding abilities. Every business is searching for an effective web developer, so if you have a few tricks up your sleeve, you will rarely be without work.

Become a better web developer (shahan)

Web development is divided into three categories:

• Frontend developer  —  you code the frontend of a website and have direct a connection to the user

• Backend developer  — you work behind the scenes to make sure the technology that powers the frontend runs smoothly

• Full stack developer  —  you know both frontend and backend development

🎏 How to Become a Better Web Developer

Determine your areas of interest

If you want to become an expert in both front-end and back-end programming, your goal could be to become a full-stack web developer. But if you are more into design and aesthetics, and want to work more directly with clients, the front end might be your niche.

There are a few different approaches you can take to determine your area of interest within web development:

1. Explore different technologies and frameworks: One way to get a sense of what you enjoy is to try out different tools and technologies. You can do this by working through tutorials or building small projects with different frameworks, languages, and libraries.

2. Consider your personal interests: Think about what you enjoy doing in your free time. Are you interested in design? Do you like working with data? Your personal interests can be a great starting point for finding an area of web development that you'll enjoy.

3. Find a project or problem that excites you: Another approach is to look for a project or problem that you find interesting and try to solve it using web development tools and techniques. This can help you discover what you enjoy working on and what you're good at.

4. Talk to other web developers: Reach out to other web developers and ask them about their experiences and what they enjoy most about their work. This can give you insight into the different areas of web development and help you identify potential areas of interest.

5. Take online courses or earn a degree: Finally, consider taking online courses (many are free!) or earning a degree in computer science (if you have the time and resources). This can give you a broad overview of the field and help you identify areas that you find particularly interesting or rewarding.

Cultivate Curiosity and an Open Mind

Without curiosity or the desire to learn, you won't be as successful of a web developer as you could otherwise be.

Web development is a challenging field, so it's vital to learn constantly. It's not easy to learn everything you need to know, but if you work hard you'll gradually build up your skills.

An essential trait for any web developer is curiosity, as well as an open mind. Always be open to learning new things and trying them out. The field of web development is constantly evolving, and it's important to stay up-to-date on new technologies and techniques.

In addition, always be willing to consider new ideas and approaches. There may be multiple ways to solve a problem, and being open to different solutions can lead to more creative and effective results. Being fearless about trying things out for yourself is one of the best ways to be open-minded.

Don’t Just Write Code – Create Business Value

A web programmer must write functional lines of code, but that’s not all. In addition, they must go above and beyond the tasks that have been delegated to them. Instead of merely doing what you are told, focus on what your organization requires.

Writing code is an important aspect of web development, but it's not the only aspect. As a web developer, your ultimate goal should be to create business value through the use of technology. This means designing and building websites and applications that solve problems, meet the needs of users, and provide value to the business or organization.

Here are a few ways you can create business value as a web developer:

1. Understand the needs of the business or organization you are working for and design solutions that meet those needs.

2. Consider the user experience and make sure the websites and applications you build are easy to use and provide value to the user.

3. Build websites and applications that are scalable and able to adapt to changing business needs.

4. Utilize data and analytics to make informed decisions about the development of websites and applications.

5. Work with cross-functional teams to ensure that the technology you develop aligns with the overall goals and objectives of the business or organization.

By focusing on creating business value, you can ensure that the work you do as a web developer is meaningful and impactful.

Be Willing to Invest in Yourself

A good web developer should be well-read. Listen to web development seminars and podcasts, test new plugins and frameworks, use social media responsibly, and be prepared to practice, practice, practice! Hours of diligent practice are required to become an expert and master the craft.

You should also take free courses, read tutorials, and build projects to constantly learn about new trend and ideas. Aside from taking courses, you can attend conferences and meetups and read industry blogs and articles.

Building a strong portfolio is also important for any budding web developer. A strong portfolio of work is essential for showcasing your skills and abilities to potential employers. Make sure to include a variety of projects that demonstrate your capabilities and expertise.

Finally, building relationships with other professionals in the industry can help you learn from others, stay informed about new developments, and potentially open up new job opportunities.

Develop Discipline and Dedication to Your Work

A web developer should be productive, which requires dedication and discipline. Embrace a work culture that makes others want to emulate it. But keep in mind that even though you'll need to work hard, don’t let it interfere too much with your personal and social life. You don't want to get burned out.

On the other side, you must organize your time so that you can be as productive as possible while also having fun. Having a clear understanding of what you want to achieve and how you will go about achieving it can help you stay focused and motivated.

Also, it's important to take breaks and rest to avoid burnout. Consider using the Pomodoro technique, which involves working for a set amount of time, taking a break, and then repeating the process. Having a regular schedule can help you stay on track and ensure that you have dedicated time for web development work.

Finally, seek out opportunities to learn and grow. Dedication to your craft means constantly seeking out opportunities to learn and improve. Attend conferences, workshops, and other events, and make sure to keep up with new technologies and techniques.

Help Out with Open Source Projects

If you're a good web programmer, people will notice and want you to work on their projects. So do your best to build your credibility by contributing to open-source communities like GitHub, Automatic, Angular, Go, and freeCodeCamp.

Finally, Keep your Body and Mind Active

It is natural for a programmer to spend a significant amount of time in front of a computer. If you want to recharge your batteries and be more effective at work, you should spend time outside doing your favorite athletic activity.

Here are a few ways you can keep your body and mind active as a web developer:

1. Take breaks and get up and move around: Sitting for long periods of time can be detrimental to both your physical and mental health. Make sure to take breaks to stretch, walk around, or do some light exercises.

2. Exercise regularly: Exercise has numerous benefits for both your physical and mental health. Consider incorporating activities such as running, yoga, or strength training into your weekly routine.

3. Get enough sleep: Adequate sleep is essential for both physical and mental health. Make sure to get at least 7-9 hours of sleep per night to ensure you are well rested and able to perform at your best.

4. Eat a healthy diet: A healthy diet can help improve your physical and mental well-being. Make sure to incorporate plenty of fruits, vegetables, and other nutritious foods into your meals.

5. Stay hydrated: Dehydration can lead to physical and mental fatigue. Make sure to drink plenty of water throughout the day to stay hydrated and energized.

By taking care of your physical and mental health, you can ensure that you have the energy and focus needed to be productive and successful as a web developer.

🏁 Conclusion

A web developer created each and every website and piece of software you use today. The web development field is fascinating, and new innovations emerge from it every day.

If you think web development is for you, hopefully these tips help you develop strategies that lead to success. It’s a good idea to get in headfirst if you’re considering changing jobs and becoming a web developer right away.

You can always buy me a coffee here.

Additionally, you can subscribe to my YouTube channel to sharpen your programming skills.

Thank you for your time and happy coding!

Here's what we're going to create:

Turtle Racing Game Project Overview

🧵 Prerequisites

Very basic knowledge of Python programming will be enough to go through this tutorial. Also, I assume that you don't know anything about this turtle library. I will teach you everything from scratch.

🛠 Tools we'll use

First, if you don't have Python installed on your machine, go to python.org to download latest version of Python and then install it right away.

For writing the program, we will be using PyCharm which is the most popular integrated development environment (IDE) for Python. After installing PyCharm on your machine, you are ready to build this amazing game from scratch.

⛳ Project Goals

Concretely, we'll write a program that moves a turtle object horizontally until it reaches our calculated finish line. Then we will create seven unique replicas of this turtle object using a for loop along with different colors and random moving speeds.

We'll also add a background image (roads with lanes for the turtles to race in) to create something like a real racing environment.

Then we'll compute different values along the vertical or Y-axis to define their starting locations.

Finally, we will prompt the user to enter their bet (turtle color) so that if a user's bet color matches our winner turtle's color, we will display Winner! on the screen. Otherwise, we'll display You Lost! on the screen.

Note: for screen readers or anyone who is interested in getting the full source code of this project, you can access it in my GitHub Repository here.

So are you exited to build this game? I'm too. Let's begin!

👩‍💻 How to Set Up the Project

Open your PyCharm IDE. Then click New Project.

creating a new project

Let's call it racing-game and click create.

Project name

Then, add a new Python file called main.py.

📂 How to Use the Turtle Library

Now, let's go to turtle-graphics python documentation. Here you will find the full details about this library.

Let's scroll down and go to the Turtle methods section. You will see different types of methods that we can use for many different purposes. We will use a few of them in our current project.

I recommend reading this documentation at least once before jumping into the code. But don't worry, I will simplify it for you while we're writing the program.

turtle docs

Import the Library

So let's import Turtle and Screen from the turtle module. Call this Screen in a new variable called screen. Then, call the screen.exitonclick() function to stop the program when we click on the screen.

🔳 How to Define the Game Canvas

Now, let's work with the screen object to define our game canvas. So, let's set the width to 800 pixels and height to 600 pixels.

Here is the result:

How to Add Background Graphics

It's time to load our background image for our canvas. So let's drag our road.gif file into our racing-game project. Click this link to download the graphics.

Let's add this image using screen.bgpic('road.gif').

Here is the result:

🐢 How to Work with Turtle Objects

Now, let's create a turtle instance using the Turtle() method with the shape called turtle.

But it will seem really small. So we need define shapesize(2).

How to position the turtles

Now we need to change our turtle's location to the left bottom corner using goto(x=-350, y=-260).

So here we set x for moving the turtle horizontally and y for vertically along with the computed values with respect to our canvas.

Here you can see that the turtle has moved to our desired location. So, we can take the y position in a global variable and add different types of values for positioning our turtles on their respective roads.

How to create the turtle replicas

Now, we have to create seven different types of turtle objects. For this reason, we will use a for loop.

So for index in range(0, 7) and then move our existing turtle instance in this loop. And of course, we have to change y to our global y positions variable and get their indexes in order.

Here is the result:

How to define the turtle colors

So as you can see, we have seven turtle instances created equally with different y locations. Let's add some random colors by using a global colors variable as we did for the y positions. Then use the color(colors[index]) method with their indexes.

Here is the result – beautiful!

How to remove the ugly lines

You may see that there are some ugly lines that point towards the middle, and the move direction is very slow. So we can use the speed('fastest') and penup() methods to solve these problems. Have a look!

How to move the turtles forward

Now, what else do we need? Yeah, you got it! We need to define a random pace for every turtle. But before doing that, how can we move a single turtle forward?

Well, you can use the forward() method to do this. Let's say we need to move our turtles forward 30 pixels.

Here is the result:

But they are not moving continuously. What else can we do here? Think about it and come back to see my solutions.

So, to solve this problem, we take a variable called is_on and set it to True. Now we will continuously execute our program until we break it using a while loop.

Now, we have the opportunity to move our turtle forward continuously with 30 pixels in every step.

Here is the result:

It's moving like a plane because we set forward to 30.

How to run multiple turtles in sync

Now we need to target all the turtle objects, not just a single one. But how can we do it? Think about it and come back to see my solution.

So, we can take a global variable called all_turtle and set it to an empty list. Now, in the for loop, after creating seven new turtle instances, we can append our new born turtle to this global all_turtle list. This way we can access them in other code blocks.

Now we have all our turtles. So, while our is_on variable in true, we can say all_turtle.forward(10). Also, here we need to use a for loop again to get each turtle from this all_turle global variable and then move them forward by 10 pixels.

Let's see the result up until now:

How to set random moving speed

So, we solved our turtle moving problem. But they're running infinitely – there is no ending point. Also all turtles are moving at the same speed. Think about this problem, and try to solve it on your own.

So let's take a new variable random_pace and set it to random.randint(0, 7). It will return value between zero to seven randomly. You have to import random at the top. Finally pass this random_pace variable to the forward() method like forward(random_pace).

Here is the result:

🏁 How to Set the Finish Line

Now, we need to define our finish line in this canvas. To solve this problem, we check if turtle.xcor() > 330, set is_on = False, else we need to continue executing our program.

👥 How to Prompt the User to Enter Their Bet

We are done with the UI. Now, we need to define some logic to let the user enter their bet and compare their bet with our programmed result.

To let the user enter their bet, we can write screen.textinput and with a placeholder 'Enter your bet'. We'll also prompt the user "which turtle color" and store it in a global variable user_bet.

Then we take a variable winner. We check if winner == user_bet which will come from the user's input color. We print You Won, Otherwise, You lost with the turtle winner's color. That's why we have to use an f-string to pass the variable in the print method.

🎐 How to Show the Results on the Screen

Now, I want you to show this print text in the canvas with their responsive turtle color after touching the finish line. How can you implement this? You will see my solution next.

S0, here in the top. We take two global variables ALIGN = "right" and FONT = ("Courier", 28, "bold"). We will write to align the text on the right, and also make the font family courier and font size 28, bold.

Now, we'll use them when we want to show the user the racing results. So when the winner turtle color is equal to the user_bet color, we have to show the text in the canvas instead of printing it in the terminal.

To do this, we write turtle.write() and past the print statement along with font=FONT and align=ALIGN. Else, we need to show the text "You lost" with the same variable FONT and ALIGN. See, this is the benefit of using global variables.

Finally, let's run this code one more time. Let's say that the red turtle will be the winner. But, as you can see below – Oops, the yellow turtle is the winner. So, you can see the bold yellow font displayed next to this turtle. This is why we used align = "right" and set the turtle color using the turtle.pencolor() method.

Turtle Racing Game Project

And there you have it - we've built our turtle racing game. If you want to watch this tutorial in video form, here's a full video tutorial for you:

📹 Full Video Tutorial

👏 Conclusion

So, we are at the end of this racing game project. If you liked this article, feel free to subscribe to my YouTube Channel or send me a tweet.

Happy Coding!