For the past two years, I've created feature roadmaps at the beginning of the year as a way to gradually improve parts of this blog. I do this for a couple of reasons.
- It's a way to avoid the trap of tinkering with the blog instead of writing posts
- It keeps the technology and features of this blog up to date and continually improving
I make the roadmaps public in this site's GitHub README. As I've mentioned previously, the plan for this quarter (Q3 2023) was to improve the blog post search experience on the site.
I wanted to make improvements to the experience because there were a few features that I intentionally left out of the initial release and that I felt were needed to make the entire experience a little more user-friendly. Here's the list of improvements that I set out to complete.
- Search blog posts by tag(s)
- Show a loading state on the search result page while searching
- Use the forward-slash
/to place focus on the nav search input
While a bit of work went into each of these small features, I am only going to dive a bit into the first feature for searching posts by tag. The other two are pretty self-explanatory and are really just UX improvements overall.
Search blog posts by tag(s)
Previously the search functionality worked in a way that the most relevant posts would be returned based on the search term and any matching field in the search index.
When indexing posts for search, the following fields are stored.
- Title
- Description
- Slug
- Tags
- Content
- Publish Date
Recently new functionality was added to the search that allows a user to search posts by a tag or tags. To do this you simply need to start your search with tag:<tag_to_search>.
In addition to searching for a single tag users can also search for multiple tags by appending more tags after the tag: prefix delimited by commas. This will return all posts that contain any of the tags in the list (think an OR operation for inclusion).
tag:tag1,tag2,tag3,tag4
This new search functionality is great and allows users to be a bit more specific in their searches. Unfortunately, the feature is not that discoverable on its own. For that reason, I also made a slight change to the UX for the "tag identifiers" listed on each post. Previously those tag identifiers were simply there to indicate the tags for the post. Now they've been updated to buttons that when clicked will perform a search for the tag that you clicked on. Let's take a look at this feature from the home page.
In a previous post, I mentioned that Algolia is the service used behind the scenes to provide search on my blog. Searching by attributes did require a slight modification to the search index configuration.
Algolia has the concept of "facets" that allow users to refine search results with multiple categories. For example, facets would allow a user to refine a search for a specific title or tag. This is a bit different from the default filtering functionality. So for this feature, I simply needed to update the index configuration to allow for tags to be included in facet searches.
I hope you enjoyed this quick look at a new feature of the blog this quarter. Next quarter we'll be looking at cleaning up the /posts route by reducing the static page size and introducing pagination.