Learning how to construct fast, efficient, and clean code is essential when developing your own personal website, a website for your business, and even complex web applications. Going a step further with software or game development and the practices are the same. Clean code is the difference between a beautiful, and easily scalable website and a website that is slow, riddled with bugs, and just a plain nightmare to use. In this post, I’m going to share with you a quick story on my journey to discovering the importance of clean code and following up with my list of 7 reasons why clean code matters! So go grab a hot tea, relax, and learn in minutes what took me years to figure out!
Learning the Importance of Clean Code
Years ago when I decided to jump into the world of web development, I spent countless hours per day learning the basics of HTML, CSS, and JavaScript. First I started with mini projects I would give myself which would force me to learn particular aspects of each language. I loved learning this stuff and spent countless hours per day learning everything I could as fast as I could.
During these binge learning sessions, I developed quite a few bad habits, the worst being my messy and inconsistent code design. I remember being embarrassed by my code and even avoiding code reviews with my fellow team members because of it. I refused to fix the issue and just keep coding… badly.
That didn’t last long. Up until now, I had nothing but small projects. Projects small enough that messy code wasn’t really a big deal. Then came my first big project. I accepted the gig with confidence in my messy skillset. Big mistake. Halfway through the project, my code caved into itself. The project demanded a high level of security and reliability and I couldn’t do it. My code couldn’t do it. Worst of all, I couldn’t keep up with my own code or remember what my code was even doing. I decided to hand over my project to a fellow team member who eventually wiped out all of my work and started fresh. Really embarrassing. I finally recognized my weakness and decided to conquer it.
Fast-forward a few years and a Computer Science degree later, I was able to learn from the best professors and application developers in my area. They helped me recognize my weaknesses and transform them into my strengths. Today, after all of the work I have done, I can confidently say that my code design is the cleanest and most efficient it has ever been. I now love having code reviews with my fellow team members and sharing why or how I wrote my code in a particular way.
So now I bet you want to know what you can do today that is going to help you write fast, elegant, and efficient code, right? Lucky for you, I was able to crunch everything I have learned into 7 sections. Without further adieu the first thing I would suggest is…
1.) Planning is Key for Clean Code!
Code planning is essential for clean code. Surprisingly enough, my experience with working with other developers has shown they are so excited to start coding, they forget this very important step and end up spending lots of time writing and then re-writing their own code since their overall end goal is still unclear. What we want to do here is take a step back for a minute and ask yourself questions like: “What is the primary goal of this project?” or “What did my client specify was important to implement for this web design project?” This all goes back to Waterfall vs Agile methodology and depending on your project and your project management approach, the most important thing you can do is have solid planning.
2.) Keep Your Code Simple
In other words, code smart not more. What’s the shortest route between two objects? A straight line! Same with coding, and that bit of advice can be applied to any programming language. Funny enough, there are developers out there who write complicated code on purpose. These types develop overproduced code that is terrible to read, hard to understand and is riddled with bugs. Each piece of your code should be clean, simple, solve a problem, and contribute to a particular function within your page. If you struggle with this one, suggest having a code review with your team, or a fellow developer. Go over your problem and discuss the most efficient way to solve it. Besides, nothing is more fun than coding together! You’re guaranteed to learn something!
3.) Commenting Your Code Appropriately
All solid developers have made close, intimate friends with comments. Using comments regularly makes for a beautiful arrangement that guarantees clarity and encourages clean code. For instance, each block of code is solving a particular problem, so to keep it clear for other developers to read. Comments can highlight your functions and explain what every line is doing. A few examples of how comments are used are as follows:
- Explain Complex Code. More often than not, we are faced with solving a particular issue that calls for a bit of complex code. That’s fine, but it’s extra nice to comment on the functionality to keep it clear to your future self, or another developer who may come up later who will need to understand completely what you were doing.
- Explaining Edits or Reviews. This is more popular among the more seasoned developers or teams who do code reviews and have not yet incorporated version control. In the past, this was used as a log for any edits, but this can get messy over time. A few notes are okay, but not a lot!
- Temporarily Removing Code. Or commenting out as I refer it. This is a way to disable a block of code from firing on load but keeps it ready if you need to reapply that code’s functionality at a later time.
- Chat with Other Developers. This sort-of fell by the wayside when version control was implemented, but if you take a look at the comments written in some old programs, you can sometimes find full conversations and even jokes the developers were having among each other. My favorite example of this would be here, where the software engineers for the Apollo missions cracked jokes at one another.
4.) Frameworks Encourage Clean Code
Basically, don’t reinvent the wheel. Let’s take model houses for example. Companies that specialize in constructing model homes pre-build all underlying components of the home off-site. When a deal closes, they take these pre-constructed bits and assemble them in record time on the lot. What you have then is the skeleton structure of the home which the new owner can use as their basis for all of their customizations such as the interior floors, wall colors, lighting, etc. This is the exact same way web frameworks work!
During your starting days as a developer, it’s a great idea to not get into frameworks as they can keep you from learning some of the basics. After you become more seasoned, you’ll quickly realize that most of the repetitive things you have to do to get your projects set up is quite time-consuming. With a solid framework like Bootstrap or Genesis for Wordpress, the work is done for you so you can quickly dive into the fun stuff like all of the customizations we highlighted in our custom home example above. Frameworks encourage clean code and if you learn the ins and outs of your framework of choice, your code along with the framework can complement one another!
5.) Develop with the Future in Mind
This is simpler than it sounds. If you’re sticking to HTML5 and CSS3 standards (and you are, aren’t you?), your code design is going to be fine for years to come. Keep track of cutting-edge updates and changes with these languages and be prepared to update legacy code. As long as you have kept everything clean (because you did, didn’t you?), maintaining your code on a regular basis, and implementing incremental updates will be effortless.
6.) Test and Optimize your Code
This has gotten more important in recent years, especially with the introduction of progressive web apps. This has, in fact, become so important, that some developers out there have started designing their websites and web apps focusing on mobile first, desktop second. With using dedicated frameworks as we mentioned a few steps ago, this isn’t necessary. Most of the heavy lifting regarding mobile optimizations will be done for you except for the really custom stuff you want to implement.
With all of that said, it’s important to make sure your work is consistent with multiple viewports, browsers, and devices. Most of the popular browsers now come with developer tools that help emulate different screen sizes and popular devices. With these modern tools, it’s easier than ever to test quickly and effectively.
7.) Keep Practicing and Improving!
I would argue this is the very most important one of the list. Sure, clean code is easy to achieve once you master a few of the essentials, but keeping yourself relevant is what’s going to keep you separate from the lazy developers. Web languages, just like our technology in general, are accelerating at an astonishing pace. The core of these major languages are always being updated, new features added, and even some features retired. Practices change, and it’s important to keep on top of your game so you’re always at the bleeding edge of what’s new. Pushing your limits and trying new things is going to help you grow and become a better developer over time. This will not go unnoticed and with that kind of drive… the sky is the limit!
Why Clean Code Matters Recap!
There you have it! Clean code really matters regarding the overall quality of your final project. Without this solid foundation, your websites and applications will leave a lot to be desired. Don’t be like me and take years to learn. Now get out there and do some coding!
Questions? Comments? I’d love to hear them! Post in the comments below and let’s talk!
