10 Things to avoid if you are a front end developer

Summary:
 
Front End Developers are responsible for bringing design and functionality together. The difficulty with front end development is that the tools and techniques used to create the front end of a website changes all the time, so the developer must always be aware of how the field is evolving. 
                Front end developers mainly focus on three tools called triad. This triad consists of  HTML5, CSS, and JavaScript. These three technologies work together to bring websites to life. However, when frontend developers make mistakes, the triad loses communication and things go wrong. So, what are the most common blunders made by frontend developers?

1. Skipping image optimization
Loading images on a web page consumes a significant amount of bandwidth, if the images are not optimized. Not all images should be compressed because the process degrades image quality. However, there is no reason why your thumbnails should be 15MB in size.

Image optimization is also a simple process, and there are many free online tools available. And, because page load is dependent on so many other factors, including large images in the mix is unnecessary. 
​
2. Responsiveness
There are 3.5 billion smartphone users worldwide, accounting for roughly half of the global population. According to CNBC, by 2025, 72 percent of these users will be accessing the internet through their phone. We don't know for sure if the predicted data is correct, but the reality is that mobile usage has skyrocketed in the last five years and shows no signs of slowing down

So, "do I make my website responsive?" should not even be a consideration. You should, of course. When to begin working on responsiveness is the question. Some developers skip this step , preferring to focus on implementing the designs first. But, because you will almost never have more than one set of designs, you will only work on one screen resolution.  
Then, when you finally start working on responsiveness, you need to do a lot of testing and fixing, which takes a long time and is difficult. Avoid this by writing your CSS with responsiveness in mind from the start, and using tools that make your life easier, such as Viewport. It will save you a lot of trouble in the long run.

3. Bad SEO
Because half of search engine optimization is determined by how the code is written, employing good SEO practices as a frontend developer is essential! Nonetheless, developers frequently skip steps such as using alt attributes for images used on the site. The problem is that crawlers read the alt attributes and use them to determine how relevant each image is to your site. Undeclared images are considered purely decorative and are ignored, so people will not be able to find them in their searches. However, if you have important images, such as portraits of your team or other images relevant to your business, you will want search engines to recognize them.

Another blunder is misusing HTML heading styles. Or, using H3 instead of H1 because it looks nicer. Crawlers aren't concerned with how pretty the heading selection is; they're concerned with structure and proper hierarchy. So, if you want crawlers to notice the importance of each heading, style and use them correctly. 

Finally, look for both internal and external broken links. Crawlers "travel" by links, so when they come across a broken link, they report it as an error. Tools like Google Search Console and the "Check my links" chrome extension can assist you in locating and repairing these broken links.

4. Attention to detail
Frontend developers strive to adhere to designs as closely as possible when implementing them. The problem is that reality often strikes hard on otherwise beautiful designs, causing them to be impractical, incompatible with different screen sizes, or something else. As a result, your web or mobile app will look strange and broken, unlike the beautiful pages your designer envisioned.

This is common because design tools, such as XD or Zeplin, read designs differently than browsers. As a result, there are differences between the two versions. Frontend developers can easily avoid this by developing with the designs in front of them. It's similar to a "find the differences" game.

In addition, paying attention to detail is a learned skill. As a result, always solicit feedback from your designer, in particular. Their mainframe is more UI/UX oriented than yours, and their eyes are probably better trained to spot small details. Listen to them and learn from them.

5. Cross-Browser compatibility
Although modern browsers adhere to the same standards, cross-browser compatibility remains an issue. Particularly with regard to Internet Explorer. Essentially, because each browser renders pages differently, developers must thoroughly test the site on each browser to ensure cross-browser compatibility.

We understand that this is a time-consuming process because it includes testing on the most commonly used screen resolutions for each browser. However, if you care about the user experience, you understand the significance of this.
On the bright side, there are testing tools available, such as BrowserStack, CrossBrowserTesting, LambdaTest, and others. So, take a look at them. Do not, under any circumstances, skip testing.
6. Outdated HTML or XHTMLAnother common error in HTML is inconsistency in syntax. HTML5 introduces a new, simpler syntax when compared to HTML4 or the now-defunct XHTML. Void elements such as "input", "br", and "img" are examples of void elements that replace self-close tags.
While using self-closed tags has no effect on the page, they should not be used infrequently. Our best advice is to learn and use the new HTML5 syntax.

7. Bad Font StylingThe reason this error did not make the list is that font styling is typically the responsibility of the designer, not the frontend developer. Of course, many frontend developers are also designers; in that case, we can't help you if you continue to use bad font styling.
However, when frontend developers don't have the luxury of poking a designer for feedback and must set the font styles themselves, they must be aware of a number of factors. The three most important factors are font size, color, and background. Text should not be too large or too small; it should be visible and easy to read. Don't forget that your text must be responsive as well. As a result, use relative units (percentages) rather than fixed units (pixels) or examples.
8. Forgetting input validationMaking the assumption that your users will enter the correct data in the correct fields is a common mistake among front end developers. However, this is an incorrect assumption, and it is strongly advised to use input validation at all times. This not only ensures that the correct data is stored in the correct format in your database, but it is also good UX practice.
More importantly, input validation improves your security by preventing injection attacks, system compromises, and memory leakage.
9. Wrong HTML semantics

HTML 5 also introduced a slew of semantic elements that help make a page's structure more logical and aid in indexing. However, some inexperienced developers abandon semantics like "from," "article," and "table" in favor of non-semantics like "div."This is both unnecessary and takes more time than following proper procedures. Furthermore, both of the errors mentioned here and in (4) can be avoided by using validators built into IDEs or code editors.

10. One HTML for everything
For our final point, some developers combine everything into a single HTML file. HTML, CSS, and JavaScript are all contained in a single file. Stop if you are one of them. It's a mess, it's bad practice, and it's impossible to test with.
The first step in avoiding this disaster is to move your JS files to an external folder. Second, become acquainted with native web components. There are numerous benefits to learning this, but the main one is that your project's architecture will be much better, and writing unit tests will be much easier. Frameworks like React or Vue can also make it easier to implement modular components, so keep that in mind.
Note:
By following these recommendations and avoiding the mistakes described in this article, you will significantly improve the quality of your code, making it more readable, structured and productive.