DEV Community

Binyamin Green
Binyamin Green

Posted on • Originally published at binyam.in on

Filter Posts by Tag

Blogs can quickly become disorganized. You might want to link to a page on your website which only lists posts about CSS. With a bit of javascript, you can use /blog?tag=css to filter your posts.

⚠️ For the following method to work, each post item should have a data attribute of data-tags="[tag1,tag2]">.

First, we need to find our posts. Use the document.querySelectorAll method (🔗). The method takes one parameter: A selector string formatted like a css selector. Now, we need to get the tag in the url. The global location.search variable provides us with the query parameters at the end of the url. This will give us a string, such as ?topic=css, which we can manipulate to find the tag.

Find which posts don't have the tag. For each post, check if the tags in the data-tags attribute include the one we found in the url. (Hint: use Array.filter) Then, hide the filtered posts. HTML has a handy hidden attribute for situations like this. Set the hidden attribute of each filtered post to true.

You can now filter your blog posts by tag. Here's the full snippet.

HTML

<ul>
  <li class="post"></li>
 <!-- more -->
</ul>
Enter fullscreen mode Exit fullscreen mode

JavaScript

// Select all posts
const posts = document.querySelectorAll(".post");

// Get the tag in the url
const tag = location.search.slice(location.search.indexOf("=") + 1);

if(tag) {
    // Find which posts don’t have the tag
    let postsNoTag = posts.filter(l => JSON.parse(l.dataset.tags).includes(tag) === false);

    // Hide all posts which don’t have the tag
    postsNoTag.forEach(p => {
        p.setAttribute("hidden", true);
    });
}
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs