Search, a Client-based Approach

Posted on 15 November 2015

Last updated on

Image of a MacBook Pro with backlit keyboard in the dark
You can do search locally, it's much faster than server-side search if your dataset is reasonably sized.

I’m serving this website statically, no exceptions. I’m doing this for security and performance reasons. But since I did want to have a search feature on here, I had to come up with something inventive.

Google offers custom search for websites to search only that site’s domain, but my disdain for Google’s pratices ruled that out. I’m not serving any external trackers, so I most certainly wasn’t going to start now by giving visitor data freely to Google. It’s an extremely clumsy and ugly implementation as well.

While I might eventually end up building a search feature in my backend, the amount of content on here is still small enough to do the search client-side.

When building a new version of the site, I’m also creating a JSON file with all articles and content listed, as well as a few keywords that people might be searching for. This JSON file is parsed in your browser. The benefits are clear:

  • Privacy-centric approach as no data about searches is exchanged between client and server
  • Blazingly fast approach as all results appear instantly

However, once the site grows large enough, downloading and handling the JSON file client-side might become too cumbersome. Then again, I post so infrequently that this solution might serve me well for the next few decades.

I wrote the JavaScript search myself and built cool features into it like full keyboard navigation. Just hit s or f to immediately jump to the search bar and set focus on it. You can navigate the results with and . Confirm with ENTER.

Since I am tagging my articles with invisible made-up keywords, you can also search for related words. For example, my Arch Linux with Whole Disk Encryption article also responds to wde or lvm.

Things to consider:

  • Defer loading of the search.json until after someone enters the search field deliberately. This might delay the search results by a tiny bit, but users won’t have to download the search dataset if they never use the search in the first place.
  • Develop a backend search. I might end up doing it just to get some exercise.