How to avoid them and what I wish I had known
I recently had to work on my first project again, and this gave me the opportunity to analyze the codebase and found out all the mistakes I made. I wrote the first line of that web application in 2018, while I was still an undergraduate.
At that time, I was attending a web development course at the university. To pass the exam, we had to develop a web application with both frontend and backend. What I did not expect was that my demo web application would later become an online website still visited by thousands of users every day.
Since then, many things have changed, and I am now a freelance software engineer with 3+ years of experience. So, not surprisingly, when I started looking into the project I wrote in my early days as a developer, I was embarrassed by what my past self did.
Let’s delve deeper into the 5 most important mistakes I made and how to avoid them.
One of the main problems of my first project is that all comments are in Italian. This means that only Italian developers can truly understand how the trickier parts of the web application work. And that is a huge drawback!
Also, I used to write unnecessary comments like:
This also implies that going through my comments to translate them all is not feasible. In fact, brute-force translating them all would take too much time. Likewise, analyzing and reading them to find out which ones are useful and which ones are not too time-consuming.
Although I now consider writing only necessary English comments as a basic requirement, I have worked with clients from all over the world and noticed that these two mistakes are a common practice. Such an approach to coding is narrow-minded because you do not know how large the project will grow, and who will be working on it in the future.
In other words, always write your code comments in English, even for small demos. Also, make sure that you are adding some value to the code with them. Otherwise, if you fill your code with too many unnecessary comments, other people might assume they are all useless and start ignoring them.
This is a basic mistake that many other junior developers I have worked with tend to make. And so did I. Instead of looking online for libraries that would help me achieve what I wanted effortlessly, I reinvented the wheel every time. This was not an intentional choice. Actually, I was not aware of all the libraries available for free online.
Generally speaking, reinventing the wheel is not necessarily a bad thing. You may want to do it to learn the basics or how utility functions work. It can be a good learning exercise, especially in your early days as a developer. On the other hand, when working on a real project, you must choose a good set of libraries and use them accurately in your code.
By analyzing my
utils.js file, I immediately noticed that most of the functions I defined there are currently available on Lodash or similar libraries. This means that I spent much time on an avoidable task. In fact, libraries like
lodash have millions of weekly downloads and are certainly more reliable, secure, and maintainable than my code is.
This may sound obvious, but before delving into the code, look online for a solution and document yourself about it. If you do not find any useful libraries, then you are allowed to start writing your own custom logic from scratch.
At the beginning of my journey as a web developer, I tended to prefer libraries that with a few lines of code allow you to achieve incredible results. Such libraries feel like magic because understanding what is going on behind the scene is simply too complex. I used to appreciate them because they helped me save a lot of time. This is great, right?
Well, it depends…
What I learned during my journey is that the more a library feels like magic, the less control you have over it. This means that achieving a task that the library does not support natively can turn into a grueling challenge. In detail, my project heavily depends on DataTables, a plug-in for jQuery that adds all several features to any HTML table.
This library allows you to implement a fully-featured table with just one line of code, as follows:
This is what you would get:
As you can see, a single line of code produces a table with search, pagination, sorting, and many other features.
What I want to add is that there is nothing wrong with DataTables itself. But by analyzing my code, I noticed that I had to define write dirty and complex workarounds to change its behavior and adapt it to my needs. This makes my code too dependent on DataTables and almost impossible to maintain or evolve.
So, such “magic” libraries are good if you are in a hurry. At the same time, they should be avoided in larger and more complex projects, where you should want to be in control.
Another mistake I made is that I decided to avoid using any frameworks to keep the project simple. It was a university project, and I did not expect it to become a publicly accessible website with thousands of subscribers. To be honest, my only concern was passing the exam.
This is why I preferred to write my web application in vanilla PHP 5 and jQuery, the technology recommended by my professor. In other words, my project was born old.
Yet, I could have chosen between Laravel, Spring, and React. Any of these would have been a much better and more appropriate choice for the project, but I preferred to go for the easier choice.
Since you cannot foresee how big your application will become and how many users will use it, you should always opt for a reliable and up-to-date technology stack. Avoid compromises when it comes to technologies.
At the time of developing my project, I was aware of the mobile-first approach to web development. However, I decided to ignore it, developing a non-responsive web application. This is because my project involves many large tables, and I thought no mobile user would be interested in using it. Once again, I was wrong.
What happened after the website went online is that some users started complaining about the poor experience my website offered on mobile devices. So, I had to change the code to make my app responsive, making the entire project even messier.
What I learned here is that you should never take anything for granted. On the contrary, try to make your application as accessible as possible. The user experience should stay consistent and do not depend on the device in use. This is particularly true when it comes to mobile devices, which you should prioritize.
Here, we looked at the 5 most important mistakes I made in my early days as a web developer. While analyzing the codebase of my first web application, I had the opportunity to spot them all, and here I shared them with the world. As learned in this article, most of them were definitely avoidable, and in this article, we looked at how to avoid them.
Thanks for reading! I hope that you found this article helpful.