Nikola Perišić for Dev.to Rater Organization

Posted on Feb 1 • Edited on Feb 21

The biggest frontend mistakes you can do

#webdev #programming #javascript #css

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:

&nbsp; -> for blank space
&reg; -> for trademark
&copy; -> 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 💬

Check yourself! Checklist ✅

viewport meta tag for responsive design
description and keywords meta tags for SEO
Open Graph meta tags
og:title
og:description
og:image
og:url
og:type
twitter:card
twitter:title
twitter:description
twitter:image
compressed images
WebP and/or JPEG images
lazy loading
lazy imports
alt and title attributes on images
HTML semantics and structure
W3C Markup Validation
using relative units like em, rem and %
avoiding using !import too much
ussing @supports for unsupported features
minified assets
not loaded too much libraries
using HTML entites for things like © ©
using function for current year

Support us on Product Hunt:

Top comments (14)

Camilo Micheletto • Feb 4

Nice article!
If you are worrying about cross-browser maybe you are not processing your CSS. You may want to always add autoprefixing and polyfills to your pipeline, today they are lightweight and simple to install, like postCSS and lightningCSS