The biggest frontend mistakes you can do

Hello, fellow devs!

Frontend development can be very interesting because we can immediately see the results of our work. However, during this process, we often forget very important concepts and we make mistakes.

In this article, I'll highlight some of these mistakes and show you how to avoid them.

---

1. Ignoring Meta tags and Open Graph

These tags are essential for controlling how your content appears when shared on social media. Without them, your links may not display as intended, which can hurt your engagement.

Missing viewport meta tag - This tag ensures that your site is responsive and adapts to different screen sizes

Missing description and keywords meta tags - These tags lay a role in SEO and help search engines understand what your page is about

Good example:

<!-- Basic Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A brief description of your content." />
<meta property="og:image" content="URL to an image that represents your content" />
<meta property="og:url" content="URL of the page" />
<meta property="og:type" content="website" />

<!-- Optional: Additional Open Graph tags for more control -->
<meta property="og:site_name" content="Your Website Name" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card tags (for better Twitter integration) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A brief description of your content." />
<meta name="twitter:image" content="URL to an image for Twitter" />

2. Ignoring performance optimization

Not optimizing images - It's important to compress your images and use formats like WebP or JPEG instead of PNGs for better performance.

Not minifying CSS and JavaScript files - There's nothing worse than seeing a CSS file with over 1,000 lines. Please, minify these. Bonus tip: Use Sass for more efficient styles. For minifying, you can use this free tool.

Loading too many unnecessary libraries - I often see people loading too much libraries when many functionalities can be custom build. Remember, when you import library you are not importing only it's code, you are importing a greater responsibility because every library you import has the possibility that it will go maintenance at some point. You also run the risk of a bug and that your UI will stop working and sure you don't want that.

Not using lazy loading for images and components - Not using mentioned will block UI, and your website can seem slow.

Not using lazy imports - Use lazy imports for better optimizations. This will make separate chunks for your imports and optimize build times by storing chunks in cache. This blog post is a good example of 75% optimization.

Additional tips:

• Use image optimization tools like TinyPNG or GitHub Image Bot

• Minify assets using build tools like Webpack or Parcel

• Implement lazy loading with the loading="lazy" attribute

3. Poor HTML Structure and Semantics

Unfortunately, many frontend developer ignore proper HTML semantics, leading to accessibility and SEO issues. Common mistakes include:

Using <div>s for everything instead of tags like <article>, <section> and <nav>

Missing alt and title attributes on images

Using heading tags (<h1> - <h6>) inconsistently

Additional tips:

• Always provide meaningful alt text for images

• Structure headings properly to maintain a logical HTML structure

• Use W3C Markup Validation Service

4. Using fixed units and bad responsive design

Hardcoding pixel values for height, width and etc.

Not testing on different screen sizes and devices

Additional tips:

• Use relative units like en, rem and %

• Use responsive design techniques like Flexbox and CSS Grid

• Use Mobile simulator extension

5. Relying too much on !important

Using important too much can lead to unnecessary conflicts. Use this carefully and not too much.

6. Not handling cross-browser compatibility

Using CSS and JavaScript features that aren’t supported in all browsers

For example:

.element {
  backdrop-filter: blur(10px); /* Not supported in older versions of Edge */
}

Solution:

@supports (backdrop-filter: blur(10px)) {
  .element {
    backdrop-filter: blur(10px);
  }
}

.element {
  background: rgba(0, 0, 0, 0.5); /* Fallback */
}

7. Not using HTML Entities

Please don't copy and paste symbols like this: ™, ℠, ® and ©.

Instead use these:

  -> for blank space
® -> for trademark
© -> for copyright
and etc.

8. Not using current year function

Instead of this:

<p>2024 ©</p>

Use this:

<p><span id="year"></span>copy;</p>

<script>
  document.getElementById('year').textContent = new Date().getFullYear();
</script>

By using JS, you ensure the year will always be the latest one.

---

Conclusion

Keep these tips in mind as you continue your development journey, and remember: testing, optimizing, and following best practices will always pay off in the long run!

If I forgot something or you liked the article, please leave a comment down below 💬

Thanks for the reading :)

---

Check yourself! Checklist ✅

1. viewport meta tag for responsive design
2. description and keywords meta tags for SEO
3. Open Graph meta tags
4. og:title
5. og:description
6. og:image
7. og:url
8. og:type
9. twitter:card
10. twitter:title
11. twitter:description
12. twitter:image
13. compressed images
14. WebP and/or JPEG images
15. lazy loading
16. lazy imports
17. alt and title attributes on images
18. HTML semantics and structure
19. W3C Markup Validation
20. using relative units like em, rem and %
21. avoiding using !import too much
22. ussing @supports for unsupported features
23. minified assets
24. not loaded too much libraries
25. using HTML entites for things like © ©
26. using function for current year