Deduplicating Tags: Improving LinkedIn Banner Generation in devlog-ist/landing

In the devlog-ist/landing project, which likely serves as a landing page or blog platform, we recently tackled an interesting problem: duplicate tags appearing in the LinkedIn banner. Here's how we addressed it.

The Problem: Case-Insensitive Duplicates

When generating banners for LinkedIn, tags like "HTML", "html", and "Html" were being treated as distinct entities, resulting in duplicates in the banner image. This cluttered the banner and reduced its visual appeal.

The Solution: Case-Insensitive Deduplication

To address this, we implemented a case-insensitive deduplication mechanism. This ensures that tags with the same content but different casing are merged into a single entry.

Here's an illustrative example of how such a deduplication function might work in JavaScript:

function deduplicateTags(tags) {
  const seen = new Set();
  const result = [];

  for (const tag of tags) {
    const lowerCaseTag = tag.toLowerCase();
    if (!seen.has(lowerCaseTag)) {
      seen.add(lowerCaseTag);
      result.push(tag);
    }
  }

  return result;
}

const tags = ["HTML", "html", "CSS", "Css", "JavaScript"];
const dedupedTags = deduplicateTags(tags);
console.log(dedupedTags); // Output: ["HTML", "CSS", "JavaScript"]

This deduplicateTags function iterates through the input array of tags. It converts each tag to lowercase and checks if it has already been seen. If not, it adds the lowercase version to a Set to track seen tags and pushes the original tag (with its original casing) to the result array. This preserves the first-seen casing while removing duplicates.

The Result: Cleaner Banners

By implementing this case-insensitive deduplication, we ensure that the LinkedIn banners generated by devlog-ist/landing are cleaner and more professional, with no redundant tags cluttering the display.