10 things a web developer should consider while coding

Working as a web developer can be quite fun, and gives one the chance to create aesthetically pleasing and original websites with complex layouts and animations.
Although it may seem like a very satisfying and fulfilling job, web development may still be quite challenging and tedious like any other job.
The reason behind this is what developers refer to as “bugs”.
Even the smallest of mistakes could introduce bugs that would be exasperating to solve; however, there might just be something to be done about this.
Listed below are 10 things every developer should take into consideration to help avoid introducing easily avoidable bugs.

Table of content

1. Use consistent indentations throughout the project.
2. Document the code.
3. Use meaningful variable names.
4. Avoid using duplicated code.
5. Avoid using heavy libraries that load on all pages.
6. Always test the code and try to cover all possible scenarios.
7. Always use lowercase letters in fonts, images and other file names used on the website.
8. Always use compressed images.
9. Avoid using inline styling.
10. Use semantic HTML.

1- Use consistent indentations throughout the project.

Indentation is the key to a well-written, easy-to-read, and easy-to-modify code. It is crucial to keep the code readable to help developers avoid unnecessary syntax errors and make it easier for them to maintain and modify the code in the future.

Good indentation alone is not enough; it is also recommended to use consistent indentation and writing standards, which will allow developers to be able to track and modify the code easily using the “find all” and “replace all” features available in all IDEs.

2- Document the code.

We all know the feeling of coming back to an old project to apply some new features or fix a bug, only to realize that we have no idea how things are working. Well, that is why it is very important to use proper documentation.

One thing to note here is that documentation should not be limited to explaining what the code is doing; instead, it should state why. For example, if you have written a function that adds two numbers and returns the result, there is no use in writing what the function does. Instead, it’s better to state why you need to add the 2 numbers and where you will need to call this function. This will make it a lot easier to understand what is going on and track the code whenever new changes or modifications are required.

3- Use meaningful variable names.

One of the most used aspects of any programming language are variables; so naturally, variable names should be relevant and meaningful. Using random or meaningless names can make it more difficult for the developer to understand the code, which will cause changes or modifications to become more cumbersome to implement.

Here are examples of bad and good variable names:
Bad variable names: $counter2; $asdasd; $var; $xyz, $x;
Good variable names: $product_obj; $item_price; $items_counter;

4- Avoid using duplicated code.

Instead of copying a piece of code and pasting it into multiple pages, it is more effective to create a function that takes parameters, and call it whenever it is needed. This will simplify the maintenance process. Instead of having to search through the code, find all the occurrences and apply changes to each one, the developer will be able to apply the changes to one function that is called in multiple places.

5- Avoid using heavy libraries that load on all pages.

Loading time in a website is one of the most important characteristics that affect the websites’ score in SEO and general User Experience (UX). A website that takes forever to load and consumes a lot of MBs can cause a user to leave the website out of frustration. This is why it is very important to limit the loading time to a minimum by only loading scripts and stylesheets that are being used on the page.

6- Always test the code and try to cover all possible scenarios.

Testing the code is an essential stage in any web or software development process. It is the most crucial stage in development and can be the most time-consuming stage; however, it is always easier to prevent a bug than to find one.

7- Always use lowercase letters in fonts, images and other file names used on the website.

Servers can have different configurations and architecture. Some may be case-sensitive and others case-insensitive; so to avoid having to debug a problem that might occur after uploading the website online, it is always best to use lower case letters in all file names, images, and any other assets being loaded on the website.

8- Always use compressed images.

This point is quite debatable. Some people will prefer a good image quality over quick loading; however, I personally believe a balance should be considered and a lot of factors can play a role in deciding whether to go with perfect image quality or a fast page load.

But is it possible to have both at the same time? In fact, there are a lot of tools nowadays that can significantly compress images without a major loss in quality. This can be achieved by using webP image format, or by using the “save for web” feature in photo editors like Photoshop.

9- Avoid using inline styling.

Using an inline style is sometimes the easiest way to modify the style of a certain HTML element. However, this method is strongly discouraged since styles written as inline will have the highest priority in the CSS hierarchy, which can cause a lot of problems when developing a responsive mobile-friendly website. Instead, it is preferable to use CSS classes and write them in a separate .css file.

10- Use semantic HTML.

By definition, “Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look.”
Using semantic HTML will help web crawling engines get a better idea about the website’s content, increasing the website’s SEO score.