The Art of Writing Clean Code and Proper Folder Structuring.

𝐈'𝐯𝐞 𝐠𝐨𝐭 𝐬𝐨𝐦𝐞𝐭𝐡𝐢𝐧𝐠 𝐬𝐮𝐩𝐞𝐫 𝐢𝐦𝐩𝐨𝐫𝐭𝐚𝐧𝐭 𝐭𝐨 𝐬𝐡𝐚𝐫𝐞 𝐰𝐢𝐭𝐡 𝐲𝐨𝐮, especially if you're diving into the world of development (code writing). It's something that is very easy to overlook, but trust me, it can be an absolute game-changer on your development journey when incorporated really early on, and that is: 𝐰𝐫𝐢𝐭𝐢𝐧𝐠 𝐜𝐥𝐞𝐚𝐧 𝐜𝐨𝐝𝐞 𝐚𝐧𝐝 𝐤𝐞𝐞𝐩𝐢𝐧𝐠 𝐲𝐨𝐮𝐫 𝐟𝐨𝐥𝐝𝐞𝐫 𝐬𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐞 𝐭𝐢𝐝𝐲.

These two practices may seem like something not worth paying attention to, compared to the excitement of building your first app or website, but trust me when I say, they're the foundation upon which your entire development career will stand.

I honestly didn’t pay much attention to them both in the beginning either. All I focused on was getting my code to work and completing my projects. I remember a programmer friend of mine then always asking why I don't like structuring my code whenever he reviews it and honestly, I didn't understand what the big deal was. It took lots of practice and considerable growth over the years to fully grasp what he was trying to convey.

Writing Clean Code
Writing clean code brings clarity and simplicity. When you write clean code, you make it easier for yourself and others to understand, debug, and modify your code in the future. Clean code is easier to maintain and update over time. When the codebase is well-organized and follows coding standards, it's simpler to make changes or add new features without introducing bugs or unintended side effects. Think of it as writing a story: you want your code to flow logically, with clear and concise syntax that conveys its purpose without any hassle.

By following coding standards, naming conventions, and best practices, you not only improve the readability of your code but also foster collaboration and maintainability.

Here are five key practices you should know when it comes to writing clean code:

1. Use Meaningful Names: Naming is crucial. Use clear, descriptive, and concise names for variables, functions, classes, and other identifiers. For example, use totalScore instead of ts, or createUser instead of cu.

2. Keep Functions Small and Focused: Each function should have a single responsibility and should be kept as compact as possible. A good rule of thumb is that if a function is doing more than one task, it probably needs to be broken down. This makes your code easier to test and maintain.

3. Consistent Style: Adopt a consistent coding style. This includes conventions on formatting, naming, and organization within your code. Consistency makes your code less error-prone and easier to read.

4. Comment and Document: Use comments to explain why certain decisions were made, especially if the reasoning isn't immediately obvious from the code itself. However, avoid redundant comments, such as explaining what each line of simple code does; instead, focus on the context or any specific reasons behind your choices.

5. Refactor Repeated Code: Avoid duplication by refactoring repeated blocks of code into their own functions or modules. This not only cleans up your code but also makes it easier to modify.

Good Folder Structuring
Now unto the concept of folder structure. Picture throwing all your clothes into a single container, mixing up your outing wears, stay-at-home wear, gym wear, and undergarments. It's chaotic, right? Now, imagine having them neatly organized in different containers, each labelled appropriately. Finding the clothes you need becomes a breeze because you know exactly where to look.

The same principle applies to your project's folder structure. By organizing your files in a logical and consistent manner, you make it easier to navigate, locate, and manage your codebase. So whether you're working on a small personal project or a large-scale application, a well-structured folder layout ensures that you can quickly find what you need and keep your codebase tidy and manageable over time.
Here's a basic example of a well-organized folder structure for a typical web development project:

my-project/
│
├── css/                # CSS files for styling
│   ├── styles.css
│   └── reset.css
│
├── js/                 # JavaScript files
│   ├── script.js
│   └── helpers.js
│
├── images/             # Images directory
│   ├── logo.png
│   ├── background.jpg
│   └── icons/
│       ├── icon1.png
│       └── icon2.png
│
├── index.html          # Main HTML file
├── about.html          # About page
│  
└── README.md           # Project overview

While writing clean code and maintaining a good folder structure may not be the most exciting part of development, they're crucial for building maintainable and scalable projects.
Now that you've learnt the advantages of writing clean code and good folder structuring, I encourage you to start taking writing clean codes and proper folder structure a bit seriously. 𝐘𝐨𝐮𝐫 𝐟𝐮𝐭𝐮𝐫𝐞 𝐬𝐞𝐥𝐟 𝐚𝐧𝐝 𝐲𝐨𝐮𝐫 𝐟𝐞𝐥𝐥𝐨𝐰 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐰𝐢𝐥𝐥 𝐭𝐡𝐚𝐧𝐤 𝐲𝐨𝐮 𝐟𝐨𝐫 𝐢𝐭!💯
Thank you for reading this article, and please stay tuned for my next article, until then, love and light!

Happy Reading!✨