InsightsWebMobile

Top 10 Common Mistakes Frontend Developers Make

AngularJSWeb Developmentfrontend developmentJavaScript frameworksJavaScript librariesFrontend development common mistakescommon mistakes frontend developers makeMobile first movementJavascript frontend frameworksFrontend development good practices
Updated June 16, 2020 Wiredelta

Previously, we “picked” on backend developers and discussed in the top 10 mistakes backend developers make in their work. Now, it’s time we turn towards frontend developers. That’s right, frontend developers, you know what you did.

 

But first, if you are new to software development, frontend developers are the ones bringing designs and functionality together. They are the glue that connects pretty images that designers make together with the functionality and logic built by backend developers, so websites look and work how they should. Every website you visit, what you see and interact with is created by frontend developers.

 

In their work, frontend developers use three main tools, or what we call the triad. This toolset consists of HTML5, CSS, and JavaScript. HTML is used for building the page logical structure, while CSS is responsible for performance and page rendering. JavaScript, on the other hand, is the real star. JavaScript brings in the interactive elements. Together, these three technologies bring websites to life. But when frontend developers make mistakes, the triad stops communicating properly and things go wrong. So what are the most common mistakes frontend devs make?

 

1. Attention to detail

When implementing designs, frontend developers aim at following them 100%, as close as possible. The issue is that many times reality strikes hard on otherwise beautiful designs not being practical, not compatible with different screen sizes or something third. As a result, your web or mobile app will look odd and broken, and nothing like the beautiful pages your designer envisioned.

 

attention to detail

 

This usually happens because design tools like XD or Zeplin for example read the designs differently than a browser. And this creates discrepancies between the two versions. A simple way to avoid this is for frontend developers to develop with the designs in front of them. Kind of like a “find the differences” game. 

 

Also, attention to detail is a trained skill. So always ask for feedback from your designer especially. Their mindframe is more UI/UX oriented than yours, and chances are, their eyes are better trained to spot small things. Listen and learn from them.

 

2. Responsiveness

There are 3.5 billion smartphone users in the world, quite literally half of the population. And according to CNBC by 2025, 72% of these users will access the web solely from their phone. We don’t know for sure if the predicted percentage is correct, but the reality is that mobile usage has increased tremendously over the past 5 years and it doesn’t seem to be slowing down.

 

mobile first is a must

Source: web3canvas.com

 

So, “do I make my website responsive” should not even be a question on your mind. Yes, of course, you should. The question is when to start working on responsiveness. Some developers leave this step for last, focusing on implementing the designs first. But since you will almost never have more than one set of designs, you work on only one screen resolution.

 

Then, when you finally do start working on responsiveness, you need a lot of testing and fixing which is very time consuming and problematic. Avoid this by writing your CSS with responsiveness in mind, using tools that make your life easier – like Viewport – from the start. In the long run, it will save you a lot of headaches.

3. Cross-Browser compatibility

Although modern browsers work on same standards, cross-browser compatibility is still somewhat of an issue. Especially when it comes to Internet Explorer. Basically, since each browser renders pages differently, developers need to test the site fully on each browser to ensure cross-browser compatibility. 

 

cross browser compatibility

Source: damiestechnologies.com

 

We know it’s a lengthy process since this includes testing on the most commonly used screen resolutions for each browser. But if you care for users’ experience, you know this is important.

 

On the bright side, there are tools out there that help with testing, such as BrowserStack, CrossBrowserTesting, LambdaTest, and others. So, check them out. Whatever you do, do not skip testing.

 

4. Outdated HTML or XHTML

Another common mistake is syntax inconsistency in HTML. Compared to HTML4 or the now abandoned XHTML, HTML5 introduces a different, simpler syntax. An example would be void elements like “input”, “br”, or “img”, which replace self-close tags.

 

While using self-closed tags will not affect the page, they should not be used intermittently. Our best advice is to learn the new syntax HTML5 offers, and stick with it.  

 

5. Wrong HTML semantics

HTML 5 also brought a ton of semantic elements that help make the structure of a page more logical, and it helps for better indexing. However, some beginner developers tend to forget about semantics like “from”, “article” and “table”, and replace them with non-semantics like “div”. 

 

This is both unnecessary and more time consuming than using proper practices. Also, both mistakes mentioned here and in (4) can be avoided by using validators from IDEs or code editors.

 

6. Forgetting input validation

A common mistake among front end developers is making the assumption that your users will input the proper data in the right fields. But this is a wrong assumption, and it is highly recommended to use input validation at all times. Not only that this ensures the correct data in the correct format is stored in your database, but it is a good UX practice.

 

More importantly, input validation is highly beneficial for your security, since it helps prevent injection attacks, systems compromises, and memory leakage.

 

7. Bad SEO

