Adding Search to This Blog
Author: Jake Bauer | Published: 2020-07-06
A few days ago I posted online about the really simple solution I came up with for searching on my blog. Since then, I’ve had a few good replies about ways I could make it better. One suggestion in particular fit with the themes and goals of this website so I went ahead and implemented it to improve the search experience.
Evaluating Other Suggestions
I played around with Kev’s suggestion of the DuckDuckGo iframe and it worked quite well and was very easy to generate and add to my page. However, it had the same issues as Tiny Search where it would balloon the size of the blog page by up to 3x its original size, and it would make 3 third-party requests to load in the necessary assets. Also, iframes are not supported by Lynx or w3m but it was trivial to add a fallback for those browsers. The main issues that I had with this method were the third party requests and large size of the loaded assets.
To summarize, I didn’t go with the above two suggestions because of the use of unsupported technology in browsers which I target and because of the size of the assets which would be required to make them functional. Both are trivial in the context of many contemporary sites, but I like to keep my site as slim as possible and I like to maintain compatibility with alternative browsers.
The Solution I Chose
However, Oscar Benedito suggested something which caught my eye and which I didn’t even know was possible: a form that makes a request to DuckDuckGo. This solution uses technology that has been supported in every web browser for decades and adds a mere 300 bytes to the size of the page since it’s just a plain HTML form. This is what I have which now powers my site’s search:
<form action="https://duckduckgo.com/" method="get"> <input name="sites" type="hidden" value="www.paritybit.ca/blog"> <input aria-label="Search this blog." name="q" type="text" placeholder="Search This Blog"> <button aria-label="Submit search query.">🔎</button> </form>
That’s it! Instead of a link to a DuckDuckGo search where users would have to type their search query in after clicking it, users can now type their query into this form and they will be sent to a DuckDuckGo page with the results. This still improves the UX while keeping the page small and using features supported in browsers like Lynx and w3m.
Since writing this post, I've switched to using Lieu as the search engine. HTML examples are on the linked page.
This is my sixty-second post for the #100DaysToOffload challenge. You can learn more about this challenge over at https://100daystooffload.com.