DEV Community

AmasiaNalbandian
AmasiaNalbandian

Posted on

Planning A Feature Enhancement

For this week, and unfortunately I do mean this week, I will be working on a feature enhancement to log my development journey on something interesting. For some readers, features this big do take more time than "this week" to plan, explore, educate and implement. My advice would be that you know yourself best, and if working under pressure gets your gears going, then who am I to stop you?!

After looking through some repositories for an interesting feature or issue to work on, I ended up back on Telescope. The truth is 1) the repository has multiple contributors, all who are more available and knowledgeable in the code base than most repositories I've found; 2) I need to brush up my React skills.

I had two issues I found that I wanted to work on, and ultimately I decided to go with this one: Advanced search dialog in SearchBar

Approach

The most important thing I've learned, as I've mentioned previously is to always look into an issue a little further. For this issue, I had some help - and there were multiple PRs that were closed or merged regarding the search bar. There was the Advanced search pull request, which was stale. This gave me a good direction with where to head for the UI, as there was feedback in the PR already. Additionally, we had already partly implemented the advanced search, in the search bar (see below).

searchbar implementation on Telescope

What this meant was that there was enough code for me to read and study to be able to implement this in a project, where React is not in my comfort zone. I decided to arrange some time with David Humphrey to see if there was any additional information that I could get, and asked how exactly we were already implementing the search. To my surprise there was a lot of implementation put into the search. What I wanted to do was 2 things:

1) Don't get carried away trying to implement the most advanced search ever; break things up.
2) Explore the most useful search criterion that would make the advanced search more meaningful for visitors on the site.

Research

I spent some time looking at other websites to see how the advanced searches were implemented. I've learned that UX is usually very similar across most platforms - for once, uniting with competitors gives you an edge in user-friendliness across your systems (Scalability over design). I started with Google, which surprisingly I always have a hard time locating the advanced search link.

google-advanced-search

I also took a look into twitter:

twitter-advanced-search

My impression after looking at these two is that we probably don't need an advanced search bar that requires a scrollbar.... After all, we are looking at blog posts about programming, and not providing this application to the CIA or something.

So this made me realize exactly what kind of criteria I wanted to use. We already had posts and authors, but what about by date? Or what about by semester? What I also thought would be cool, would be if you could search by repositories.

The reality is that the possibilities are endless. I decided to keep in mind my first rule and not get carried away. To begin, let's implement the search by date feature.

The plan

For this feature development, I want to first start off exploring what is and isn't possible. After some research and discussion with David, I realized I do have some limitations... for now. The objects for the search are as so:

{
    "text": "This is my blog post",
    "title": "This is the title",
    "published":"2019-04-05T02:27:54.000Z",
    "author": "bugsbunny"
}
Enter fullscreen mode Exit fullscreen mode

So already, we can see that we can really search for four things, and three of those are implemented. I decided not to be discouraged - there's actually a lot we can implement here.

  1. Continue to build off the previously created UI for the advanced search.

  2. I want to implement the search by date, once I have this down I should understand how to further leverage the implementation of ElasticSearch to implement more.

  3. Let's try to implement search by Semester, or date range.

  4. I explored some queries on the Elasticsearch container in docker, and realized we can pass more than just one parameter

   curl http://localhost:9200/posts/_search?q=author:Jatin%20Kumar&q=published:2019-03-30
Enter fullscreen mode Exit fullscreen mode

I have to explore this, and see if I can look up all posts by an author on that date. Combining the queries would prove a more successful PR for this task.

So, what's next?

Now that I have a manageable idea of what I want to do, I will be exploring from the second task first. It will be easier to do the implementation for the search, and then design my UI(first task) around the options I create. I will blog about my adventures with ElasticSearch and Docker as I try to work in the backend of this project for the first time.

Top comments (0)