Half of search engine optimization boils down to how the code is written, hence, using good SEO practices as a frontend developer is a must! Still, developers often skip steps like using alt attributes for the images used on the site. The issue is that crawlers read the alt attributes and determine how relevant each image is for your site. Undeclared images are considered purely decorative and they are ignored, so people cannot find these images in their search. But, if you have important images, like your team’s portraits, or other images relevant to your business, you will want search engines to acknowledge them.

 

the components of search engine optimization

Source: eyeads.dk

 

Another mistake is misusing HTML’s heading styles. Or more precisely, using f.ex. H3 instead of H1 simply because it looks prettier. Crawlers don’t really care about how pretty that heading selection is, they care about structure and proper hierarchy. So, if you want crawlers to see the relevance of each heading, style them and use them properly.

 

Finally, check for both internal and external broken links. Crawlers “travel” by links so whenever they find a broken link, they report it as an error. Tools like Google Search Console or the “Check my links” Chrome extension can help you finding and fixing these problematic links.

 

8. Skipping image optimization

Loading images on a web page takes up a lot of bandwidth if the images are not optimized. Not all images should be compressed since the process messes with the image’s quality. But there is no reason why your thumbnails should be 15MB each. 

 

loading icon

Source: giphy.com

 

Also, image optimization is a simple process and there are plenty of free-to-use online tools you can use. And, since page load depends on so many other factors, adding huge images into the mix is just unnecessary.

 

9. Relying on jQuery

jQuery was once the favorite tech for adding animations on a web page or manipulating DOM. However, frameworks like AngularJS and ReactJS rendered it obsolete, as they also support all its functionality. 

 

Nevertheless, there are projects that still use jQuery, so developers stick with it (willingly or not). But, according to a survey by realtoughcandy.com, the majority admitted will avoid jQuery in new projects. So, although it is important to know how to work with jQuery, don’t rely on it, or on any unnecessary extra libraries, for that matter.

 

10. One HTML for everything

For our last point, there are developers who put everything into one HTML file. Literally, HTML, CSS, JavaScript, all in one file. If you are one of them, stop. It’s messy, it’s bad practice and it’s impossible to work with when testing.

 

Step one in avoiding this disaster is moving your JS files into an external folder. Second, get familiar with native web components. There are a plethora of advantages to learning this, but mostly your project’s architecture will be a lot better, and it will be easy for you to write unit tests. Frameworks like React or Vue can also help you implement modular components easier, so you might want to consider that.

 

Honorable mentions

Although these are the top 10 most common mistakes we found frontend developers to make, we did find two other mishaps that we needed to add in as honorable mentions. First is bad font styling when frontend developers have free-choice. The second issue we wanted to discuss is autoplay. An annoying, terrifying at time, and an overall invasive feature some sites have.

 

11. Bad Font Styling

The reason this mistake didn’t make the list is that font styling is usually the designer’s job, not the frontend developer. Of course, many frontend devs are also designers, in which case, if you still use bad font styling, we can’t help you.

 

However, in situations where frontend developers don’t have the luxury of poking a designer for feedback and they have to set the font styles themselves, they need to be aware of several factors. Font size, color, and background are the three most important. Text cannot be too big or too small, it has to be visible and easy to read. Also, don’t forget your text needs to be responsive as well. So use relative units (percentages) not set unites (pixels) or example.

 

12. Autoplay

How annoying is it when you open a website and suddenly, random music or a video just starts blaring noise in our ears. This is sometimes because someone decided that it is a good idea to scare the pants off their users. Other times, it is because while developers are actually trying to prevent it, they use the attribute ‘autoplay” in the video’s source tag, then set it to “false”.  For example: 

 

<video width=”640″ height=”480″ controls=”controls” type=”video/mp4″ autoplay=”false” preload=”none”>

 

The issue here is that “autoplay” is not a boolean type variable, it doesn’t work based on simple “true” or “false rules. So instead, the browser sees the string and – ignoring the “false” setting attempt – auto plays the video. The simplest solution is to remove the attitude. Modern browsers usually have the autoplay setting turned off by default. Therefore, when the developers use the “autoplay” attribute, they overwrite the browser’s setting. The simplest solution is to remove the attitude, or use an attribute like “autostart” that is working by boolean preferences.

 

Conclusion

Whether you are a newcomer in the world of frontend development or you just want to become better, we hope this article helps. And, at the end of the day, don’t kick yourself too hard. We are all humans and we all make mistakes.

 

 

The important thing is to learn from our experiences, good or bad, and push ourselves to become the best we can be. Also, remember to put yourself in your users’ shoes and always work while keeping them in mind.

 

Finally, test, test, test, and when you’re done, pass it on to someone else so they can test too.






Leave a Reply

Your email address will not be published. Required fields are marked *